jakezatecky / react-checkbox-tree Goto Github PK

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?

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,

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.

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 :)

Arrow navigation, space bar checking, etc.

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!

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.

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

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.

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!

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.

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.

Why do I see so buttons?

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.

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.

Add defaultChecked and defaultExpanded options for uncontrolled usage.

Allow individual nodes to specify their icons. This can be particularly useful when you want individual nodes to have different connotations.

Split from #2.

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!

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>

Currently the array passed as prop will not be updated when collapsing nodes.

This is a non-issue if #12 is to be implemented.

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' }];

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

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.

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?

I saw 2 checkbox box, you can see from picture, how can i fix it ?

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).

I want all node to be expanded by default. Like rc-tree-select has option "treeDefaultExpandAll".

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.

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.

Say you have made a selection like so;

Shouldn't All be the only item in the checked array in this scenario? Cause right now, every children will populate the checked array, and the root node will not be included. Or am I wrong here?

Can this be used with immutable data? Such as defining the data(nodes, labels, etc.) in another folder/file and bringing it in?

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.

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?

Disabled property is disabling the whole component. Is there a way to have expand feature enabled and have check box selection disabled?

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.

1. virtualization

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.

Value is assigned as checkbox id and label's for attribute values, so if value contains spaces, then w3.org validator fails.

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.

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!

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.

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, 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.

how to configure all the nodes to be extended by default.

Hi,

is there a way to add a handler for tree node selection?

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' }

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).