@nodeject/ui-components
Version:
UI library for non-trivial components
91 lines (90 loc) • 5.95 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 { Popover, Tree as AntdTree } from 'antd';
import * as React from 'react';
import { onDragEnter, onDrop } from '../tree-view/TreeView.DragDrop';
import { AddNodesMenu } from './AddNodesMenu';
import { convertFromCytoGraphToSchedioTreeView } from './helpers';
import { LayoutStyle } from './types';
import { SchedioTreeContainer } from './hooks/useSchedioTree';
import { TreeNodeComponentContainer } from './TreeNodeComponentContainer';
import { TreeNodeActionMenu } from './TreeNodeActionMenu';
import * as styles from './SchedioTree.module.less';
var TreeNode = AntdTree.TreeNode;
var Tree = function (props) {
var NodeContainer = props.NodeContainer, options = props.options;
var _a = SchedioTreeContainer.useContainer(), nodeActions = _a.nodeActions, cytoGraph = _a.cytoGraph;
// console.log(
// 'CYTO',
// JSON.stringify(
// cytoGraph.nodes.map((n) => {
// const no = {
// [`${n.data.id} parent}`]: n.data.parent
// }
// return no
// }),
// null,
// 2
// )
// )
var keys = cytoGraph.nodes.map(function (n) { return n.data.id; });
var schedioTree = convertFromCytoGraphToSchedioTreeView({ NodeContainer: NodeContainer, cytoGraph: cytoGraph, options: options });
console.log('cytoGraph', cytoGraph);
console.log('schedioTree', schedioTree);
var tree = buildTreeRecursively({
nodeActions: nodeActions,
nodeActionMenu: props.nodeActionMenu,
treeData: schedioTree,
options: options
});
var onDropNode = function (info) {
var _a = onDrop(info, schedioTree, props.moveNodeTo), index = _a.index, nodeId = _a.nodeId, parentId = _a.parentId;
nodeActions.moveNodeClient({ index: index, nodeId: nodeId, parentId: parentId });
};
return (React.createElement("div", { className: styles.treeViewContainer },
React.createElement("div", { className: styles.treeView },
React.createElement(AntdTree, { expandedKeys: keys, key: schedioTree[0].nodeKey + 'root',
// defaultExpandedKeys={state.expandedKeys}
defaultExpandAll: true,
// draggable={options.draggable}
draggable: true,
// onDragEnter={onDragEnter}
// onDrop={onDropNode}
onDragEnter: onDragEnter, onDrop: onDropNode }, tree))));
};
export var SchedioTree = function (props) {
var nodeActions = props.nodeActions, createNewClientNode = props.createNewClientNode, id = props.id, nodeActionMenu = props.nodeActionMenu, NodeContainer = props.NodeContainer, options = props.options, schedioTreeFromServer = props.schedioTreeFromServer;
return (React.createElement(SchedioTreeContainer.Provider, { initialState: { nodeActions: nodeActions, createNewClientNode: createNewClientNode, schedioTreeFromServer: schedioTreeFromServer } },
React.createElement("div", { className: styles.treeView, id: id },
React.createElement(Tree, { nodeActionMenu: nodeActionMenu, NodeContainer: NodeContainer, options: options }))));
};
var buildTreeRecursively = function (props) {
var nodeActions = props.nodeActions, nodeActionMenu = props.nodeActionMenu, options = props.options, treeData = props.treeData;
return treeData.map(function (node) {
var nodeProps = node.TreeNodeComponent.props;
var isLeaf = !node.children || node.children.length === 0;
var treeNodeComponent = (React.createElement("div", { className: 'node', style: { display: 'inline-flex' } },
React.createElement(TreeNodeComponentContainer, { node: node })));
var nodeRenderWithPopover = options.mode === 'edit' ? (React.createElement(Popover, { content: React.createElement(AddNodesMenu, { nodeActions: nodeActions, nodeProps: nodeProps }), placement: 'right', mouseEnterDelay: 0.5 }, treeNodeComponent)) : (React.createElement(Popover, { content: React.createElement(TreeNodeActionMenu, { id: nodeProps.id, menu: nodeActionMenu }), placement: 'right', mouseEnterDelay: 0.5 }, treeNodeComponent));
var layoutStyleClassName = "list-layout-style-" + LayoutStyle[nodeProps.layoutStyle].toLowerCase();
var parentLayoutStyleClassName = LayoutStyle[nodeProps.parentLayoutStyle] &&
"list-parent-layout-style-" + LayoutStyle[nodeProps.parentLayoutStyle].toLowerCase();
var hasSiblings = nodeProps.hasSiblings ? 'list-has-siblings' : 'list-has-no-siblings';
var isLastSiblingClassName = nodeProps.isLastSibling && 'list-is-last-sibling';
var isParentLastSiblingClassName = nodeProps.isParentLastSibling && 'list-parent-is-last-sibling';
var listTypeClassName = isLeaf ? 'list-is-leaf' : 'list-is-branch';
var className = layoutStyleClassName + " " + hasSiblings + " " + parentLayoutStyleClassName + " " + isLastSiblingClassName + " " + isParentLastSiblingClassName + " " + listTypeClassName;
var Node = !isLeaf ? (React.createElement(TreeNode, { className: className, key: node.nodeKey, title: nodeRenderWithPopover }, buildTreeRecursively({ nodeActions: nodeActions, nodeActionMenu: nodeActionMenu, treeData: node.children, options: options }))) : (React.createElement(TreeNode, { className: className, key: node.nodeKey, title: nodeRenderWithPopover }));
return Node;
});
};
var addExtraProps = function (Component, extraProps) { return React.createElement(Component.type, __assign({}, Component.props, extraProps)); };