From 11c51f7ec3900dc230fdb87d2e6c681d111cfede Mon Sep 17 00:00:00 2001 From: Paul Rosset Date: Mon, 31 Dec 2018 18:29:07 +0100 Subject: [PATCH] fix(filter-keys): Filter state by keys,v1 adjust css --- .../redux-devtools-inspector/package.json | 1 + .../src/tabs/StateTab.jsx | 99 ++++++++++++++++--- .../src/utils/createStylingFromTheme.js | 23 +++++ .../src/utils/objectMap.js | 8 ++ yarn.lock | 12 +++ 5 files changed, 131 insertions(+), 12 deletions(-) create mode 100644 packages/redux-devtools-inspector/src/utils/objectMap.js diff --git a/packages/redux-devtools-inspector/package.json b/packages/redux-devtools-inspector/package.json index a814d73e..c2f34391 100644 --- a/packages/redux-devtools-inspector/package.json +++ b/packages/redux-devtools-inspector/package.json @@ -73,6 +73,7 @@ "dependencies": { "babel-runtime": "^6.3.19", "dateformat": "^1.0.12", + "flat": "^4.1.0", "hex-rgba": "^1.0.0", "immutable": "^3.7.6", "javascript-stringify": "^1.1.0", diff --git a/packages/redux-devtools-inspector/src/tabs/StateTab.jsx b/packages/redux-devtools-inspector/src/tabs/StateTab.jsx index c7e62769..9afc3203 100644 --- a/packages/redux-devtools-inspector/src/tabs/StateTab.jsx +++ b/packages/redux-devtools-inspector/src/tabs/StateTab.jsx @@ -1,18 +1,93 @@ -import React from 'react'; +import React, { Component } from 'react'; import JSONTree from 'react-json-tree'; import getItemString from './getItemString'; import getJsonTreeTheme from './getJsonTreeTheme'; +import objectMap from '../utils/objectMap'; +import flatten from 'flat'; -const StateTab = ({ - nextState, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout -}) => - ( getItemString(styling, type, data, dataTypeKey, isWideLayout)} - invertTheme={invertTheme} - hideRoot - />); +class StateTab extends Component { + state = { searchQuery: '', filteredState: this.props.nextState, isShowingFullPath: false } + + onFilteringState = (e) => { + this.setState({ + searchQuery: e.target.value, + }, () => { + const { searchQuery } = this.state + const { nextState } = this.props; + this.setState({ + filteredState: searchQuery.length + ? objectMap( + flatten(nextState), + (value, key) => ({ + value, + key + })) + .filter(item => item.key.indexOf(searchQuery) !== -1) + .reduce((acc, current) => { + if (this.state.isShowingFullPath) { + acc[current.key] = current.value; + return acc + } + if (current.key.includes('.')) { + const pathHash = current.key.split('.'); + /\d/.test(current.key) + ? acc[current.key] = current.value + : acc[pathHash[pathHash.length - 1]] = current.value + return acc + } + acc[current.key] = current.value; + return acc; + }, {}) : nextState + }); + }); + } + + toggleShowFullPath = () => { + this.setState(({ isShowingFullPath }) => ({ + isShowingFullPath: !isShowingFullPath + })); + } + + render() { + const { + styling, + base16Theme, + invertTheme, + labelRenderer, + dataTypeKey, + isWideLayout, + } = this.props + return ( +
+
+ +
+ Full path +
+
+ + getItemString(styling, type, data, dataTypeKey, isWideLayout)} + invertTheme={invertTheme} + hideRoot + /> +
+ ) + } +} export default StateTab; diff --git a/packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js b/packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js index ae1096a9..d555ead1 100644 --- a/packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js +++ b/packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js @@ -221,6 +221,12 @@ const getSheetFromColorMap = map => ({ 'overflow-y': 'auto' }, + stateFilter: { + width: '100%', + display: 'inline-flex', + 'align-items': 'center', + }, + stateDiff: { padding: '5px 0' }, @@ -239,6 +245,23 @@ const getSheetFromColorMap = map => ({ color: map.ERROR_COLOR }, + stateButtonFullPath: { + width: '90px', + 'font-size': '0.7em', + 'margin-right': '3px', + cursor: 'pointer', + padding: '1px 10px', + 'border-style': 'solid', + 'border-width': '1px', + 'border-radius': '3px', + 'background-color': map.TAB_BACK_COLOR, + 'border-color': map.TAB_BORDER_COLOR, + + '&:hover': { + 'background-color': map.TAB_BACK_HOVER_COLOR + }, + }, + inspectedPath: { padding: '6px 0' }, diff --git a/packages/redux-devtools-inspector/src/utils/objectMap.js b/packages/redux-devtools-inspector/src/utils/objectMap.js new file mode 100644 index 00000000..c861b454 --- /dev/null +++ b/packages/redux-devtools-inspector/src/utils/objectMap.js @@ -0,0 +1,8 @@ +function objectMap(object, mapFn) { + return Object.keys(object).reduce(function (result, key) { + result.push(mapFn(object[key], key)) + return result + }, []) +} + +export default objectMap; diff --git a/yarn.lock b/yarn.lock index a74d566b..b78e551c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7631,6 +7631,13 @@ flat-cache@^1.2.1: rimraf "~2.6.2" write "^0.2.1" +flat@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/flat/-/flat-4.1.0.tgz#090bec8b05e39cba309747f1d588f04dbaf98db2" + integrity sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw== + dependencies: + is-buffer "~2.0.3" + flatten@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" @@ -9213,6 +9220,11 @@ is-buffer@^1.1.5: resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w== +is-buffer@~2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725" + integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw== + is-builtin-module@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"