mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-27 08:25:24 +01:00
Replace rebass with own Modal component
This commit is contained in:
parent
8fc8dfd4f6
commit
bdb0466436
3 changed files with 108 additions and 30 deletions
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
|
53
src/components/modals/Overlay.jsx
Normal file
53
src/components/modals/Overlay.jsx
Normal 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
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue