mirror of
https://github.com/maputnik/editor.git
synced 2025-12-31 10:30:00 +00:00
Replace rebass with own Modal component
This commit is contained in:
43
src/components/modals/Modal.jsx
Normal file
43
src/components/modals/Modal.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react'
|
||||
|
||||
import CloseIcon from 'react-icons/lib/md/close'
|
||||
|
||||
import Overlay from './Overlay'
|
||||
import colors from '../../config/colors'
|
||||
import { margins } from '../../config/scales'
|
||||
|
||||
class Modal extends React.Component {
|
||||
static propTypes = {
|
||||
isOpen: React.PropTypes.bool.isRequired,
|
||||
title: React.PropTypes.string.isRequired,
|
||||
toggleOpen: React.PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Overlay isOpen={this.props.isOpen}>
|
||||
<div style={{
|
||||
backgroundColor: colors.gray,
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: colors.midgray,
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: margins[1]
|
||||
}}>
|
||||
{this.props.title}
|
||||
<span style={{flexGrow: 1}} />
|
||||
<a onClick={this.props.toggleOpen(false)}>
|
||||
<CloseIcon />
|
||||
</a>
|
||||
</div>
|
||||
<div style={{
|
||||
padding: margins[1]
|
||||
}}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
</Overlay>
|
||||
}
|
||||
}
|
||||
|
||||
export default Modal
|
||||
Reference in New Issue
Block a user