diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewActions.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewActions.tsx index fc1546cc..8c47782c 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewActions.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewActions.tsx @@ -1,6 +1,7 @@ import { createSelector, Selector } from '@reduxjs/toolkit'; import React, { ReactNode, PureComponent } from 'react'; import { Action, AnyAction } from 'redux'; +import type { KeyPath, ShouldExpandNodeInitially } from 'react-json-tree'; import { QueryPreviewTabs } from '../types'; import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y'; import { emptyRecord, identity } from '../utils/object'; @@ -43,7 +44,7 @@ export class QueryPreviewActions extends PureComponent return output; }); - isLastActionNode = (keyPath: (string | number)[], layer: number): boolean => { + isLastActionNode = (keyPath: KeyPath, layer: number): boolean => { if (layer >= 1) { const len = this.props.actionsOfQuery.length; const actionKey = keyPath[keyPath.length - 1]; @@ -58,11 +59,11 @@ export class QueryPreviewActions extends PureComponent return false; }; - shouldExpandNodeInitially = ( - keyPath: (string | number)[], - value: unknown, - layer: number - ): boolean => { + shouldExpandNodeInitially: ShouldExpandNodeInitially = ( + keyPath, + value, + layer + ) => { if (layer === 1) { return this.isLastActionNode(keyPath, layer); } diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx index f301c0e2..43838619 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx @@ -1,4 +1,5 @@ import React, { ReactNode, PureComponent } from 'react'; +import type { ShouldExpandNodeInitially } from 'react-json-tree'; import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types'; import { StyleUtilsContext } from '../styles/createStylingFromTheme'; import { TreeView, TreeViewProps } from './TreeView'; @@ -17,11 +18,11 @@ const rootProps: TreeViewProps['rootProps'] = { }; export class QueryPreviewApi extends PureComponent { - shouldExpandApiStateNode = ( - keyPath: (string | number)[], - value: unknown, - layer: number - ): boolean => { + shouldExpandApiStateNode: ShouldExpandNodeInitially = ( + keyPath, + value, + layer + ) => { const lastKey = keyPath[keyPath.length - 1]; return layer <= 1 && lastKey !== 'config'; diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx index 6ca37006..42b769ab 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx @@ -1,4 +1,5 @@ import React, { ReactNode, PureComponent } from 'react'; +import type { ShouldExpandNodeInitially } from 'react-json-tree'; import { QueryPreviewTabs, RtkResourceInfo } from '../types'; import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y'; import { TreeView, TreeViewProps } from './TreeView'; @@ -15,11 +16,11 @@ const rootProps: TreeViewProps['rootProps'] = { }; export class QueryPreviewData extends PureComponent { - shouldExpandNodeInitially = ( - keyPath: (string | number)[], - value: unknown, - layer: number - ): boolean => { + shouldExpandNodeInitially: ShouldExpandNodeInitially = ( + keyPath, + value, + layer + ) => { return layer <= 1; }; diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx index 8b0fa723..9270dc96 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx @@ -1,6 +1,7 @@ import { createSelector, Selector } from '@reduxjs/toolkit'; import { QueryStatus } from '@reduxjs/toolkit/dist/query'; import React, { ReactNode, PureComponent } from 'react'; +import type { ShouldExpandNodeInitially } from 'react-json-tree'; import { QueryPreviewTabs, RtkResourceInfo, RTKStatusFlags } from '../types'; import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y'; import { formatMs } from '../utils/formatters'; @@ -35,11 +36,11 @@ export interface QueryPreviewInfoProps { isWideLayout: boolean; } export class QueryPreviewInfo extends PureComponent { - shouldExpandNodeInitially = ( - keyPath: (string | number)[], - value: unknown, - layer: number - ): boolean => { + shouldExpandNodeInitially: ShouldExpandNodeInitially = ( + keyPath, + value, + layer + ) => { const lastKey = keyPath[keyPath.length - 1]; return layer <= 1 && lastKey !== 'query' && lastKey !== 'mutation'; diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx b/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx index fbf37ecc..811fe6de 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from 'react'; import { StylingFunction } from 'react-base16-styling'; +import type { LabelRenderer } from 'react-json-tree'; import { isCollection, isIndexed, isKeyed } from 'immutable'; import isIterable from '../utils/isIterable'; @@ -91,12 +92,10 @@ export function getItemString( ); } -export function createTreeItemLabelRenderer(styling: StylingFunction) { - return function labelRenderer( - [key]: (string | number)[], - nodeType: string, - expanded: boolean - ): ReactNode { +export function createTreeItemLabelRenderer( + styling: StylingFunction +): LabelRenderer { + return function labelRenderer([key], nodeType, expanded) { return ( {key}