gab-social/app/javascript/gabsocial/components/modal/modal_layout.js
mgabdev e5f4e12b7b Continuing updating the reformatting of propTypes and set redux, intl functions to end of component
Continuing updating the reformatting of propTypes and set redux, intl functions to end of component
2020-08-18 12:07:47 -05:00

84 lines
2.0 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { defineMessages, injectIntl } from 'react-intl'
import classNames from 'classnames/bind'
import Button from '../button'
import Block from '../block'
import Heading from '../heading'
const cx = classNames.bind(_s)
class ModalLayout extends React.PureComponent {
onHandleCloseModal = () => {
this.props.onClose()
}
render() {
const {
title,
children,
intl,
width,
hideClose,
noPadding,
isXS,
} = this.props
const childrenContainerClasses = cx({
default: 1,
heightMax80VH: 1,
overflowYScroll: 1,
px15: !noPadding,
py10: !noPadding,
})
return (
<div style={{width: `${width}px`}} className={[_s.default, _s.modal].join(' ')}>
<Block>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
<Heading size='h2'>
{title}
</Heading>
{
!hideClose && !isXS &&
<Button
backgroundColor='none'
title={intl.formatMessage(messages.close)}
className={_s.mlAuto}
onClick={this.onHandleCloseModal}
color='secondary'
icon='close'
iconSize='10px'
/>
}
</div>
<div className={childrenContainerClasses}>
{children}
</div>
</Block>
</div>
)
}
}
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
})
ModalLayout.propTypes = {
title: PropTypes.string,
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
width: PropTypes.number,
hideClose: PropTypes.bool,
noPadding: PropTypes.bool,
isXS: PropTypes.bool,
}
ModalLayout.defaultProps = {
width: 600,
}
export default injectIntl(ModalLayout)