@nodeject/ui-components
Version:
UI library for non-trivial components
95 lines (94 loc) • 6.22 kB
JavaScript
"use strict";
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.SchedioTree = void 0;
var antd_1 = require("antd");
var React = require("react");
var TreeView_DragDrop_1 = require("../tree-view/TreeView.DragDrop");
var AddNodesMenu_1 = require("./AddNodesMenu");
var helpers_1 = require("./helpers");
var types_1 = require("./types");
var useSchedioTree_1 = require("./hooks/useSchedioTree");
var TreeNodeComponentContainer_1 = require("./TreeNodeComponentContainer");
var TreeNodeActionMenu_1 = require("./TreeNodeActionMenu");
var styles = require("./SchedioTree.module.less");
var TreeNode = antd_1.Tree.TreeNode;
var Tree = function (props) {
var NodeContainer = props.NodeContainer, options = props.options;
var _a = useSchedioTree_1.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 = helpers_1.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 = TreeView_DragDrop_1.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(antd_1.Tree, { expandedKeys: keys, key: schedioTree[0].nodeKey + 'root',
// defaultExpandedKeys={state.expandedKeys}
defaultExpandAll: true,
// draggable={options.draggable}
draggable: true,
// onDragEnter={onDragEnter}
// onDrop={onDropNode}
onDragEnter: TreeView_DragDrop_1.onDragEnter, onDrop: onDropNode }, tree))));
};
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(useSchedioTree_1.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 }))));
};
exports.SchedioTree = SchedioTree;
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_1.TreeNodeComponentContainer, { node: node })));
var nodeRenderWithPopover = options.mode === 'edit' ? (React.createElement(antd_1.Popover, { content: React.createElement(AddNodesMenu_1.AddNodesMenu, { nodeActions: nodeActions, nodeProps: nodeProps }), placement: 'right', mouseEnterDelay: 0.5 }, treeNodeComponent)) : (React.createElement(antd_1.Popover, { content: React.createElement(TreeNodeActionMenu_1.TreeNodeActionMenu, { id: nodeProps.id, menu: nodeActionMenu }), placement: 'right', mouseEnterDelay: 0.5 }, treeNodeComponent));
var layoutStyleClassName = "list-layout-style-" + types_1.LayoutStyle[nodeProps.layoutStyle].toLowerCase();
var parentLayoutStyleClassName = types_1.LayoutStyle[nodeProps.parentLayoutStyle] &&
"list-parent-layout-style-" + types_1.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)); };