mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 18:44:16 +00:00
refactor render, fixed complexity, exceding lines
This commit is contained in:
srgooglo
parent
11d1990536
commit
93d7af148b
@ -61,93 +61,99 @@ export default class BackgroundImage extends ThemeConfigurator {
|
||||
return { r: values[0], g: values[1], b: values[2] }
|
||||
}
|
||||
|
||||
render() {
|
||||
const PreviewModel = () => {
|
||||
return (
|
||||
<div>
|
||||
<h3><Icons.Layout /> Preview</h3>
|
||||
{ this.state.model.src ? <div className={styles.background_image_preview} style={{ backgroundColor: this.schemeToRGB(this.state.overlayColor) }}>
|
||||
<div style={{ color: `${this.schemeToRGB(this.state.textColor)}!important` }} className={styles.text_wrapper}>
|
||||
<h1 style={{ color: this.schemeToRGB(this.state.textColor) }}>Sample text</h1>
|
||||
<h2 style={{ color: this.schemeToRGB(this.state.textColor) }}>Sample text</h2>
|
||||
<h3 style={{ color: this.schemeToRGB(this.state.accentColor) }}>Sample text</h3>
|
||||
<h4 style={{ color: this.schemeToRGB(this.state.accentColor) }}>Sample text</h4>
|
||||
<p style={{ color: this.schemeToRGB(this.state.textColor) }}>Some text here</p>
|
||||
<p style={{ color: this.schemeToRGB(this.state.accentColor) }}>Some text here</p>
|
||||
|
||||
</div>
|
||||
<img style={{ opacity: this.state.model.opacity }} src={this.state.model.src} />
|
||||
</div> : <h3 style={{ textAlign: 'center' }} > No Background </h3>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderPreviewModel() {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.background_image_controls} >
|
||||
<div>
|
||||
<h4><Icons.Eye />Enabled</h4>
|
||||
<antd.Switch
|
||||
checkedChildren="Enabled"
|
||||
unCheckedChildren="Disabled"
|
||||
loading={this.state.processing}
|
||||
onChange={(e) => { this.promiseState(prevState => ({ model: { ...prevState.model, active: e } })).then(() => this.handleUpdate()) }}
|
||||
checked={this.state.model.active}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3><Icons.Layout /> Preview</h3>
|
||||
{ this.state.model.src ? <div className={styles.background_image_preview} style={{ backgroundColor: this.schemeToRGB(this.state.overlayColor) }}>
|
||||
<div style={{ color: `${this.schemeToRGB(this.state.textColor)}!important` }} className={styles.text_wrapper}>
|
||||
<h1 style={{ color: this.schemeToRGB(this.state.textColor) }}>Sample text</h1>
|
||||
<h2 style={{ color: this.schemeToRGB(this.state.textColor) }}>Sample text</h2>
|
||||
<h3 style={{ color: this.schemeToRGB(this.state.accentColor) }}>Sample text</h3>
|
||||
<h4 style={{ color: this.schemeToRGB(this.state.accentColor) }}>Sample text</h4>
|
||||
<p style={{ color: this.schemeToRGB(this.state.textColor) }}>Some text here</p>
|
||||
<p style={{ color: this.schemeToRGB(this.state.accentColor) }}>Some text here</p>
|
||||
|
||||
<h4><Icons.Layers />Opacity</h4>
|
||||
<antd.Slider disabled={!this.state.model.src} onChange={(e) => { this.setState(prevState => ({ model: { ...prevState.model, opacity: e / 100 } })) }} onAfterChange={() => this.handleUpdate()} value={this.state.model.opacity * 100} />
|
||||
</div>
|
||||
<div>
|
||||
<h4><Icons.Code />Export Code</h4>
|
||||
<antd.Button disabled={!this.state.model.src} size="small" onClick={() => this.handleExport()}> Export </antd.Button>
|
||||
</div>
|
||||
<div>
|
||||
<h4><Icons.Copy />Import Code</h4>
|
||||
<antd.Button size="small" onClick={() => null}> Import </antd.Button>
|
||||
</div>
|
||||
<div>
|
||||
<h4><Icons.Trash />Erase</h4>
|
||||
<antd.Popconfirm disabled={!this.state.model.src} placement="topLeft" title="Are you sure?" onConfirm={() => this.handleErase()} okText="Yes" cancelText="No">
|
||||
<antd.Button disabled={!this.state.model.src} size="small" type="primary" danger > Delete </antd.Button>
|
||||
</antd.Popconfirm>
|
||||
</div>
|
||||
<img style={{ opacity: this.state.model.opacity }} src={this.state.model.src} />
|
||||
</div> : <h3 style={{ textAlign: 'center' }} > No Background </h3>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderUploader() {
|
||||
return (
|
||||
<div>
|
||||
<h3><Icons.Upload /> Upload </h3>
|
||||
<div className={styles.background_image_uploader} >
|
||||
<div>
|
||||
Upload from your files <br />
|
||||
<antd.Upload onChange={this.handleFileUpload}>
|
||||
<antd.Button icon={<Icons.Upload type="primary" style={{ margin: '5px 0 0 0' }} />} />
|
||||
</antd.Upload>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Or</h3>
|
||||
</div>
|
||||
<div>
|
||||
Upload from URL
|
||||
<antd.Input onPressEnter={() => 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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<antd.Divider type="horizontal" dashed />
|
||||
<PreviewModel />
|
||||
<antd.Divider type="horizontal" dashed />
|
||||
|
||||
{this.state.processing ? <h4><Icons.LoadingOutlined spin /> Processing image ... </h4> : null}
|
||||
{this.state.params ? JSON.stringify(this.state.params) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderControls() {
|
||||
return (
|
||||
<div className={styles.background_image_controls} >
|
||||
<div>
|
||||
<h3><Icons.Upload /> Upload </h3>
|
||||
<div className={styles.background_image_uploader} >
|
||||
<div>
|
||||
Upload from your files <br />
|
||||
<antd.Upload onChange={this.handleFileUpload}>
|
||||
<antd.Button icon={<Icons.Upload type="primary" style={{ margin: '5px 0 0 0' }} />} />
|
||||
</antd.Upload>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Or</h3>
|
||||
</div>
|
||||
<div>
|
||||
Upload from URL
|
||||
<antd.Input onPressEnter={() => 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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.state.processing ? <h4><Icons.LoadingOutlined spin /> Processing image ... </h4> : null}
|
||||
{this.state.params ? JSON.stringify(this.state.params) : null}
|
||||
<h4><Icons.Eye />Enabled</h4>
|
||||
<antd.Switch
|
||||
checkedChildren="Enabled"
|
||||
unCheckedChildren="Disabled"
|
||||
loading={this.state.processing}
|
||||
onChange={(e) => { this.promiseState(prevState => ({ model: { ...prevState.model, active: e } })).then(() => this.handleUpdate()) }}
|
||||
checked={this.state.model.active}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<antd.Divider type="horizontal" dashed />
|
||||
|
||||
<h4><Icons.Layers />Opacity</h4>
|
||||
<antd.Slider disabled={!this.state.model.src} onChange={(e) => { this.setState(prevState => ({ model: { ...prevState.model, opacity: e / 100 } })) }} onAfterChange={() => this.handleUpdate()} value={this.state.model.opacity * 100} />
|
||||
</div>
|
||||
<div>
|
||||
<h4><Icons.Code />Export Code</h4>
|
||||
<antd.Button disabled={!this.state.model.src} size="small" onClick={() => this.handleExport()}> Export </antd.Button>
|
||||
</div>
|
||||
<div>
|
||||
<h4><Icons.Copy />Import Code</h4>
|
||||
<antd.Button size="small" onClick={() => null}> Import </antd.Button>
|
||||
</div>
|
||||
<div>
|
||||
<h4><Icons.Trash />Erase</h4>
|
||||
<antd.Popconfirm disabled={!this.state.model.src} placement="topLeft" title="Are you sure?" onConfirm={() => this.handleErase()} okText="Yes" cancelText="No">
|
||||
<antd.Button disabled={!this.state.model.src} size="small" type="primary" danger > Delete </antd.Button>
|
||||
</antd.Popconfirm>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.renderControls()}
|
||||
<antd.Divider type="horizontal" dashed />
|
||||
{this.renderPreviewModel()}
|
||||
<antd.Divider type="horizontal" dashed />
|
||||
{this.renderUploader()}
|
||||
<antd.Divider type="horizontal" dashed />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -30,9 +30,29 @@ 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 (
|
||||
<antd.Drawer
|
||||
placement="right"
|
||||
width="50%"
|
||||
closable
|
||||
onClose={() => this.setState({ selectedKey: null })}
|
||||
visible={this.state.selectedKey ? true : false}
|
||||
>
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<h2>{selectedKeyItem.icon} {selectedKeyItem.title}</h2>
|
||||
</div>
|
||||
<antd.Divider type="horizontal" dashed />
|
||||
{componentsMap[this.state.selectedKey]}
|
||||
</React.Fragment>
|
||||
</antd.Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const handleClick = (key) => this.setState({ selectedKey: key })
|
||||
const isActive = (key) => { return key ? key.active : false }
|
||||
return (
|
||||
<div>
|
||||
@ -48,23 +68,7 @@ export default class ThemeSettings extends React.Component {
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<antd.Drawer
|
||||
placement="right"
|
||||
width="50%"
|
||||
closable
|
||||
onClose={() => this.setState({ selectedKey: null })}
|
||||
visible={this.state.selectedKey ? true : false}
|
||||
>
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<h2>{selectedKeyItem.icon} {selectedKeyItem.title}</h2>
|
||||
</div>
|
||||
<antd.Divider type="horizontal" dashed />
|
||||
{componentsMap[this.state.selectedKey]}
|
||||
</React.Fragment>
|
||||
</antd.Drawer>
|
||||
|
||||
{this.renderSelectedKey()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user