Replace rebass with own Modal component

This commit is contained in:
Lukas Martinelli 2016-12-21 13:55:11 +01:00
parent 8fc8dfd4f6
commit bdb0466436
3 changed files with 108 additions and 30 deletions

View 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

View file

@ -0,0 +1,53 @@
import React from 'react'
class ViewportOverlay extends React.Component {
static propTypes = {
style: React.PropTypes.object
}
render() {
const overlayStyle = {
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 2,
opacity: 0.875,
backgroundColor: 'rgb(28, 31, 36)',
...this.props.style
}
return <div style={overlayStyle} />
}
}
class Overlay extends React.Component {
static propTypes = {
isOpen: React.PropTypes.bool.isRequired,
children: React.PropTypes.element.isRequired
}
render() {
return <div style={{
top: 0,
right: 0,
bottom: 0,
left: 0,
position: 'fixed',
display: this.props.isOpen ? 'flex' : 'none',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}>
<ViewportOverlay />
<div style={{
zIndex: 3,
}}>
{this.props.children}
</div>
</div>
}
}
export default Overlay

View file

@ -1,20 +1,14 @@
import React from 'react'
import Overlay from 'rebass/dist/Overlay'
import Panel from 'rebass/dist/Panel'
import PanelHeader from 'rebass/dist/PanelHeader'
import PanelFooter from 'rebass/dist/PanelFooter'
import Button from 'rebass/dist/Button'
import Text from 'rebass/dist/Text'
import Media from 'rebass/dist/Media'
import Close from 'rebass/dist/Close'
import Space from 'rebass/dist/Space'
import Input from 'rebass/dist/Input'
import Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem'
import Modal from './Modal'
import publicTilesets from '../../config/tilesets.json'
import theme from '../../config/rebass'
import colors from '../../config/colors'
class TilesetsModal extends React.Component {
static propTypes = {
@ -48,27 +42,15 @@ class TilesetsModal extends React.Component {
</div>
})
return <Overlay open={this.props.open} >
<Panel theme={'secondary'}>
<PanelHeader theme={'default'}>
Tilesets
<Space auto />
<Close onClick={this.props.toggle('modalOpen')} />
</PanelHeader>
<br />
<h2>Choose Public Tileset</h2>
{tilesetOptions}
<PanelFooter>
<Space auto />
<Button theme={'default'}
onClick={this.props.toggle('modalOpen')}
children='Close!'
/>
</PanelFooter>
</Panel>
</Overlay>
return <Modal
//isOpen={this.props.open}
isOpen={true}
toggleOpen={this.props.toggle}
title={'Tilesets'}
>
<h2>Choose Public Tileset</h2>
{tilesetOptions}
</Modal>
}
}