@nodeject/ui-components
Version:
UI library for non-trivial components
303 lines (302 loc) • 14.7 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 { MinusSquareIcon, MoreHorizontalIcon, MoveIcon, PlusSquareIcon } from '../icons';
import { Typography } from 'antd';
import * as React from 'react';
import { DnDTreeContainer } from './hooks';
import * as styles from './DnDTree.module.less';
import * as dragHandleStyles from './DragHandleWrapper.module.less';
var Text = Typography.Text;
export var NodeWrapper = function (props) {
var _a;
var hasChildren = props.hasChildren, isList = props.isList, node = props.node;
var expandedNodes = DnDTreeContainer.useContainer().state.expandedNodes;
var isExpanded = (_a = expandedNodes[node.data.id]) === null || _a === void 0 ? void 0 : _a.isExpanded;
var isCollapsed = !isExpanded;
var expandCollapseNode = hasChildren ? (React.createElement("input", { type: "checkbox", id: node.data.id || null, checked: isExpanded, onChange: function () { return null; } })) : null;
var nodeOuterWrapper = (React.createElement(NodeOuterWrapper, __assign({}, props, { isExpanded: isExpanded })));
// Center all org and add expand / collapse
var nodeWrapper = isList ? (React.createElement("div", { className: 'nodeContainer' }, nodeOuterWrapper)) : (React.createElement("div", { className: styles.orgNodeCenterWrapper + " nodeContainer" }, nodeOuterWrapper));
return (React.createElement(React.Fragment, null,
expandCollapseNode,
nodeWrapper,
hasChildren ? (isCollapsed ? (React.createElement("div", { className: styles.helperIsCollapsed })) : null) : null));
};
var NodeOuterWrapper = function (props) {
var actions = props.actions, treeOptions = props.treeOptions, hasChildren = props.hasChildren, hasParent = props.hasParent, isChildOfOrg = props.isChildOfOrg, isExpanded = props.isExpanded, isFirstChild = props.isFirstChild, isLastChild = props.isLastChild, isList = props.isList, isNew = props.isNew, node = props.node;
var NodeComponent = DnDTreeContainer.useContainer().components.Node;
var treeMode = DnDTreeContainer.useContainer().treeMode;
var _a = DnDTreeContainer.useContainer(), activeNode = _a.activeNode, state = _a.state, onNodeClicked = _a.onNodeClicked;
var isOrg = !isList;
var nodeInnerWrapperProps = {
actions: actions,
activeNode: activeNode,
hasChildren: hasChildren,
isDraggedNode: state.draggingId === node.data.id,
isExpanded: isExpanded,
isList: isList,
isNew: isNew,
node: node,
NodeComponent: NodeComponent,
onNodeClicked: onNodeClicked,
treeMode: treeMode,
treeOptions: treeOptions
};
var nodeInnerWrapper = React.createElement(NodeInnerWrapper, __assign({}, nodeInnerWrapperProps));
if (isOrg && !hasChildren && !hasParent) {
/*
* _______
* | Org |
* |_______|
*
*/
return (React.createElement("div", { className: styles.orgNodeNoParentNoChildrenWrapper + " node" }, nodeInnerWrapper));
}
else if (isOrg && hasChildren && !hasParent) {
/*
* _______
* | Org |
* |_______|
* |
*/
return (React.createElement("div", { className: styles.orgNodeNoParentWithChildrenWrapper + " node" }, nodeInnerWrapper));
}
else if (hasParent &&
isChildOfOrg &&
!isFirstChild &&
!isLastChild &&
isOrg) {
/* ____ ____
* ___|___
* | org |
* |_______|
*/
return (React.createElement("div", { className: styles.orgNodeWithOrgParentWithChildrenMidPositionWrapper + " node" },
React.createElement("div", { className: styles.orgNodeWithOrgParentWithChildrenMidPositionWrapper }, nodeInnerWrapper),
React.createElement("div", { className: styles.helperBorderTopRight })));
}
else if ((hasParent &&
isChildOfOrg &&
isFirstChild &&
!isLastChild &&
!hasChildren &&
isOrg) ||
(hasParent &&
isChildOfOrg &&
isFirstChild &&
!isLastChild &&
hasChildren &&
!isOrg) ||
(hasParent &&
isChildOfOrg &&
isFirstChild &&
!isLastChild &&
!hasChildren &&
!isOrg)) {
/* ____
* ___|___
* | org |
* |_______|
*/
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.firstChildOfOrgTreeNodeWrapper + " node" },
React.createElement("div", { className: styles.firstNodeWithOrgParentWrapper }, nodeInnerWrapper),
React.createElement("div", { className: styles.helperBorderTopRight }))));
}
else if (hasParent &&
isChildOfOrg &&
isFirstChild &&
!isLastChild &&
hasChildren &&
isOrg) {
/* ____
* ___|___
* | org |
* |_______|
* |
*/
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.helperBorderTopLeft }),
React.createElement("div", { className: styles.firstChildOfOrgTreeNodeWrapper + " node" },
React.createElement("div", { className: styles.firstOrgNodeWithOrgParentAndChildrenWrapper }, nodeInnerWrapper)),
React.createElement("div", { className: styles.helperBorderTopRight })));
}
else if (!hasParent && isList) {
/*
* _______
* | list |
* |_______|
* |
*/
return (React.createElement("div", { className: styles.listRootSiblingNodeWrapper + " node" }, nodeInnerWrapper));
}
else if (hasParent &&
isChildOfOrg &&
!isFirstChild &&
!isLastChild &&
isList) {
/* _______________
* | ___|___ |
* | list? |
* |_______|
*/
return (React.createElement("div", { className: styles.listTreeRootNodeWrapper + " node" },
React.createElement("div", { className: styles.listNodeWithOrgParentNotLastNotFirstWrapper }, nodeInnerWrapper)));
}
else if (hasParent && isChildOfOrg && isFirstChild && isLastChild) {
/* 1
* ___|___
* | any |
* |_______|
*/
return (React.createElement("div", { className: styles.listTreeRootNodeWrapper + " node" },
React.createElement("div", { className: styles.listNodeWithOrgParentNotLastNotFirstWrapper }, nodeInnerWrapper)));
}
else if (isList && isChildOfOrg && !isFirstChild && isLastChild) {
/* ___
* ___|___
* | List |
* |_______|
*/
return (React.createElement("div", { className: styles.listTreeRootNodeWrapper + " node" },
React.createElement("div", { className: styles.lastListNodeWithOrgParentWrapper }, nodeInnerWrapper)));
}
else if (isOrg &&
isChildOfOrg &&
!isFirstChild &&
isLastChild &&
!hasChildren) {
/* ___
* ___|___
* | Org |
* |_______|
*/
return (React.createElement("div", { className: styles.orgTreeChildrenWrapper + " node" },
React.createElement("div", { className: styles.lastOrgNodeWithOrgParentNoChildrenWrapper },
"YIHA",
nodeInnerWrapper)));
}
else if (isOrg &&
isChildOfOrg &&
!isFirstChild &&
isLastChild &&
hasChildren) {
/* ___
* ___|___
* | Org |
* |_______|
* |
*/
return (React.createElement("div", { className: styles.orgTreeChildrenWrapper + " node" },
React.createElement("div", { className: styles.lastOrgNodeWithOrgParentWrapper }, nodeInnerWrapper)));
}
else if (isList && !isChildOfOrg && !isLastChild) {
/*
* | _______
* |_| List |
* | |_______|
*/
return (React.createElement("div", { className: styles.listNodeNotLastChildWrapper + " node" }, nodeInnerWrapper));
}
else if (isOrg && !isChildOfOrg && !isLastChild) {
/*
* | _______
* |_| Org |
* | |_______|
*/
return (React.createElement("div", { className: styles.orgNodeWithListParentAndMoreSiblingsWrapper + " node" }, nodeInnerWrapper));
}
else if (isList && hasParent && !isChildOfOrg && isLastChild) {
/*
* | _______
* |_| List |
* |_______|
*/
return (React.createElement("div", { className: styles.listLastSiblingNodeWrapper + " node" }, nodeInnerWrapper));
}
else if (isOrg && hasParent && !isChildOfOrg && isLastChild) {
/*
* | _______
* |_| Org |
* |_______|
*/
return (React.createElement("div", { className: styles.listLastSiblingNodeWrapper + " node" }, nodeInnerWrapper));
}
else {
var strippedDown = {
children: undefined,
node: __assign(__assign({}, props.node), { children: undefined })
};
// Strips down objects to props that matter, and compare if needs rendering
var newProps = Object.assign({}, props, strippedDown);
return (React.createElement("pre", null,
"Small issue: This node does not have a design yet.",
' ',
JSON.stringify(newProps, null, 2)));
}
};
var ExpandCollapseButton = function (props) {
var hasChildren = props.hasChildren, id = props.id, isExpanded = props.isExpanded;
var _a = DnDTreeContainer.useContainer().actions, collapseNode = _a.collapseNode, expandNode = _a.expandNode;
if (!hasChildren) {
return null;
}
var icon = isExpanded ? (React.createElement(MinusSquareIcon, { twoToneColor: "hsl(216, 20%, 60%)", style: { cursor: 'pointer' } })) : (React.createElement(React.Fragment, null,
React.createElement(PlusSquareIcon, { twoToneColor: "hsl(216, 20%, 60%)", style: { cursor: 'pointer' } }),
React.createElement(MoreHorizontalIcon, { style: { marginLeft: '4px', cursor: 'pointer' } })));
// onClick expand / collapse button
var onClick = function () {
isExpanded ? collapseNode(id) : expandNode(id);
};
return (React.createElement("div", { style: { position: 'absolute', zIndex: 2 } },
React.createElement("div", { className: styles.expandCollapseButton },
React.createElement("label", { htmlFor: id || null, onClick: onClick }, icon))));
};
var defaultCanExpandCollapse = false;
var NodeInnerWrapper = function (props) {
var actions = props.actions, activeNode = props.activeNode, hasChildren = props.hasChildren, isDraggedNode = props.isDraggedNode, isExpanded = props.isExpanded, isList = props.isList, isNew = props.isNew, node = props.node, NodeComponent = props.NodeComponent, onNodeClicked = props.onNodeClicked, treeMode = props.treeMode, treeOptions = props.treeOptions;
var canExpandCollapse = treeOptions
? treeOptions.canExpandCollapse !== undefined
? treeOptions.canExpandCollapse
: defaultCanExpandCollapse
: defaultCanExpandCollapse;
var isOrg = !isList;
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.borderTopLeft }),
React.createElement("div", { className: styles.nodeTopMargin }),
React.createElement("div", { className: styles.nodeTopLeft }),
React.createElement("div", { className: styles.nodeTopRight }),
React.createElement("div", { className: styles.borderTopMidLeft }),
React.createElement("div", { className: styles.borderBottomMidLeft }),
React.createElement("div", { className: styles.borderBottomLeft }),
React.createElement("div", { className: styles.nodeBottomLeft }, isList && canExpandCollapse ? (React.createElement(ExpandCollapseButton, { id: node.data.id, isExpanded: isExpanded, hasChildren: hasChildren })) : null),
React.createElement("div", { className: styles.nodeBottomRight }, isOrg && canExpandCollapse ? (React.createElement(ExpandCollapseButton, { id: node.data.id, isExpanded: props.isExpanded, hasChildren: hasChildren })) : null),
React.createElement("div", { className: styles.node },
React.createElement("div", { className: styles.nodeStyles },
React.createElement(NodeComponent, { actions: actions, isActive: activeNode === node.data.id, isDraggedNode: isDraggedNode, isNew: isNew, node: node, onNodeClicked: onNodeClicked, treeOptions: treeOptions, DragHandle: DragHandleWrapper, treeMode: treeMode })))));
};
var DragHandleWrapper = function (props) {
var handle = props.handle, nodeId = props.nodeId;
var dndTreeContainer = DnDTreeContainer.useContainer();
var canDragDrop = dndTreeContainer.treeMode === 'dragdrop';
var _a = dndTreeContainer.events, onMouseDownHandle = _a.onMouseDownHandle, onMouseUpHandle = _a.onMouseUpHandle;
var className = canDragDrop
? "dnd-drag-handle " + dragHandleStyles.dragHandleWrapper + " " + dragHandleStyles.canDragDrop
: dragHandleStyles.dragHandleWrapper;
return (React.createElement("div", { className: className, onMouseDown: function (e) {
e.preventDefault();
onMouseDownHandle(nodeId);
}, onMouseMove: function (e) {
e.preventDefault();
}, onMouseUp: function () { return onMouseUpHandle(nodeId); } }, handle || (React.createElement(Text, { type: "secondary", style: { cursor: 'pointer', fontSize: '1.2rem' } },
React.createElement(MoveIcon, null)))));
};