mirror of
https://github.com/maputnik/editor.git
synced 2025-12-29 09:30:01 +00:00
ad69cbdb20
Resolves #803 This is an initial commit to allow migrating to typescript bit by bit. It introduces vite. It removes all the webpack configuration (which I have no clue what all the profiling are needed for, and couldn't find anything in the readme). It also changes a single file from javascript to typescript: `urlopen.js` -> `urlopen.ts` Which was done manually, later on I'll see if I can automate most of the migration. For now, everything seems to work as expected. I also upgrades storybook to use vite and renames the stories to jsx (I honestly don't know why this complexity is needed here, but I'll keep it for now). cc: @damianstasik
71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import {MdClose} from 'react-icons/md'
|
|
import AriaModal from 'react-aria-modal'
|
|
import classnames from 'classnames';
|
|
|
|
|
|
export default class Modal extends React.Component {
|
|
static propTypes = {
|
|
"data-wd-key": PropTypes.string,
|
|
isOpen: PropTypes.bool.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
onOpenToggle: PropTypes.func.isRequired,
|
|
children: PropTypes.node,
|
|
underlayClickExits: PropTypes.bool,
|
|
underlayProps: PropTypes.object,
|
|
className: PropTypes.string,
|
|
}
|
|
|
|
static defaultProps = {
|
|
underlayClickExits: true
|
|
}
|
|
|
|
// See <https://github.com/maputnik/editor/issues/416>
|
|
onClose = () => {
|
|
if (document.activeElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
this.props.onOpenToggle(false);
|
|
}, 0);
|
|
}
|
|
|
|
render() {
|
|
if(this.props.isOpen) {
|
|
return <AriaModal
|
|
titleText={this.props.title}
|
|
underlayClickExits={this.props.underlayClickExits}
|
|
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="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;
|
|
}
|
|
}
|
|
}
|
|
|