@nodeject/ui-components
Version:
UI library for non-trivial components
51 lines (50 loc) • 2.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DnDLists = void 0;
var react_smooth_dnd_1 = require("@richardrout/react-smooth-dnd");
var React = require("react");
// import whyDidYouRender from '@welldone-software/why-did-you-render'
var hooks_1 = require("./hooks");
var list_1 = require("./list");
var styles = require("./DnDLists.module.less");
var components_1 = require("./list/components");
var scrollbarStyles = require("./scrollbar-styles/FancyScrollbar.module.less");
var listDragHandleClassName = 'list-drag-handle';
var DnDLists = function (props) {
return (React.createElement(hooks_1.DragDropListsContainer.Provider, { initialState: props },
React.createElement(DragDropListsInner, null)));
};
exports.DnDLists = DnDLists;
var DragDropListsInner = React.memo(function () {
var _a = hooks_1.DragDropListsContainer.useContainer(), listDragAnimationDuration = _a.listDragAnimationDuration, listDropAnimationDuration = _a.listDropAnimationDuration, onDropList = _a.onDropList;
return (React.createElement("div", { className: styles.board + " " + scrollbarStyles.fancyScrollbar + " dragDropListsInner" },
React.createElement(react_smooth_dnd_1.Container, { 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 = hooks_1.DragDropListsContainer.useContainer(), components = _a.components, state = _a.state;
var ListHeader = (components === null || components === void 0 ? void 0 : components.ListHeader) || components_1.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(react_smooth_dnd_1.Draggable, { key: list.id },
React.createElement(list_1.Lane, { list: list, Header: React.createElement(ListHeader, { className: listDragHandleClassName, list: list }), items: items, filter: state === null || state === void 0 ? void 0 : state.filter })));
})));
};