reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 22:19:48 +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;
}
const ActionPreviewHeader: FunctionComponent<Props<unknown, Action<unknown>>> =
({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
<div key="previewHeader" {...styling('previewHeader')}>
<div {...styling('tabSelector')}>
{tabs.map((tab) => (
<div
onClick={() => onSelectTab(tab.name)}
key={tab.name}
{...styling(
[
'selectorButton',
tab.name === tabName && 'selectorButtonSelected',
],
tab.name === tabName
)}
const ActionPreviewHeader: FunctionComponent<
Props<unknown, Action<unknown>>
> = ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
<div key="previewHeader" {...styling('previewHeader')}>
<div {...styling('tabSelector')}>
{tabs.map((tab) => (
<div
onClick={() => onSelectTab(tab.name)}
key={tab.name}
{...styling(
[
'selectorButton',
tab.name === tabName && 'selectorButtonSelected',
],
tab.name === tabName
)}
>
{tab.name}
</div>
))}
</div>
<div {...styling('inspectedPath')}>
{inspectedPath.length ? (
<span {...styling('inspectedPathKey')}>
<a
onClick={() => onInspectPath([])}
{...styling('inspectedPathKeyLink')}
>
{tab.name}
</div>
))}
</div>
<div {...styling('inspectedPath')}>
{inspectedPath.length ? (
<span {...styling('inspectedPathKey')}>
{tabName}
</a>
</span>
) : (
tabName
)}
{inspectedPath.map((key, idx) =>
idx === inspectedPath.length - 1 ? (
<span key={key}>{key}</span>
) : (
<span key={key} {...styling('inspectedPathKey')}>
<a
onClick={() => onInspectPath([])}
onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
{...styling('inspectedPathKeyLink')}
>
{tabName}
{key}
</a>
</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>
);
ActionPreviewHeader.propTypes = {
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 { Action } from 'redux';
const DiffTab: FunctionComponent<TabComponentProps<unknown, Action<unknown>>> =
({
delta,
styling,
base16Theme,
invertTheme,
labelRenderer,
isWideLayout,
dataTypeKey,
}) => (
<JSONDiff
{...{
delta,
styling,
base16Theme,
invertTheme,
labelRenderer,
isWideLayout,
dataTypeKey,
}}
/>
);
const DiffTab: FunctionComponent<
TabComponentProps<unknown, Action<unknown>>
> = ({
delta,
styling,
base16Theme,
invertTheme,
labelRenderer,
isWideLayout,
dataTypeKey,
}) => (
<JSONDiff
{...{
delta,
styling,
base16Theme,
invertTheme,
labelRenderer,
isWideLayout,
dataTypeKey,
}}
/>
);
DiffTab.propTypes = {
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> =
(selectorsSource: SelectorsSource<S>) => {
const apiStates = selectApiStates(selectorsSource);
const currentQueryInfo = selectCurrentQueryInfo(selectorsSource);
const selectApiOfCurrentQuery: InspectorSelector<
S,
null | RtkQueryApiState
> = (selectorsSource: SelectorsSource<S>) => {
const apiStates = selectApiStates(selectorsSource);
const currentQueryInfo = selectCurrentQueryInfo(selectorsSource);
if (!apiStates || !currentQueryInfo) {
return null;
}
if (!apiStates || !currentQueryInfo) {
return null;
}
return apiStates[currentQueryInfo.reducerPath] ?? null;
};
return apiStates[currentQueryInfo.reducerPath] ?? null;
};
const selectProvidedOfCurrentQuery: InspectorSelector<
S,

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

@ -11,17 +11,18 @@ interface ContainerFromThemeDataProps {
className?: string;
}
const ContainerFromThemeData: React.FunctionComponent<ContainerFromThemeDataProps> =
({ themeData, className, children }) => {
const theme = useTheme(themeData);
return (
<ThemeProvider theme={theme}>
<MainContainerWrapper className={className}>
{children}
</MainContainerWrapper>
</ThemeProvider>
);
};
const ContainerFromThemeData: React.FunctionComponent<
ContainerFromThemeDataProps
> = ({ themeData, className, children }) => {
const theme = useTheme(themeData);
return (
<ThemeProvider theme={theme}>
<MainContainerWrapper className={className}>
{children}
</MainContainerWrapper>
</ThemeProvider>
);
};
interface Props {
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 } },
autofocus: { 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,
};
const Template: Story<Omit<SegmentedControlProps, 'values'>> = (args) => (
const Template: Story<SegmentedControlProps> = ({ values, ...args }) => (
<Container>
<SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
</Container>

13
yarn.lock
View File

@ -7723,18 +7723,7 @@ __metadata:
languageName: node
linkType: hard
"@types/react@npm:*, @types/react@npm:>=16.14.8, @types/react@npm:>=16.9.11":
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":
"@types/react@npm:*, @types/react@npm:>=16.14.8, @types/react@npm:>=16.9.11, @types/react@npm:^17.0.37":
version: 17.0.37
resolution: "@types/react@npm:17.0.37"
dependencies: