@nodeject/ui-components/esm/dnd-lists/DnDLists.js

UI library for non-trivial components

import { Container as RSContainer, Draggable as RSDraggable } from '@richardrout/react-smooth-dnd';
import * as React from 'react';
// import whyDidYouRender from '@welldone-software/why-did-you-render'
import { DragDropListsContainer } from './hooks';
import { Lane } from './list';
import * as styles from './DnDLists.module.less';
import { DefaultListHeader } from './list/components';
import * as scrollbarStyles from './scrollbar-styles/FancyScrollbar.module.less';
var listDragHandleClassName = 'list-drag-handle';
export var DnDLists = function (props) {
    return (React.createElement(DragDropListsContainer.Provider, { initialState: props },
        React.createElement(DragDropListsInner, null)));
};
var DragDropListsInner = React.memo(function () {
    var _a = DragDropListsContainer.useContainer(), listDragAnimationDuration = _a.listDragAnimationDuration, listDropAnimationDuration = _a.listDropAnimationDuration, onDropList = _a.onDropList;
    return (React.createElement("div", { className: styles.board + " " + scrollbarStyles.fancyScrollbar + " dragDropListsInner" },
        React.createElement(RSContainer, { disableScrollOverlapDetection: true, dragHandleSelector: "." + listDragHandleClassName, dropPlaceholder: {
                animationDuration: listDropAnimationDuration,
                showOnTop: false,
                className: 'cards-drop-preview'
            }, animationDuration: listDragAnimationDuration, onDrop: onDropList, autoScrollEnabled: true, orientation: "horizontal" },
            React.createElement(LaneList, null))));
});
// whyDidYouRender(React, {
//     onlyLogs: true,
//     titleColor: 'green',
//     diffNameColor: 'aqua',
//     trackAllPureComponents: true
// })
// // @ts-ignore
// DragDropListsInner.whyDidYouRender = {
//     customName: 'DragDropListsInner'
// }
var LaneList = function () {
    var _a = DragDropListsContainer.useContainer(), components = _a.components, state = _a.state;
    var ListHeader = (components === null || components === void 0 ? void 0 : components.ListHeader) || DefaultListHeader;
    return (React.createElement(React.Fragment, null, state.listOrder.map(function (colId) {
        var list = state.lists[colId];
        if (!list) {
            return null;
        }
        var items = list === null || list === void 0 ? void 0 : list.itemIds.map(function (itemId) { return state.items[itemId]; }).filter(function (i) { return i; }); // gets rid of undefined
        return (React.createElement(RSDraggable, { key: list.id },
            React.createElement(Lane, { list: list, Header: React.createElement(ListHeader, { className: listDragHandleClassName, list: list }), items: items, filter: state === null || state === void 0 ? void 0 : state.filter })));
    })));
};