gab-social/app/javascript/gabsocial/components/popover/popover_layout.js

52 lines
1.2 KiB
JavaScript
Raw Normal View History

2020-02-28 15:20:47 +00:00
import Block from '../block'
import Heading from '../heading'
2020-02-28 15:20:47 +00:00
export default class PopoverLayout extends PureComponent {
2020-03-24 04:39:12 +00:00
static propTypes = {
children: PropTypes.node,
2020-04-07 02:53:23 +01:00
width: PropTypes.number,
isXS: PropTypes.bool,
title: PropTypes.string,
2020-04-07 02:53:23 +01:00
}
static defaultProps = {
width: 250,
2020-03-24 04:39:12 +00:00
}
2020-02-19 23:57:07 +00:00
render() {
const {
children,
width,
isXS,
title,
} = this.props
if (isXS) {
return (
2020-05-14 07:03:22 +01:00
<div className={[_s.default, _s.bgPrimary, _s.modal, _s.topRightRadiusSmall, _s.topLeftRadiusSmall].join(' ')}>
{
!!title &&
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
<Heading size='h2'>
{title}
</Heading>
</div>
}
2020-05-14 07:03:22 +01:00
<div className={[_s.default, _s.heightMax80VH, _s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.overflowYScroll].join(' ')}>
{children}
</div>
</div>
)
}
2020-02-28 15:20:47 +00:00
2020-02-19 23:57:07 +00:00
return (
<div style={{ width: `${width}px` }} className={_s.modal}>
2020-02-28 15:20:47 +00:00
<Block>
{children}
</Block>
2020-02-19 23:57:07 +00:00
</div>
)
}
2020-02-19 23:57:07 +00:00
}