mirror of
https://github.com/maputnik/editor.git
synced 2026-07-10 07:57:26 +00:00
Harel M
69143ea5d6
## Launch Checklist This adds the ability to edit the global state. I think it deserves a modal of its own since I don't think it should be part of other modals... Here are some images: <img width="1274" height="254" alt="image" src="https://github.com/user-attachments/assets/4b6f2564-6c71-47da-9f8c-3bd2b97e1163" /> Initial dialog with no variable: <img width="640" height="254" alt="image" src="https://github.com/user-attachments/assets/b813b540-cae9-4c80-b2c0-4d965c022cb8" /> After you click add a few times: <img width="640" height="254" alt="image" src="https://github.com/user-attachments/assets/125cb978-90dc-4047-9694-b0ffc6eaa469" /> The state is updated as you change thing in the dialog. I didn't complicated it to select the type of the variable, but this can be added later of if there's a requirement to do so, I meant to keep it simple for now. - [x] Briefly describe the changes in this PR. - [x] Include before/after visuals or gifs if this PR includes visual changes. - [x] Write tests for all new functionality. - [x] Add an entry to `CHANGELOG.md` under the `## main` section. --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import React, { type PropsWithChildren } from "react";
|
|
import {MdClose} from "react-icons/md";
|
|
import AriaModal from "react-aria-modal";
|
|
import classnames from "classnames";
|
|
import { type WithTranslation, withTranslation } from "react-i18next";
|
|
|
|
type ModalInternalProps = PropsWithChildren & {
|
|
"data-wd-key"?: string
|
|
isOpen: boolean
|
|
title: string
|
|
onOpenToggle(): void
|
|
underlayClickExits?: boolean
|
|
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();
|
|
}, 0);
|
|
};
|
|
|
|
render() {
|
|
const t = this.props.t;
|
|
if(this.props.isOpen) {
|
|
return <AriaModal
|
|
titleText={this.props.title}
|
|
underlayClickExits={this.props.underlayClickExits}
|
|
data-wd-key={this.props["data-wd-key"]}
|
|
verticallyCenter={true}
|
|
onExit={this.onClose}
|
|
dialogClass='maputnik-modal-container'
|
|
>
|
|
<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-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;
|