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

@ -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)}

View file

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

View file

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