jakezatecky / react-checkbox-tree Goto Github PK
View Code? Open in Web Editor NEWA simple and elegant checkbox tree for React.
Home Page: https://jakezatecky.github.io/react-checkbox-tree/
License: MIT License
A simple and elegant checkbox tree for React.
Home Page: https://jakezatecky.github.io/react-checkbox-tree/
License: MIT License
Hi,
There are about more the 35000 tree nodes. When ever I try to load, browser throws an error of long script and becomes unresponsive.
Was wondering is there any way we can tackle this issue and make the rendering fast for such a huge data. probably solution would be.
Value is assigned as checkbox id and label's for attribute values, so if value contains spaces, then w3.org validator fails.
Hi, i'm trying to use the component (version 0.6.3) downloaded from NPM and I can not use the disabled and expandDisabled new properties. I have tried searching for them in /lib/index.js with no results obtained.
Is this a bug or should I import the library in some other way?
Currently, the iconset is tied to Font Awesome. Ideally, we would also allow the customization of these icons. Could possibly set this as a property to the tree itself or allow the specification via :before
CSS property.
Does this allow something like a show/hide input field function? For example, if I click a box, a dropdown select or input box could show up next to that item.
Adding a class or other identifier on a leaf node would help, preferably on the "li" element. The use case I have is I'd like to style the labels of the leaves differently but without resorting to complicated css rules. (technically it would be possible but the rule is longer than I'd like).
I had a quick peek at the code and it looks like it's pretty much as easy as checking for if rawChildren is null when rendering the "li" node. Would you accept a pull request?
Nice library! Thanks!
Getting Fatal undefined
error when running build-style
gulp task.
$ uname
Darwin
$ npm version
{ 'react-checkbox-tree': '0.2.0',
npm: '2.15.10',
ares: '1.10.1-DEV',
http_parser: '2.7.0',
icu: '56.1',
modules: '46',
node: '4.5.0',
openssl: '1.0.2h',
uv: '1.9.1',
v8: '4.5.103.37',
zlib: '1.2.8' }
Icon-only buttons are not readily consumable by screen readers. There should be alternative text instead or aria-label
should be used. Click handlers on <span>
elements are also not semantic and <label>
s without targets may also hinder accessibility.
Good afternoon,
I updated this component on my package.json and did the "npm install" like the normal process.
Although the component still doesn't have the type button in there, I can see in your code but in the compiled code (lib folder in the node modules), the type doesn't show up.
There's something wrong in the build process or I need to do something else to update?
(I already cleaned npm caches)
Thanks for the help!
As an alternative to supplying the tree nodes through a JSON object, also allow the React node components to be passed explicitly.
<Tree>
<TreeNode value="_majors" title="Major Carriers">
<TreeNode value="AA" title="American Airlines" />
<TreeNode value="WN" title="Southwest AIrlines" />
</TreeNode>
<TreeNode value="_foreign-carriers" title="Foreign Flag Carriers" />
</Tree>
An node without any children still triggers the onExpand
function, passing in the node's value. Further, an empty button is rendered and the pointer
cursor can be seen when hovering over where the expand icon usually is.
React 16 is out, complete with some awesome new features. However, we will maintain backwards compatibility with React 15 for several months before removing support in the v2.0 release.
Good morning,
Are you planning to do css customization in terms of nodes, like what you have with icons? I think it's a good thing to have in this context, putting classNames on the nodes so you can customise the look of each node.
Thanks for the active development on this component :)
I want all node to be expanded by default. Like rc-tree-select has option "treeDefaultExpandAll".
Had some issues figuring this component out, took quite some time to debug an issue I had with breaking object references due to fetching new data to be displayed in the checkbox tree from an API.
Say there is a checkbox tree such as this:
Only one child node is checked. By clicking the parent node, the remaining child nodes become checked.
If I want the default behaviour to pessimistically toggle the child nodes, it would be nice to have an optional prop to provide such configuration to the root checkbox tree.
With such a configuration option set, if I have two out of three child nodes checked, and I click the parent node, it should deselect all child nodes of that parent node. This would provide the opposite effect of the current optimistic toggling of child nodes.
is there a way to have multiple checkbox trees with different named nodes? i.e.
render() {
const { checked, expanded } = this.state;
return (
<div>
<CheckboxTree
checked={checked}
expanded={expanded}
nodes={nodes}
onCheck={this.onCheck}
onExpand={this.onExpand}
/>
<CheckboxTree
checked={checked}
expanded={expanded}
nodes={peopleNodes}
onCheck={this.onCheck}
onExpand={this.onExpand}
/>
</div>
);
}
}
I have const nodes
and const peopleNodes
in a data file but when I try to render that I get the following error:
Uncaught TypeError: Cannot set property 'expanded' of undefined
how to configure all the nodes to be extended by default.
Currently, the propTypes
are pretty weakly defined. More explicit definitions could potentially save developer time when using the component.
IE 11 has pretty buggy support for flexbox. Auto-prefixing would fix this and potentially any other issues down the line. Makes sense to support the latest two browsers.
Would make data direction much clearer. Currently the component hinges on working against object references passed as props.
So, something like this;
<CheckboxTree
nodes={this.state.nodes}
checked={this.state.checked}
collapsed={this.state.collapsed}
onCollapse={this.onCollapse}
onCheck={this.onCheck} />
where
onCollapse(item) {
// return // uncommenting would disable collapsing functionality entirely
this.setState({
collapsed: [item, ...this.state.collapsed]
})
}
onCheck(item) {
this.setState({
checked: [item, ...this.state.checked]
})
}
Had some issues figuring this component out, took quite some time to debug an issue I had with breaking object references (see #10). I think this is the more idiomatic way of doing reusable components.
@jakezatecky Thoughts? Would you have time to do such a refactor should you agree?
Currently the array passed as prop will not be updated when collapsing nodes.
This is a non-issue if #12 is to be implemented.
The checkbox tree collapses all nodes by default. It would be helpful to specify which nodes will expanded. Possibly though a property or through the node specification.
Good morning,
Using this tree inside a form is triggering the submit action each time that I expand the tree at any level.
There's any way to avoid this issue? Or there's something wrong about my tree configuration?
Thanks for the help.
HI there,
I have been wondering if it's possible to allow the checkboxes to be "uncoupled" from their parents. For instance, I have:
A | -- B | -- B1 | -- B1.1 | -- B1.2 | -- B2 | -- C
I want to select B1 without automatically select B1.1 and B1.2
Is this possible?
Many thanks!
Add defaultChecked
and defaultExpanded
options for uncontrolled usage.
I have a category A with sub categories B, C and D and another category E with sub categories F, G and B. Now when I check sub category B under category A, the sub category B under category E also gets checked!
I see that you export lodash globally and it really messes with my code since I'm using underscore. Is there a way to not set lodash globally?
Had to clone the repo locally and spin up the examples to check it out (I haven't even gotten so far yet due to #5).
Allow individual nodes to specify their icons. This can be particularly useful when you want individual nodes to have different connotations.
Split from #2.
label
is a more semantic way to...label nodes. Thus, we go from:
const nodes = [{ value: 'one', title: 'One' }];
to:
const nodes = [{ value: 'one', label: 'One' }];
The tree suffers from poor performance when checking a parent with many nodes. Since those nodes are not necessarily rendered when collapsed, this should not be the case. Likely will be improved with stateless conversion (#12).
A really minor issue.
Currently, clicking down on a node but not releasing gives no visual cue that the element is active. Only a hover background is applied, and clicking down on a node, but sliding away, does not keep that background color. The current behavior not consistent with user expectations.
Add the ability to specify whether a node can be disabled. This is in addition to the existing disabled
property for the entire checkbox tree.
Can this be used with immutable data? Such as defining the data(nodes, labels, etc.) in another folder/file and bringing it in?
It might be useful to allow for this component to be disabled and in a read-only state. Expanding would potentially still be possible, but changing the check state would not.
The browser defaults make <ol>
and <ul>
elements have a non-zero margin. As a result, since react-checkbox-tree
does not specific any margin on the <ol>
element, the overall component has margin above and below it.
Although the nodes
property is required, the required validation on the array items does not trigger. In addition, although node.title
was deprecated in favor of node.label
, it does not exist in the current node shape.
Hi,
Is it possible to lazy loading child nodes when user clicks on expand icon? If yes, do you have any example for that?
Thanks,
Arun
Hi,
is there a way to add a handler for tree node selection?
thanks.
Arrow navigation, space bar checking, etc.
Disabled property is disabling the whole component. Is there a way to have expand feature enabled and have check box selection disabled?
Hi,
There's a way to remove the icons placed in the tree? I just want to work with the labels on it.
Thanks :)
Currently, node.label
must be a string, or a PropType
warning is thrown. There is not particular reason why the label cannot be a Number
or even another React node.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.