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() {
return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
<Toolbar
styleAvailable={this.state.currentStyle.get('layers').size > 0}
onStyleSave={this.onStyleSave.bind(this)}
onStyleUpload={this.onStyleUpload.bind(this)}
onStyleDownload={this.onStyleDownload.bind(this)}

View file

@ -11,7 +11,7 @@ const storage = {
const emptyStyle = {
version: 8,
sources: {},
layers: []
layers: [],
}
// Return style ids and dates of all styles stored in local storage

View file

@ -19,13 +19,9 @@ export class Toolbar extends React.Component {
onStyleSave: React.PropTypes.func,
onOpenSettings: React.PropTypes.func,
onOpenLayers: React.PropTypes.func,
}
constructor(props) {
super(props);
this.state = {
styleUploaded: false
}
// Whether a style is available for download or saving
// A style with no layers should not be available
styleAvailable: React.PropTypes.bool,
}
onUpload(_, files) {
@ -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">