deanmcpherson / react-native-sortable-listview

Drag drop capable wrapper of ListView for React Native
MIT License
917 stars 235 forks source link

Impossible to past element on certain position #129

Open EJohnF opened 6 years ago

EJohnF commented 6 years ago

If order element like: 4-3-1-2 And try to drag element 1 and past to position between 4 and 3 - the displaying doesn't work properly. See: https://drive.google.com/file/d/1RUCMVS6Yb9jaIHc-JlyABqG0xKZxK-iN/view?usp=sharing

It happens not always, but very often.

EJohnF commented 6 years ago

btw, I was trying to fix it. But don't understand for what do you insert one extra element with height 0.01 in the list?

EJohnF commented 6 years ago
nihgwu commented 6 years ago

Thanks for you contribution, I tried you code in the example but introduces wrong behavior, when I activate a row but don't drag it, there is no placeholder for it anymore

As for the 0.01 question, I didn't write that, but I think that's because the the current wrong behavior when remove a view with LayoutAnimation, that's a known issue from react native, so we have to avoid remove it directly, or you can check the commit history, I believe that was introduced on purpose

EJohnF commented 6 years ago

Ah yes, I re-checked and see that after activations row immidiatly goes for a second to a new position, and after dragging it becomes on the right

nihgwu commented 6 years ago

As for your problem, perhaps there is something wrong with the overlapping check

EJohnF commented 6 years ago

yes, that was my first idea - I added a logs for that part - and it seems it works fine

and at the same time, this.props.hovering in Row render method - wasn't updated properly

EJohnF commented 6 years ago

to be more precise - it is always not possible to past element before the first element (when it's in any position)

EJohnF commented 6 years ago

then, I can suggest this way to solve the problem (while I still don't know the actual reason for the problem)

let hoveringIndex = this.order[this.state.hovering] || this.state.hovering
if (this.order[this.state.hovering] === 0) {
   hoveringIndex = this.order[this.state.hovering]
}

and now it looks like ok: https://drive.google.com/file/d/177nmOEkRrZ2ZhUZsIONNyVKRQehSA5L-/view?usp=sharing

nihgwu commented 6 years ago

I can't reproduce you problem, but I guess that's related to you data, you are using number as keys? Then we should

let hoveringIndex = this.order[this.state.hovering]
if (hoveringIndex === undefined) {
   hoveringIndex = this.state.hovering
}

but I think we should use hoveringIndex when we set hovering to number to make the logic more clear, are you interested to work it out 😄

EJohnF commented 6 years ago

you are using number as keys yes, is it a problem? Usually, it's normal use-case...

nihgwu commented 6 years ago

then if this.order[this.state.hovering] === 0, hoveringIndex will be set to this.state.hovering but actually it should be 0