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