@figlinq/react-chart-editor/lib/components/containers/Modal.js

plotly.js chart editor react component UI

import Icon from"@mdi/react";import{mdiClose}from"@mdi/js";import{Component}from"react";import PropTypes from"prop-types";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ModalHeader=_ref=>{let{title,handleClose}=_ref;return _jsxs("div",{className:"modal__header",children:[Boolean(title)&&_jsx("div",{className:"modal__header__title",children:title}),Boolean(handleClose)&&_jsx("div",{className:"modal__header__close",onClick:handleClose?()=>handleClose():null,children:_jsx(Icon,{size:"24px",path:mdiClose})})]})};const ModalContent=_ref2=>{let{children}=_ref2;return _jsx("div",{className:"modal__content",children:children})};class Modal extends Component{constructor(props){super(props);this.escFunction=this.escFunction.bind(this)}escFunction(event){const escKeyCode=27;if(event.keyCode===escKeyCode){this.context.handleClose()}}componentDidMount(){document.addEventListener("keydown",this.escFunction,false)}componentWillUnmount(){document.removeEventListener("keydown",this.escFunction,false)}render(){const{children,title}=this.props;let classes="modal";if(this.context.isAnimatingOut){classes+=" modal--animate-out"}return _jsxs("div",{className:classes,children:[_jsxs("div",{className:"modal__card",children:[_jsx(ModalHeader,{title:title,handleClose:()=>this.context.handleClose()}),_jsx(ModalContent,{children:children})]}),_jsx("div",{className:"modal__backdrop",onClick:()=>this.context.handleClose()})]})}}ModalHeader.propTypes={title:PropTypes.node,handleClose:PropTypes.func.isRequired};ModalContent.propTypes={children:PropTypes.node.isRequired};Modal.propTypes={children:PropTypes.node.isRequired,title:PropTypes.node};Modal.contextTypes={handleClose:PropTypes.func,isAnimatingOut:PropTypes.bool};export default Modal;export{ModalHeader,ModalContent};
//# sourceMappingURL=Modal.js.map