aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/components/Modal.js50
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,