hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Simplifying Tabs boilerplate

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-04-05 12:56:19 +03:00
parent da69ed1187
commit bb35a4d7dc
1 changed files with 15 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/renderer/components/+preferences/preferences.tsx
View File

@ -18,7 +18,7 @@ import { navigation } from "../../navigation";
import { Tab, Tabs } from "../tabs"; import { Tab, Tabs } from "../tabs";
import { FormSwitch, Switcher } from "../switch"; import { FormSwitch, Switcher } from "../switch";
enum PreferencesTab { enum Pages {
Application = "application", Application = "application",
Proxy = "proxy", Proxy = "proxy",
Kubernetes = "kubernetes", Kubernetes = "kubernetes",
@ -31,7 +31,7 @@ enum PreferencesTab {
export class Preferences extends React.Component { export class Preferences extends React.Component {
@observable httpProxy = userStore.preferences.httpsProxy || ""; @observable httpProxy = userStore.preferences.httpsProxy || "";
@observable shell = userStore.preferences.shell || ""; @observable shell = userStore.preferences.shell || "";
@observable activeTab = PreferencesTab.Application; @observable activeTab = Pages.Application;
@computed get themeOptions(): SelectOption<string>[] { @computed get themeOptions(): SelectOption<string>[] {
return themeStore.themes.map(theme => ({ return themeStore.themes.map(theme => ({
@ -55,7 +55,7 @@ export class Preferences extends React.Component {
]); ]);
} }
onTabChange = (tabId: PreferencesTab) => { onTabChange = (tabId: Pages) => {
this.activeTab = tabId; this.activeTab = tabId;
}; };
@ -63,34 +63,14 @@ export class Preferences extends React.Component {
const extensions = appPreferenceRegistry.getItems().filter(e => !e.showInPreferencesTab); const extensions = appPreferenceRegistry.getItems().filter(e => !e.showInPreferencesTab);
return ( return (
<Tabs className="flex column" scrollable={false} onChange={this.onTabChange}> <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
<div className="header">Preferences</div> <div className="header">Preferences</div>
<Tab <Tab value={Pages.Application} label="Application"/>
value={PreferencesTab.Application} <Tab value={Pages.Proxy} label="Proxy"/>
label="Application" <Tab value={Pages.Kubernetes} label="Kubernetes"/>
active={this.activeTab == PreferencesTab.Application} <Tab value={Pages.Telemetry} label="Telemetry"/>
/>
<Tab
value={PreferencesTab.Proxy}
label="Proxy"
active={this.activeTab == PreferencesTab.Proxy}
/>
<Tab
value={PreferencesTab.Kubernetes}
label="Kubernetes"
active={this.activeTab == PreferencesTab.Kubernetes}
/>
<Tab
value={PreferencesTab.Telemetry}
label="Telemetry"
active={this.activeTab == PreferencesTab.Telemetry}
/>
{extensions.length > 0 && {extensions.length > 0 &&
<Tab <Tab value={Pages.Extensions} label="Extensions"/>
value={PreferencesTab.Extensions}
label="Extensions"
active={this.activeTab == PreferencesTab.Extensions}
/>
} }
</Tabs> </Tabs>
); );
@ -114,7 +94,7 @@ export class Preferences extends React.Component {
render() { render() {
const { preferences } = userStore; const { preferences } = userStore;
const extensions = appPreferenceRegistry.getItems(); const extensions = appPreferenceRegistry.getItems();
const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == PreferencesTab.Telemetry); const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == Pages.Telemetry);
let defaultShell = process.env.SHELL || process.env.PTYSHELL; let defaultShell = process.env.SHELL || process.env.PTYSHELL;
if (!defaultShell) { if (!defaultShell) {
@ -132,7 +112,7 @@ export class Preferences extends React.Component {
className="Preferences" className="Preferences"
contentGaps={false} contentGaps={false}
> >
{this.activeTab == PreferencesTab.Application && ( {this.activeTab == Pages.Application && (
<section id="application"> <section id="application">
<h2>Application</h2> <h2>Application</h2>
<section id="appearance"> <section id="appearance">
@ -175,7 +155,7 @@ export class Preferences extends React.Component {
</section> </section>
</section> </section>
)} )}
{this.activeTab == PreferencesTab.Proxy && ( {this.activeTab == Pages.Proxy && (
<section id="proxy"> <section id="proxy">
<section> <section>
<h2>Proxy</h2> <h2>Proxy</h2>
@ -215,7 +195,7 @@ export class Preferences extends React.Component {
</section> </section>
)} )}
{this.activeTab == PreferencesTab.Kubernetes && ( {this.activeTab == Pages.Kubernetes && (
<section id="kubernetes"> <section id="kubernetes">
<section id="kubectl"> <section id="kubectl">
<h2>Kubernetes</h2> <h2>Kubernetes</h2>
@ -229,14 +209,14 @@ export class Preferences extends React.Component {
</section> </section>
)} )}
{this.activeTab == PreferencesTab.Telemetry && ( {this.activeTab == Pages.Telemetry && (
<section id="telemetry"> <section id="telemetry">
<h2>Telemetry</h2> <h2>Telemetry</h2>
{telemetryExtensions.map(this.renderExtension)} {telemetryExtensions.map(this.renderExtension)}
</section> </section>
)} )}
{this.activeTab == PreferencesTab.Extensions && ( {this.activeTab == Pages.Extensions && (
<section id="extensions"> <section id="extensions">
<h2>Extensions</h2> <h2>Extensions</h2>
{extensions.filter(e => !e.showInPreferencesTab).map(this.renderExtension)} {extensions.filter(e => !e.showInPreferencesTab).map(this.renderExtension)}