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 unused styling

Browse Source
This commit is contained in:
Nathan Bierema 2023-12-13 18:57:02 -05:00
parent a09e45a3de
commit f17566c193
9 changed files with 300 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx
View File

@ -1,36 +1,31 @@
import React from 'react'; import React from 'react';
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
export function NoRtkQueryApi(): JSX.Element { export function NoRtkQueryApi(): JSX.Element {
return ( return (
<StyleUtilsContext.Consumer> <div
{({ styling }) => ( css={(theme) => ({
<div width: '100%',
css={(theme) => ({ textAlign: 'center',
width: '100%', color: theme.TEXT_COLOR,
textAlign: 'center', padding: '1.4em',
color: theme.TEXT_COLOR, '& a': {
padding: '1.4em', fontSize: 'inherit',
'& a': { color: theme.TEXT_COLOR,
fontSize: 'inherit', textDecoration: 'underline',
color: theme.TEXT_COLOR, },
textDecoration: 'underline', })}
}, >
})} No rtk-query api found.
> <br />
No rtk-query api found. Make sure to follow{' '}
<br /> <a
Make sure to follow{' '} href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage"
<a target="_blank"
href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage" rel="noreferrer noopener"
target="_blank" >
rel="noreferrer noopener" the instructions
> </a>
the instructions .
</a> </div>
.
</div>
)}
</StyleUtilsContext.Consumer>
); );
} }

2
packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx
View File

@ -137,7 +137,7 @@ export class QueryForm extends React.PureComponent<
return ( return (
<StyleUtilsContext.Consumer> <StyleUtilsContext.Consumer>
{({ styling, base16Theme }) => { {({ base16Theme }) => {
return ( return (
<form <form
id="rtk-query-monitor-query-selection-form" id="rtk-query-monitor-query-selection-form"

133
packages/redux-devtools-rtk-query-monitor/src/components/QueryList.tsx
View File

@ -1,6 +1,5 @@
import React, { PureComponent, ReactNode } from 'react'; import React, { PureComponent, ReactNode } from 'react';
import type { Interpolation, Theme } from '@emotion/react'; import type { Interpolation, Theme } from '@emotion/react';
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
import { RtkResourceInfo, RtkQueryMonitorState } from '../types'; import { RtkResourceInfo, RtkQueryMonitorState } from '../types';
import { isQuerySelected } from '../utils/rtk-query'; import { isQuerySelected } from '../utils/rtk-query';
@ -50,75 +49,71 @@ export class QueryList extends PureComponent<QueryListProps> {
const { resInfos, selectedQueryKey, onSelectQuery } = this.props; const { resInfos, selectedQueryKey, onSelectQuery } = this.props;
return ( return (
<StyleUtilsContext.Consumer> <ul css={{ listStyle: 'none', margin: '0', padding: '0' }}>
{({ styling }) => ( {resInfos.map((resInfo) => {
<ul css={{ listStyle: 'none', margin: '0', padding: '0' }}> const isSelected = isQuerySelected(selectedQueryKey, resInfo);
{resInfos.map((resInfo) => {
const isSelected = isQuerySelected(selectedQueryKey, resInfo);
return ( return (
<li <li
key={resInfo.queryKey} key={resInfo.queryKey}
onClick={() => onSelectQuery(resInfo)} onClick={() => onSelectQuery(resInfo)}
css={[ css={[
(theme) => ({ (theme) => ({
borderBottomWidth: '1px', borderBottomWidth: '1px',
borderBottomStyle: 'solid', borderBottomStyle: 'solid',
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
padding: '5px 10px', padding: '5px 10px',
cursor: 'pointer', cursor: 'pointer',
userSelect: 'none', userSelect: 'none',
'&:last-child': { '&:last-child': {
borderBottomWidth: 0, borderBottomWidth: 0,
}, },
overflow: 'hidden', overflow: 'hidden',
maxHeight: 47, maxHeight: 47,
borderBottomColor: theme.BORDER_COLOR, borderBottomColor: theme.BORDER_COLOR,
}), }),
isSelected && isSelected &&
((theme) => ({ ((theme) => ({
backgroundColor: theme.SELECTED_BACKGROUND_COLOR, backgroundColor: theme.SELECTED_BACKGROUND_COLOR,
})), })),
]} ]}
> >
<p <p
css={{ css={{
display: '-webkit-box', display: '-webkit-box',
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2, WebkitLineClamp: 2,
whiteSpace: 'normal', whiteSpace: 'normal',
overflow: 'hidden', overflow: 'hidden',
width: '100%', width: '100%',
maxWidth: 'calc(100% - 70px)', maxWidth: 'calc(100% - 70px)',
wordBreak: 'break-all', wordBreak: 'break-all',
margin: 0, margin: 0,
}} }}
> >
{QueryList.formatQuery(resInfo)} {QueryList.formatQuery(resInfo)}
</p> </p>
<div <div
css={{ css={{
display: 'flex', display: 'flex',
width: 'auto', width: 'auto',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
margin: 0, margin: 0,
flex: '0 0 auto', flex: '0 0 auto',
overflow: 'hidden', overflow: 'hidden',
}} }}
> >
<strong css={[queryStatusCss, { marginRight: 4 }]}> <strong css={[queryStatusCss, { marginRight: 4 }]}>
{resInfo.type === 'query' ? 'Q' : 'M'} {resInfo.type === 'query' ? 'Q' : 'M'}
</strong> </strong>
<p css={queryStatusCss}>{resInfo.state.status}</p> <p css={queryStatusCss}>{resInfo.state.status}</p>
</div> </div>
</li> </li>
); );
})} })}
</ul> </ul>
)}
</StyleUtilsContext.Consumer>
); );
} }
} }

91
packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx
View File

@ -1,7 +1,6 @@
import React, { ReactNode, PureComponent } from 'react'; import React, { ReactNode, PureComponent } from 'react';
import type { ShouldExpandNodeInitially } from 'react-json-tree'; import type { ShouldExpandNodeInitially } from 'react-json-tree';
import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types'; import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types';
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
import { TreeView, TreeViewProps } from './TreeView'; import { TreeView, TreeViewProps } from './TreeView';
import { renderTabPanelId, renderTabPanelButtonId } from '../utils/a11y'; import { renderTabPanelId, renderTabPanelButtonId } from '../utils/a11y';
@ -39,58 +38,54 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
const hasQueries = Object.keys(apiState.queries).length > 0; const hasQueries = Object.keys(apiState.queries).length > 0;
return ( return (
<StyleUtilsContext.Consumer> <article
{({ styling }) => ( {...rootProps}
<article css={(theme) => ({
{...rootProps} display: 'block',
css={(theme) => ({ overflowY: 'auto',
display: 'block', padding: '0.5em 0',
overflowY: 'auto', color: theme.TAB_CONTENT_COLOR,
padding: '0.5em 0', '& h2': {
color: theme.TAB_CONTENT_COLOR, color: theme.ULIST_STRONG_COLOR,
'& h2': { padding: '0.5em 1em',
color: theme.ULIST_STRONG_COLOR, fontWeight: 700,
padding: '0.5em 1em', },
fontWeight: 700, '& h3': {
}, color: theme.ULIST_STRONG_COLOR,
'& h3': { },
color: theme.ULIST_STRONG_COLOR, })}
}, >
})} <h2>{apiState.config.reducerPath}</h2>
> <TreeView
<h2>{apiState.config.reducerPath}</h2> before={<h3>State</h3>}
data={apiState}
shouldExpandNodeInitially={this.shouldExpandApiStateNode}
isWideLayout={isWideLayout}
/>
{apiStats && (
<>
<TreeView <TreeView
before={<h3>State</h3>} before={<h3>Tally</h3>}
data={apiState} data={apiStats.tally}
shouldExpandNodeInitially={this.shouldExpandApiStateNode}
isWideLayout={isWideLayout} isWideLayout={isWideLayout}
/> />
{apiStats && ( {hasQueries && (
<> <TreeView
<TreeView before={<h3>Queries Timings</h3>}
before={<h3>Tally</h3>} data={apiStats.timings.queries}
data={apiStats.tally} isWideLayout={isWideLayout}
isWideLayout={isWideLayout} />
/>
{hasQueries && (
<TreeView
before={<h3>Queries Timings</h3>}
data={apiStats.timings.queries}
isWideLayout={isWideLayout}
/>
)}
{hasMutations && (
<TreeView
before={<h3>Mutations Timings</h3>}
data={apiStats.timings.mutations}
isWideLayout={isWideLayout}
/>
)}
</>
)} )}
</article> {hasMutations && (
<TreeView
before={<h3>Mutations Timings</h3>}
data={apiStats.timings.mutations}
isWideLayout={isWideLayout}
/>
)}
</>
)} )}
</StyleUtilsContext.Consumer> </article>
); );
} }
} }

175
packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx
View File

@ -1,5 +1,4 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
import { QueryPreviewTabs, TabOption } from '../types'; import { QueryPreviewTabs, TabOption } from '../types';
import { renderTabPanelButtonId } from '../utils/a11y'; import { renderTabPanelButtonId } from '../utils/a11y';
import { emptyArray } from '../utils/object'; import { emptyArray } from '../utils/object';
@ -24,98 +23,92 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
const { tabs, selectedTab, renderTabLabel } = this.props; const { tabs, selectedTab, renderTabLabel } = this.props;
return ( return (
<StyleUtilsContext.Consumer> <div
{({ styling }) => ( css={(theme) => ({
<div flex: '0 0 30px',
css={(theme) => ({ padding: '5px 4px',
flex: '0 0 30px', alignItems: 'center',
padding: '5px 4px', borderBottomWidth: '1px',
alignItems: 'center', borderBottomStyle: 'solid',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
backgroundColor: theme.HEADER_BACKGROUND_COLOR, backgroundColor: theme.HEADER_BACKGROUND_COLOR,
borderBottomColor: theme.HEADER_BORDER_COLOR, borderBottomColor: theme.HEADER_BORDER_COLOR,
})} })}
> >
<div <div
css={{ css={{
display: 'flex', display: 'flex',
width: '100%', width: '100%',
justifyContent: 'flex-end', justifyContent: 'flex-end',
overflow: 'hidden', overflow: 'hidden',
'& > *': { '& > *': {
flex: '0 1 auto', flex: '0 1 auto',
}, },
}} }}
>
{tabs.map((tab) => (
<button
type="button"
id={renderTabPanelButtonId(tab.value)}
aria-selected={tab.value === selectedTab}
role={'tab'}
onClick={() => this.handleTabClick(tab)}
key={tab.value}
css={[
(theme) => ({
cursor: 'pointer',
position: 'relative',
height: '33px',
padding: '0 8px',
display: 'inline-flex',
alignItems: 'center',
boxShadow: 'none',
outline: 'none',
color: theme.TEXT_COLOR,
borderStyle: 'solid',
borderWidth: '1px',
borderLeftWidth: 0,
'&:first-of-type': {
borderLeftWidth: '1px',
borderTopLeftRadius: '3px',
borderBottomLeftRadius: '3px',
},
'&:last-of-type': {
borderTopRightRadius: '3px',
borderBottomRightRadius: '3px',
},
backgroundColor: theme.TAB_BACK_COLOR,
'&:hover': {
backgroundColor: theme.TAB_BACK_HOVER_COLOR,
},
borderColor: theme.TAB_BORDER_COLOR,
'& > *': {
display: '-webkit-box',
boxOrient: 'vertical',
WebkitLineClamp: 1,
overflow: 'hidden',
wordBreak: 'break-all',
WebkitBoxPack: 'end',
paddingBottom: 0,
},
}),
tab.value === selectedTab &&
((theme) => ({
backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
})),
]}
> >
{tabs.map((tab) => ( <span>{renderTabLabel ? renderTabLabel(tab) : tab.label}</span>
<button </button>
type="button" ))}
id={renderTabPanelButtonId(tab.value)} </div>
aria-selected={tab.value === selectedTab} </div>
role={'tab'}
onClick={() => this.handleTabClick(tab)}
key={tab.value}
css={[
(theme) => ({
cursor: 'pointer',
position: 'relative',
height: '33px',
padding: '0 8px',
display: 'inline-flex',
alignItems: 'center',
boxShadow: 'none',
outline: 'none',
color: theme.TEXT_COLOR,
borderStyle: 'solid',
borderWidth: '1px',
borderLeftWidth: 0,
'&:first-of-type': {
borderLeftWidth: '1px',
borderTopLeftRadius: '3px',
borderBottomLeftRadius: '3px',
},
'&:last-of-type': {
borderTopRightRadius: '3px',
borderBottomRightRadius: '3px',
},
backgroundColor: theme.TAB_BACK_COLOR,
'&:hover': {
backgroundColor: theme.TAB_BACK_HOVER_COLOR,
},
borderColor: theme.TAB_BORDER_COLOR,
'& > *': {
display: '-webkit-box',
boxOrient: 'vertical',
WebkitLineClamp: 1,
overflow: 'hidden',
wordBreak: 'break-all',
WebkitBoxPack: 'end',
paddingBottom: 0,
},
}),
tab.value === selectedTab &&
((theme) => ({
backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
})),
]}
>
<span>
{renderTabLabel ? renderTabLabel(tab) : tab.label}
</span>
</button>
))}
</div>
</div>
)}
</StyleUtilsContext.Consumer>
); );
} }

65
packages/redux-devtools-rtk-query-monitor/src/components/SortOrderButton.tsx
View File

@ -1,6 +1,5 @@
import React, { CSSProperties } from 'react'; import React, { CSSProperties } from 'react';
import { ArrowUpIcon } from './ArrowUpIcon'; import { ArrowUpIcon } from './ArrowUpIcon';
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
export interface SortOrderButtonProps { export interface SortOrderButtonProps {
readonly isAsc?: boolean; readonly isAsc?: boolean;
@ -28,40 +27,36 @@ export function SortOrderButton({
}; };
return ( return (
<StyleUtilsContext.Consumer> <button
{({ styling }) => ( type="button"
<button id={id}
type="button" onClick={handleButtonClick}
id={id} aria-pressed={isAsc}
onClick={handleButtonClick} css={(theme) => ({
aria-pressed={isAsc} display: 'flex',
css={(theme) => ({ justifyContent: 'space-between',
display: 'flex', alignItems: 'center',
justifyContent: 'space-between', flexFlow: 'row nowrap',
alignItems: 'center', cursor: 'pointer',
flexFlow: 'row nowrap', position: 'relative',
cursor: 'pointer', padding: '0 8px',
position: 'relative', color: theme.TEXT_COLOR,
padding: '0 8px', borderStyle: 'solid',
color: theme.TEXT_COLOR, borderWidth: '1px',
borderStyle: 'solid', borderRadius: '3px',
borderWidth: '1px', backgroundColor: theme.TAB_BACK_COLOR,
borderRadius: '3px', borderColor: theme.TAB_BORDER_COLOR,
backgroundColor: theme.TAB_BACK_COLOR, height: 30,
borderColor: theme.TAB_BORDER_COLOR, fontSize: 12,
height: 30, width: 64,
fontSize: 12,
width: 64,
'&:active': { '&:active': {
backgroundColor: theme.TAB_BACK_SELECTED_COLOR, backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
}, },
})} })}
> >
<ArrowUpIcon style={arrowStyles} /> <ArrowUpIcon style={arrowStyles} />
{buttonLabel} {buttonLabel}
</button> </button>
)}
</StyleUtilsContext.Consumer>
); );
} }

47
packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx
View File

@ -1,35 +1,30 @@
import * as React from 'react'; import * as React from 'react';
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
export type UListProps = React.HTMLAttributes<HTMLUListElement>; export type UListProps = React.HTMLAttributes<HTMLUListElement>;
export function UList(props: UListProps): JSX.Element { export function UList(props: UListProps): JSX.Element {
return ( return (
<StyleUtilsContext.Consumer> <ul
{({ styling }) => ( {...props}
<ul css={(theme) => ({
{...props} listStyle: 'none',
css={(theme) => ({ padding: '0 0 0 1em',
listStyle: 'none', color: theme.ULIST_COLOR,
padding: '0 0 0 1em', '& > li': {
color: theme.ULIST_COLOR, listStyle: 'none',
'& > li': { },
listStyle: 'none', '& > li::before': {
}, content: '"\\2022"',
'& > li::before': { display: 'inline-block',
content: '"\\2022"', paddingRight: '0.5em',
display: 'inline-block', color: theme.ULIST_DISC_COLOR,
paddingRight: '0.5em', fontSize: '0.8em',
color: theme.ULIST_DISC_COLOR, },
fontSize: '0.8em',
},
'& strong': { '& strong': {
color: theme.ULIST_STRONG_COLOR, color: theme.ULIST_STRONG_COLOR,
}, },
})} })}
/> />
)}
</StyleUtilsContext.Consumer>
); );
} }

81
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 { StyleUtilsContext } from '../styles/createStylingFromTheme';
import { createTreeItemLabelRenderer } from '../styles/tree'; import { createTreeItemLabelRenderer } from '../styles/tree';
import { import {
QueryPreviewTabs, QueryPreviewTabs,
@ -186,7 +185,7 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
constructor(props: QueryPreviewProps<S>) { constructor(props: QueryPreviewProps<S>) {
super(props); super(props);
this.labelRenderer = createTreeItemLabelRenderer(this.props.styling); this.labelRenderer = createTreeItemLabelRenderer();
} }
renderLabelWithCounter = ( renderLabelWithCounter = (
@ -229,58 +228,40 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
if (!resInfo) { if (!resInfo) {
return ( return (
<StyleUtilsContext.Consumer> <div css={queryPreviewCss}>
{({ styling }) => ( <QueryPreviewHeader
<div css={queryPreviewCss}> selectedTab={selectedTab}
<QueryPreviewHeader onTabChange={onTabChange}
selectedTab={selectedTab} tabs={
onTabChange={onTabChange} tabs.filter((tab) =>
tabs={ isTabVisible(tab, 'default'),
tabs.filter((tab) => ) as ReadonlyArray<
isTabVisible(tab, 'default'), TabOption<QueryPreviewTabs, unknown, RtkResourceInfo['type']>
) as ReadonlyArray< >
TabOption< }
QueryPreviewTabs, renderTabLabel={this.renderTabLabel}
unknown, />
RtkResourceInfo['type'] {hasNoApis && <NoRtkQueryApi />}
> </div>
>
}
renderTabLabel={this.renderTabLabel}
/>
{hasNoApis && <NoRtkQueryApi />}
</div>
)}
</StyleUtilsContext.Consumer>
); );
} }
return ( return (
<StyleUtilsContext.Consumer> <div css={queryPreviewCss}>
{({ styling }) => { <QueryPreviewHeader
return ( selectedTab={selectedTab}
<div css={queryPreviewCss}> onTabChange={onTabChange}
<QueryPreviewHeader tabs={
selectedTab={selectedTab} tabs.filter((tab) =>
onTabChange={onTabChange} isTabVisible(tab, resInfo.type),
tabs={ ) as ReadonlyArray<
tabs.filter((tab) => TabOption<QueryPreviewTabs, unknown, RtkResourceInfo['type']>
isTabVisible(tab, resInfo.type), >
) as ReadonlyArray< }
TabOption< renderTabLabel={this.renderTabLabel}
QueryPreviewTabs, />
unknown, <TabComponent {...(this.props as QueryPreviewTabProps)} />
RtkResourceInfo['type'] </div>
>
>
}
renderTabLabel={this.renderTabLabel}
/>
<TabComponent {...(this.props as QueryPreviewTabProps)} />
</div>
);
}}
</StyleUtilsContext.Consumer>
); );
} }
} }

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

@ -92,9 +92,7 @@ export function getItemString(
); );
} }
export function createTreeItemLabelRenderer( export function createTreeItemLabelRenderer(): LabelRenderer {
styling: StylingFunction,
): LabelRenderer {
return function labelRenderer([key], nodeType, expanded) { return function labelRenderer([key], nodeType, expanded) {
return ( return (
<span> <span>