@nodeject/ui-components
Version:
UI library for non-trivial components
176 lines (175 loc) • 8.79 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.NodeContainer = void 0;
var antd_1 = require("antd");
var React = require("react");
var react_1 = require("react");
var icons_1 = require("../../icons");
var Coordinates_1 = require("./coordinates/Coordinates");
var styles = require("./NodeContainer.module.less");
var Text = antd_1.Typography.Text;
var NodeContainer = function (props) {
var _a = react_1.useState(false), deleteChildrenChecked = _a[0], setDeleteChildrenChecked = _a[1];
var _b = react_1.useState(false), showNodeMenu = _b[0], setShowNodeMenu = _b[1];
var _c = react_1.useState(0), buttonsOpacity = _c[0], setButtonsOpacity = _c[1];
var _d = react_1.useState(undefined), domElement = _d[0], setDomElement = _d[1];
var nodeContainerRef = react_1.useRef(null);
var _e = react_1.useState({
left: 0,
right: 0,
bottom: 0,
top: 0,
height: 0,
width: 0
}), coordinates = _e[0], setCoordinates = _e[1];
var getCoordinates = props.getCoordinates, showCoordinates = props.showCoordinates, treeCoordinates = props.treeCoordinates;
react_1.useEffect(function () {
setDomElement(nodeContainerRef.current);
}, [nodeContainerRef.current]);
// infinite loop
react_1.useEffect(function () {
if (domElement !== undefined) {
var domElementCoordinates = domElement.getBoundingClientRect();
if (JSON.stringify(domElementCoordinates) !== JSON.stringify(coordinates)) {
setCoordinates(domElementCoordinates);
}
}
}, [domElement && domElement.getBoundingClientRect(), coordinates]);
// HERE is the effect that calculates the coordinates and paints the WBS.
// We use getCoordinates to do this.
react_1.useEffect(function () {
if (domElement !== undefined) {
var bottom = coordinates.bottom, height = coordinates.height, left = coordinates.left, right = coordinates.right, top_1 = coordinates.top, width = coordinates.width;
var newC = {
bottom: bottom,
height: height,
left: left - (treeCoordinates ? treeCoordinates.left : 0),
right: right,
top: top_1 - (treeCoordinates ? treeCoordinates.top : 0),
width: width
};
getCoordinates && getCoordinates(props.id, newC);
}
}, [JSON.stringify(coordinates)]);
var onInsertParentClicked = function () {
buttonsOpacity === 1 && props.onAddNodeRequest(props.id, 'parent');
};
var onAddChildClicked = function () {
buttonsOpacity === 1 && props.onAddNodeRequest(props.id, 'child');
};
var onAddSiblingBeforeClicked = function () {
buttonsOpacity === 1 && props.onAddNodeRequest(props.id, 'siblingBefore');
};
var onAddSiblingAfterClicked = function () {
buttonsOpacity === 1 && props.onAddNodeRequest(props.id, 'siblingAfter');
};
var onDisplayMenuClicked = function () {
console.log('display menu clicked');
};
var onContentClicked = function () {
console.log('content clicked');
};
var showButton = function (mode) {
return props.mode === mode;
};
var toggleNodeMenu = function () {
setShowNodeMenu(!showNodeMenu);
};
var hideNodeMenu = function () {
setShowNodeMenu(false);
};
var confirmDeleteModal;
var onConfirmDeleteNode = function () {
props.onDeleteNodeRequest(props.id, deleteChildrenChecked);
};
var onCancelDeleteNode = function () {
confirmDeleteModal.destroy();
};
var showConfirmDeleteModal = function () {
setDeleteChildrenChecked(false); // reset
var onChange = function (e) {
setDeleteChildrenChecked(e.target.checked());
};
confirmDeleteModal = antd_1.Modal.confirm({
title: "Delete WBS Component?",
content: (React.createElement(Text, { strong: true },
"WARNING! This will delete all the children WBS Components and their Work Items too (Tasks, issues, etc.). It ",
React.createElement(Text, { underline: true }, "cannot be undone"),
".")
// <div>
// <strong>WARNING:</strong> This cannot be undone!
// {/* <br />
// <div>
// <Checkbox onChange={onChange}>Delete all the children too</Checkbox>
// </div> */}
// </div>
),
onOk: function () {
onConfirmDeleteNode();
},
onCancel: function () {
onCancelDeleteNode();
}
});
};
var onMouseEnterContent = function (e) {
setButtonsOpacity(1);
};
var onMouseLeaveContent = function (e) {
setButtonsOpacity(0);
};
var Content = props.content;
var insertParent = showButton('edit') && (React.createElement("div", { className: styles.nodeWrapperTop, style: { opacity: buttonsOpacity } },
React.createElement(icons_1.CaretUp, { className: styles.insertParentButton, onClick: onInsertParentClicked })));
var deleteNode = showButton('edit') && (React.createElement("div", { className: styles.nodeWrapperTopRight, style: { opacity: buttonsOpacity } },
React.createElement(icons_1.Remove, { className: styles.deleteButton,
// type="danger"
onClick: showConfirmDeleteModal })));
var addSiblingBefore = showButton('edit') && (React.createElement("div", { className: styles.nodeWrapperLeft, style: { opacity: buttonsOpacity } },
React.createElement(icons_1.CaretLeft, { className: styles.addSiblingBeforeButton, onClick: onAddSiblingBeforeClicked })));
var content = (React.createElement("div", { ref: nodeContainerRef, className: styles.nodeWrapperContent, onClick: onContentClicked },
React.createElement(Content, __assign({}, props)),
showCoordinates && React.createElement(Coordinates_1.Coordinates, { coordinates: coordinates }),
props.children));
var addSiblingAfter = showButton('edit') && (React.createElement("div", { className: styles.nodeWrapperRight, style: { opacity: buttonsOpacity } },
React.createElement(icons_1.CaretRight, { className: styles.addSiblingAfterButton, onClick: onAddSiblingAfterClicked })));
var addChild = showButton('edit') && (React.createElement("div", { className: styles.nodeWrapperBottom, style: { opacity: buttonsOpacity } },
React.createElement(icons_1.CaretDown, { className: styles.addChildButton, onClick: onAddChildClicked })));
var onMenuLinkClick = function (link) {
hideNodeMenu();
link.onClick(props.id, link.action);
};
var menu = props.menu && (React.createElement("div", null,
React.createElement("ul", { style: { listStyleType: 'none', margin: 0, padding: 0 } }, props.menu.map(function (l, index) { return (React.createElement("li", { key: index },
React.createElement("a", { onClick: function (e) { return onMenuLinkClick(l); } }, l.label))); }))));
var displayMenu = props.menu && (React.createElement("div", { className: styles.nodeWrapperBottomRight, style: {
opacity: buttonsOpacity,
position: 'absolute',
left: '-.6rem',
top: '-.6rem'
} }, showButton('view') && (React.createElement(antd_1.Popover, { content: menu, trigger: 'click', visible: showNodeMenu, onVisibleChange: toggleNodeMenu, placement: 'bottomRight' },
React.createElement(icons_1.Add, { className: styles.menuButton, onClick: onDisplayMenuClicked })))));
var horizontalMarginBetweenNodeContainers = {
gridTemplateRows: props.mode === 'edit' ? '1rem auto 1rem' : '0px auto 15px'
};
return (React.createElement("div", { className: styles.nodeContainer, onMouseEnter: onMouseEnterContent, onMouseLeave: onMouseLeaveContent, style: horizontalMarginBetweenNodeContainers },
insertParent,
deleteNode,
addSiblingBefore,
content,
addSiblingAfter,
addChild,
displayMenu));
};
exports.NodeContainer = NodeContainer;