Skip to content

Commit

Permalink
Merge pull request #131 from tagyoureit/openNodesExtend
Browse files Browse the repository at this point in the history 
extend resetOpenNodes
  • Loading branch information
@iannbing
iannbing authored Dec 21, 2019
2 parents e2e53db + c82ed1e commit 1415413
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 8 deletions.
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[] | - |
Expand Down Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions src/TreeMenu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@ class TreeMenu extends React.Component<TreeMenuProps, TreeMenuState> {
}
}

resetOpenNodes = (newOpenNodes?: string[]) => {
resetOpenNodes = (newOpenNodes?: string[], activeKey?: string, focusKey?: string) => {
const { initialOpenNodes } = this.props;
const openNodes =
(Array.isArray(newOpenNodes) && newOpenNodes) || initialOpenNodes || [];
this.setState({ openNodes, searchTerm: '' });
this.setState({ openNodes, searchTerm: '', activeKey: activeKey || '', focusKey: focusKey || activeKey || '' });
};

search = (value: string) => {
Expand Down
46 changes: 45 additions & 1 deletion stories/index.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ storiesOf('TreeMenu', module)
}
return <TreeMenuWrapper />;
})
.add('control TreeMenu from its parent', () => {
.add('control TreeMenu only from its parent', () => {
class TreeMenuWrapper extends React.Component {
state = { openNodes: [] };
render() {
Expand Down Expand Up @@ -246,6 +246,50 @@ storiesOf('TreeMenu', module)
}
return <TreeMenuWrapper />;
})
.add('control TreeMenu from both its parent and openNodes', () => {
class TreeMenuWrapper extends React.Component {
state = { openNodes: [] };
childRef = React.createRef();
render() {
return (
<>
<div style={{ padding: '12px', background: 'black' }}>
<button
style={{ margin: '4px' }}
onClick={() =>
this.childRef.current.resetOpenNodes(['reptile'], 'reptile')
}
>
Open Reptile from Ref
</button>
<button
style={{ margin: '4px' }}
onClick={() =>
this.childRef.current.resetOpenNodes(["mammal", "mammal/canidae"], 'mammal/canidae')
}
>
Open/Highlight Canidae
</button>
<button
style={{ margin: '4px' }}
onClick={() =>
this.childRef.current.resetOpenNodes(["reptile", "reptile/squamata", "reptile/squamata/lizard"], "reptile/squamata/lizard", "reptile/squamata")
}
>
Open/Highlight Lizard, focus Squamata
</button>
</div>
<TreeMenu
data={dataInArray}
onClickItem={action(`on click node`)}
ref={this.childRef}
/>
</>
);
}
}
return <TreeMenuWrapper />;
})
.add('translate to Spanish', () => (
<TreeMenu
data={dataInArray}
Expand Down

0 comments on commit 1415413

Please sign in to comment.