From c68f621c8d7671aefa669772504f2fac4bc42151 Mon Sep 17 00:00:00 2001 From: tagyoureit Date: Thu, 12 Dec 2019 10:16:32 -0800 Subject: [PATCH 1/3] extend resetOpenNodes --- src/TreeMenu/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/TreeMenu/index.tsx b/src/TreeMenu/index.tsx index 61e8fea4..65ce15f6 100644 --- a/src/TreeMenu/index.tsx +++ b/src/TreeMenu/index.tsx @@ -63,11 +63,11 @@ class TreeMenu extends React.Component { } } - resetOpenNodes = (newOpenNodes?: string[]) => { + resetOpenNodes = (newOpenNodes?: string[], key?: string) => { const { initialOpenNodes } = this.props; const openNodes = (Array.isArray(newOpenNodes) && newOpenNodes) || initialOpenNodes || []; - this.setState({ openNodes, searchTerm: '' }); + this.setState({ openNodes, searchTerm: '', activeKey: key || '' }); }; search = (value: string) => { From ab5eeba354e692514a396217b5318f97bca95417 Mon Sep 17 00:00:00 2001 From: tagyoureit Date: Thu, 12 Dec 2019 15:53:55 -0800 Subject: [PATCH 2/3] reset focus --- src/TreeMenu/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TreeMenu/index.tsx b/src/TreeMenu/index.tsx index 65ce15f6..a51f6918 100644 --- a/src/TreeMenu/index.tsx +++ b/src/TreeMenu/index.tsx @@ -67,7 +67,7 @@ class TreeMenu extends React.Component { const { initialOpenNodes } = this.props; const openNodes = (Array.isArray(newOpenNodes) && newOpenNodes) || initialOpenNodes || []; - this.setState({ openNodes, searchTerm: '', activeKey: key || '' }); + this.setState({ openNodes, searchTerm: '', activeKey: key || '', focusKey: '' }); }; search = (value: string) => { From c82ed1ea0677d99b45ce4e595f12c42ddb51b018 Mon Sep 17 00:00:00 2001 From: tagyoureit Date: Fri, 20 Dec 2019 08:52:20 -0800 Subject: [PATCH 3/3] openNodes updates/documentation --- README.md | 10 ++++----- src/TreeMenu/index.tsx | 4 ++-- stories/index.stories.js | 46 +++++++++++++++++++++++++++++++++++++++- 3 files changed, 52 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 1c376cc1..cc54d6b3 100644 --- a/README.md +++ b/README.md @@ -162,10 +162,10 @@ Note the difference between the state `active` and `focused`. ENTER is equivalen | props | description | type | default | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------- | | data | Data that defines the structure of the tree. You can nest it as many levels as you want, but note that it might cause performance issue. | {[string]:TreeNode} \| TreeNodeInArray[] | - | -| activeKey | the node matching this key will be active. Note that you need to provide the compplete path (e.g. node-level-1/node-level-2/target-node).| string | '' | -| focusKey | the node matching this key will be focused. Note that you need to provide the compplete path (e.g. node-level-1/node-level-2/target-node)| string | '' | -| initialActiveKey | set initial state of `activeKey`. Note that you need to provide the compplete path (e.g. node-level-1/node-level-2/target-node). | string | - | -| initialFocusKey | set initial state of `focusKey`. Note that you need to provide the compplete path (e.g. node-level-1/node-level-2/target-node). | string | - | +| activeKey | the node matching this key will be active. Note that you need to provide the complete path (e.g. node-level-1/node-level-2/target-node).| string | '' | +| focusKey | the node matching this key will be focused. Note that you need to provide the complete path (e.g. node-level-1/node-level-2/target-node)| string | '' | +| initialActiveKey | set initial state of `activeKey`. Note that you need to provide the complete path (e.g. node-level-1/node-level-2/target-node). | string | - | +| initialFocusKey | set initial state of `focusKey`. Note that you need to provide the complete path (e.g. node-level-1/node-level-2/target-node). | string | - | | onClickItem | A callback function that defines the behavior when user clicks on an node | (Item): void | `console.warn` | | debounceTime | debounce time for searching | number | 125 | | openNodes | you can pass an array of node names to control the open state of certain branches | string[] | - | @@ -212,7 +212,7 @@ Note the difference between the state `active` and `focused`. ENTER is equivalen | search | A function that takes a string to filter the label of the item (only available if `hasSearch` is `true`) | (value: string) => void | - | | searchTerm | the search term that is currently applied (only available if `hasSearch` is `true`) | string | - | | items | An array of `TreeMenuItem` | TreeMenuItem[] | [] | -| resetOpenNodes | A function that resets the `openNodes`, by default it will close all nodes | (openNodes: string[]) => void | - | +| resetOpenNodes | A function that resets the `openNodes`, by default it will close all nodes. `activeKey` is an optional parameter that will highlight the node at the given path. `focusKey` is also an optional parameter that will set the focus (for keyboard control) to the given path. Both activeKey/focusKey must be provided with the complete path (e.g. node-level-1/node-level-2/target-node). activeKey will not highlight any nodes if not provided. focusKey will default to activeKey if not provided. | (openNodes: string[], activeKey?: string, focusKey?: string) => void | [],'','' | ### TreeMenuItem diff --git a/src/TreeMenu/index.tsx b/src/TreeMenu/index.tsx index a51f6918..f237df81 100644 --- a/src/TreeMenu/index.tsx +++ b/src/TreeMenu/index.tsx @@ -63,11 +63,11 @@ class TreeMenu extends React.Component { } } - resetOpenNodes = (newOpenNodes?: string[], key?: string) => { + resetOpenNodes = (newOpenNodes?: string[], activeKey?: string, focusKey?: string) => { const { initialOpenNodes } = this.props; const openNodes = (Array.isArray(newOpenNodes) && newOpenNodes) || initialOpenNodes || []; - this.setState({ openNodes, searchTerm: '', activeKey: key || '', focusKey: '' }); + this.setState({ openNodes, searchTerm: '', activeKey: activeKey || '', focusKey: focusKey || activeKey || '' }); }; search = (value: string) => { diff --git a/stories/index.stories.js b/stories/index.stories.js index 56f816d6..d0e17007 100644 --- a/stories/index.stories.js +++ b/stories/index.stories.js @@ -199,7 +199,7 @@ storiesOf('TreeMenu', module) } return ; }) - .add('control TreeMenu from its parent', () => { + .add('control TreeMenu only from its parent', () => { class TreeMenuWrapper extends React.Component { state = { openNodes: [] }; render() { @@ -246,6 +246,50 @@ storiesOf('TreeMenu', module) } return ; }) + .add('control TreeMenu from both its parent and openNodes', () => { + class TreeMenuWrapper extends React.Component { + state = { openNodes: [] }; + childRef = React.createRef(); + render() { + return ( + <> +
+ + + +
+ + + ); + } + } + return ; + }) .add('translate to Spanish', () => (