primetwig / react-nestable Goto Github PK

When the confirmChange property is provided and returns false for a given item and parent, AND the parent is currently expanded, the item is prohibited from being dragged below the parent altogether, rather than just preventing a parent-child relationship.

To reproduce:

1. Go to the demo (https://primetwig.github.io/react-nestable/dist/example/) and choose "Example with confirmChange".
2. Attempt to drag "Fruit box" below "Box" (without first collapsing "Box").

Expected result: "Fruit box" is allowed to be reordered below "Box". (But not marked as a child of "Box".)
Actual result: "Fruit box" is prevented from moving in any way.

Note that collapsing "Box" DOES allow me to drag "Fruit box" below it.

@primetwig,
congratulations on the beautiful work with this component!

I'm having a problem with a very specific situation
Test the following situation:

const items = [
       {id: 3, text: 'Lisa'},
       {
         id: 0,
         text: 'Andy',
         children: [
           {id: 1, text: 'Harry'},
           {id: 2, text: 'David'}
         ]
       }
     ];

<Nestable items = {items} renderItem = {(item) => item.text} />

Tries to move the record Andy so that it becomes child of record Lisa ...
I can not, but if I move the record Harry to become the child of the Lisa record, then I can add the record Andy as the child of Lisa's record.

With images:
Here I am trying to add the record Andy as a child of the record Lisa ... It does not work.

Now I'll add the Herry record as the child's record Lisa ... OK

Now I can add the record Andy as the child of Lisa record

I am using react-nestable with a tree with maxDepth of 2. When I create a list of with nested items, I can resort items from the bottom by pulling them up, as expected. However, pulling items from the top down does not resort them. See this example video of the behavior:

An example of this behavior is visible in this codesandbox: https://codesandbox.io/s/trusting-feynman-hdqzd

Any thoughts on how to address?

DEMO

If the user moves Mark to the same level as Thomas, the tree is going to allow that move. Although, the maxDepth is defined as 3.

I'm expecting the maxDepth no work the same way as moving single items.

I'm imagining that is missing a check on the length of children being moved. It might be quite expensive operation, but it's the only way I can come up with.

1. Warning: You are manually calling a React.PropTypes validation function for the items prop on Nestable. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

2. You are manually calling a React.PropTypes validation function for the threshold prop on Nestable.

3. You are manually calling a React.PropTypes validation function for the maxDepth prop on Nestable.

4. You are manually calling a React.PropTypes validation function for the childrenProp prop on Nestable.

5. You are manually calling a React.PropTypes validation function for the renderItem prop on Nestable.

6. You are manually calling a React.PropTypes validation function for the onChange prop on Nestable.

Sometimes I need to disable dragging, is there a option for it?

Hi,

I would like to use react-nestable it's working in all the browsers but not on IE11.
Is it possible to use react-nestable on IE11 ?

Regards,
Kishore

render() {
    return (
      <div>
        <Nestable
          collapsed={true}
          maxDepth={3}
          group="yuhu"
          items={this.state.items}
          renderItem={({ item }) => item.name}
          onChange={this.handleOnChangeSort}
          renderCollapseIcon={item => item.isCollapsed && <span>+</span>}
        />
      </div>
    );
  }

how i can show renderCollapseicon the right way??

Is there a way to not automatically include the css file? I would like to create my own styling, and the auto-import of the stylesheet makes this harder than strictly required.

When using renderItem to customize the items, it would be useful if we are aware of the depth of this item. This can for example be used to apply a padding.

renderItem={({ item, depth }) => (
  <div style={{ paddingLeft: 4 * depth }}>{item.name}</div>
)}

I'm trying to implement striped rows (zebra) on my table, I can do it using indexOf on my items' array, but the problem is when a row has expanded, because it fetches the children and changes the array length when it's collapsed, so the rows looks weird. Is there any way to get only visible items on screen? I'm trying using querySelectorAll passing the className "nestable-item" but it doesn't refresh properly

I'm having a play with this in a prototype app I'm putting together. Loving it so far especially vs the other drag and drop nested lists code I've played with.

It's all going very well so far, but for the life of me, I can't get the collapse icons to show.

When I do an inspect on the page, they are sort of there and the collapse functionality works, its just that the icon itself isn't showing. I'm coding locally using Meteor, but I have the same issue in my codesandbox I used as the initial play area.

Here's the sandbox. It's got some crap in it from when I was playing with jquery illegally removing stuff from the DOM to mess with React, so don't worry about the project title or nonsense in there. The bulk of the code is a straight copy from one of your examples.

https://codesandbox.io/s/illegal-react-removal-8i044?fontsize=14

Any thoughts?

Hi George, do you have any planning for TypeScript support?

When I drag an item it goes very far from my mouse pointer. How can I fix this?

Hi,
Would be nice to change the icon of collapse :)

Best wishes

        <Nextable
          items={this.state.items}
          ref={el => (this.refNestable = el)}
          onChange={this.onDragChange}
        />

  onDragChange(items, item) {
    this.setState({
      anystate: anychange
    })
  }

Whenever this.setState is in the onChange function, drag and drop does nothing. The items do not move.

Any ideas?

When calling onChange function on react-nestable I get items and dragItem but targetPath in undefined. Was it moved intentionally ?

I have this code:
`
class Content extends React.Component {

render() {
const items1 = [
{ id: 0, text: 'Andy' },
{
id: 1, text: 'Harry',
children: [{ id: 2, text: 'David' }]
},
{ id: 3, text: 'Lisa' }
];

const items2 = [
  { id: 4, text: 'Andy' },
  {
    id: 5, text: 'Harry',
    children: [{ id: 6, text: 'David' }]
  },
  { id: 7, text: 'Lisa' }
];

const renderItem = ({ item }) => {
  return item.text;
};

return (
  <Container fluid className="Content">
    <Row>
      <Col xs="6">
        <Nestable items={items1} renderItem={renderItem} />
      </Col>
      <Col xs="6">
        <Nestable items={items2} renderItem={renderItem} />
      </Col>
    </Row>
  </Container>
);

}
}
`

And I need to connect both Nestables, in such a way that I can share elements of one in the other.

Can anybody help me?

A minor issue, but an easy fix. Nestable is logging to the console on my app:
Line 358 in Nestable.js:

// has previous sibling and isn't at max depth
console.log({ itemIndex: itemIndex, pathFrom: pathFrom, newDepth: newDepth });

I have a nested list. I have a scenario where user can able to add item before/after of a certain element. So just want to get the current click element and then add new item accordingly.

Also I want inline-edit the item text. If you can give some suggestion.

When I remove an item, the old information remains in the component and does not change.

It would be nice if we could have an alternative style for the confirmChange === false state.

What I would like, is to have the same drag style as an allowed drop, but instead use a different background color. So the list would still show the spacing / drop-location, but highlighted differently. On drop, the item would revert, just as it does now.

I have two queries that i couldn't find in the documentation and any present issues.

1. How do we attach an OnClick to the list items in the component.
   What i want is to create a nest-able list of two levels and open a modal on click an item so as to edit values for items using state.
   I want to know if it's possible by adding OnClick to the items.

Is it possible to change styling of item's placeholder, when dragging?

I am trying to access it by passing what I need to class hierarchy, and this doesn't seem to be working. In example I use styled-components.
& > .nestable > .nestable-list > nestable-item { &::before { background-color: grey; } }

First of all, love the component!

Is it possible to add a disabled prop, which makes the whole list read-only? Thanks!

Hi,
Is there currently a way to allow picking/dropping for individual items?

Use case: a file/folder hierarchy.

• Files can be picked (allowPick: true) but they cannot be dropped on (allowDrop: false).
• Folders can be picked and dropped on (allowPick: true, allowDrop: true).
• Some special folders could also not be pickable, such as root folders (allowPick: false, allowDrop: true).

If this is not currently possible and there is interest in this feature, I can propose a patch.

The component doesn't seem to update when the data changes. Any way to force an update?

Thank you for creating this library! In less than 2 hours I was able to migrate away from an existing jquery-nestable component to this neat react-nestable view 👍

Now I'm facing some issues that I am not able to revert the state inside my onChange() handler when the handler (API call) is failing. I did check the source and tried to use dragRevert() but the state is already gone at this point in time. I have a ugly workaround for it by using ref and passing it a little back and forth to reset the previous state but it feels wrong to me.

While having this in mind I was asking myself why onChange does not support the bool return value the same way as confirmChange?

Does it make sense to add an "auto-revert on onChange fail" feature for this? I'm fine to contribute here.

onChange - Callback which has two parameters: items - new array after position was changed, item - item which has been moved.

I have tried. But something went wrong, I'm not getting the data.

If you could provide some example.

Here some screenshots from Firefox

1. Page not scrolled: http://dl3.joxi.net/drive/2017/06/02/0000/1791/22271/71/61108e804a.png
2. Page scrolled: http://dl3.joxi.net/drive/2017/06/02/0000/1791/22271/71/60e2dc3240.png

Moved item shifts down on the scroll top value in Firefox.
All is well in Chrome.

I'm planning on using this component to allow the item to be dropped 'elsewhere'

Could you expose the drop event to get the coordinates?

react-nestable is perfect for my needs except... If you set your nestable's maxDepth to 2 and you drag an item with a child, you can create a tree with 3 levels. Is there a way to prevent this? or an option to allow/disallow it?

I have 2 items

I drag the bottom one to the top

They both have the same text

This is how I'm using your excellent component

` render(){

const {items} = this.state

const renderItem = ({ item,collapseIcon }) => {

  return <SectionItem
    item={item}
    selectItem={this.onSelectItem.bind(this)}
    updateTitle={this.onUpdateTitle.bind(this)}
    collapseIcon={collapseIcon} />
}

 return(<div className={'sections'}>
  <Nestable
    items={items}
    renderItem={renderItem}
    onChange={this.onChange.bind(this)}
  />

  <div onClick={() =>this.addSection()} className={'add-section'}>
    <i className={'fa fa-plus'}/> <span>MODULE</span>
  </div>
</div>)
}
}

    class SectionItem extends Component{



constructor(props) {
super(props)
 this.state ={
  isExpanded:false,
  item: props.item,
  title: props.item.text || ''}
}

onChangeTitle(event){

const title = event.target.value
  this.setState({title})
 }

 render () {

const {collapseIcon, item, selectItem} = this.props
const {isExpanded,title} = this.state


return (<div className={'section'}>
  <div onClick={()=> selectItem(item)} className={'section-header'}>
    <div className={'draggable'}/>
    {collapseIcon}
    <span>{title}</span>
    <div onClick={()=> this.setState({isExpanded: !isExpanded})} className={'action'}>
      <i className={`fa fa-angle-${isExpanded ? 'up' : 'down'}`}/>
    </div>
  </div>
  {
    isExpanded &&
      <div className={'edit'}>
        <input value={title} onChange={this.onChangeTitle.bind(this)}/> <i className={'fa fa-times'}/>
      </div>
  }
</div>)
 }
}`

Hi,

When I change a item's position, I would like to know where it has moved to.
To be more specific, in the onChange function I would like to see parentItem.

Is this already possible and if so, do you have a small fiddle.

Hello,

Nice package.

Im currently working on a set of groups items. A parent can't drag and set as a child then a child can't drag or set as a parent. So far I can do this using confirmChange the only problem is that if the parent does not have a child you can't drop to item.
confirmChange = ({dragItem, destinationParent}) => {

 if( dragItem.parent == 0 && destinationParent) { return false }

 if( dragItem.parent != 0 && !destinationParent ) { return false}

return true;

}
`
I hope it makes sense :)

CSS and icons not loading with example?

`
import Nestable from 'react-nestable'
render(){

const items = [
  { id: 0, text: 'Andy' },
  {
    id: 1, text: 'Harry',
    children: [{ id: 2, text: 'David' }],
  },
  { id: 3, text: 'Lisa' },
]

const renderItem = ({ item }) => {
  return item.text
}


return(<Nestable
  items={items}
  renderItem={renderItem}
/>)

}`

Hi ! I try to use your package but when i import it with :
import Nestable from 'react-nestable';

I have this error :

I tried to update Yarn, NPM, all of my packages but I still don't understand why I have this error. Do You have an idea ?

PS: I use electron with this boilerplate : https://github.com/electron-react-boilerplate/electron-react-boilerplate

Hey,

I am using your component inside a modal window that has a vertical scrollbar. When I drag an item that is out of view the offset of the item is wrong.

Could include the option to disable Drag of table lines

hey everyone.is there anyone to help me to add rtl direction to this package?

Hello,
This is not issue but in my case I want new index of draggable item after drop.

Thank you

Dear @primetwig, nice library, it's simple and straightforward. I love it.

However, when using it, I got this warning:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Nestable

Cheers!

I'm attempting to use the onChange method to receive the new items array. I already tried a lot of methods but it doesn't seem to work. Any ideas how I should do it? Thanks

`Code:

          const { totalCount, results } = data;
          let nestableObjects = [];
          const reversedResults = results.reverse();

          reversedResults.forEach(res => {
            nestableObjects.push({
              id: res.id,
              name: res.name,
              children: [],
            });
          });

          reversedResults.forEach(obj => {
            if (obj.object !== null) {
              const parentObject = nestableObjects.find(
                p => p.id === obj.object.id,
              );
              if (parentObject !== undefined) {
                const childObject = nestableObjects.find(
                  c => c.id === obj.id,
                );
                parentObject.children.push(childObject);
                nestableObjects = nestableObjects.filter(
                  o => o.id !== obj.id,
                );
              }
            }
          });

          nestableObjects = nestableObjects.reverse();

          return (
            <div>
              <p>{JSON.stringify(nestableObjects)}</p>
              <Nestable
                items={nestableObjects}
                renderItem={renderItem}
                handler={<Handler />}
                renderCollapseIcon={({ isCollapsed }) => (
                  <Collapser isCollapsed={isCollapsed} />
                )}
              />
            </div>
          );`

I am trying to import the package into my app but it keeps giving me this error. Any help would be appreciated.

Hey there, awesome library!

I'm looking to update a list of collapsed IDs each time a user clicks the collapse button, I was thinking of hooking into the renderCollapseIcon for the onClick but then I don't believe I have anyway of defining which IDs are collapsed or not?

This would be great so I could for example, save the IDs in local storage and have user saved state.

Cheers,
Nick

Hey, first of all... great library, very easy to use and customize for the most part!

I was wondering if I could add animations to the list, specifically, when you collapse or expand I'd like it to be smoother.

I get the feeling this is probably a simple thing to do with className prop? But I'm not sure how to go about it.

Thanks!

Hi, I want to add 2 arrays into the children area, but I have tried to implement many kind of solutions but I cannot solve what I expect. Could I do this?

Thanks

It would be nice to be able to specify the name of the id property for items. We are using mongo so our IDs come back at ._id