Introduce style available prop

This commit is contained in:
lukasmartinelli
2016-09-10 14:56:59 +02:00
parent d132c09afc
commit e27b88c6bc
3 changed files with 27 additions and 24 deletions

View File

@@ -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">