imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace TagPanel react-dnd with react-beautiful-dnd

Browse source 
This new library handles the simple case of an ordered vertical
(or horizontal) list of items that can be reordered.

It provides animations, handles positioning of items mid-drag
and exposes a much simpler API to react-dnd (with a slight loss
of potential function, but we don't need this flexibility here
anyway).

Apart from this, TagOrderStore had to be changed in a highly
coupled way, but arguably for the better. Instead of being
updated incrementally every time an item is dragged over
another and having a separate "commit" action, the
asyncronous action `moveTag` is used to reposition the tag in
the list and both dispatch an optimistic update and carry out
the request as before. (The MatrixActions.accountData is still
used to indicate a successful reordering of tags).

The view is updated instantly, in an animated way, and this
is handled at the layer "above" React by the DND library.
This commit is contained in:
lukebarnard 2018-01-15 18:12:27 +00:00
parent 952f2c6a21
commit 16c13fb079
6 changed files with 85 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/stores/TagOrderStore.js
View file

@ -78,24 +78,11 @@ class TagOrderStore extends Store {
this._updateOrderedTags();
break;
}
// Puts payload.tag at payload.targetTag, placing the targetTag before or after the tag
case 'order_tag': {
if (!this._state.orderedTags ||
!payload.tag ||
!payload.targetTag ||
payload.tag === payload.targetTag
) return;
const tags = this._state.orderedTags;
let orderedTags = tags.filter((t) => t !== payload.tag);
const newIndex = orderedTags.indexOf(payload.targetTag) + (payload.after ? 1 : 0);
orderedTags = [
...orderedTags.slice(0, newIndex),
payload.tag,
...orderedTags.slice(newIndex),
];
this._setState({orderedTags});
case 'TagOrderActions.moveTag.pending': {
// Optimistic update of a moved tag
this._setState({
orderedTags: payload.request.tags,
});
break;
}
case 'select_tag': {