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

Changes

Browse Source
This commit is contained in:
Nathan Bierema 2021-12-04 11:46:27 -05:00
parent d913fc1104
commit 31136b98be
7 changed files with 93 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx
View File

@ -13,56 +13,57 @@ interface Props<S, A extends Action<unknown>> {
onSelectTab: (tabName: string) => void; onSelectTab: (tabName: string) => void;
} }
const ActionPreviewHeader: FunctionComponent<Props<unknown, Action<unknown>>> = const ActionPreviewHeader: FunctionComponent<
({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => ( Props<unknown, Action<unknown>>
<div key="previewHeader" {...styling('previewHeader')}> > = ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
<div {...styling('tabSelector')}> <div key="previewHeader" {...styling('previewHeader')}>
{tabs.map((tab) => ( <div {...styling('tabSelector')}>
<div {tabs.map((tab) => (
onClick={() => onSelectTab(tab.name)} <div
key={tab.name} onClick={() => onSelectTab(tab.name)}
{...styling( key={tab.name}
[ {...styling(
'selectorButton', [
tab.name === tabName && 'selectorButtonSelected', 'selectorButton',
], tab.name === tabName && 'selectorButtonSelected',
tab.name === tabName ],
)} tab.name === tabName
)}
>
{tab.name}
</div>
))}
</div>
<div {...styling('inspectedPath')}>
{inspectedPath.length ? (
<span {...styling('inspectedPathKey')}>
<a
onClick={() => onInspectPath([])}
{...styling('inspectedPathKeyLink')}
> >
{tab.name} {tabName}
</div> </a>
))} </span>
</div> ) : (
<div {...styling('inspectedPath')}> tabName
{inspectedPath.length ? ( )}
<span {...styling('inspectedPathKey')}> {inspectedPath.map((key, idx) =>
idx === inspectedPath.length - 1 ? (
<span key={key}>{key}</span>
) : (
<span key={key} {...styling('inspectedPathKey')}>
<a <a
onClick={() => onInspectPath([])} onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
{...styling('inspectedPathKeyLink')} {...styling('inspectedPathKeyLink')}
> >
{tabName} {key}
</a> </a>
</span> </span>
) : ( )
tabName )}
)}
{inspectedPath.map((key, idx) =>
idx === inspectedPath.length - 1 ? (
<span key={key}>{key}</span>
) : (
<span key={key} {...styling('inspectedPathKey')}>
<a
onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
{...styling('inspectedPathKeyLink')}
>
{key}
</a>
</span>
)
)}
</div>
</div> </div>
); </div>
);
ActionPreviewHeader.propTypes = { ActionPreviewHeader.propTypes = {
tabs: PropTypes.array.isRequired, tabs: PropTypes.array.isRequired,

45
packages/redux-devtools-inspector-monitor/src/tabs/DiffTab.tsx
View File

@ -4,28 +4,29 @@ import JSONDiff from './JSONDiff';
import { TabComponentProps } from '../ActionPreview'; import { TabComponentProps } from '../ActionPreview';
import { Action } from 'redux'; import { Action } from 'redux';
const DiffTab: FunctionComponent<TabComponentProps<unknown, Action<unknown>>> = const DiffTab: FunctionComponent<
({ TabComponentProps<unknown, Action<unknown>>
delta, > = ({
styling, delta,
base16Theme, styling,
invertTheme, base16Theme,
labelRenderer, invertTheme,
isWideLayout, labelRenderer,
dataTypeKey, isWideLayout,
}) => ( dataTypeKey,
<JSONDiff }) => (
{...{ <JSONDiff
delta, {...{
styling, delta,
base16Theme, styling,
invertTheme, base16Theme,
labelRenderer, invertTheme,
isWideLayout, labelRenderer,
dataTypeKey, isWideLayout,
}} dataTypeKey,
/> }}
); />
);
DiffTab.propTypes = { DiffTab.propTypes = {
delta: PropTypes.any, delta: PropTypes.any,

20
packages/redux-devtools-rtk-query-monitor/src/selectors.ts
View File

@ -200,17 +200,19 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
} }
); );
const selectApiOfCurrentQuery: InspectorSelector<S, null | RtkQueryApiState> = const selectApiOfCurrentQuery: InspectorSelector<
(selectorsSource: SelectorsSource<S>) => { S,
const apiStates = selectApiStates(selectorsSource); null | RtkQueryApiState
const currentQueryInfo = selectCurrentQueryInfo(selectorsSource); > = (selectorsSource: SelectorsSource<S>) => {
const apiStates = selectApiStates(selectorsSource);
const currentQueryInfo = selectCurrentQueryInfo(selectorsSource);
if (!apiStates || !currentQueryInfo) { if (!apiStates || !currentQueryInfo) {
return null; return null;
} }
return apiStates[currentQueryInfo.reducerPath] ?? null; return apiStates[currentQueryInfo.reducerPath] ?? null;
}; };
const selectProvidedOfCurrentQuery: InspectorSelector< const selectProvidedOfCurrentQuery: InspectorSelector<
S, S,

23
packages/redux-devtools-ui/src/Container/index.tsx
View File

@ -11,17 +11,18 @@ interface ContainerFromThemeDataProps {
className?: string; className?: string;
} }
const ContainerFromThemeData: React.FunctionComponent<ContainerFromThemeDataProps> = const ContainerFromThemeData: React.FunctionComponent<
({ themeData, className, children }) => { ContainerFromThemeDataProps
const theme = useTheme(themeData); > = ({ themeData, className, children }) => {
return ( const theme = useTheme(themeData);
<ThemeProvider theme={theme}> return (
<MainContainerWrapper className={className}> <ThemeProvider theme={theme}>
{children} <MainContainerWrapper className={className}>
</MainContainerWrapper> {children}
</ThemeProvider> </MainContainerWrapper>
); </ThemeProvider>
}; );
};
interface Props { interface Props {
children?: React.ReactNode; children?: React.ReactNode;

2
packages/redux-devtools-ui/src/Editor/Editor.stories.tsx
View File

@ -53,4 +53,4 @@ WithTabs.argTypes = {
foldGutter: { control: { disable: true } }, foldGutter: { control: { disable: true } },
autofocus: { control: { disable: true } }, autofocus: { control: { disable: true } },
onChange: { control: { disable: true } }, onChange: { control: { disable: true } },
}; } as any;

2
packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx
View File

@ -17,7 +17,7 @@ export default {
component: SegmentedControl, component: SegmentedControl,
}; };
const Template: Story<Omit<SegmentedControlProps, 'values'>> = (args) => ( const Template: Story<SegmentedControlProps> = ({ values, ...args }) => (
<Container> <Container>
<SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} /> <SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
</Container> </Container>

13
yarn.lock
View File

@ -7723,18 +7723,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@types/react@npm:*, @types/react@npm:>=16.14.8, @types/react@npm:>=16.9.11": "@types/react@npm:*, @types/react@npm:>=16.14.8, @types/react@npm:>=16.9.11, @types/react@npm:^17.0.37":
version: 17.0.36
resolution: "@types/react@npm:17.0.36"
dependencies:
"@types/prop-types": "*"
"@types/scheduler": "*"
csstype: ^3.0.2
checksum: feeaa484d5d7e354ba6830b06342dec6fd1a2ac87f73d21d3d4f2a3d311459de4090330a1e8af7275c8d1e7737b655a7550c8dd3dbc74ccf34ffd3fc824bbd12
languageName: node
linkType: hard
"@types/react@npm:^17.0.37":
version: 17.0.37 version: 17.0.37
resolution: "@types/react@npm:17.0.37" resolution: "@types/react@npm:17.0.37"
dependencies: dependencies: