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

Remove more unused styling

Browse Source
This commit is contained in:
Nathan Bierema 2023-12-13 19:09:02 -05:00
parent f17566c193
commit 123ecd2076
3 changed files with 25 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx
View File

@ -1,13 +1,12 @@
import { createSelector, Selector } from '@reduxjs/toolkit'; import { createSelector, Selector } from '@reduxjs/toolkit';
import React, { ComponentProps, ReactNode } from 'react'; import React, { ComponentProps, ReactNode } from 'react';
import { JSONTree } from 'react-json-tree'; import { JSONTree } from 'react-json-tree';
import { Base16Theme, StylingFunction } from 'react-base16-styling'; import { Base16Theme } from 'react-base16-styling';
import { DATA_TYPE_KEY } from '../monitor-config';
import { import {
getJsonTreeTheme, getJsonTreeTheme,
StyleUtilsContext, StyleUtilsContext,
} from '../styles/createStylingFromTheme'; } from '../styles/createStylingFromTheme';
import { createTreeItemLabelRenderer, getItemString } from '../styles/tree'; import { getItemString, labelRenderer } from '../styles/tree';
import { identity } from '../utils/object'; import { identity } from '../utils/object';
export interface TreeViewProps export interface TreeViewProps
@ -39,28 +38,6 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
}, },
}; };
readonly selectLabelRenderer: Selector<
StylingFunction,
ReturnType<typeof createTreeItemLabelRenderer>,
never
> = createSelector<
[(stylingFunction: StylingFunction) => StylingFunction],
ReturnType<typeof createTreeItemLabelRenderer>
>(identity, createTreeItemLabelRenderer);
readonly selectGetItemString: Selector<
StylingFunction,
(type: string, data: unknown) => ReactNode,
never
> = createSelector<
[(stylingFunction: StylingFunction) => StylingFunction],
(type: string, data: unknown) => ReactNode
>(
identity,
(styling) => (type, data) =>
getItemString(styling, type, data, DATA_TYPE_KEY, false),
);
readonly selectTheme: Selector< readonly selectTheme: Selector<
Base16Theme, Base16Theme,
ReturnType<typeof getJsonTreeTheme>, ReturnType<typeof getJsonTreeTheme>,
@ -88,7 +65,7 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
return ( return (
<StyleUtilsContext.Consumer> <StyleUtilsContext.Consumer>
{({ styling, invertTheme, base16Theme }) => { {({ invertTheme, base16Theme }) => {
return ( return (
<div <div
{...rootProps} {...rootProps}
@ -103,10 +80,10 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
keyPath={keyPath} keyPath={keyPath}
shouldExpandNodeInitially={shouldExpandNodeInitially} shouldExpandNodeInitially={shouldExpandNodeInitially}
data={data} data={data}
labelRenderer={this.selectLabelRenderer(styling)} labelRenderer={labelRenderer}
theme={this.selectTheme(base16Theme)} theme={this.selectTheme(base16Theme)}
invertTheme={invertTheme} invertTheme={invertTheme}
getItemString={this.selectGetItemString(styling)} getItemString={getItemString}
hideRoot={hideRoot} hideRoot={hideRoot}
/> />
{after} {after}

9
packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
View File

@ -1,6 +1,5 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import type { Interpolation, Theme } from '@emotion/react'; import type { Interpolation, Theme } from '@emotion/react';
import { createTreeItemLabelRenderer } from '../styles/tree';
import { import {
QueryPreviewTabs, QueryPreviewTabs,
RtkResourceInfo, RtkResourceInfo,
@ -180,14 +179,6 @@ const tabs: ReadonlyArray<
]; ];
export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> { export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
readonly labelRenderer: ReturnType<typeof createTreeItemLabelRenderer>;
constructor(props: QueryPreviewProps<S>) {
super(props);
this.labelRenderer = createTreeItemLabelRenderer();
}
renderLabelWithCounter = ( renderLabelWithCounter = (
label: React.ReactText, label: React.ReactText,
counter: number, counter: number,

53
packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx
View File

@ -1,8 +1,8 @@
import React, { ReactNode } from 'react'; import React from 'react';
import { StylingFunction } from 'react-base16-styling'; import type { GetItemString, LabelRenderer } from 'react-json-tree';
import type { LabelRenderer } from 'react-json-tree';
import { isCollection, isIndexed, isKeyed } from 'immutable'; import { isCollection, isIndexed, isKeyed } from 'immutable';
import isIterable from '../utils/isIterable'; import isIterable from '../utils/isIterable';
import { DATA_TYPE_KEY } from '../monitor-config';
const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@'; const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';
@ -73,34 +73,21 @@ function getText(
} }
} }
export function getItemString( export const getItemString: GetItemString = (type: string, data: any) => (
styling: StylingFunction, <span>
type: string, {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
data: any, {DATA_TYPE_KEY && data[DATA_TYPE_KEY]
dataTypeKey: string | symbol | undefined, ? `${data[DATA_TYPE_KEY] as string} `
previewContent: boolean, : ''}
isDiff?: boolean, {getText(type, data, false, undefined)}
): ReactNode { </span>
return ( );
<span {...styling('treeItemHint')}>
{data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
{dataTypeKey && data[dataTypeKey]
? `${data[dataTypeKey] as string} `
: ''}
{getText(type, data, previewContent, isDiff)}
</span>
);
}
export function createTreeItemLabelRenderer(): LabelRenderer { export const labelRenderer: LabelRenderer = ([key], nodeType, expanded) => (
return function labelRenderer([key], nodeType, expanded) { <span>
return ( <span css={(theme) => ({ color: theme.TEXT_PLACEHOLDER_COLOR })}>
<span> {key}
<span css={(theme) => ({ color: theme.TEXT_PLACEHOLDER_COLOR })}> </span>
{key} {!expanded && ': '}
</span> </span>
{!expanded && ': '} );
</span>
);
};
}