reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 00:19:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor(rtk-query): simplify theme config

Browse Source
This commit is contained in:
FaberVitale 2021-06-13 21:36:28 +02:00
parent c943b041bc
commit 1f189f3bdc
3 changed files with 14 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx
View File

@ -12,11 +12,10 @@ import {
createThemeState, createThemeState,
StyleUtils, StyleUtils,
StyleUtilsContext, StyleUtilsContext,
base16Themes,
} from './styles/createStylingFromTheme'; } from './styles/createStylingFromTheme';
interface DefaultProps { interface DefaultProps {
theme: keyof typeof base16Themes; theme: string;
invertTheme: boolean; invertTheme: boolean;
} }
@ -43,7 +42,7 @@ class RtkQueryInspectorMonitor<S, A extends Action<unknown>> extends Component<
}; };
static defaultProps = { static defaultProps = {
theme: 'inspector', theme: 'nicinabox',
invertTheme: false, invertTheme: false,
}; };

26
packages/redux-devtools-rtk-query-inspector-monitor/src/styles/createStylingFromTheme.ts
View File

@ -1,15 +1,13 @@
import jss, { StyleSheet } from 'jss'; import jss, { StyleSheet } from 'jss';
import preset from 'jss-preset-default'; import preset from 'jss-preset-default';
import { StylingConfig } from 'react-base16-styling';
import { import {
createStyling, createStyling,
getBase16Theme, getBase16Theme,
invertTheme, invertTheme,
StylingFunction, StylingFunction,
StylingConfig,
} from 'react-base16-styling'; } from 'react-base16-styling';
import rgba from 'hex-rgba'; import rgba from 'hex-rgba';
import { Base16Theme } from 'redux-devtools-themes';
import { rtkInspectorTheme } from './theme';
import * as reduxThemes from 'redux-devtools-themes'; import * as reduxThemes from 'redux-devtools-themes';
import { Action } from 'redux'; import { Action } from 'redux';
import { RtkQueryInspectorMonitorProps } from '../types'; import { RtkQueryInspectorMonitorProps } from '../types';
@ -17,7 +15,7 @@ import { createContext } from 'react';
jss.setup(preset()); jss.setup(preset());
export const colorMap = (theme: Base16Theme) => ({ export const colorMap = (theme: reduxThemes.Base16Theme) => ({
TEXT_COLOR: theme.base06, TEXT_COLOR: theme.base06,
TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60), TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
BACKGROUND_COLOR: theme.base00, BACKGROUND_COLOR: theme.base00,
@ -304,7 +302,7 @@ const getSheetFromColorMap = (map: ColorMap) => ({
let themeSheet: StyleSheet; let themeSheet: StyleSheet;
const getDefaultThemeStyling = (theme: Base16Theme) => { const getDefaultThemeStyling = (theme: reduxThemes.Base16Theme) => {
if (themeSheet) { if (themeSheet) {
themeSheet.detach(); themeSheet.detach();
} }
@ -316,15 +314,13 @@ const getDefaultThemeStyling = (theme: Base16Theme) => {
return themeSheet.classes; return themeSheet.classes;
}; };
export const base16Themes = { ...reduxThemes };
export const createStylingFromTheme = createStyling(getDefaultThemeStyling, { export const createStylingFromTheme = createStyling(getDefaultThemeStyling, {
defaultBase16: rtkInspectorTheme, defaultBase16: reduxThemes.nicinabox,
base16Themes, base16Themes: { ...reduxThemes },
}); });
export interface StyleUtils { export interface StyleUtils {
base16Theme: Base16Theme; base16Theme: reduxThemes.Base16Theme;
styling: StylingFunction; styling: StylingFunction;
invertTheme: boolean; invertTheme: boolean;
} }
@ -333,7 +329,7 @@ export function createThemeState<S, A extends Action<unknown>>(
props: RtkQueryInspectorMonitorProps<S, A> props: RtkQueryInspectorMonitorProps<S, A>
): StyleUtils { ): StyleUtils {
const base16Theme = const base16Theme =
getBase16Theme(props.theme, base16Themes) ?? rtkInspectorTheme; getBase16Theme(props.theme, { ...reduxThemes }) ?? reduxThemes.nicinabox;
const theme = props.invertTheme ? invertTheme(props.theme) : props.theme; const theme = props.invertTheme ? invertTheme(props.theme) : props.theme;
const styling = createStylingFromTheme(theme); const styling = createStylingFromTheme(theme);
@ -341,15 +337,17 @@ export function createThemeState<S, A extends Action<unknown>>(
return { base16Theme, styling, invertTheme: !!props.invertTheme }; return { base16Theme, styling, invertTheme: !!props.invertTheme };
} }
const mockStyling = (...args: any[]) => ({ className: '', style: {} }); const mockStyling = () => ({ className: '', style: {} });
export const StyleUtilsContext = createContext<StyleUtils>({ export const StyleUtilsContext = createContext<StyleUtils>({
base16Theme: rtkInspectorTheme, base16Theme: reduxThemes.nicinabox,
invertTheme: false, invertTheme: false,
styling: mockStyling, styling: mockStyling,
}); });
export function getJsonTreeTheme(base16Theme: Base16Theme): StylingConfig { export function getJsonTreeTheme(
base16Theme: reduxThemes.Base16Theme
): StylingConfig {
return { return {
extend: base16Theme, extend: base16Theme,
nestedNode: ({ style }, keyPath, nodeType, expanded) => ({ nestedNode: ({ style }, keyPath, nodeType, expanded) => ({

25
packages/redux-devtools-rtk-query-inspector-monitor/src/styles/theme.ts
View File

@ -1,25 +0,0 @@
import { Base16Theme } from 'react-base16-styling';
/**
* Lifted from `packages/redux-devtools-inspector-monitor/src/themes/inspector.ts`
*/
export const rtkInspectorTheme: Base16Theme = {
scheme: 'rtk-inspector',
author: 'Alexander Kuznetsov (alexkuz@gmail.com)',
base00: '#181818',
base01: '#282828',
base02: '#383838',
base03: '#585858',
base04: '#b8b8b8',
base05: '#d8d8d8',
base06: '#e8e8e8',
base07: '#FFFFFF',
base08: '#E92F28',
base09: '#dc9656',
base0A: '#f7ca88',
base0B: '#65AD00',
base0C: '#86c1b9',
base0D: '#347BD9',
base0E: '#EC31C0',
base0F: '#a16946',
};