generate settings tabs from one object

This commit is contained in:
srgooglo 2022-05-13 20:12:11 +02:00
parent e09c050a53
commit 10a316c64d

View File

@ -7,9 +7,7 @@ import classnames from "classnames"
import config from "config" import config from "config"
import { Icons, createIconRender } from "components/Icons" import { Icons, createIconRender } from "components/Icons"
import AppSettings from "schemas/settings/app" import SettingsList from "schemas/settings"
import AccountSettings from "schemas/settings/account"
import groupsDecorator from "schemas/settingsGroupsDecorator.json" import groupsDecorator from "schemas/settingsGroupsDecorator.json"
import { AboutApp } from ".." import { AboutApp } from ".."
@ -326,6 +324,22 @@ export default class SettingsMenu extends React.PureComponent {
}) })
} }
generateSettingsTabs = () => {
return Object.keys(SettingsList).map((key) => {
return <antd.Tabs.TabPane
key={key}
tab={
<span>
{createIconRender(SettingsList[key].icon)}
{SettingsList[key].label}
</span>
}
>
{this.generateSettingsGroups(SettingsList[key].settings)}
</antd.Tabs.TabPane>
})
}
render() { render() {
const isDevMode = window.__evite?.env?.NODE_ENV !== "production" const isDevMode = window.__evite?.env?.NODE_ENV !== "production"
@ -337,16 +351,8 @@ export default class SettingsMenu extends React.PureComponent {
destroyInactiveTabPane destroyInactiveTabPane
onTabClick={this.handlePageTransition} onTabClick={this.handlePageTransition}
> >
<antd.Tabs.TabPane {this.generateSettingsTabs()}
key="app" </antd.Tabs>
tab={
<span>
<Icons.Command />
App
</span>
}
>
{this.generateSettingsGroups(AppSettings)}
<div className="footer"> <div className="footer">
<div> <div>
<div>{config.app?.siteName}</div> <div>{config.app?.siteName}</div>
@ -370,39 +376,6 @@ export default class SettingsMenu extends React.PureComponent {
</antd.Button> </antd.Button>
</div> </div>
</div> </div>
</antd.Tabs.TabPane>
<antd.Tabs.TabPane
key="account"
tab={
<span>
<Icons.User />
Account
</span>
}
>
{this.generateSettingsGroups(AccountSettings)}
</antd.Tabs.TabPane>
<antd.Tabs.TabPane
key="security"
tab={
<span>
<Icons.Shield />
Security
</span>
}
>
</antd.Tabs.TabPane>
<antd.Tabs.TabPane
key="privacy"
tab={
<span>
<Icons.Eye />
Privacy
</span>
}
>
</antd.Tabs.TabPane>
</antd.Tabs>
</div> </div>
) )
} }