support for onLoad function

This commit is contained in:
SrGooglo 2025-04-09 14:15:45 +00:00
parent 2e9145fc5c
commit 17ca0c9e48

View File

@ -4,10 +4,7 @@ import { Translation } from "react-i18next"
import { Icons } from "@components/Icons"
import {
composedTabs,
composeGroupsFromSettingsTab,
} from "@/settings"
import { composedTabs, composeGroupsFromSettingsTab } from "@/settings"
import groupsDecorators from "@config/settingsGroupsDecorators"
@ -34,12 +31,16 @@ export default class SettingTab extends React.Component {
ctx = await tab.ctxData()
}
if (typeof tab.onLoad === "function") {
await tab.onLoad(ctx)
}
await this.setState({
tab: tab,
loading: false,
ctx: {
baseConfig: this.props.baseConfig,
...ctx
...ctx,
},
})
}
@ -77,68 +78,92 @@ export default class SettingTab extends React.Component {
if (this.props.withGroups) {
const group = composeGroupsFromSettingsTab(tab.settings)
return <>
{
Object.entries(group).map(([groupKey, settings], index) => {
const fromDecoratorIcon = groupsDecorators[groupKey]?.icon
const fromDecoratorTitle = groupsDecorators[groupKey]?.title
return (
<>
{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
id={groupKey}
key={index}
className="settings_content_group"
>
<div className="settings_content_group_header">
<h1>
{
fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
}
{fromDecoratorIcon
? React.createElement(
Icons[
fromDecoratorIcon
],
)
: null}
<Translation>
{
t => t(fromDecoratorTitle ?? groupKey)
{(t) =>
t(
fromDecoratorTitle ??
groupKey,
)
}
</Translation>
</h1>
</div>
<div className="settings_list">
{
settings.map((setting, index) => <SettingItemComponent
{settings.map((setting, index) => (
<SettingItemComponent
key={index}
setting={setting}
ctx={ctx}
onUpdate={(value) => this.handleSettingUpdate(setting.id, value)}
/>)
onUpdate={(value) =>
this.handleSettingUpdate(
setting.id,
value,
)
}
/>
))}
</div>
</div>
})
}
)
},
)}
{
tab.footer && React.createElement(tab.footer, {
ctx: this.state.ctx
})
}
{tab.footer &&
React.createElement(tab.footer, {
ctx: this.state.ctx,
})}
</>
)
}
return <>
{
tab.settings.map((setting, index) => {
return <SettingItemComponent
return (
<>
{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)}
onUpdate={(value) =>
this.handleSettingUpdate(setting.id, value)
}
/>
})
}
)
})}
{
tab.footer && React.createElement(tab.footer, {
ctx: this.state.ctx
})
}
{tab.footer &&
React.createElement(tab.footer, {
ctx: this.state.ctx,
})}
</>
)
}
}