Changeset View
Changeset View
Standalone View
Standalone View
web/modals/modal.react.js
// @flow | // @flow | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import FocusTrap from 'focus-trap-react'; | |||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import ModalOverlay from 'lib/components/modal-overlay.react.js'; | import ModalOverlay from 'lib/components/modal-overlay.react.js'; | ||||
import SWMansionIcon, { | import SWMansionIcon, { | ||||
type Icon, | type Icon, | ||||
} from 'lib/components/SWMansionIcon.react.js'; | } from 'lib/components/SWMansionIcon.react.js'; | ||||
import css from './modal.css'; | import css from './modal.css'; | ||||
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines | function Modal(props: ModalProps): React.Node { | ||||
}, [icon]); | }, [icon]); | ||||
let subtitleNode; | let subtitleNode; | ||||
if (subtitle) { | if (subtitle) { | ||||
subtitleNode = <h2 className={css.subtitle}>{subtitle}</h2>; | subtitleNode = <h2 className={css.subtitle}>{subtitle}</h2>; | ||||
} | } | ||||
return ( | return ( | ||||
<ModalOverlay onClose={onClose}> | <ModalOverlay onClose={onClose}> | ||||
<FocusTrap> | |||||
<div className={modalContainerClasses}> | <div className={modalContainerClasses}> | ||||
<div className={modalHeader}> | <div className={modalHeader}> | ||||
<div className={css.modalHeaderTitle}> | <div className={css.modalHeaderTitle}> | ||||
<h2 className={css.title}> | <h2 className={css.title}> | ||||
{headerIcon} | {headerIcon} | ||||
{name} | {name} | ||||
</h2> | </h2> | ||||
{cornerCloseButton} | {cornerCloseButton} | ||||
</div> | </div> | ||||
{subtitleNode} | {subtitleNode} | ||||
</div> | </div> | ||||
{children} | {children} | ||||
</div> | </div> | ||||
</FocusTrap> | |||||
</ModalOverlay> | </ModalOverlay> | ||||
); | ); | ||||
} | } | ||||
export default Modal; | export default Modal; |