mirror of
https://github.com/maputnik/editor.git
synced 2026-02-18 10:30:01 +00:00
58edd262b0
This is a rough start on adding react-i18next. I'll be working on adding more translatable strings and translations in the coming days. I'm going to need to wrap class components in HOCs, so let me know if there's something I should be fixing before doing that. I'm thinking now to keep the exported class names exactly the same, and rename the existing classes by prefixing an `I` (for internal). For example: ``` export default class AppToolbar ... ``` becomes ``` class IAppToolbar ... const AppToolbar = withTranslation()(IAppToolbar); export default AppToolbar; ``` I'll be able to contribute Japanese strings (I've talked to a couple people on my team and they'll be happy to help as well), so that's the language I decided to go with in this PR. Closes #746 --------- Co-authored-by: Ko Nagase <nagase@georepublic.co.jp> Co-authored-by: Harel M <harel.mazor@gmail.com>
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import React, { PropsWithChildren } from 'react'
|
|
import {MdClose} from 'react-icons/md'
|
|
import AriaModal from 'react-aria-modal'
|
|
import classnames from 'classnames';
|
|
import { WithTranslation, withTranslation } from 'react-i18next';
|
|
|
|
type ModalInternalProps = PropsWithChildren & {
|
|
"data-wd-key"?: string
|
|
isOpen: boolean
|
|
title: string
|
|
onOpenToggle(value: boolean): unknown
|
|
underlayClickExits?: boolean
|
|
underlayProps?: any
|
|
className?: string
|
|
} & WithTranslation;
|
|
|
|
|
|
class ModalInternal extends React.Component<ModalInternalProps> {
|
|
static defaultProps = {
|
|
underlayClickExits: true
|
|
}
|
|
|
|
// See <https://github.com/maplibre/maputnik/issues/416>
|
|
onClose = () => {
|
|
if (document.activeElement) {
|
|
(document.activeElement as HTMLElement).blur();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
this.props.onOpenToggle(false);
|
|
}, 0);
|
|
}
|
|
|
|
render() {
|
|
const t = this.props.t;
|
|
if(this.props.isOpen) {
|
|
return <AriaModal
|
|
titleText={this.props.title}
|
|
underlayClickExits={this.props.underlayClickExits}
|
|
// @ts-ignore
|
|
underlayProps={this.props.underlayProps}
|
|
data-wd-key={this.props["data-wd-key"]}
|
|
verticallyCenter={true}
|
|
onExit={this.onClose}
|
|
>
|
|
<div className={classnames("maputnik-modal", this.props.className)}
|
|
data-wd-key={this.props["data-wd-key"]}
|
|
>
|
|
<header className="maputnik-modal-header">
|
|
<h1 className="maputnik-modal-header-title">{this.props.title}</h1>
|
|
<span className="maputnik-modal-header-space"></span>
|
|
<button className="maputnik-modal-header-toggle"
|
|
title={t("Close modal")}
|
|
onClick={this.onClose}
|
|
data-wd-key={this.props["data-wd-key"]+".close-modal"}
|
|
>
|
|
<MdClose />
|
|
</button>
|
|
</header>
|
|
<div className="maputnik-modal-scroller">
|
|
<div className="maputnik-modal-content">{this.props.children}</div>
|
|
</div>
|
|
</div>
|
|
</AriaModal>
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
const Modal = withTranslation()(ModalInternal);
|
|
export default Modal;
|