mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
updated: general settings code cuality
This commit is contained in:
srgooglo
parent
e48d658eb6
commit
9943e33542
21
packages/comty/package-lock.json
generated
21
packages/comty/package-lock.json
generated
@ -11,7 +11,6 @@
|
||||
"@icons-pack/react-simple-icons": "^3.8.0",
|
||||
"@lingui/react": "^3.3.0",
|
||||
"@ragestudio/nodecore-api-lib": "^0.2.6",
|
||||
"@types/jest": "^26.0.15",
|
||||
"@types/lodash": "^4.14.165",
|
||||
"antd": "^4.8.2",
|
||||
"axios": "^0.21.1",
|
||||
@ -33,6 +32,7 @@
|
||||
"moment": "^2.28.0",
|
||||
"path-to-regexp": "^6.1.0",
|
||||
"platform": "^1.3.6",
|
||||
"react": "^16.14.0",
|
||||
"react-animations": "^1.0.0",
|
||||
"react-color": "^2.19.3",
|
||||
"react-dazzle": "^1.4.0",
|
||||
@ -4797,16 +4797,6 @@
|
||||
"@types/istanbul-lib-report": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/jest": {
|
||||
"version": "26.0.19",
|
||||
"resolved": "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.19.tgz",
|
||||
"integrity": "sha512-jqHoirTG61fee6v6rwbnEuKhpSKih0tuhqeFbCmMmErhtu3BYlOZaXWjffgOstMM4S/3iQD31lI5bGLTrs97yQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jest-diff": "^26.0.0",
|
||||
"pretty-format": "^26.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz",
|
||||
@ -38902,15 +38892,6 @@
|
||||
"@types/istanbul-lib-report": "*"
|
||||
}
|
||||
},
|
||||
"@types/jest": {
|
||||
"version": "26.0.19",
|
||||
"resolved": "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.19.tgz",
|
||||
"integrity": "sha512-jqHoirTG61fee6v6rwbnEuKhpSKih0tuhqeFbCmMmErhtu3BYlOZaXWjffgOstMM4S/3iQD31lI5bGLTrs97yQ==",
|
||||
"requires": {
|
||||
"jest-diff": "^26.0.0",
|
||||
"pretty-format": "^26.0.0"
|
||||
}
|
||||
},
|
||||
"@types/json-schema": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz",
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
"moment": "^2.28.0",
|
||||
"path-to-regexp": "^6.1.0",
|
||||
"platform": "^1.3.6",
|
||||
"react": "^16.14.0",
|
||||
"react-animations": "^1.0.0",
|
||||
"react-color": "^2.19.3",
|
||||
"react-dazzle": "^1.4.0",
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "session_noexpire",
|
||||
"icon": "Watch",
|
||||
"type": "switch",
|
||||
"title": "No expire session",
|
||||
"description": "Force the app to not expire any session... [Developer]"
|
||||
},
|
||||
{
|
||||
"id": "search_ontype",
|
||||
"icon": "CornerDownRight",
|
||||
"type": "switch",
|
||||
"title": "Detect input on search bar",
|
||||
"description": "Force the app to automaticly search when a type input is detected... [Developer]"
|
||||
},
|
||||
{
|
||||
"id": "post_hidebar",
|
||||
"icon": "Menu",
|
||||
"type": "switch",
|
||||
"title": "Auto hide postbar",
|
||||
"description": "Force the app to hide the post actions (likes, comments ...etc) automaticly... [Developer]"
|
||||
},
|
||||
{
|
||||
"id": "post_autoposition",
|
||||
"icon": "AlignCenter",
|
||||
"type": "switch",
|
||||
"title": "Auto center on click",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"id": "verbosity",
|
||||
"icon": "Terminal",
|
||||
"type": "switch",
|
||||
"title": "Enable core verbosity",
|
||||
"description": "Show all console logs... [Developer]"
|
||||
}
|
||||
]
|
||||
37
packages/comty/schemas/settings_general.json
Normal file
37
packages/comty/schemas/settings_general.json
Normal file
@ -0,0 +1,37 @@
|
||||
[
|
||||
{
|
||||
"id": "session_noexpire",
|
||||
"icon": "Watch",
|
||||
"type": "Switch",
|
||||
"title": "No expire session",
|
||||
"description": "Force the app to not expire any session"
|
||||
},
|
||||
{
|
||||
"id": "search_ontype",
|
||||
"icon": "CornerDownRight",
|
||||
"type": "Switch",
|
||||
"title": "Auto search on input",
|
||||
"description": "Search automaticly when type something"
|
||||
},
|
||||
{
|
||||
"id": "post_hidebar",
|
||||
"icon": "Menu",
|
||||
"type": "Switch",
|
||||
"title": "Auto hide postbar",
|
||||
"description": "Hide post actions bar when loose focus"
|
||||
},
|
||||
{
|
||||
"id": "post_autoposition",
|
||||
"icon": "AlignCenter",
|
||||
"type": "Switch",
|
||||
"title": "Center on click",
|
||||
"description": "Center posts element when then is clicked"
|
||||
},
|
||||
{
|
||||
"id": "verbosity",
|
||||
"icon": "Terminal",
|
||||
"type": "Switch",
|
||||
"title": "Verbosity",
|
||||
"description": "Show all development logs of the application"
|
||||
}
|
||||
]
|
||||
@ -1,127 +1,83 @@
|
||||
import React, { Component, Fragment } from 'react'
|
||||
import { List, Switch, Button, notification, InputNumber } from 'antd'
|
||||
import React from 'react'
|
||||
import { List, Button, Switch, Checkbox, InputNumber, Input } from 'antd'
|
||||
import * as Icons from 'components/Icons'
|
||||
|
||||
import { verbosity } from '@nodecorejs/utils'
|
||||
import * as Icons from 'components/Icons'
|
||||
import { settings, newSetting } from 'core/libs/settings'
|
||||
import SettingList from 'schemas/settings.json'
|
||||
import listSettings from 'schemas/settings_general.json'
|
||||
|
||||
import {connect} from 'umi'
|
||||
|
||||
@connect(({ app }) => ({ app }))
|
||||
export default class GeneralSettings extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
list: SettingList,
|
||||
};
|
||||
const AntdComponents = { Button, Switch, Checkbox, InputNumber, Input }
|
||||
export default class GeneralSettings extends React.Component {
|
||||
state = {
|
||||
list: listSettings,
|
||||
}
|
||||
|
||||
renderSetting = item => {
|
||||
renderSetting = (item) => {
|
||||
if (!item.type || !item.id) {
|
||||
verbosity.log("Invalid component >", item)
|
||||
return null
|
||||
}
|
||||
if (typeof(AntdComponents[item.type]) == "undefined") {
|
||||
verbosity.log(`Invalid component, '${item.type}' not exists >`, item)
|
||||
return null
|
||||
}
|
||||
|
||||
let itemProps = {
|
||||
onChange: (e) => this.onChange(item, e),
|
||||
checked: settings.get(item.id)
|
||||
}
|
||||
|
||||
switch (item.type) {
|
||||
case 'switch':
|
||||
return (
|
||||
<Switch
|
||||
checkedChildren={'Enabled'}
|
||||
unCheckedChildren={'Disabled'}
|
||||
checked={settings.get(item.id)}
|
||||
onChange={() => this.onChange(item)}
|
||||
/>
|
||||
)
|
||||
case 'numeric':
|
||||
return (
|
||||
<InputNumber
|
||||
min={1}
|
||||
max={50}
|
||||
defaultValue={item.value}
|
||||
onChange={() => this.onChangeNumeric(item, value)}
|
||||
/>
|
||||
)
|
||||
case 'Switch': {
|
||||
itemProps = { ...itemProps } // checkedChildren: "Enabled", unCheckedChildren: "Disabled"
|
||||
break
|
||||
}
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
return React.createElement(AntdComponents[item.type], itemProps)
|
||||
}
|
||||
|
||||
handleControlBar() {
|
||||
const ListControls = [
|
||||
<div key={Math.random()}>
|
||||
<Button
|
||||
type="done"
|
||||
icon={<Icons.SaveOutlined />}
|
||||
onClick={() => this.saveChanges()}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>,
|
||||
]
|
||||
ControlController.set(ListControls)
|
||||
}
|
||||
|
||||
saveChanges() {
|
||||
localStorage.setItem('app_settings', JSON.stringify(this.state.SettingRepo))
|
||||
this.setState({ forSave: false })
|
||||
notification.success({
|
||||
message: 'Settings saved',
|
||||
description:
|
||||
'The configuration has been saved, it may for some configuration to make changes you need to reload the application',
|
||||
})
|
||||
ControlController.close()
|
||||
}
|
||||
|
||||
onChange(item) {
|
||||
onChange(item, event) {
|
||||
try {
|
||||
switch (item.type) {
|
||||
case 'switch': {
|
||||
item.to = !settings.get(item.id)
|
||||
verbosity.log(`Changing setting (${item.id}: ${settings.get(item.id)}) => ${item.to}`)
|
||||
settings.set(item.id, item.to)
|
||||
this.handleChange(item)
|
||||
let to = event
|
||||
|
||||
}
|
||||
case 'numeric': {
|
||||
verbosity.colors({ log: { textColor: "blue" } }).log(`Updating setting (${item.id}) > ${to}`)
|
||||
settings.set(item.id, to)
|
||||
|
||||
}
|
||||
default: {
|
||||
return null
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
handleChange(item) {
|
||||
try {
|
||||
const updatedValue = this.state.list.map(element =>
|
||||
element.id === item.id ? Object.assign(element, { value: item.to }) : element
|
||||
const updatedValues = this.state.list.map(element =>
|
||||
element.id === item.id ? Object.assign(element, { value: to }) : element
|
||||
)
|
||||
this.setState({ list: updatedValue})
|
||||
this.setState({ list: updatedValues })
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
renderIcon(icon, props) {
|
||||
if (!Icons[icon]) {
|
||||
verbosity.log(`${icon} not exist!`)
|
||||
return null
|
||||
}
|
||||
return React.createElement(Icons[icon], props ?? null)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<div>
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={this.state.list}
|
||||
renderItem={item => (
|
||||
<List.Item actions={item.actions} key={item.id}>
|
||||
<List.Item.Meta
|
||||
title={<>{item.icon}{item.title}</>}
|
||||
description={item.description}
|
||||
/>
|
||||
{this.renderSetting(item)}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={this.state.list}
|
||||
renderItem={(item) => (
|
||||
<List.Item actions={item.actions} key={item.id}>
|
||||
<List.Item.Meta
|
||||
title={<>{this.renderIcon(item.icon)}{item.title}</>}
|
||||
description={item.description}
|
||||
/>
|
||||
{this.renderSetting(item)}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@ import React from 'react'
|
||||
import * as Icons from 'components/Icons'
|
||||
import * as antd from 'antd'
|
||||
import { connect } from 'umi'
|
||||
import { arrayToObject, objectToArrayMap } from 'core'
|
||||
import { arrayToObject } from 'core'
|
||||
import ThemeSettingsList from 'schemas/theme_settings.json'
|
||||
|
||||
import BackgroundSetting from './components/background'
|
||||
@ -62,7 +62,7 @@ export default class ThemeSettings extends React.Component {
|
||||
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>
|
||||
<h3>{React.createElement(Icons[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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user