-
-
Enabled
-
{ this.promiseState(prevState => ({ model: { ...prevState.model, active: e } })).then(() => this.handleUpdate()) }}
- checked={this.state.model.active}
- />
-
-
+
Preview
+ { this.state.model.src ?
+
+
Sample text
+
Sample text
+
Sample text
+
Sample text
+
Some text here
+
Some text here
-
Opacity
-
{ this.setState(prevState => ({ model: { ...prevState.model, opacity: e / 100 } })) }} onAfterChange={() => this.handleUpdate()} value={this.state.model.opacity * 100} />
-
-
-
Export Code
-
this.handleExport()}> Export
-
-
-
Import Code
-
null}> Import
-
-
-
Erase
-
this.handleErase()} okText="Yes" cancelText="No">
- Delete
-
+
+
:
No Background
}
+
+ )
+ }
+ renderUploader() {
+ return (
+
+
Upload
+
+
+ Upload from your files
+
+ } />
+
+
+
+
Or
+
+
+ Upload from URL
+
this.handleCustomURL(this.state.customURL)} onChange={e => this.setState({ customURL: e.target.value })} value={this.state.customURL} placeholder="http://example.com/my_coolest_image.jpg" />
+
-
-
-
-
-
+ {this.state.processing ?
Processing image ...
: null}
+ {this.state.params ? JSON.stringify(this.state.params) : null}
+
+ )
+ }
+
+ renderControls() {
+ return (
+
-
Upload
-
-
- Upload from your files
-
- } />
-
-
-
-
Or
-
-
- Upload from URL
-
this.handleCustomURL(this.state.customURL)} onChange={e => this.setState({ customURL: e.target.value })} value={this.state.customURL} placeholder="http://example.com/my_coolest_image.jpg" />
-
-
-
- {this.state.processing ?
Processing image ...
: null}
- {this.state.params ? JSON.stringify(this.state.params) : null}
+
Enabled
+
{ this.promiseState(prevState => ({ model: { ...prevState.model, active: e } })).then(() => this.handleUpdate()) }}
+ checked={this.state.model.active}
+ />
+
-
-
+
Opacity
+
{ this.setState(prevState => ({ model: { ...prevState.model, opacity: e / 100 } })) }} onAfterChange={() => this.handleUpdate()} value={this.state.model.opacity * 100} />
+
+
+
Export Code
+
this.handleExport()}> Export
+
+
+
Import Code
+
null}> Import
+
+
+
Erase
+
this.handleErase()} okText="Yes" cancelText="No">
+ Delete
+
+
)
}
+
+ render() {
+ return (
+
+ {this.renderControls()}
+
+ {this.renderPreviewModel()}
+
+ {this.renderUploader()}
+
+
+ )
+ }
}
\ No newline at end of file
diff --git a/src/pages/settings/components/theme/index.js b/src/pages/settings/components/theme/index.js
index 52ecab80..f906d1b6 100644
--- a/src/pages/settings/components/theme/index.js
+++ b/src/pages/settings/components/theme/index.js
@@ -29,10 +29,30 @@ export default class ThemeSettings extends React.Component {
})
this.setState({ keys: mix })
}
-
- render() {
+
+ renderSelectedKey() {
const selectedKeyItem = this.state.keys[this.state.selectedKey] ?? { icon: null, title: null }
- const handleClick = (key) => key ? this.setState({ selectedKey: key }) : null
+ return (
+
this.setState({ selectedKey: null })}
+ visible={this.state.selectedKey ? true : false}
+ >
+
+
+
{selectedKeyItem.icon} {selectedKeyItem.title}
+
+
+ {componentsMap[this.state.selectedKey]}
+
+
+ )
+ }
+
+ render() {
+ const handleClick = (key) => this.setState({ selectedKey: key })
const isActive = (key) => { return key ? key.active : false }
return (
@@ -48,23 +68,7 @@ export default class ThemeSettings extends React.Component {
)}
/>
-
-
this.setState({ selectedKey: null })}
- visible={this.state.selectedKey ? true : false}
- >
-
-
-
{selectedKeyItem.icon} {selectedKeyItem.title}
-
-
- {componentsMap[this.state.selectedKey]}
-
-
-
+ {this.renderSelectedKey()}