fix(filter-keys): Filter state by keys,v1

adjust css

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",

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
-}) =>
-  (<JSONTree
-    labelRenderer={labelRenderer}
-    theme={getJsonTreeTheme(base16Theme)}
-    data={nextState}
-    getItemString={(type, data) => 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 (
+      <div>
+        <div {...styling('stateFilter')}>
+          <input
+            {...styling('actionListHeaderSearch')}
+            placeholder='filter...'
+            onChange={this.onFilteringState}
+            value={this.state.searchQuery}
+          />
+          <div
+            onClick={this.toggleShowFullPath}
+            {...styling('stateButtonFullPath')}
+            style={{ backgroundColor: this.state.isShowingFullPath
+              ? 'rgba(142, 141, 142, 0.4)'
+              : 'inherit' }}
+          >
+            Full path
+          </div>
+        </div>
+        <JSONTree
+          labelRenderer={labelRenderer}
+          theme={getJsonTreeTheme(base16Theme)}
+          data={this.state.filteredState}
+          getItemString={(type, data) =>
+            getItemString(styling, type, data, dataTypeKey, isWideLayout)}
+          invertTheme={invertTheme}
+          hideRoot
+        />
+      </div>
+    )
+  }
+}
 
 export default StateTab;

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'
   },

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;

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"