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

support for onLoad function

Browse Source
This commit is contained in:
SrGooglo 2025-04-09 14:15:45 +00:00
parent 2e9145fc5c
commit 17ca0c9e48
1 changed files with 139 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

253
packages/app/src/pages/settings/components/SettingTab/index.jsx
View File

@ -4,141 +4,166 @@ import { Translation } from "react-i18next"
import { Icons } from "@components/Icons" import { Icons } from "@components/Icons"
import { import { composedTabs, composeGroupsFromSettingsTab } from "@/settings"
composedTabs,
composeGroupsFromSettingsTab,
} from "@/settings"
import groupsDecorators from "@config/settingsGroupsDecorators" import groupsDecorators from "@config/settingsGroupsDecorators"
import SettingItemComponent from "../SettingItemComponent" import SettingItemComponent from "../SettingItemComponent"
export default class SettingTab extends React.Component { export default class SettingTab extends React.Component {
state = { state = {
loading: true, loading: true,
tab: null, tab: null,
ctx: {}, ctx: {},
} }
loadTab = async () => { loadTab = async () => {
await this.setState({ await this.setState({
loading: true, loading: true,
processedCtx: {}, processedCtx: {},
}) })
const tab = composedTabs[this.props.activeKey] const tab = composedTabs[this.props.activeKey]
let ctx = {} let ctx = {}
if (typeof tab.ctxData === "function") { if (typeof tab.ctxData === "function") {
ctx = await tab.ctxData() ctx = await tab.ctxData()
} }
await this.setState({ if (typeof tab.onLoad === "function") {
tab: tab, await tab.onLoad(ctx)
loading: false, }
ctx: {
baseConfig: this.props.baseConfig,
...ctx
},
})
}
// check if props.activeKey change await this.setState({
componentDidUpdate = async (prevProps) => { tab: tab,
if (prevProps.activeKey !== this.props.activeKey) { loading: false,
await this.loadTab() ctx: {
} baseConfig: this.props.baseConfig,
} ...ctx,
},
})
}
componentDidMount = async () => { // check if props.activeKey change
await this.loadTab() componentDidUpdate = async (prevProps) => {
} if (prevProps.activeKey !== this.props.activeKey) {
await this.loadTab()
}
}
handleSettingUpdate = async (key, value) => { componentDidMount = async () => {
if (typeof this.props.onUpdate === "function") { await this.loadTab()
await this.props.onUpdate(key, value) }
}
}
render() { handleSettingUpdate = async (key, value) => {
if (this.state.loading) { if (typeof this.props.onUpdate === "function") {
return <antd.Skeleton active /> await this.props.onUpdate(key, value)
} }
}
const { ctx, tab } = this.state render() {
if (this.state.loading) {
return <antd.Skeleton active />
}
if (tab.render) { const { ctx, tab } = this.state
return React.createElement(tab.render, {
ctx: ctx,
})
}
if (this.props.withGroups) { if (tab.render) {
const group = composeGroupsFromSettingsTab(tab.settings) return React.createElement(tab.render, {
ctx: ctx,
})
}
return <> if (this.props.withGroups) {
{ const group = composeGroupsFromSettingsTab(tab.settings)
Object.entries(group).map(([groupKey, settings], index) => {
const fromDecoratorIcon = groupsDecorators[groupKey]?.icon
const fromDecoratorTitle = groupsDecorators[groupKey]?.title
return <div id={groupKey} key={index} className="settings_content_group"> return (
<div className="settings_content_group_header"> <>
<h1> {Object.entries(group).map(
{ ([groupKey, settings], index) => {
fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null const fromDecoratorIcon =
} groupsDecorators[groupKey]?.icon
<Translation> const fromDecoratorTitle =
{ groupsDecorators[groupKey]?.title
t => t(fromDecoratorTitle ?? groupKey)
}
</Translation>
</h1>
</div>
<div className="settings_list"> return (
{ <div
settings.map((setting, index) => <SettingItemComponent id={groupKey}
key={index} key={index}
setting={setting} className="settings_content_group"
ctx={ctx} >
onUpdate={(value) => this.handleSettingUpdate(setting.id, value)} <div className="settings_content_group_header">
/>) <h1>
} {fromDecoratorIcon
</div> ? React.createElement(
</div> Icons[
}) fromDecoratorIcon
} ],
)
: null}
<Translation>
{(t) =>
t(
fromDecoratorTitle ??
groupKey,
)
}
</Translation>
</h1>
</div>
{ <div className="settings_list">
tab.footer && React.createElement(tab.footer, { {settings.map((setting, index) => (
ctx: this.state.ctx <SettingItemComponent
}) key={index}
} setting={setting}
</> ctx={ctx}
} onUpdate={(value) =>
this.handleSettingUpdate(
setting.id,
value,
)
}
/>
))}
</div>
</div>
)
},
)}
return <> {tab.footer &&
{ React.createElement(tab.footer, {
tab.settings.map((setting, index) => { ctx: this.state.ctx,
return <SettingItemComponent })}
key={index} </>
setting={setting} )
ctx={{ }
...this.state.ctx,
baseConfig: this.props.baseConfig,
}}
onUpdate={(value) => this.handleSettingUpdate(setting.id, value)}
/>
})
}
{ return (
tab.footer && React.createElement(tab.footer, { <>
ctx: this.state.ctx {tab.settings.map((setting, index) => {
}) return (
} <SettingItemComponent
</> key={index}
} setting={setting}
} ctx={{
...this.state.ctx,
baseConfig: this.props.baseConfig,
}}
onUpdate={(value) =>
this.handleSettingUpdate(setting.id, value)
}
/>
)
})}
{tab.footer &&
React.createElement(tab.footer, {
ctx: this.state.ctx,
})}
</>
)
}
}