azizali / react-super-treeview Goto Github PK

You can reproduce the issue with the below example code.
https://github.com/react-component/tree/blob/master/examples/dynamic.jsx

onUpdateCb operates already on the copy of this.state.data, so unchecking parents not possible from within callback, as changing this.state.data will be overwritten by the internal - cloned - variable.

Possible fix : supply the whole data tree as 2nd parameter to onUpdateCb

thanks you for sharing this component
i have a problem in styling , i did every thing step by step base on read me page but , actually it dosen't work you can see the picture here

and i got error :

index.js:1446 Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

my code here :
import React, { Component } from 'react' import SuperTreeview `from 'react-super-treeview'
import 'react-super-treeview/dist/style.css'
class ListTree extends Component {
constructor(){
super();
// SET YOUR DATA
this.state = {
data: [
{
id: 1,
name: 'Parent A'
},
{
id: 2,
name: 'Parent B',
isExpanded: true,
isChecked: true,
children: [
{
id: 1,
name: 'Child 1'
},
{
id: 2,
name: 'Child 2'
}
]
}
]
};
}

render(){
    return (
        <SuperTreeview
            data={ this.state.data }
            onUpdateCb={(updatedData) => {
                this.setState({data: updatedData})
            }}
        />
    );
}

}
export default ListTree`

When passing a react object for the name of the node to get special rendering, the component uses it for the hover title. This render [Object object].

It would be nice if it just didn't render this at all if the nodeText was NOT a string. Or, if we could pass our own value for the title hover text.

Example

    {
      name: (
      <>
        {setting.name}
        <OverlayTrigger placement="top" overlay={<Tooltip id={`tooltip-issue`}>{setting.description}</Tooltip>}>
          <FontAwesomeIcon icon={faInfoCircle} className="ml-2" />
        </OverlayTrigger>
      </>
    ),
    id: setting.settingKey,
  }

Code Location

https://github.com/azizali/react-super-treeview/blob/master/src/index.js#L234-L238

  <label
      htmlFor={node.id}
      title={nodeText}
      className="super-treeview-text"
  >

https://github.com/azizali/react-super-treeview/blob/master/src/index.js#L234-L238

Currently label and name would always end up as the same value.

Would like to have something like

<input id="x" name="y">
<label for="x" title="z">z</label>

As name is passed in forms to the server while label is just for the user display.
Name might have restrictions on allowed characters while label doesn't. (have such a case causing issues)

(Might try for a PR)

Hi,

I would like to know :

• if the unique selection option exists ie using radiobox instead of checkboxes

• If the onSelect event can be triggered when a child were selected

Thanks,

I'm trying to select a parent when one of your children is selected, can I do that?

We have been using super tree ( 0.3.3 ) with React 16.13.1 version. We did not have any issues all these days. We recently upgraded React from 16 to 17 and we started seeing compatibility errors with super tree , it looks like super tree might not work with React >=17 version . Would you please help us to resolve below error . Our goal is to make sure the 
Super tree works without any problem with latest version of react JS. It would be helpful if you could provide solution ASAP as we have a blocker upgrading to latest react version in production environment.
The versions of node and react we're trying to work,
node - 14.17.3
react - 17.0.2

The Readme says "Add/remove nodes".

• Removing a node: works by clicking the (x)
• Adding a node: how to do it? There is no explanation, no API.
  If there is no way to add a node then it should be removed from the Readme.

In my render method, I have this:

<SuperTreeView data={myData}/>

The myData variable has sample information taken from the sample demo. It works now.

However, if I were to take this myData json array and put it in a different js file and export it from there and then import it in my react component jsx file, it wont work. Only the top level is displayed. The checkboxes or arrows wont go further.

I am trying to add a feature to open a popout when an item is shiftClicked ..
How am I supposed to do that ?

Thank you for the library.Great work done.
This is based on actual users feedback,
Due to how close the delete icons are to one another, it is difficult and confusing to delete the right node.
You might want to consider implementing a feature that allows for styling the background of a node row when a user mouse hover the node.
A similar feature is yahoo mail list page below:

Thank you.

The browser page hangs or is very slow when there are some (like 10+) nodes with React elements. Here is simplified code:

<SuperTreeview
    data={this.state.data}
    ...
    />
...
this.setState({
  data: [
  {id: 0, name: (
    <span id="item">
        <a href={"http://www.example.com/"}>example</a>
        <span className="mx-1">
          - some time stamp
        </span>
      </span>) }
, ...(repeat above  10+ times)
]}

Loading the page initially should be ok. But if I click on a checkbox or expand a node, the page starts to hang.

When the page is about to hang, from browser debugger I see very deep call stack starting from the _find2. I guess the issue with the usage of _find2 is that it recursively looks into the deep React element tree. This seems an implementation flaw. As this project seems not active recently, please let me know any workaround. Thanks!

How can I change icon of an item ?

Hi Guys,

I see this error when trying to install the package.

'The engine "node" is incompatible with this module. Expected version "^6.7.0". Got "8.16.0"'

Do you think this can be fixed?

Thanks.

Currently list items without a dropdown are moved further to the left.

In : https://github.com/azizali/react-super-treeview/blob/master/src/index.js#L138-L147 could change :

        if (isExpandable(node, depth)) {
            return (
                <div
                    className={`super-treeview-triangle-btn ${className}`}
                    onClick={() => {
                        this.handleExpandToggle(node);
                    }}
                />
            );
+        } else {
+           return (
+               <div
+                   className={`super-treeview-triangle-btn super-treeview-triangle-no-btn`}
+               />
+           );
         }

Then the app dev can style this element by adjusting .super-treeview-triangle-no-btn { width: 10px; height: 10px; } etc. so we get :

instead of :

when we selects child, parents icon should change with square-minus

The following HTML code does not allow the use of two or more components on the page, because when you click on the <label> tag, the browser will use only one checkbox. This is due to the fact that the values of the attributes for and id in the tags <label> and <input> may coincide with the values in another component

First component

<input type="checkbox" name="Product 1" id="1" />
<label for="1" title="Product 1" class="super-treeview-text">Product 1</label>

Second component

<input type="checkbox" name="Customer 1" id="1" />
<label for="1" title="Customer 1" class="super-treeview-text">Customer 1</label>

hi again
I want to use async and I just copy your example code, and I get my data from parent and passing to child with props , but i have memory exceed error , what should i do ?
I'm beginner in react :)

my error :
`
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

`

and my code :
componentDidMount() { var treeData = this.props.treeData if(treeData !== ''){ if(treeData !== []){ var treeDataArray = [] console.log(treeData, 'treeData') treeData.forEach(element => { let newTreeObj = { id: element.pid, name: ${element.title} - ${element.entityTypeName}`
}
treeDataArray.push(newTreeObj)
})

        this.setState({
            data: treeDataArray
        })
        }
    }

}
render() {
return (

        <SuperTreeview
            data={this.state.data}
            onUpdateCb={(updatedData) => {
                this.setState({ data: updatedData });
            }}
            isCheckable={() => (false)}
            isDeletable={() => (false)}
            isExpandable={(node, depth) => (true)}
            onExpandToggleCb={(node, depth) => {

                const asyncNodeId = 3;
                if (node.id === asyncNodeId && node.isExpanded === true) {
                    // This will show the loading sign
                    node.isChildrenLoading = true;

                    setTimeout(() => {
                        const updatedData = cloneDeep(this.state.data);

                        // Remove loading sign
                        updatedData[asyncNodeId - 1].isChildrenLoading = false;

                        // Make sure node is expanded
                        updatedData[asyncNodeId - 1].isExpanded = true;

                        // Set Children data that you potentially
                        // got from an API response
                        updatedData[asyncNodeId - 1].children = [
                            {
                                id: 22,
                                name: 'Child 1'
                            },
                            {
                                id: 23,
                                name: 'Child 2'
                            }
                        ];

                        // Update state
                        this.setState({ data: updatedData })

                    }, 1700);
                }
            }}
            onCheckToggleCb={(nodes) => {
                const checkedNode = nodes[0];

                if (checkedNode.id === 5) {
                    const checkState = nodes[0].isChecked;

                    applyCheckStateTo(nodes);

                    function applyCheckStateTo(nodes) {
                        nodes.forEach((node) => {
                            node.isChecked = checkState
                            if (node.children) {
                                applyCheckStateTo(node.children);
                            }
                        })
                    }
                }
            }}
        />
    );
}

`

cant install this package for the first time. the message says that it was icompatible with module. anyone could fix that?

When react-super-treeview is rendered in a page without a bootstrap.css, the arrows are displayed incorrectly. Maybe remove reliance on bootstrap, or add a note to the readme.

Without bootstrap :

With bootstrap :

The demo code creates this error when isChecked is set to true :

        this.state = {
          data: [
              {
                  id: 1,
                  name: 'Parent A'
              },
              {
                  id: 2,
                  isChecked: true, // <--
                  isExpanded: true,
                  name: 'Parent B'
              }
          ]
        }

React DOM error :

Warning: Failed prop type:
You provided a `checked` prop to a form field without an `onChange` handler.
This will render a read-only field. If the field should be mutable use `defaultChecked`.
Otherwise, set either `onChange` or `readOnly`.

When a node is a node that is not expandable, i think it shouldn't have No data found under the node.
But for now, even a node is not expandable, when clicking this node, it does have No data found.

How can i customize icons here

Hi,

By default the SuperTreeview truncates the text to fit it into the window.
But I want to get the full text shown all the time and add a horizontal scrollbar when the text doesn't fit.
I tried to fix this in the parent container but it seems the SuperTreeview always adapts to the width of the container and truncates the text.
I wonder if there is something that needs to be changed in the SuperTreeview itself.
The CSS is not my strongest area and I'm looking for an advice, what is right way to change this behavior.

Thanks,
Grigor

Maybe i am missing something, but i could not find a way to trigger some actions when a node is selected ( In the following example, when by example "Titre 1" is selected)

Hi Team,
First of all thank you for this lovely Tree component, really an awesome one.

Now come to the point, while doing some development, I am having some thought where can we have key event when we are clicking on checkbox to select tree element so that I can check if user has pressed control(CTRL) key while doing checkbox selection, by this way we can allow only one row selection at a time normally and then when CTRL key selection is done, that time we can select multiple rows.

If this is possible, this component will really be an gamechanger ,10 out of 10.

Eagerly waiting for this functionality, please add that.

onCheckToggleCb={(arrayOfNodes, depth) => {
---------------> here can we get key event or button that has been pressed(if any) while checkbox selection

I try to force the list of nodes to only have one "isChecked" node by calling a function that would update the data from the onCheckToggleCb but to no avail.
here is the code:
<SuperTreeview
....
onCheckToggleCb={(arrayOfNodes, depth)=>{
this.handleCheck(arrayOfNodes);
....
/>

handleCheck(arrayOfNodes) {
    const isChecked = arrayOfNodes[0].isChecked;
    const nodeId = arrayOfNodes[0].id;
    var data = this.state.data;

    // if the node is being unchecked, leave data alone (it will update itself)
    if (isChecked) {
        // if the node is being checked, "wipe out" all the "checked" node in this.state.data (should be only one)
        applyCheckStateTo(data, nodeId);

        // Set the updated data in this.state.data
        this.setState({data: data});
    }

    function applyCheckStateTo(data, nodeId){
        data.forEach((node)=>{
            if (node.id != nodeId)
                node.isChecked = false;
            else
                node.isChecked = true;
            if(node.children){
                applyCheckStateTo(node.children, nodeId);
            }
        })
    }
}

Previous response suggested that is any properties need to be modified, it can be done on the onUpdateCb function, but how do I know (from onUpdateCb) which node to leave check and which node to uncheck as "arrayOfNodes is Not pass to onUpdateCb.

Appreciate any help

By executing the npm run dev:watch and watch, or examples:watch its not seems to run on any port. how do you develop this?

When constructing the initial data, we most likely know if this node should be expandable or not. Having a callback that runs on every child node might not be as performant. Would be good if we could just add isExpandable: false to the data instead :

        this.state.data = [
            {
                id: 1,
                name: 'Parent A',
                isExpandable: false
            }

Hi,
Great library !
Would it be possible to adjust the configuration so that Lodash is tree shaken correctly ?
From what I've noticed the distribution uses require module syntax and the whole of Lodash is imported. 76.1% of the code size is just lodash https://bundlephobia.com/[email protected],

It would be so great if this could be tree shaken.

Thank you!

I'm trying to make some local edits to the library, but I don't see a way to get it running other than installing from npm, which prevents editing.

I've tried forking and installing directly from github, but the resulting directory in node_modules doesn't have a src/ or dist/ directory. I've also tried cloning the repo into my project, running npm install and npm build, and trying to import it from the repo, but it causes some errors in lodash:

./src/components/react-super-treeview/node_modules/lodash/lodash.js
  Line 419:    Unexpected use of 'self'  no-restricted-globals
  Line 419:    Unexpected use of 'self'  no-restricted-globals
  Line 419:    Unexpected use of 'self'  no-restricted-globals
  Line 419:    Unexpected use of 'self'  no-restricted-globals
  Line 17083:  'define' is not defined   no-undef
  Line 17083:  'define' is not defined   no-undef
  Line 17092:   'define' is not defined   no-undef

Any help on this would be appreciated.

I am trying to update the state in onExpandToggleCb but the following error occurs. By the way I am using React and TypeScript

Uncaught (in promise) TypeError: nodeArray.map is not a function
at SuperTreeview.printNodes (main.js:349)
at SuperTreeview.render (main.js:429)
at f._renderValidatedComponentWithoutOwnerOrContext (vendor.js?v=kzIzBEzFA4nRkkVJ6MynsYgXoCVDQLTQSUyt58snC5g:59)
at f._renderValidatedComponent (vendor.js?v=kzIzBEzFA4nRkkVJ6MynsYgXoCVDQLTQSUyt58snC5g:59)
at f._updateRenderedComponent (vendor.js?v=kzIzBEzFA4nRkkVJ6MynsYgXoCVDQLTQSUyt58snC5g:59)
at f._performComponentUpdate (vendor.js?v=kzIzBEzFA4nRkkVJ6MynsYgXoCVDQLTQSUyt58snC5g:59)
at f.updateComponent (vendor.js?v=kzIzBEzFA4nRkkVJ6MynsYgXoCVDQLTQSUyt58snC5g:59)
at f.receiveComponent (vendor.js?v=kzIzBEzFA4nRkkVJ6MynsYgXoCVDQLTQSUyt58snC5g:59)
at Object.receiveComponent (vendor.js?v=kzIzBEzFA4nRkkVJ6MynsYgXoCVDQLTQSUyt58snC5g:12)
at Object.updateChildren (vendor.js?v=kzIzBEzFA4nRkkVJ6MynsYgXoCVDQLTQSUyt58snC5g:59)