mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-18 06:35:35 +08:00
16c13fb079
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.
49 lines
1.8 KiB
JavaScript
49 lines
1.8 KiB
JavaScript
/*
|
|
Copyright 2017 New Vector Ltd
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
/**
|
|
* Create an action thunk that will dispatch actions indicating the current
|
|
* status of the Promise returned by fn.
|
|
*
|
|
* @param {string} id the id to give the dispatched actions. This is given a
|
|
* suffix determining whether it is pending, successful or
|
|
* a failure.
|
|
* @param {function} fn a function that returns a Promise.
|
|
* @param {function?} pendingFn a function that returns an object to assign
|
|
* to the `request` key of the ${id}.pending
|
|
* payload.
|
|
* @returns {function} an action thunk - a function that uses its single
|
|
* argument as a dispatch function to dispatch the
|
|
* following actions:
|
|
* `${id}.pending` and either
|
|
* `${id}.success` or
|
|
* `${id}.failure`.
|
|
*/
|
|
export function asyncAction(id, fn, pendingFn) {
|
|
return (dispatch) => {
|
|
dispatch({
|
|
action: id + '.pending',
|
|
request:
|
|
typeof pendingFn === 'function' ? pendingFn() : undefined,
|
|
});
|
|
fn().then((result) => {
|
|
dispatch({action: id + '.success', result});
|
|
}).catch((err) => {
|
|
dispatch({action: id + '.failure', err});
|
|
});
|
|
};
|
|
}
|