lint(gui): make theme handling more type-safe
This commit is contained in:
parent
83b1b3916f
commit
ec7315fc36
|
@ -1,6 +1,6 @@
|
|||
import { mustExist } from '@apextoaster/js-utils';
|
||||
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
||||
import { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
|
||||
import { Box, Container, CssBaseline, Divider, PaletteMode, Tab, useMediaQuery } from '@mui/material';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import * as React from 'react';
|
||||
import { useContext, useMemo } from 'react';
|
||||
|
@ -17,7 +17,7 @@ import { Inpaint } from './tab/Inpaint.js';
|
|||
import { Settings } from './tab/Settings.js';
|
||||
import { Txt2Img } from './tab/Txt2Img.js';
|
||||
import { Upscale } from './tab/Upscale.js';
|
||||
import { getTheme, getTab, TAB_LABELS } from './utils.js';
|
||||
import { getTab, getTheme, TAB_LABELS } from './utils.js';
|
||||
|
||||
export function OnnxWeb() {
|
||||
/* checks for system light/dark mode preference */
|
||||
|
@ -27,8 +27,8 @@ export function OnnxWeb() {
|
|||
const theme = useMemo(
|
||||
() => createTheme({
|
||||
palette: {
|
||||
mode: getTheme(state.theme, prefersDarkMode) as PaletteMode
|
||||
}
|
||||
mode: getTheme(state.theme, prefersDarkMode),
|
||||
},
|
||||
}),
|
||||
[prefersDarkMode, state.theme],
|
||||
);
|
||||
|
@ -45,7 +45,6 @@ export function OnnxWeb() {
|
|||
<Box sx={{ mx: 4, my: 4 }}>
|
||||
<ModelControl />
|
||||
</Box>
|
||||
|
||||
<TabContext value={getTab(hash)}>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<TabList onChange={(_e, idx) => {
|
||||
|
@ -73,7 +72,6 @@ export function OnnxWeb() {
|
|||
</TabPanel>
|
||||
</Box>
|
||||
</TabContext>
|
||||
|
||||
<Divider variant='middle' />
|
||||
<Box sx={{ mx: 4, my: 4 }}>
|
||||
<ImageHistory />
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
import { PaletteMode } from '@mui/material';
|
||||
|
||||
import { Theme } from '../state.js';
|
||||
import { trimHash } from '../utils.js';
|
||||
|
||||
export const TAB_LABELS = [
|
||||
|
@ -18,12 +21,12 @@ export function getTab(hash: string): string {
|
|||
return TAB_LABELS[0];
|
||||
}
|
||||
|
||||
export function getTheme(currentTheme: string, preferDark: boolean): string {
|
||||
export function getTheme(currentTheme: Theme, preferDark: boolean): PaletteMode {
|
||||
if (currentTheme === '') {
|
||||
if (preferDark) {
|
||||
return 'dark';
|
||||
}
|
||||
return 'light';
|
||||
}
|
||||
return currentTheme;
|
||||
return currentTheme as PaletteMode;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
/* eslint-disable max-lines */
|
||||
/* eslint-disable no-null/no-null */
|
||||
import { Maybe } from '@apextoaster/js-utils';
|
||||
import { PaletteMode } from '@mui/material';
|
||||
import { Logger } from 'noicejs';
|
||||
import { createContext } from 'react';
|
||||
import { StateCreator, StoreApi } from 'zustand';
|
||||
|
@ -24,10 +25,12 @@ import {
|
|||
} from './client/api.js';
|
||||
import { Config, ConfigFiles, ConfigState, ServerParams } from './config.js';
|
||||
|
||||
export type Theme = PaletteMode | ''; // tri-state, '' is unset
|
||||
|
||||
/**
|
||||
* Combine optional files and required ranges.
|
||||
*/
|
||||
type TabState<TabParams> = ConfigFiles<Required<TabParams>> & ConfigState<Required<TabParams>>;
|
||||
export type TabState<TabParams> = ConfigFiles<Required<TabParams>> & ConfigState<Required<TabParams>>;
|
||||
|
||||
interface HistoryItem {
|
||||
image: ImageResponse;
|
||||
|
@ -43,10 +46,10 @@ interface BrushSlice {
|
|||
|
||||
interface DefaultSlice {
|
||||
defaults: TabState<BaseImgParams>;
|
||||
theme: string;
|
||||
theme: Theme;
|
||||
|
||||
setDefaults(param: Partial<BaseImgParams>): void;
|
||||
setTheme(theme: string): void;
|
||||
setTheme(theme: Theme): void;
|
||||
}
|
||||
|
||||
interface HistorySlice {
|
||||
|
|
Loading…
Reference in New Issue