You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.2 KiB
57 lines
1.2 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Box, Flex } from 'rebass'
|
|
import X from 'components/Icon/X'
|
|
|
|
/**
|
|
* @render react
|
|
* @name Modal
|
|
* @example
|
|
* <Modal>Some content</Modal>
|
|
*/
|
|
class Modal extends React.Component {
|
|
static displayName = 'Modal'
|
|
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
onClose: PropTypes.func
|
|
}
|
|
|
|
state = {
|
|
hover: false
|
|
}
|
|
|
|
hoverOn = () => {
|
|
this.setState({ hover: true })
|
|
}
|
|
|
|
hoverOff = () => {
|
|
this.setState({ hover: false })
|
|
}
|
|
|
|
render() {
|
|
const { hover } = this.state
|
|
const { children, onClose } = this.props
|
|
return (
|
|
<Flex flexDirection="column" width={1} p={3} bg="primaryColor" css={{ height: '100%' }}>
|
|
<Flex justifyContent="flex-end" as="header" color="primaryText">
|
|
<Box
|
|
css={{ cursor: 'pointer', opacity: hover ? 0.6 : 1 }}
|
|
ml="auto"
|
|
onClick={onClose}
|
|
onMouseEnter={this.hoverOn}
|
|
onMouseLeave={this.hoverOff}
|
|
p={2}
|
|
>
|
|
<X width="2em" height="2em" />
|
|
</Box>
|
|
</Flex>
|
|
<Box as="section" p={3} pt={1} css={{ flex: 1 }}>
|
|
{children}
|
|
</Box>
|
|
</Flex>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Modal
|
|
|