diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js index c04d64d32..53c2cd8b5 100644 --- a/web/modals/modal.react.js +++ b/web/modals/modal.react.js @@ -1,88 +1,99 @@ // @flow import classNames from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; +import SWMansionIcon, { type Icon } from '../SWMansionIcon.react'; import css from './modal.css'; export type ModalSize = 'small' | 'large'; type Props = { - +name: string, + +name: React.Node, + +icon?: Icon, +onClose: () => void, +children?: React.Node, +size?: ModalSize, +fixedHeight?: boolean, }; class Modal extends React.PureComponent { static defaultProps: { +size: ModalSize, fixedHeight: boolean } = { size: 'small', fixedHeight: true, }; overlay: ?HTMLDivElement; componentDidMount() { invariant(this.overlay, 'overlay ref unset'); this.overlay.focus(); } render(): React.Node { - const { size, children, onClose, fixedHeight, name } = this.props; + const { size, children, onClose, fixedHeight, name, icon } = this.props; const overlayClasses = classNames( css['modal-overlay'], { [css['small-modal-overlay']]: size === 'small' }, { [css['large-modal-overlay']]: size === 'large' }, { [css['resizable-modal-overlay']]: !fixedHeight }, ); const modalContainerClasses = classNames(css['modal-container'], { [css['large-modal-container']]: size === 'large', }); const modalClasses = classNames(css['modal'], { [css['fixed-height-modal']]: fixedHeight, }); + + let headerIcon; + if (icon) { + headerIcon = ; + } + return (
× -

{name}

+

+ {headerIcon} + {name} +

{children}
); } overlayRef: (overlay: ?HTMLDivElement) => void = overlay => { this.overlay = overlay; }; onBackgroundClick: ( event: SyntheticEvent, ) => void = event => { if (event.target === this.overlay) { this.props.onClose(); } }; onKeyDown: ( event: SyntheticKeyboardEvent, ) => void = event => { if (event.keyCode === 27) { this.props.onClose(); } }; } export default Modal;