@nodeject/ui-components
Version:
UI library for non-trivial components
87 lines (86 loc) • 4.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DragDropListsContainer = void 0;
var react_1 = require("react");
var unstated_next_1 = require("unstated-next");
var actions_1 = require("./actions");
var useMoveItem_1 = require("./useMoveItem");
var useOnDataChanged_1 = require("./useOnDataChanged");
var useOptimisticRendering_1 = require("./useOptimisticRendering");
var useDragDropLists = function (props) {
var classNameItem = props.classNameItem, components = props.components, data = props.data, extraProps = props.extraProps, serverEvents = props.serverEvents, options = props.options;
// if null, it's not optimistic. For now, it's an object for if I need to pass
// more options in the future.
var optimisticOptions = {};
var _a = react_1.useState(undefined), showNewItemListId = _a[0], setShowNewItemListId = _a[1];
var showScrollbar = options && options.showScrollbar !== undefined
? options.showScrollbar
: false;
var itemDropAnimationDuration = (options && options.itemDropAnimationDuration) || 0;
var itemDragAnimationDuration = (options && options.itemDragAnimationDuration) || 0;
var listDropAnimationDuration = (options && options.listDropAnimationDuration) || 0;
var listDragAnimationDuration = (options && options.listDragAnimationDuration) || 0;
// Allows to keep creating new items.
var toggleShowNewItem = function (listId) {
setShowNewItemListId(listId);
};
var _b = react_1.useState({
items: {},
itemsBasicProps: null,
listOrder: [],
lists: {},
filter: { isFiltered: false, visibleItems: [] }
}), state = _b[0], setState = _b[1];
// console.log('state', state, data)
var setOptimisticState = useOptimisticRendering_1.useOptimisticRendering({
dataFromServer: data,
setState: setState
}).setOptimisticState;
var useOptimistic = false;
useOnDataChanged_1.useOnDataChanged({
data: data,
state: state,
onDataChangedServer: serverEvents === null || serverEvents === void 0 ? void 0 : serverEvents.onDataChanged
});
var _c = useMoveItem_1.useMoveItem({
onItemMoveServer: serverEvents === null || serverEvents === void 0 ? void 0 : serverEvents.onItemMove,
optimisticOptions: optimisticOptions,
setOptimisticState: useOptimistic ? setOptimisticState : null,
setState: setState,
state: state
}), onDropItem = _c.onDropItem, onDropList = _c.onDropList;
return {
classNameItem: classNameItem,
components: components,
extraProps: extraProps,
itemDropAnimationDuration: itemDropAnimationDuration,
itemDragAnimationDuration: itemDragAnimationDuration,
listDropAnimationDuration: listDropAnimationDuration,
listDragAnimationDuration: listDragAnimationDuration,
onDropItem: onDropItem,
onDropList: onDropList,
onItemClick: actions_1.itemClick({
onItemClickServer: serverEvents === null || serverEvents === void 0 ? void 0 : serverEvents.onItemClick
}),
onItemDelete: actions_1.deleteItem({
onItemDeleteServer: serverEvents === null || serverEvents === void 0 ? void 0 : serverEvents.onItemDelete,
optimisticOptions: optimisticOptions,
setState: setState,
setOptimisticState: useOptimistic ? setOptimisticState : null,
state: state
}),
onSaveNewItemClicked: actions_1.createNewItem({
onNewItemAddServer: serverEvents === null || serverEvents === void 0 ? void 0 : serverEvents.onNewItemAdd,
optimisticOptions: optimisticOptions,
setOptimisticState: useOptimistic ? setOptimisticState : null,
setState: setState,
state: state
}),
// setState,
showNewItemListId: showNewItemListId,
showScrollbar: showScrollbar,
state: state,
toggleShowNewItem: toggleShowNewItem
};
};
exports.DragDropListsContainer = unstated_next_1.createContainer(useDragDropLists);