Merge pull request #180 from iannbing/development

v1.1.18

README.md

@@ -172,6 +172,7 @@ Note the difference between the state `active` and `focused`. ENTER is equivalen
 | initialOpenNodes    | you can pass an array of node names to set some branches open as initial state                                                           | string[]                                    | -                                  |
 | locale              | you can provide a function that converts `label` into `string`                                                                           | ({label, ...other}) => string               | ({label}) => label                 |
 | hasSearch           | Set to `false` then `children` will not have the prop `search`                                                                           | boolean                                     | true                               |
+| cacheSearch         | Enable/Disable cache on search                                                                           | boolean                                     | true                               |
 | matchSearch         | you can define your own search function                                                                                                  | ({label, searchTerm, ...other}) => boolean  | ({label, searchTerm}) => isVisible |
 | disableKeyboard     | Disable keyboard navigation                                                                                                              | boolean                                     | false                              |
 | children            | a render props that provdes two props: `search`, `items` and `resetOpenNodes`                                                            | (ChildrenProps) => React.ReactNode          | -                                  |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-tree-menu",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "description": "A simple React tree menu component",
   "keywords": [
     "react",

src/TreeMenu/__tests__/__snapshots__/TreeMenu.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`TreeMenu should highlight the active node 1`] = `
 <TreeMenu
   activeKey="releasenotes/desktop-modeler/7"
+  cacheSearch={true}
   data={
     Object {
       "atd": Object {
@@ -268,6 +269,7 @@ exports[`TreeMenu should highlight the active node 1`] = `
 
 exports[`TreeMenu should open specified nodes 1`] = `
 <TreeMenu
+  cacheSearch={true}
   data={
     Object {
       "atd": Object {
@@ -533,6 +535,7 @@ exports[`TreeMenu should open specified nodes 1`] = `
 
 exports[`TreeMenu should render the level-1 nodes by default 1`] = `
 <TreeMenu
+  cacheSearch={true}
   data={
     Object {
       "atd": Object {

src/TreeMenu/__tests__/walk.test.tsx

@@ -1,4 +1,4 @@
-import walk, { TreeNode, TreeNodeObject, TreeNodeInArray } from '../walk';
+import {slowWalk,fastWalk, TreeNode, TreeNodeObject, TreeNodeInArray } from '../walk';
 
 const mockDataInObject: TreeNodeObject = {
   atd: {
@@ -97,13 +97,24 @@ const expectedOutcome = [
   },
 ];
 
-describe('walk', () => {
+describe('slowWalk', () => {
   it('should transpose the data object to a desired shape', () => {
-    const result = walk({ data: mockDataInObject, openNodes: [], searchTerm: '7' });
+    const result = slowWalk({ data: mockDataInObject, openNodes: [], searchTerm: '7' });
     expect(result).toEqual(expectedOutcome);
   });
   it('should transpose the data array to a desired shape', () => {
-    const result = walk({ data: mockDataInArray, openNodes: [], searchTerm: '7' });
+    const result = slowWalk({ data: mockDataInArray, openNodes: [], searchTerm: '7' });
+    expect(result).toEqual(expectedOutcome);
+  });
+});
+
+describe('fastWalk', () => {
+  it('should transpose the data object to a desired shape', () => {
+    const result = fastWalk({ data: mockDataInObject, openNodes: [], searchTerm: '7' });
+    expect(result).toEqual(expectedOutcome);
+  });
+  it('should transpose the data array to a desired shape', () => {
+    const result = fastWalk({ data: mockDataInArray, openNodes: [], searchTerm: '7' });
     expect(result).toEqual(expectedOutcome);
   });
 });

src/TreeMenu/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import debounce from 'tiny-debounce';
 
-import walk, {
+import  {
+  fastWalk,
+  slowWalk,
   TreeNode,
   Item,
   TreeNodeInArray,
@@ -21,6 +23,7 @@ export type TreeMenuProps = {
   openNodes?: string[];
   resetOpenNodesOnDataUpdate?: boolean;
   hasSearch?: boolean;
+  cacheSearch?: boolean;
   onClickItem?: (props: Item) => void;
   debounceTime?: number;
   children?: TreeMenuChildren;
@@ -45,6 +48,7 @@ class TreeMenu extends React.Component<TreeMenuProps, TreeMenuState> {
     debounceTime: 125,
     children: defaultChildren,
     hasSearch: true,
+    cacheSearch:true,
     resetOpenNodesOnDataUpdate: false,
     disableKeyboard: false,
   };
@@ -95,9 +99,9 @@ class TreeMenu extends React.Component<TreeMenuProps, TreeMenuState> {
     const openNodes = this.props.openNodes || this.state.openNodes;
     const activeKey = this.props.activeKey || this.state.activeKey;
     const focusKey = this.props.focusKey || this.state.focusKey;
-
+    const defaultSearch = this.props.cacheSearch ? fastWalk : slowWalk;
     const items: Item[] = data
-      ? walk({ data, openNodes, searchTerm, locale, matchSearch })
+      ? defaultSearch({ data, openNodes, searchTerm, locale, matchSearch })
       : [];
 
     return items.map(item => {

src/TreeMenu/walk.tsx

@@ -123,4 +123,5 @@ const generateBranch = ({
   return isVisible ? [currentItem, ...nextLevelItems] : nextLevelItems;
 };
 
-export default memoize(walk);
+export const fastWalk = memoize(walk);
+export const slowWalk = walk;