RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor render, fixed complexity, exceding lines

Browse Source
This commit is contained in:
srgooglo 2020-10-28 18:05:39 +01:00
parent 11d1990536
commit 93d7af148b
2 changed files with 105 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/settings/components/theme/components/background/index.js
View File

@ -61,8 +61,7 @@ export default class BackgroundImage extends ThemeConfigurator {
return { r: values[0], g: values[1], b: values[2] }
}
render() {
const PreviewModel = () => {
renderPreviewModel() {
return (
<div>
<h3><Icons.Layout /> Preview</h3>
@ -82,8 +81,34 @@ export default class BackgroundImage extends ThemeConfigurator {
)
}
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>
{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>
<h4><Icons.Eye />Enabled</h4>
@ -116,37 +141,18 @@ export default class BackgroundImage extends ThemeConfigurator {
</div>
</div>
)
}
render() {
return (
<div>
{this.renderControls()}
<antd.Divider type="horizontal" dashed />
<PreviewModel />
{this.renderPreviewModel()}
<antd.Divider type="horizontal" dashed />
<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}
</div>
{this.renderUploader()}
<antd.Divider type="horizontal" dashed />
</div>
)
}

38
src/pages/settings/components/theme/index.js
View File

@ -30,25 +30,9 @@ 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
const isActive = (key) => { return key ? key.active : false }
return (
<div>
<antd.List
itemLayout="horizontal"
dataSource={ThemeSettingsList}
renderItem={item => (
<div style={{ margin: '10px 0 10px 0' }} >
<antd.Card size="small" bodyStyle={{ width: '100%' }} style={{ display: "flex", flexDirection: "row", margin: 'auto', borderRadius: '12px' }} hoverable onClick={() => handleClick(item.id)}>
<h3>{item.icon}{item.title} <div style={{ float: "right" }}><antd.Tag color={isActive(arrayToObject(this.props.app.app_theme)[item.id]) ? "green" : "default"} > {isActive(arrayToObject(this.props.app.app_theme)[item.id]) ? "Enabled" : "Disabled"} </antd.Tag></div></h3>
<p>{item.description}</p>
</antd.Card>
</div>
)}
/>
<antd.Drawer
placement="right"
width="50%"
@ -64,7 +48,27 @@ export default class ThemeSettings extends React.Component {
{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>
<antd.List
itemLayout="horizontal"
dataSource={ThemeSettingsList}
renderItem={item => (
<div style={{ margin: '10px 0 10px 0' }} >
<antd.Card size="small" bodyStyle={{ width: '100%' }} style={{ display: "flex", flexDirection: "row", margin: 'auto', borderRadius: '12px' }} hoverable onClick={() => handleClick(item.id)}>
<h3>{item.icon}{item.title} <div style={{ float: "right" }}><antd.Tag color={isActive(arrayToObject(this.props.app.app_theme)[item.id]) ? "green" : "default"} > {isActive(arrayToObject(this.props.app.app_theme)[item.id]) ? "Enabled" : "Disabled"} </antd.Tag></div></h3>
<p>{item.description}</p>
</antd.Card>
</div>
)}
/>
{this.renderSelectedKey()}
</div>
)
}