@nodeject/ui-components/esm/dnd-lists/hooks/useDragDropLists.js

UI library for non-trivial components

import { useState } from 'react';
import { createContainer } from 'unstated-next';
import { createNewItem, deleteItem, itemClick } from './actions';
import { useMoveItem } from './useMoveItem';
import { useOnDataChanged } from './useOnDataChanged';
import { useOptimisticRendering } from './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 = 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 = useState({
        items: {},
        itemsBasicProps: null,
        listOrder: [],
        lists: {},
        filter: { isFiltered: false, visibleItems: [] }
    }), state = _b[0], setState = _b[1];
    // console.log('state', state, data)
    var setOptimisticState = useOptimisticRendering({
        dataFromServer: data,
        setState: setState
    }).setOptimisticState;
    var useOptimistic = false;
    useOnDataChanged({
        data: data,
        state: state,
        onDataChangedServer: serverEvents === null || serverEvents === void 0 ? void 0 : serverEvents.onDataChanged
    });
    var _c = 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: itemClick({
            onItemClickServer: serverEvents === null || serverEvents === void 0 ? void 0 : serverEvents.onItemClick
        }),
        onItemDelete: deleteItem({
            onItemDeleteServer: serverEvents === null || serverEvents === void 0 ? void 0 : serverEvents.onItemDelete,
            optimisticOptions: optimisticOptions,
            setState: setState,
            setOptimisticState: useOptimistic ? setOptimisticState : null,
            state: state
        }),
        onSaveNewItemClicked: 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
    };
};
export var DragDropListsContainer = createContainer(useDragDropLists);