diff options
| -rw-r--r-- | vnext/src/components/Modal.js | 50 |
1 files changed, 22 insertions, 28 deletions
diff --git a/vnext/src/components/Modal.js b/vnext/src/components/Modal.js index 971efe91..5ee8c3ec 100644 --- a/vnext/src/components/Modal.js +++ b/vnext/src/components/Modal.js @@ -3,39 +3,33 @@ import PropTypes from 'prop-types'; import Icon from './Icon'; -export default class Modal extends React.Component { - render() { - // Render nothing if the "show" prop is false - if (!this.props.show) { - return null; - } - - // The gray background - const backdropStyle = { - position: 'fixed', - top: 0, - bottom: 0, - left: 0, - right: 0, - backgroundColor: 'rgba(0, 0, 0, 0.3)', - padding: 50 - }; - - return ( - <div id="dialogt" style={backdropStyle}> - <div id="dialogw"> - <div id="dialog_header"> - <div id="dialogc" onClick={this.props.onClose}> - <Icon name="ei-close" size="s" /> - </div> +function Modal(props) { + // The gray background + const backdropStyle = { + position: 'fixed', + top: 0, + bottom: 0, + left: 0, + right: 0, + backgroundColor: 'rgba(0, 0, 0, 0.3)', + padding: 50 + }; + return props.show ? ( + <div id="dialogt" style={backdropStyle}> + <div id="dialogw"> + <div id="dialog_header"> + <div id="dialogc" onClick={this.props.onClose}> + <Icon name="ei-close" size="s" /> </div> - {this.props.children} </div> + {this.props.children} </div> - ); - } + </div> + ) : (null); } +export default React.memo(Modal); + Modal.propTypes = { onClose: PropTypes.func.isRequired, show: PropTypes.bool, |