@nodeject/ui-components
Version:
UI library for non-trivial components
130 lines (129 loc) • 7.13 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);
};
import { UpOutlined } from '@ant-design/icons';
import { Container, Draggable } from '@richardrout/react-smooth-dnd';
import { BackTop, Button } from 'antd';
import * as React from 'react';
import { LayoutStyle } from './dtos';
import { DnDTreeContainer } from './hooks/useDnDTree';
import { NodeWrapper } from './NodeWrapper';
import * as styles from './DnDTree.module.less';
var itemPropsAreEqual = function (prevProps, nextProps) {
return JSON.stringify(prevProps) === JSON.stringify(nextProps);
};
export var 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(DnDTreeContainer.Provider, { initialState: {
activeNode: activeNode,
actions: actions,
components: components,
onNodeClicked: onNodeClicked,
treeData: treeData,
treeMode: treeMode,
treeOptions: treeOptions
} },
React.createElement(DnDTreeWrapper, null)));
}, itemPropsAreEqual);
export var DnDTreeWrapper = function () {
var unflattenedTreeData = 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)));
};
var Branch = function (props) {
var treeBranch = props.treeBranch, parent = props.parent;
var _a = DnDTreeContainer.useContainer(), actions = _a.actions, treeMode = _a.treeMode, treeOptions = _a.treeOptions;
var moveNodeClient = actions.moveNode, setNodeDraggingId = actions.setNodeDraggingId;
var _b = 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 === LayoutStyle.List;
var isChildOfOrg = parent
? parent.data.layoutStyle === 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 === 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(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, __assign({}, nodeWrapperProps)),
classDragging === 'isDragging' ? null : (React.createElement("div", { className: isParentList
? styles.listTreeWrapper + " nodeChildrenList " + classDragging
: styles.orgTreeWrapper + " nodeChildrenList " + classDragging },
React.createElement(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(BackTop, null,
React.createElement(Button, { size: "large", shape: "circle", icon: React.createElement(UpOutlined, null) }))));
};