Spaces:
Running
Running
File size: 3,931 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ReactModal from 'react-modal';
import {FormattedMessage} from 'react-intl';
import Box from '../box/box.jsx';
import Button from '../button/button.jsx';
import CloseButton from '../close-button/close-button.jsx';
import backIcon from '../../lib/assets/icon--back.svg';
import helpIcon from '../../lib/assets/icon--help.svg';
import styles from './modal.css';
const ModalComponent = props => (
<ReactModal
isOpen
className={classNames(styles.modalContent, props.className, {
[styles.fullScreen]: props.fullScreen
})}
contentLabel={props.contentLabel}
overlayClassName={classNames(styles.modalOverlay, {
[styles.scrollable]: props.scrollable
})}
onRequestClose={props.onRequestClose}
>
<Box
dir={props.isRtl ? 'rtl' : 'ltr'}
direction="column"
grow={1}
>
<div className={classNames(styles.header, props.headerClassName)}>
{props.onHelp ? (
<div
className={classNames(
styles.headerItem,
styles.headerItemHelp
)}
>
<Button
className={styles.helpButton}
iconSrc={helpIcon}
onClick={props.onHelp}
>
<FormattedMessage
defaultMessage="Help"
description="Help button in modal"
id="gui.modal.help"
/>
</Button>
</div>
) : null}
<div
className={classNames(
styles.headerItem,
styles.headerItemTitle
)}
>
{props.headerImage ? (
<img
className={styles.headerImage}
src={props.headerImage}
/>
) : null}
{props.contentLabel}
</div>
<div
className={classNames(
styles.headerItem,
styles.headerItemClose
)}
>
{props.fullScreen ? (
<Button
className={styles.backButton}
iconSrc={backIcon}
onClick={props.onRequestClose}
>
<FormattedMessage
defaultMessage="Back"
description="Back button in modal"
id="gui.modal.back"
/>
</Button>
) : (
<CloseButton
size={CloseButton.SIZE_LARGE}
onClick={props.onRequestClose}
/>
)}
</div>
</div>
{props.children}
</Box>
</ReactModal>
);
ModalComponent.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
contentLabel: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object
]).isRequired,
fullScreen: PropTypes.bool,
headerClassName: PropTypes.string,
headerImage: PropTypes.string,
isRtl: PropTypes.bool,
onHelp: PropTypes.func,
onRequestClose: PropTypes.func,
scrollable: PropTypes.bool
};
export default ModalComponent;
|