mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-27 09:35:25 +01:00
Introduce style available prop
This commit is contained in:
parent
d132c09afc
commit
e27b88c6bc
3 changed files with 27 additions and 24 deletions
|
@ -66,6 +66,7 @@ export default class App extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
|
return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
|
||||||
<Toolbar
|
<Toolbar
|
||||||
|
styleAvailable={this.state.currentStyle.get('layers').size > 0}
|
||||||
onStyleSave={this.onStyleSave.bind(this)}
|
onStyleSave={this.onStyleSave.bind(this)}
|
||||||
onStyleUpload={this.onStyleUpload.bind(this)}
|
onStyleUpload={this.onStyleUpload.bind(this)}
|
||||||
onStyleDownload={this.onStyleDownload.bind(this)}
|
onStyleDownload={this.onStyleDownload.bind(this)}
|
||||||
|
|
|
@ -11,7 +11,7 @@ const storage = {
|
||||||
const emptyStyle = {
|
const emptyStyle = {
|
||||||
version: 8,
|
version: 8,
|
||||||
sources: {},
|
sources: {},
|
||||||
layers: []
|
layers: [],
|
||||||
}
|
}
|
||||||
|
|
||||||
// Return style ids and dates of all styles stored in local storage
|
// Return style ids and dates of all styles stored in local storage
|
||||||
|
|
|
@ -19,15 +19,11 @@ export class Toolbar extends React.Component {
|
||||||
onStyleSave: React.PropTypes.func,
|
onStyleSave: React.PropTypes.func,
|
||||||
onOpenSettings: React.PropTypes.func,
|
onOpenSettings: React.PropTypes.func,
|
||||||
onOpenLayers: React.PropTypes.func,
|
onOpenLayers: React.PropTypes.func,
|
||||||
|
// Whether a style is available for download or saving
|
||||||
|
// A style with no layers should not be available
|
||||||
|
styleAvailable: React.PropTypes.bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
styleUploaded: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onUpload(_, files) {
|
onUpload(_, files) {
|
||||||
const [e, file] = files[0];
|
const [e, file] = files[0];
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
|
@ -35,17 +31,26 @@ export class Toolbar extends React.Component {
|
||||||
reader.onload = e => {
|
reader.onload = e => {
|
||||||
const style = JSON.parse(e.target.result);
|
const style = JSON.parse(e.target.result);
|
||||||
this.props.onStyleUpload(style);
|
this.props.onStyleUpload(style);
|
||||||
this.setState({
|
|
||||||
styleUploaded: true
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
reader.onerror = e => console.log(e.target);
|
reader.onerror = e => console.log(e.target);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
saveButton() {
|
||||||
let downloadButton = null
|
if(this.props.styleAvailable) {
|
||||||
if(this.props.styleUploaded) {
|
return <Block>
|
||||||
downloadButton = <Block>
|
<Button onClick={this.props.onStyleSave} big={true}>
|
||||||
|
<Tooltip inverted rounded title="Save style">
|
||||||
|
<MdSave />
|
||||||
|
</Tooltip>
|
||||||
|
</Button>
|
||||||
|
</Block>
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
downloadButton() {
|
||||||
|
if(this.props.styleAvailable) {
|
||||||
|
return <Block>
|
||||||
<Button onClick={this.props.onStyleDownload} big={true}>
|
<Button onClick={this.props.onStyleDownload} big={true}>
|
||||||
<Tooltip inverted rounded title="Download style">
|
<Tooltip inverted rounded title="Download style">
|
||||||
<MdFileDownload />
|
<MdFileDownload />
|
||||||
|
@ -53,7 +58,10 @@ export class Toolbar extends React.Component {
|
||||||
</Button>
|
</Button>
|
||||||
</Block>
|
</Block>
|
||||||
}
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
return <Container style={{
|
return <Container style={{
|
||||||
zIndex: 100,
|
zIndex: 100,
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
|
@ -65,21 +73,15 @@ export class Toolbar extends React.Component {
|
||||||
}>
|
}>
|
||||||
<Block>
|
<Block>
|
||||||
<FileReaderInput onChange={this.onUpload.bind(this)}>
|
<FileReaderInput onChange={this.onUpload.bind(this)}>
|
||||||
<Button big={true} theme={this.state.styleUploaded ? "default" : "success"}>
|
<Button big={true} theme={this.props.styleAvailable ? "default" : "success"}>
|
||||||
<Tooltip inverted rounded title="Upload style">
|
<Tooltip inverted rounded title="Upload style">
|
||||||
<MdFileUpload />
|
<MdFileUpload />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Button>
|
</Button>
|
||||||
</FileReaderInput>
|
</FileReaderInput>
|
||||||
</Block>
|
</Block>
|
||||||
{downloadButton}
|
{this.downloadButton()}
|
||||||
<Block>
|
{this.saveButton()}
|
||||||
<Button onClick={this.props.onStyleSave} big={true}>
|
|
||||||
<Tooltip inverted rounded title="Save style">
|
|
||||||
<MdSave />
|
|
||||||
</Tooltip>
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block>
|
<Block>
|
||||||
<Button big={true} onClick={this.props.onOpenLayers}>
|
<Button big={true} onClick={this.props.onOpenLayers}>
|
||||||
<Tooltip inverted rounded title="Layers">
|
<Tooltip inverted rounded title="Layers">
|
||||||
|
|
Loading…
Reference in a new issue