mirror of
https://github.com/maputnik/editor.git
synced 2026-04-17 23:10:01 +00:00
Introduce style available prop
This commit is contained in:
@@ -19,15 +19,11 @@ export class Toolbar extends React.Component {
|
||||
onStyleSave: React.PropTypes.func,
|
||||
onOpenSettings: 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) {
|
||||
const [e, file] = files[0];
|
||||
const reader = new FileReader();
|
||||
@@ -35,17 +31,26 @@ export class Toolbar extends React.Component {
|
||||
reader.onload = e => {
|
||||
const style = JSON.parse(e.target.result);
|
||||
this.props.onStyleUpload(style);
|
||||
this.setState({
|
||||
styleUploaded: true
|
||||
})
|
||||
}
|
||||
reader.onerror = e => console.log(e.target);
|
||||
}
|
||||
|
||||
render() {
|
||||
let downloadButton = null
|
||||
if(this.props.styleUploaded) {
|
||||
downloadButton = <Block>
|
||||
saveButton() {
|
||||
if(this.props.styleAvailable) {
|
||||
return <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}>
|
||||
<Tooltip inverted rounded title="Download style">
|
||||
<MdFileDownload />
|
||||
@@ -53,7 +58,10 @@ export class Toolbar extends React.Component {
|
||||
</Button>
|
||||
</Block>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Container style={{
|
||||
zIndex: 100,
|
||||
position: "fixed",
|
||||
@@ -65,21 +73,15 @@ export class Toolbar extends React.Component {
|
||||
}>
|
||||
<Block>
|
||||
<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">
|
||||
<MdFileUpload />
|
||||
</Tooltip>
|
||||
</Button>
|
||||
</FileReaderInput>
|
||||
</Block>
|
||||
{downloadButton}
|
||||
<Block>
|
||||
<Button onClick={this.props.onStyleSave} big={true}>
|
||||
<Tooltip inverted rounded title="Save style">
|
||||
<MdSave />
|
||||
</Tooltip>
|
||||
</Button>
|
||||
</Block>
|
||||
{this.downloadButton()}
|
||||
{this.saveButton()}
|
||||
<Block>
|
||||
<Button big={true} onClick={this.props.onOpenLayers}>
|
||||
<Tooltip inverted rounded title="Layers">
|
||||
|
||||
Reference in New Issue
Block a user