diff --git a/README.md b/README.md index 7ddbe72..ea97de4 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,26 @@ Sets the treeview styling. Defaults to `src/themes/default`. Sets the treeview animations. Set to `false` if you want to turn off animations. See [velocity-react](https://github.com/twitter-fabric/velocity-react) for more details. Defaults to `src/themes/animations`. +#### enableCheckbox +`PropTypes.bool` +Enable / disable checkbox element for each node. Defaults to `false`. + +#### checkboxField +`PropTypes.string` +To set the checkbox field value which need to be used. Defaults to `name`. + +#### handleCheckbox +`PropTypes.func` + +Callback function when a checbox is checked / unchecked. Passes 2 attributes: the data node and it's checked boolean value. + +``` +handleCheckbox(node, isChecked) { + node.checked = isChecked; + this.setState({cursor: node}); +} +``` + #### decorators `PropTypes.object` @@ -157,6 +177,7 @@ const decorators = { loading: '[optional] boolean', decorators: '[optional] object', animations: '[optional] object' + checked: '[optional] boolean' }, ``` #### id @@ -179,3 +200,6 @@ Loading flag. It will populate the treeview with the loading component. Useful w #### decorators / animations Attach specific decorators / animations to a node. Provides the low level functionality to create visuals on a node-by-node basis. These structures are the same as the top level props, described above. + +#### checked +Checked flag. Validate node checkbox should display as checked or not . diff --git a/example/app.js b/example/app.js index 9787955..59c30db 100644 --- a/example/app.js +++ b/example/app.js @@ -49,8 +49,14 @@ class DemoTree extends React.Component { constructor() { super(); - this.state = {data}; + this.state = {data, withCheckbox: false}; this.onToggle = this.onToggle.bind(this); + this.withCheckbox = this.withCheckbox.bind(this); + this.handleCheckbox = this.handleCheckbox.bind(this); + } + + withCheckbox() { + this.setState({ withCheckbox: !this.state.withCheckbox }); } onToggle(node, toggled) { @@ -78,6 +84,11 @@ class DemoTree extends React.Component { this.setState({data: filtered}); } + handleCheckbox(node, isChecked) { + node.checked = isChecked; + this.setState({cursor: node}); + } + render() { const {data: stateData, cursor} = this.state; @@ -95,9 +106,13 @@ class DemoTree extends React.Component {
+ With Checkbox? +
+ onToggle={this.onToggle} + enableCheckbox={this.state.withCheckbox} + handleCheckbox={this.handleCheckbox} />
diff --git a/src/components/node.js b/src/components/node.js index eb1c5ca..9ceb501 100644 --- a/src/components/node.js +++ b/src/components/node.js @@ -22,6 +22,12 @@ class TreeNode extends React.Component { } } + handleCheckbox(flagChecked) { + if (this.props.handleCheckbox) { + this.props.handleCheckbox(this.props.node, !flagChecked); + } + } + animations() { const {animations, node} = this.props; @@ -44,6 +50,20 @@ class TreeNode extends React.Component { return Object.assign({}, decorators, nodeDecorators); } + renderCheckbox(value, style, isChecked) { + if (this.props.enableCheckbox) { + return ( + + ); + } + } + render() { const {style} = this.props; const decorators = this.decorators(); @@ -52,6 +72,7 @@ class TreeNode extends React.Component { return (
  • this.topLevelRef = ref} style={style.base}> + {this.renderCheckbox(this.props.node[this.props.checkboxField], style.checkbox, this.props.node.checked)} {this.renderHeader(decorators, animations)} {this.renderDrawer(decorators, animations)} @@ -109,7 +130,10 @@ class TreeNode extends React.Component { decorators={propDecorators} key={child.id || index} node={child} - style={style}/> + style={style} + enableCheckbox={this.props.enableCheckbox} + checkboxField={this.props.checkboxField} + handleCheckbox={this.props.handleCheckbox}/> )} ); @@ -144,7 +168,10 @@ TreeNode.propTypes = { PropTypes.object, PropTypes.bool ]).isRequired, - onToggle: PropTypes.func + onToggle: PropTypes.func, + enableCheckbox: PropTypes.bool, + checkboxField: PropTypes.string, + handleCheckbox: PropTypes.func }; export default TreeNode; diff --git a/src/components/treebeard.js b/src/components/treebeard.js index 2e15254..59b600f 100644 --- a/src/components/treebeard.js +++ b/src/components/treebeard.js @@ -26,7 +26,10 @@ class TreeBeard extends React.Component { key={node.id || index} node={node} onToggle={onToggle} - style={style.tree.node}/> + style={style.tree.node} + enableCheckbox={this.props.enableCheckbox} + checkboxField={this.props.checkboxField} + handleCheckbox={this.props.handleCheckbox}/> )} ); @@ -44,13 +47,18 @@ TreeBeard.propTypes = { PropTypes.bool ]), onToggle: PropTypes.func, - decorators: PropTypes.object + decorators: PropTypes.object, + enableCheckbox: PropTypes.bool, + checkboxField: PropTypes.string, + handleCheckbox: PropTypes.func }; TreeBeard.defaultProps = { style: defaultTheme, animations: defaultAnimations, - decorators: defaultDecorators + decorators: defaultDecorators, + enableCheckbox: false, + checkboxField: 'name' }; export default TreeBeard; diff --git a/src/themes/default.js b/src/themes/default.js index 2ff0b3f..b5a0cca 100644 --- a/src/themes/default.js +++ b/src/themes/default.js @@ -12,6 +12,11 @@ export default { fontSize: '14px' }, node: { + checkbox: { + float: 'left', + marginRight: '5px', + marginTop: '6px' + }, base: { position: 'relative' }, @@ -19,7 +24,7 @@ export default { cursor: 'pointer', position: 'relative', padding: '0px 5px', - display: 'block' + display: 'inline-block' }, activeLink: { background: '#31363F'