frontend-collective / react-sortable-tree Goto Github PK

Hi, I have a problem with your plugin when I send the function like rowHeight props. I investigated that problem in https://github.com/fritz-c/react-sortable-tree/blob/master/src/react-sortable-tree.js#L360 when you send this props like estimatedRowSize props.
And in react-virtualized package I found next code:

export default class List extends Component {
  static propTypes = {
    /**
     * Used to estimate the total height of a List before all of its rows have actually been measured.
     * The estimated total height is adjusted as rows are rendered.
     */
    estimatedRowSize: PropTypes.number.isRequired,

    /**
     * Either a fixed row height (number) or a function that returns the height of a row given its index.
     * ({ index: number }): number
     */
    rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,

So rowHeight can be a function but estimatedRowSize don't.
Can you fix this? Looks like you need to send some const value to estimatedRowSize props in react-sortable-tree.js#L360 against rowHeight. For example you can send 64 * rows.length and it will work great

Why?

Is it possible to have draggable full width row?

Dear friends

I have noticed that every node can be moved to anyone.

But I need to make such way that parent node can be moved through the parent nodes(not into child nodes),

And the same for child nodes. Child nodes can be moved at the level of child nodes, no meter in which parent they are in. They can be moved from one parent child level into another parent's child nodes level.

From #8:

Another quick question. With the search function- is it possible that it "Hides" items which don't match the search? This could be a clean way to arrange similar items?

I had the styles working well in IE 9 (which cannot use flexbox) until a short while ago, when something apparently broke it.

Capturing an onMoveNode event so I can send an ajax call. I was expecting { treeData, node, treeIndex, path } but only see treeData and node coming in. It's therefore difficult to determine the parent and I'd rather not have to do another search for a match by an id. Let me know if I am missing something!

Hi, I've a small project where I've a list of items and I need than they can be dragged for build a tree..like

item1
item2
item3
item4

drag to create

item2
  |
    item1
     |
      item2
      item3
        |
        item4
        item1

do you think than this could be possible using react-sortable-tree?

thank you so much

Current implementation does not elegantly handle multiple SortableTrees to be on the same page.

Dragging an item from one list to another causes serious problems, by deleting items in the other tree.

We need to be able to name the SortableTree. That name should be added to the drag type, to prevent items from one tree being dragged to other trees.

I want to set some rules for dropping, for example I want to keep child in same level. I do not need ordering with changing levels. Any way?
Thanks.

Hello,

Thank you for that awesome component. I realize I can maintain the state of my tree if I simply do not update the state on change, but is it possible to disable the dragging of nodes?

When you want to drag & drop a node with children and you hover the children you have a lot of errors on the console

-- 1
------2
-----------3

If you drag 2 and hover 3, it will throw

I made a PR for that: #41

Is there a way to highlight some branch(es) of tree programmaticaly?

Hi!

I have pretty nested structure in the project, simplified version looks something like this:

+block 1
--questions
----question 1
----question 2
----question 3
--answers
----answer 1
----answer 2
----answer 3

and so on.

So would be great to specify drag zone to move questions within its container only (block 1 -> questions). Could you point me where to look in order to add such feature?

Thanks.

Hi @fritz-c,
I met an issue here, my code can work fine on drag, collapse, expand. I set treeData to read this.state.treeData. My issue is when I add/delete a node in treeData and set treeData to use new treeData by call this.setState({treeData: newTreeData}). I can see when render, the state is already changed. But the tree won't update until I collapse the parent and expand again, then the node will add/remove. Did I missed anything here? I tried to call forceUpdate() at setState's callback, but no lucky here.
Thanks.

Excluding Google Chrome, which scrolls elements when you drag child elements inside them, no browsers move the screen when you drag the element near the outer edge.

How do I transfer my component?

nodeContentRenderer(data) {
   return (
      <div>
        nodeContentRenderer
      </div>
    );
 }

Just evaluating this to see if it will work for my situation. Is there any way I can prevent some children from being parents? Also, can I supply metadata beyond title, subtitle, etc. Can I have different types of nodes that render differently?

As far as I can tell, it's impossible to configure the tree to size itself according to its contents. It always requires a fixed height container. That, of course, makes sense when the tree is virtualized.

I would like to get a tree that sizes itself to its contents and when the content overflows the page, then the page scrollbars appear. As I understand it, I need to eviscerate the virtualization functionality. Is there a better way, like a switch or something?

We are using the example code below from your main doc. It seems to throw the following errors. Any ideas what we are missing?

Cheers,
Mike

import SortableTree from 'react-sortable-tree';

export default class BluePrint extends Component {
    constructor(props) {
        super(props);

        this.state = {
            treeData: [{ title: 'Chicken', children: [ { title: 'Egg' } ] }],
        };
    }

    render() {
        return (
            <div style={{ height: 400 }}>
                <SortableTree
                    treeData={this.state.treeData}
                    onChange={treeData => this.setState({ treeData })}
                />
            </div>
        );
    }
}```

ERROR in /Users/mikepriest//react-sortable-tree/dist/umd/react-sortable-tree.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-sortable-tree/dist/umd
@ /Users/mikepriest//react-sortable-tree/dist/umd/react-sortable-tree.js 2:87-103

ERROR in /Users/mikepriest//react-dnd-scrollzone/lib/index.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-dnd-scrollzone/lib
@ /Users/mikepriest//react-dnd-scrollzone/lib/index.js 16:13-29

ERROR in /Users/mikepriest//react-dnd-scrollzone/lib/index.js
Module not found: Error: Cannot resolve module 'react-dom' in /Users/mikepriest/node_modules/react-dnd-scrollzone/lib
@ /Users/mikepriest//react-dnd-scrollzone/lib/index.js 20:16-36

ERROR in /Users/mikepriest//react-dnd/lib/DragDropContext.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-dnd/lib
@ /Users/mikepriest//react-dnd/lib/DragDropContext.js 19:13-29

ERROR in /Users/mikepriest//react-dnd/lib/DragLayer.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-dnd/lib
@ /Users/mikepriest//react-dnd/lib/DragLayer.js 19:13-29

ERROR in /Users/mikepriest//react-dnd/lib/decorateHandler.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-dnd/lib
@ /Users/mikepriest//react-dnd/lib/decorateHandler.js 17:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/ArrowKeyStepper
@ /Users/mikepriest//react-virtualized/dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.js 9:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/ArrowKeyStepper
@ /Users/mikepriest//react-virtualized/dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.js 13:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/AutoSizer/AutoSizer.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/AutoSizer
@ /Users/mikepriest//react-virtualized/dist/commonjs/AutoSizer/AutoSizer.js 9:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/AutoSizer/AutoSizer.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/AutoSizer
@ /Users/mikepriest//react-virtualized/dist/commonjs/AutoSizer/AutoSizer.js 13:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/CellMeasurer/CellMeasurer.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/CellMeasurer
@ /Users/mikepriest//react-virtualized/dist/commonjs/CellMeasurer/CellMeasurer.js 9:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/CellMeasurer/CellMeasurer.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/CellMeasurer
@ /Users/mikepriest//react-virtualized/dist/commonjs/CellMeasurer/CellMeasurer.js 13:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/CellMeasurer/CellMeasurer.js
Module not found: Error: Cannot resolve module 'react-dom' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/CellMeasurer
@ /Users/mikepriest//react-virtualized/dist/commonjs/CellMeasurer/CellMeasurer.js 17:16-36

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Collection/Collection.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Collection
@ /Users/mikepriest//react-virtualized/dist/commonjs/Collection/Collection.js 11:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Collection/Collection.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Collection
@ /Users/mikepriest//react-virtualized/dist/commonjs/Collection/Collection.js 27:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Table/Table.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Table
@ /Users/mikepriest//react-virtualized/dist/commonjs/Table/Table.js 19:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Table/Table.js
Module not found: Error: Cannot resolve module 'react-dom' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Table
@ /Users/mikepriest//react-virtualized/dist/commonjs/Table/Table.js 23:16-36

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Table/Table.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Table
@ /Users/mikepriest//react-virtualized/dist/commonjs/Table/Table.js 25:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Table/defaultHeaderRenderer.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Table
@ /Users/mikepriest//react-virtualized/dist/commonjs/Table/defaultHeaderRenderer.js 8:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Table/defaultRowRenderer.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Table
@ /Users/mikepriest//react-virtualized/dist/commonjs/Table/defaultRowRenderer.js 11:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Table/Column.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Table
@ /Users/mikepriest//react-virtualized/dist/commonjs/Table/Column.js 7:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Table/SortIndicator.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Table
@ /Users/mikepriest//react-virtualized/dist/commonjs/Table/SortIndicator.js 8:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/ColumnSizer/ColumnSizer.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/ColumnSizer
@ /Users/mikepriest//react-virtualized/dist/commonjs/ColumnSizer/ColumnSizer.js 9:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/ColumnSizer/ColumnSizer.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/ColumnSizer
@ /Users/mikepriest//react-virtualized/dist/commonjs/ColumnSizer/ColumnSizer.js 11:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/InfiniteLoader/InfiniteLoader.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/InfiniteLoader
@ /Users/mikepriest//react-virtualized/dist/commonjs/InfiniteLoader/InfiniteLoader.js 13:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/InfiniteLoader/InfiniteLoader.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/InfiniteLoader
@ /Users/mikepriest//react-virtualized/dist/commonjs/InfiniteLoader/InfiniteLoader.js 15:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/List/List.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/List
@ /Users/mikepriest//react-virtualized/dist/commonjs/List/List.js 15:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/List/List.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/List
@ /Users/mikepriest//react-virtualized/dist/commonjs/List/List.js 23:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/MultiGrid/MultiGrid.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/MultiGrid
@ /Users/mikepriest//react-virtualized/dist/commonjs/MultiGrid/MultiGrid.js 11:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/MultiGrid/MultiGrid.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/MultiGrid
@ /Users/mikepriest//react-virtualized/dist/commonjs/MultiGrid/MultiGrid.js 15:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Grid/Grid.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Grid
@ /Users/mikepriest//react-virtualized/dist/commonjs/Grid/Grid.js 12:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Grid/Grid.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Grid
@ /Users/mikepriest//react-virtualized/dist/commonjs/Grid/Grid.js 40:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/ScrollSync/ScrollSync.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/ScrollSync
@ /Users/mikepriest//react-virtualized/dist/commonjs/ScrollSync/ScrollSync.js 9:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/ScrollSync/ScrollSync.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/ScrollSync
@ /Users/mikepriest//react-virtualized/dist/commonjs/ScrollSync/ScrollSync.js 11:33-72

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/WindowScroller/WindowScroller.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/WindowScroller
@ /Users/mikepriest//react-virtualized/dist/commonjs/WindowScroller/WindowScroller.js 9:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/WindowScroller/WindowScroller.js
Module not found: Error: Cannot resolve module 'react-dom' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/WindowScroller
@ /Users/mikepriest//react-virtualized/dist/commonjs/WindowScroller/WindowScroller.js 11:16-36

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/WindowScroller/WindowScroller.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/WindowScroller
@ /Users/mikepriest//react-virtualized/dist/commonjs/WindowScroller/WindowScroller.js 15:33-72

ERROR in /Users/mikepriest//react-dnd/lib/wrapConnectorHooks.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-dnd/lib
@ /Users/mikepriest//react-dnd/lib/wrapConnectorHooks.js 12:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Collection/CollectionView.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Collection
@ /Users/mikepriest//react-virtualized/dist/commonjs/Collection/CollectionView.js 11:13-29

ERROR in /Users/mikepriest//react-virtualized/dist/commonjs/Collection/CollectionView.js
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/mikepriest/node_modules/react-virtualized/dist/commonjs/Collection
@ /Users/mikepriest//react-virtualized/dist/commonjs/Collection/CollectionView.js 27:33-72

ERROR in /Users/mikepriest//react-dnd/lib/utils/cloneWithRef.js
Module not found: Error: Cannot resolve module 'react' in /Users/mikepriest/node_modules/react-dnd/lib/utils
@ /Users/mikepriest//react-dnd/lib/utils/cloneWithRef.js 12:13-29

Hi,
First of all I really like your implemented stuff, it saves my lot of time. So thanks for implementing this sortable tree, but it would be more better if you can make the documentation more descriptive.
Because I am having issue while using the Data Helper Functions. I am trying to use the addNodeUnderParent(treeData, newNode, parentKey) but dont know how to get the parentKey.

Also I did not the use of getNodeKey parameter, so can you please explain these thing with some example.

Actually I am pretty new for React. So please help me to get out of it.

@fritz-c can you please look into it.

Thanks

I wanna render in page without fixed height and use main page scrolling.

<div style={{ height: 50 }}>
                    <SortableTree
                        treeData={treeData}
                        onChange={this.updateTreeData}
                        onMoveNode={({ node, treeIndex, path }) =>
                                console.debug( // eslint-disable-line no-console
                                    'node:', node,
                                    'treeIndex:', treeIndex,
                                    'path:', path,
                                )
                            }
                        rowHeight={20}
                        maxDepth={2}
                    />
                </div>

If i remove <div style={{ height: 50 }}> -> nothing visible.
Why?

Is there any way to access the path of a node in the onMoveNode callback? My specific use case is when a node is moved I want to know its new parent and not sure of the easiest way to do this with the existing API. I could traverse the treeData manually to find the node's new parent but I was hoping with the existing API this can be done easily - just having trouble figuring out how.

Appreciate any help and thanks so much for this excellent component.

EDIT: it is very easy to just traverse the tree and find the parent, so I would just remove this issue - I can't seem to figure out how though...Perhaps only @fritz-c can do so. Sorry about this.

Tested with Chromium version 53.0.2785.143 (From ubuntu 16.04).
Tested also with Chrome and Firefox on the same computer and works there OK.

I want to use react-sortable-tree with list in material-ui, so I think it's best to use props reactVirtualizedListProps. But when I mostly copied code here ,and put it into my page, it failed(No error happened in console but no effect either, the code I copied is ok if I just rendered it somewhere in that page).
Sorry my code is mess, I don't think it's great to put it here :(.
And an example using reactVirtualizedListProps will help me a lot, thanks.

Hi, this is a great component.

When using Bootstrap v3.3.7 the style of the tree seems to break:

Hi,

I've had a poke around the repo, and wasn't able to determine how possible this might be.

I feel it would be incredibly useful if it was possible to click multiple nodes at once and move them. It wouldn't matter which nodes they came from, as they'd all transport into the same "level".

I created a screenshot to help explain.

Is this feasible?

Thanks

This is a great package. I'm seeking feedback from the community how integrate with a GraphQL server.

I can get around this by using spans, but this strange bug should definitely be looked into.

Maybe not a bug but an idea.
I'm looking at https://github.com/fritz-c/react-sortable-tree/blob/master/src/utils/tree-data-utils.js
Most methods that manipulate the tree return associative arrays.
Except these:
removeNodeAtPath - {Object} changedTreeData
getNodeAtPath
getTreeFromFlatData {Object[]} treeData
insertNode - returns associative array but it is not documented

I was trying to set the state after manipulation but insertNode and removeNodeAtPath return different object types. So it took a while to realize it should be:
setState(insertNode(...))
and
setState({treeData:removeNodeAtPath(...)})
Thanks.

Hi,

is it possible to have 2 trees, one being a source (for example 40 non nested "nodes"), and other being destination where source nodes could be dragged into and added (copy) dynamically? Is this something possible by default or needs additional implementation?

Regards

This is a great component ^_^.

Is there a way to get notified when a node is selected by a mouse click and highlight the selected node?

Sometimes I need a single-root tree, likes https://github.com/pqx/react-ui-tree/, I tried in react-sortable-tree but no idea. I can ignore it in onChange, but isn't good experience. How about support it?

The component needs an api to control where certain nodes can be dropped in the tree.

Hi everyone,

i start using React Sortable Tree and i get error "Cannot have two HTML5 backends at the same time.".. I am using it with React DnD so i think that both components use react-dnd-html5-backend so there is a problem. Does someone know how to solve it? Thanks.

It's nice to have a function like this

shouldMoveNode = (nextNode, prevNode) => {
    return nextNode.node.is_enable ? true : false;
};

Getting reference error when trying to use react-sortable-tree with universal app.

Hey fritz-c

Thanks very much for the great module! I had been looking for something like this for long.

I wanted to check with you if you mind exporting ReactSortableTree.

This is needed to get around react-dnd/react-dnd#186. In my case I'm using ctxhou/react-tabtab on the same page along with react-sortable-tree, and it throws this error.

If ReactSortableTree is exported I think I can pass in a custom DragDropContext as described in readme of react-tabtab .

Adding a node to the treeData outside of the component and modifying state. I'd like it to trigger a event to know that data has changed. It takes expanding/collapsing or moving an item for the UI to reflect this.

Ideally this should happen when state changes (treeData). Am I doing something dumb? Do I have to explicitly trigger an event?

Any help appreciated, thanks.

Hi @fritz-c ,
Nice package. I am trying to get a destination index for the node in onMoveNode function, as readme says, I can get a treeData, an index, a path, and the node it self as parameters when I call onMoveNode function. My problem is I try to get the node position I moved to, for example treeData[0].children[1].children[3] is the new position of the node, so I want something like [0, 1, 3] to let me find the node in the new treeData. The path in the onMoveNode is including tree expanded node like [8, 13, 20]. Is there anyway I can omitting both hidden nodes and expanded nodes to create path?

Thank you!

Hi Fritz,

This looks fantastic! This doesn't seem to work with touch devices (I'm using Safari and Chrome on mobile).

Is there a way to do this or is this something that may happen in the future? Thanks

Hi,

I am trying to user a different 'identified' on my JSON to sort and view my data.

My data has a key taglevel which I would like to user as substitute for path 0, 1. The logic would have to create an integer to make it fit without your framework.

I've had a long look in your basicExample/app.js and but my attempts have been unsuccessful.

For the case of my data- the position (vertically) is not important. Only the indentation is important (ie how far 'in').

Does that make sense?

Can you give me some guidance?

{
        "title": "Into the Wild",
        "tag": [
            {
                "name": "Movie",
                "taglevel": 1,
                "id": 1
            },
            {
                "name": "Adventure",
                "taglevel": 2,
                "id": 30
            },
            {
                "name": "Book",
                "taglevel": 1,
                "id": 2
            }
        ],
        "info": []
    },
    {
        "title": "Karate Kid",
        "tag": [
            {
                "name": "Movie",
                "taglevel": 1,
                "id": 1
            },
            {
                "name": "Blockbuster",
                "taglevel": 2,
                "id": 29
            },
            {
                "name": "Kids",
                "taglevel": 3,
                "id": 4
            }
        ],
        "info": []
    },
        {
        "title": "The Alchemist",
        "tag": [
            {
                "name": "Book",
                "taglevel": 1,
                "id": 2
            },
            {
                "name": "Adventure",
                "taglevel": 2,
                "id": 30
            },
            {
                "name": "Classic",
                "taglevel": 2,
                "id": 4
            },
            {
                "name": "Words",
                "taglevel": 4,
                "id": 4
            }
        ],
        "info": []
    }

Would it theoretically possible to port this to React Native?
What would be the steps?
Thank you.

I have a question on the peerDependencies definition in the package.json file. I find that the dependency version is specified as a single version rather than a range. https://github.com/fritz-c/react-sortable-tree/blob/0953ffa206cf3cb9bdc4e632bfd1178d3fe4711b/package.json#L40 For example, "react": "^15.3.0",. I think this should be modified to allow more flexibility in the versions that a developer may use.

I try remove my Node, how I can get path in my case?

export default class TreeVera extends Component {
    constructor(props) {
        super(props);
        this.updateTreeData = this.updateTreeData.bind(this);
        this.removeNode = this.removeNode.bind(this);
        this.state = {
            treeData: [{
                title: (<div>
                        <input />
                        <button onClick={this.removeNode}>remove</button>
                    </div>),
            }]
        };
    }
    removeNode(e){
        this.setState({
               treeData: removeNodeAtPath({
                   treeData: this.state.treeData,
                   path: ????,
                   getNodeKey: ({node: TreeNode, treeIndex: number}) => {
                       console.log(number);
                       return number;
                   },
                   ignoreCollapsed: false,
               })
        })
    }
    updateTreeData(treeData) {
        this.setState({ treeData });
    }
    render() {
        return (
            <div style={{ height: 600 }}>
                <SortableTree
                    treeData={this.state.treeData}
                    onChange={this.updateTreeData}
                />
            </div>
        );
    }
}

Hi,
I am having the Tree Data in this format. (eg. {name: ..., users: [ ... ]})

[ { 'id': '1', 'name': 'Value1', 'users': [ { 'name': 'Value2',  }, { 'name': 'Value3', 'users': [ { 'name': 'Value4',  } ] }, { 'name': 'Value4', 'users': [ { 'name': 'Value5',  } ] }, { 'name': 'Value5',  }, { 'name': 'Value6', 'users': [ { 'name': 'Value7',  } ] } ] } ]

What is the best way to convert it into required TreeData format?
(like: {title: ..., children:[ ... ]}))

Can we use nodeRenderer to achieve this?

Thanks
Anil

affected by this issue:

gaearon/react-hot-loader#417

> npm start

> [email protected] start /Users/rngadam/EIC/src/react-sortable-tree
> cross-env NODE_ENV=development webpack-dev-server --hot --inline --config webpack.config.dev.babel.js

 http://localhost:3001/
webpack result is served from /
content is served from build
webpack: wait until bundle finished: /
webpack: wait until bundle finished: /
Time: 6296ms

ERROR in ./src/examples/basicExample/app.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/rngadam/EIC/src/react-sortable-tree/src/examples/basicExample
 @ ./src/examples/basicExample/app.js 1:318-349
[...many more similar errors...] 

I tried updating to react-hot-loader 3.x but was not successful.

WORKAROUND: modify node_modules/react-hot-loader/index.js from:

'ReactMount = require("react/lib/ReactMount"),'

to

'ReactMount = require("react-dom/lib/ReactMount"),'

Hi, thank you for your plugin, it looks really cool.

One thing I noticed is, it puts a lot of styles as inline styles and thus I'm unable to style the tree to my needs. I want to hide lines and change the height of the row, but with the inline styles in place, I'm unable to do so.

Do you have any recommendation?

Thank you,
Ondrej

Hi I would like to ask if I can if I can disable the moving node functionality for a tree. Also for button how can I add one, as the api does not state clearly how to do so.