From 46338caa1f9281f4b3865bf1e1f88495fc0af005 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20Proch=C3=A1zka?= Date: Thu, 14 Nov 2019 13:34:28 +0100 Subject: [PATCH 1/4] pass dataId callback on click on tree span element --- readme.md | 4 +++- src/index.js | 10 ++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 7f255e9..09804bd 100644 --- a/readme.md +++ b/readme.md @@ -17,11 +17,13 @@ Demo: https://codesandbox.io/embed/rrw7mrknyp * `visible`, optional: default visible state * `onClick`, optional: click events on the eye * `springConfig`, optional: react-spring animation config +* `onItemClick`, optional: click events on the tree span item (pass dataId props as parameter) +* `dataId`, optional: custom identifier of tree item ```jsx import Tree from 'react-animated-tree' - + console.log(dataId)}> diff --git a/src/index.js b/src/index.js index dfd08cf..625381c 100644 --- a/src/index.js +++ b/src/index.js @@ -9,7 +9,7 @@ const styles = { padding: '4px 0px 0px 0px', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - overflowX: 'hidden', + overflow: 'hidden', verticalAlign: 'middle', }, toggle: { @@ -47,6 +47,8 @@ export default class Tree extends React.PureComponent { canHide: PropTypes.bool, content: PropTypes.node, springConfig: PropTypes.func, + onItemClick: PropTypes.func, + dataId: PropTypes.string, } constructor(props) { @@ -65,6 +67,10 @@ export default class Tree extends React.PureComponent { ) } + onItemClick = event => { + this.props.onItemClick && this.props.onItemClick(event.target.dataset.id); + } + componentWillReceiveProps(props) { this.setState(state => { return ['open', 'visible'].reduce( @@ -97,7 +103,7 @@ export default class Tree extends React.PureComponent { onClick={this.toggleVisibility} /> )} - {content} + {content} Date: Thu, 14 Nov 2019 14:40:37 +0100 Subject: [PATCH 2/4] fix accessing this.props value --- src/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 625381c..7c019a0 100644 --- a/src/index.js +++ b/src/index.js @@ -68,7 +68,7 @@ export default class Tree extends React.PureComponent { } onItemClick = event => { - this.props.onItemClick && this.props.onItemClick(event.target.dataset.id); + this.props.onItemClick && this.props.onItemClick(event.target.dataset.id) } componentWillReceiveProps(props) { @@ -103,7 +103,12 @@ export default class Tree extends React.PureComponent { onClick={this.toggleVisibility} /> )} - {content} + + {content} + {children} From 89b0932d0221a735f3e20b50e161dc18b3fcd1f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20Proch=C3=A1zka?= Date: Mon, 18 Nov 2019 09:25:42 +0100 Subject: [PATCH 3/4] implement onItemToggle and change dataId to itemId with better implementation --- readme.md | 19 ++++++++++--------- src/index.js | 29 ++++++++++++++++++----------- 2 files changed, 28 insertions(+), 20 deletions(-) diff --git a/readme.md b/readme.md index 09804bd..e75d1d4 100644 --- a/readme.md +++ b/readme.md @@ -10,15 +10,16 @@ A simple, configurable tree view control for React. Demo: https://codesandbox.io/embed/rrw7mrknyp -* `content`, Name of the node (string or React-component) -* `type`, optional description, good for displaying icons, too (string or React-component) -* `open`, optional: default open state -* `canHide`, optional: when set true displays an eye icon -* `visible`, optional: default visible state -* `onClick`, optional: click events on the eye -* `springConfig`, optional: react-spring animation config -* `onItemClick`, optional: click events on the tree span item (pass dataId props as parameter) -* `dataId`, optional: custom identifier of tree item +- `content`, Name of the node (string or React-component) +- `type`, optional description, good for displaying icons, too (string or React-component) +- `open`, optional: default open state +- `canHide`, optional: when set true displays an eye icon +- `visible`, optional: default visible state +- `onClick`, optional: click events on the eye +- `springConfig`, optional: react-spring animation config +- `onItemClick`, optional: click events on the tree span item (pass itemId props as parameter) +- `onItemToggle`, optional: click events on the toggle icon, parameters: itemId, isOpen. +- `itemId`, optional: custom identifier of tree item ```jsx import Tree from 'react-animated-tree' diff --git a/src/index.js b/src/index.js index 7c019a0..6e6e1c1 100644 --- a/src/index.js +++ b/src/index.js @@ -46,19 +46,29 @@ export default class Tree extends React.PureComponent { visible: PropTypes.bool, canHide: PropTypes.bool, content: PropTypes.node, + itemId: PropTypes.string, springConfig: PropTypes.func, onItemClick: PropTypes.func, - dataId: PropTypes.string, + onItemToggle: PropTypes.func, } constructor(props) { super() - this.state = { open: props.open, visible: props.visible, immediate: false } + this.state = { + open: props.open, + visible: props.visible, + immediate: false, + id: props.itemId, + } } - toggle = () => - this.props.children && - this.setState(state => ({ open: !state.open, immediate: false })) + toggle = () => { + if (typeof this.props.children !== 'undefined') { + this.props.onItemToggle && + this.props.onItemToggle(this.state.id, !this.state.open) + this.setState(state => ({ open: !state.open, immediate: false })) + } + } toggleVisibility = () => { this.setState( @@ -67,8 +77,8 @@ export default class Tree extends React.PureComponent { ) } - onItemClick = event => { - this.props.onItemClick && this.props.onItemClick(event.target.dataset.id) + onItemClick = () => { + this.props.onItemClick && this.props.onItemClick(this.state.id) } componentWillReceiveProps(props) { @@ -103,10 +113,7 @@ export default class Tree extends React.PureComponent { onClick={this.toggleVisibility} /> )} - + {content} Date: Mon, 2 Dec 2019 13:25:29 +0100 Subject: [PATCH 4/4] Fix typo in prop name --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index e75d1d4..7b21c43 100644 --- a/readme.md +++ b/readme.md @@ -24,7 +24,7 @@ Demo: https://codesandbox.io/embed/rrw7mrknyp ```jsx import Tree from 'react-animated-tree' - console.log(dataId)}> + console.log(itemId)}>