diff --git a/.changeset/four-parrots-poke.md b/.changeset/four-parrots-poke.md index ec5bb64d..4ba85d6f 100644 --- a/.changeset/four-parrots-poke.md +++ b/.changeset/four-parrots-poke.md @@ -6,4 +6,4 @@ Remove UNSAFE method from react-json-tree - Replace `shouldExpandNode` with `shouldExpandNodeInitially`. This function is now only called when a node in the tree is first rendered, when before it would update the expanded state of the node if the results of calling `shouldExpandNode` changed between renders. There is no way to replicate the old behavior exactly, but the new behavior is the intended behavior for the use cases within Redux DevTools. Please open an issue if you need a way to programatically control the expanded state of nodes. - Bump the minimum React version from `16.3.0` to `16.8.0` so that `react-json-tree` can use hooks. -- Tightened TypeScript prop types to use `unknown` instead of `any` where possible. +- Tightened TypeScript prop types to use `unknown` instead of `any` where possible and make the key path array `readonly`. diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx b/packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx index 0cc53a5c..fb173664 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx +++ b/packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx @@ -1,6 +1,7 @@ import React, { CSSProperties, MouseEventHandler, PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { JSONTree, StylingValue } from 'react-json-tree'; +import { JSONTree } from 'react-json-tree'; +import type { ShouldExpandNodeInitially, StylingValue } from 'react-json-tree'; import { Base16Theme } from 'redux-devtools-themes'; import { Action } from 'redux'; import LogMonitorEntryAction from './LogMonitorEntryAction'; @@ -149,10 +150,10 @@ export default class LogMonitorEntry< } }; - shouldExpandNodeInitially = ( - keyPath: (string | number)[], - data: any, - level: number + shouldExpandNodeInitially: ShouldExpandNodeInitially = ( + keyPath, + data, + level ) => { return this.props.expandStateRoot && level === 0; }; diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx b/packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx index d1756a80..4b231e4c 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx +++ b/packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx @@ -1,5 +1,6 @@ import React, { Component, CSSProperties, MouseEventHandler } from 'react'; import { JSONTree } from 'react-json-tree'; +import type { ShouldExpandNodeInitially } from 'react-json-tree'; import { Base16Theme } from 'redux-devtools-themes'; import { Action } from 'redux'; @@ -51,10 +52,10 @@ export default class LogMonitorAction< ); } - shouldExpandNodeInitially = ( - keyPath: (string | number)[], - data: any, - level: number + shouldExpandNodeInitially: ShouldExpandNodeInitially = ( + keyPath, + data, + level ) => { return this.props.expandActionRoot && level === 0; };