@nodeject/ui-components
Version:
UI library for non-trivial components
57 lines (56 loc) • 3.43 kB
JavaScript
import { Button, Popconfirm, Typography } from 'antd';
import * as React from 'react';
import { DeleteOutlinedIcon, HelpIcon, PlusCircleIcon } from '../icons';
import * as styles from './AddNodesMenu.module.less';
var Text = Typography.Text;
export var AddNodesMenu = function (props) {
var _a = props.nodeActions, addChildNodeClient = _a.addChildNodeClient, deleteNodeClient = _a.deleteNodeClient, insertParentClient = _a.insertParentClient, insertSiblingAfterClient = _a.insertSiblingAfterClient, insertSiblingBeforeClient = _a.insertSiblingBeforeClient;
var nodeProps = props.nodeProps;
var nodeId = nodeProps.id;
var isRoot = nodeProps.parent === undefined;
var handleAddChild = function () {
addChildNodeClient(nodeId);
};
var handleDeleteNode = function () {
deleteNodeClient(nodeId);
};
var handleInsertParent = function () {
insertParentClient(nodeId);
};
var handleInsertSiblingBefore = function () {
insertSiblingBeforeClient(nodeId);
};
var handleInsertSiblingAfter = function () {
insertSiblingAfterClient(nodeId);
};
return (React.createElement("div", { className: styles.addNodesMenu },
!isRoot && (React.createElement("div", { style: { marginBottom: '.5rem' } },
React.createElement(Button, { onClick: handleInsertParent, size: 'small', block: true, style: { textAlign: 'left' } },
React.createElement(PlusCircleIcon, null),
React.createElement(Text, null,
"Insert ",
React.createElement(Text, { strong: true }, "Parent"))))),
!isRoot && (React.createElement("div", { style: { marginBottom: '.5rem' } },
React.createElement(Button, { onClick: handleInsertSiblingBefore, size: 'small', block: true, style: { textAlign: 'left' } },
React.createElement(PlusCircleIcon, null),
React.createElement(Text, null,
"Insert ",
React.createElement(Text, { strong: true }, "Sibling"),
" Before")))),
!isRoot && (React.createElement("div", { style: { marginBottom: '.5rem' } },
React.createElement(Button, { onClick: handleInsertSiblingAfter, size: 'small', block: true, style: { textAlign: 'left' } },
React.createElement(PlusCircleIcon, null),
React.createElement(Text, null,
"Add ",
React.createElement(Text, { strong: true }, "Sibling"),
" After")))),
React.createElement("div", { style: { marginBottom: isRoot ? 0 : '1.5rem' } },
React.createElement(Button, { onClick: handleAddChild, size: 'small', block: true, type: 'primary', style: { textAlign: 'left' } },
React.createElement(PlusCircleIcon, null),
"Add Child")),
!isRoot && (React.createElement("div", null,
React.createElement(Popconfirm, { title: 'Delete with its children?', onConfirm: handleDeleteNode, icon: React.createElement(HelpIcon, { style: { color: 'red' } }) },
React.createElement(Button, { size: 'small', block: true, type: 'link', style: { color: '#ff4d4f', textAlign: 'left' } },
React.createElement(DeleteOutlinedIcon, null),
"Delete"))))));
};