Skip to content

Conversation

@koszti
Copy link
Contributor

@koszti koszti commented May 6, 2018

I needed to have a functionality to call a custom function when the user clicks on the nodes without toggling the checkbox. I found similar requests (#28 , #75 , #68) so raised this PR in the hope it will be useful.

The optional onClick property makes the node label texts to clickable items. When clicking on it, it passes the clicked node to a function. When the onClick property is defined, the checkboxes toggle only when clicking exactly on the checkboxes.

When the onClick function is defined passing the expandOnClick property will expand the clicked node automatically.

clickable-nodes

Example; passing the onClick property to CheckboxTree:

<CheckboxTree
    checked={checked}
    expanded={expanded}
    nodes={nodes}
    onCheck={this.onCheck}
    onClick={this.onClick}
    onExpand={this.onExpand}
/>

The function will be triggered when clicking on the node label text:

onClick(clicked) {
    // do something with the clicked item, e.g. set the component state
    this.setState({ clicked });
}

@koszti koszti changed the title Add onClick property Add onClick and expandOnClick properties May 7, 2018
@jakezatecky jakezatecky merged commit 51cf427 into jakezatecky:master May 8, 2018
@jakezatecky
Copy link
Owner

Thanks for submitting this PR, adding the tests, adding an example, and generally keeping in-line with the project!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants