mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2025-01-15 22:21:22 +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 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 Space from 'rebass/dist/Space'
|
||||||
import Input from 'rebass/dist/Input'
|
|
||||||
import Toolbar from 'rebass/dist/Toolbar'
|
import Toolbar from 'rebass/dist/Toolbar'
|
||||||
import NavItem from 'rebass/dist/NavItem'
|
import NavItem from 'rebass/dist/NavItem'
|
||||||
|
|
||||||
|
import Modal from './Modal'
|
||||||
|
|
||||||
import publicTilesets from '../../config/tilesets.json'
|
import publicTilesets from '../../config/tilesets.json'
|
||||||
import theme from '../../config/rebass'
|
import theme from '../../config/rebass'
|
||||||
|
import colors from '../../config/colors'
|
||||||
|
|
||||||
class TilesetsModal extends React.Component {
|
class TilesetsModal extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
@ -48,27 +42,15 @@ class TilesetsModal extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
})
|
})
|
||||||
|
|
||||||
return <Overlay open={this.props.open} >
|
return <Modal
|
||||||
<Panel theme={'secondary'}>
|
//isOpen={this.props.open}
|
||||||
<PanelHeader theme={'default'}>
|
isOpen={true}
|
||||||
Tilesets
|
toggleOpen={this.props.toggle}
|
||||||
<Space auto />
|
title={'Tilesets'}
|
||||||
<Close onClick={this.props.toggle('modalOpen')} />
|
>
|
||||||
</PanelHeader>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<h2>Choose Public Tileset</h2>
|
<h2>Choose Public Tileset</h2>
|
||||||
{tilesetOptions}
|
{tilesetOptions}
|
||||||
|
</Modal>
|
||||||
<PanelFooter>
|
|
||||||
<Space auto />
|
|
||||||
<Button theme={'default'}
|
|
||||||
onClick={this.props.toggle('modalOpen')}
|
|
||||||
children='Close!'
|
|
||||||
/>
|
|
||||||
</PanelFooter>
|
|
||||||
</Panel>
|
|
||||||
</Overlay>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue