@nodeject/ui-components
Version:
UI library for non-trivial components
134 lines (133 loc) • 7.42 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DnDTreeWrapper = exports.DnDTree = void 0;
var icons_1 = require("@ant-design/icons");
var react_smooth_dnd_1 = require("@richardrout/react-smooth-dnd");
var antd_1 = require("antd");
var React = require("react");
var dtos_1 = require("./dtos");
var useDnDTree_1 = require("./hooks/useDnDTree");
var NodeWrapper_1 = require("./NodeWrapper");
var styles = require("./DnDTree.module.less");
var itemPropsAreEqual = function (prevProps, nextProps) {
return JSON.stringify(prevProps) === JSON.stringify(nextProps);
};
exports.DnDTree = React.memo(function (props) {
var actions = props.actions, components = props.components, treeData = props.treeData, treeMode = props.treeMode, treeOptions = props.treeOptions;
var _a = React.useState(null), activeNode = _a[0], setActiveNode = _a[1];
var onNodeClicked = function (id) {
props.onNodeClicked(id);
setActiveNode(id);
};
return (React.createElement(useDnDTree_1.DnDTreeContainer.Provider, { initialState: {
activeNode: activeNode,
actions: actions,
components: components,
onNodeClicked: onNodeClicked,
treeData: treeData,
treeMode: treeMode,
treeOptions: treeOptions
} },
React.createElement(exports.DnDTreeWrapper, null)));
}, itemPropsAreEqual);
var DnDTreeWrapper = function () {
var unflattenedTreeData = useDnDTree_1.DnDTreeContainer.useContainer().state.unflattenedTreeData;
var Tree = buildTreeRecursively({
treeBranch: unflattenedTreeData.nodes,
parent: undefined
});
return (React.createElement("div", { className: styles.dndTree },
React.createElement("div", { className: styles.dndTreeWrapper }, Tree)));
};
exports.DnDTreeWrapper = DnDTreeWrapper;
var Branch = function (props) {
var treeBranch = props.treeBranch, parent = props.parent;
var _a = useDnDTree_1.DnDTreeContainer.useContainer(), actions = _a.actions, treeMode = _a.treeMode, treeOptions = _a.treeOptions;
var moveNodeClient = actions.moveNode, setNodeDraggingId = actions.setNodeDraggingId;
var _b = useDnDTree_1.DnDTreeContainer.useContainer().state, draggingId = _b.draggingId, newNodeId = _b.newNodeId;
return (React.createElement(React.Fragment, null,
treeBranch.map(function (node, index) {
var _a = node.data, id = _a.id, layoutStyle = _a.layoutStyle;
var children = node.children;
var parentChildrenCount = treeBranch.length;
var hasParent = parent !== undefined;
var isList = layoutStyle === dtos_1.LayoutStyle.List;
var isChildOfOrg = parent
? parent.data.layoutStyle === dtos_1.LayoutStyle.Org
: false;
var isFirstChild = hasParent ? index === 0 : false;
var isLastChild = index === parentChildrenCount - 1;
var hasChildren = children.length > 0;
var classDragging = draggingId === node.data.id ? 'isDragging' : 'isNotDragging';
var onDropItem = function (e) {
if (node && e.addedIndex !== null) {
// console.log(`DROP ${e.payload.data.id} in ${node.data.id}`)
moveNodeClient({
index: e.addedIndex,
droppedNode: e.payload,
parentContainerNode: node
});
}
};
var isParentList = node
? layoutStyle === dtos_1.LayoutStyle.List
: false;
var isExpanded = id !== draggingId;
var nodeWrapperProps = {
actions: actions,
isNew: id === newNodeId,
treeOptions: treeOptions,
treeMode: treeMode,
hasChildren: hasChildren,
hasParent: hasParent,
isChildOfOrg: isChildOfOrg,
isFirstChild: isFirstChild,
isLastChild: isLastChild,
isList: isList,
node: node,
expanded: isExpanded
};
return (React.createElement(react_smooth_dnd_1.Draggable, { key: id, "data-id": id, className: 'draggable-item', "data-is-new-node": newNodeId === id, "data-is-dragging-node": draggingId === id, "data-is-leaf": !hasChildren, "data-is-child": hasParent, "data-is-child-of-org": isChildOfOrg, "data-is-first-child": isFirstChild, "data-is-last-child": isLastChild, "data-is-list": isList, "data-is-expanded": isExpanded },
React.createElement("div", { className: styles.helperBorderTopLeft }),
React.createElement("div", { className: "branch", id: parent ? null : 'dndTree' },
React.createElement(NodeWrapper_1.NodeWrapper, __assign({}, nodeWrapperProps)),
classDragging === 'isDragging' ? null : (React.createElement("div", { className: isParentList
? styles.listTreeWrapper + " nodeChildrenList " + classDragging
: styles.orgTreeWrapper + " nodeChildrenList " + classDragging },
React.createElement(react_smooth_dnd_1.Container, { dragBeginDelay: 300, onDragEnd: function (params) {
return setNodeDraggingId('');
}, dragHandleSelector: treeMode === 'dragdrop'
? '.dnd-drag-handle'
: 'cannot-drag', animationDuration: 650, getGhostParent: function () {
return document.getElementById('dndTree');
}, autoScrollEnabled: true, disableScrollOverlapDetection: true, dropPlaceholder: {
className: styles.dropPlaceholder,
animationDuration: 400
}, getChildPayload: function (index) {
return children[index];
}, groupName: 'all', onDrop: function (e) { return onDropItem(e); }, orientation: isParentList
? 'vertical'
: 'horizontal' }, buildTreeRecursively({
parent: node,
treeBranch: children
}))))),
React.createElement("div", { className: styles.helperBorderTopRight })));
}),
props.children));
};
var buildTreeRecursively = function (args) {
return (React.createElement(Branch, { parent: args.parent, treeBranch: args.treeBranch },
React.createElement(antd_1.BackTop, null,
React.createElement(antd_1.Button, { size: "large", shape: "circle", icon: React.createElement(icons_1.UpOutlined, null) }))));
};