support render tab footer

This commit is contained in:
SrGooglo 2023-07-12 17:14:38 +00:00
parent 0f852e909b
commit 964821a97a

View File

@ -76,42 +76,62 @@ export default class SettingTab extends React.Component {
if (this.props.withGroups) { if (this.props.withGroups) {
const group = composeGroupsFromSettingsTab(this.tab.settings) const group = composeGroupsFromSettingsTab(this.tab.settings)
return Object.entries(group).map(([groupKey, settings], index) => { return <>
const fromDecoratorIcon = groupsDecorators[groupKey]?.icon {
const fromDecoratorTitle = groupsDecorators[groupKey]?.title 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"> <div className="settings_content_group_header">
<h1> <h1>
{ {
fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
} }
<Translation> <Translation>
{
t => t(fromDecoratorTitle ?? groupKey)
}
</Translation>
</h1>
</div>
<div className="settings_list">
{ {
t => t(fromDecoratorTitle ?? groupKey) settings.map((setting) => <SettingItemComponent
setting={setting}
ctx={this.state.processedCtx}
/>)
} }
</Translation> </div>
</h1> </div>
</div> })
}
<div className="settings_list"> {
{ this.tab.footer && React.createElement(this.tab.footer, {
settings.map((setting) => <SettingItemComponent ctx: this.state.processedCtx
setting={setting} })
ctx={this.state.processedCtx} }
/>) </>
}
</div>
</div>
})
} }
return this.tab.settings.map((setting, index) => { return <>
return <SettingItemComponent {
key={index} this.tab.settings.map((setting, index) => {
setting={setting} return <SettingItemComponent
ctx={this.state.processedCtx} key={index}
/> setting={setting}
}) ctx={this.state.processedCtx}
/>
})
}
{
this.tab.footer && React.createElement(this.tab.footer, {
ctx: this.state.processedCtx
})
}
</>
} }
} }