mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-25 15:40:06 +03:00
parent
0af1d2b301
commit
4c8a6c928a
|
@ -9,6 +9,20 @@ const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
|
|||
(a): a is 'Sweep' | 'Commit' => !!a
|
||||
);
|
||||
|
||||
const toggleButton = {
|
||||
label: {
|
||||
rtkq(val: boolean) {
|
||||
return val ? 'Show rtk-query actions' : 'Hide rtk-query actions';
|
||||
},
|
||||
noop(val: boolean) {
|
||||
return val ? 'Show noop actions' : 'Hide noop actions';
|
||||
},
|
||||
invertSearch(val: boolean) {
|
||||
return val ? 'Disable inverse search' : 'Activate inverse search';
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
interface Props {
|
||||
styling: StylingFunction;
|
||||
onSearch: (value: string) => void;
|
||||
|
@ -32,7 +46,8 @@ const ActionListHeader: FunctionComponent<Props> = ({
|
|||
actionForm,
|
||||
onActionFormChange,
|
||||
}) => {
|
||||
const { isNoopFilterActive, isRtkQueryFilterActive } = actionForm;
|
||||
const { isNoopFilterActive, isRtkQueryFilterActive, isInvertSearchActive } =
|
||||
actionForm;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -44,9 +59,9 @@ const ActionListHeader: FunctionComponent<Props> = ({
|
|||
/>
|
||||
<div {...styling('toggleButtonWrapper')}>
|
||||
<button
|
||||
title="Toggle visibility of noop actions"
|
||||
aria-label="Toggle visibility of noop actions"
|
||||
aria-pressed={!isNoopFilterActive}
|
||||
title={toggleButton.label.noop(isNoopFilterActive)}
|
||||
aria-label={toggleButton.label.noop(isNoopFilterActive)}
|
||||
aria-pressed={isNoopFilterActive}
|
||||
onClick={() =>
|
||||
onActionFormChange({ isNoopFilterActive: !isNoopFilterActive })
|
||||
}
|
||||
|
@ -56,9 +71,9 @@ const ActionListHeader: FunctionComponent<Props> = ({
|
|||
noop
|
||||
</button>
|
||||
<button
|
||||
title="Toggle visibility of rtk-query actions"
|
||||
aria-label="Toggle visibility of rtk-query actions"
|
||||
aria-pressed={!isRtkQueryFilterActive}
|
||||
title={toggleButton.label.rtkq(isRtkQueryFilterActive)}
|
||||
aria-label={toggleButton.label.rtkq(isRtkQueryFilterActive)}
|
||||
aria-pressed={isRtkQueryFilterActive}
|
||||
onClick={() =>
|
||||
onActionFormChange({
|
||||
isRtkQueryFilterActive: !isRtkQueryFilterActive,
|
||||
|
@ -69,6 +84,20 @@ const ActionListHeader: FunctionComponent<Props> = ({
|
|||
>
|
||||
RTKQ
|
||||
</button>
|
||||
<button
|
||||
title={toggleButton.label.invertSearch(isInvertSearchActive)}
|
||||
aria-label={toggleButton.label.invertSearch(isInvertSearchActive)}
|
||||
aria-pressed={isInvertSearchActive}
|
||||
onClick={() =>
|
||||
onActionFormChange({
|
||||
isInvertSearchActive: !isInvertSearchActive,
|
||||
})
|
||||
}
|
||||
type="button"
|
||||
{...styling('toggleButton')}
|
||||
>
|
||||
!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{!hideMainButtons && (
|
||||
|
@ -115,6 +144,7 @@ ActionListHeader.propTypes = {
|
|||
searchValue: PropTypes.string.isRequired,
|
||||
isNoopFilterActive: PropTypes.bool.isRequired,
|
||||
isRtkQueryFilterActive: PropTypes.bool.isRequired,
|
||||
isInvertSearchActive: PropTypes.bool.isRequired,
|
||||
}).isRequired,
|
||||
onActionFormChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
|
|
@ -8,9 +8,10 @@ const ACTION_FORM_VALUE_CHANGE =
|
|||
'@@redux-devtools-inspector-monitor/ACTION_FORM_VALUE_CHANGE';
|
||||
|
||||
export interface ActionForm {
|
||||
searchValue: string;
|
||||
isNoopFilterActive: boolean;
|
||||
isRtkQueryFilterActive: boolean;
|
||||
readonly searchValue: string;
|
||||
readonly isNoopFilterActive: boolean;
|
||||
readonly isRtkQueryFilterActive: boolean;
|
||||
readonly isInvertSearchActive: boolean;
|
||||
}
|
||||
export interface UpdateMonitorStateAction {
|
||||
type: typeof UPDATE_MONITOR_STATE;
|
||||
|
@ -57,6 +58,7 @@ export const DEFAULT_STATE: DevtoolsInspectorState = {
|
|||
searchValue: '',
|
||||
isNoopFilterActive: false,
|
||||
isRtkQueryFilterActive: false,
|
||||
isInvertSearchActive: false,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
@ -65,6 +65,24 @@ function filterOutRtkQueryActions(
|
|||
return typeof type !== 'string' || !rtkQueryRegex.test(type);
|
||||
});
|
||||
}
|
||||
|
||||
function invertSearchResults(
|
||||
actionIds: number[],
|
||||
filteredActionIds: number[]
|
||||
): number[] {
|
||||
if (
|
||||
actionIds.length === 0 ||
|
||||
actionIds.length === filteredActionIds.length ||
|
||||
filteredActionIds.length === 0
|
||||
) {
|
||||
return actionIds;
|
||||
}
|
||||
|
||||
const filteredSet = new Set(filteredActionIds);
|
||||
|
||||
return actionIds.filter((actionId) => !filteredSet.has(actionId));
|
||||
}
|
||||
|
||||
export interface FilterActionsPayload<S, A extends Action<unknown>> {
|
||||
readonly actionIds: number[];
|
||||
readonly actions: Record<number, PerformAction<A>>;
|
||||
|
@ -94,6 +112,10 @@ function filterActions<S, A extends Action<unknown>>({
|
|||
output = filterOutRtkQueryActions(output, actions, rtkQueryRegex);
|
||||
}
|
||||
|
||||
if (actionForm.isInvertSearchActive) {
|
||||
output = invertSearchResults(actionIds, output);
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user