@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
49 lines • 3.25 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NodeContentExtension = void 0;
const react_1 = __importDefault(require("react"));
const IconButton_1 = __importDefault(require("../../../components/Icon/IconButton"));
const constants_1 = require("../../../configuration/constants");
/**
* Displays an content area that can be attached to `NodeContent` elements.
*/
const NodeContentExtension = (_a) => {
var { children, slideOutOfNode = false, isExpanded = false, setExpanded = undefined, actionButtons, tooltipExpand = "Show more", tooltipReduce = "Show less" } = _a,
// other props for DOM element
otherProps = __rest(_a, ["children", "slideOutOfNode", "isExpanded", "setExpanded", "actionButtons", "tooltipExpand", "tooltipReduce"]);
// display always exapanded if there is no handler to control it
const [expanded, expand] = react_1.default.useState(setExpanded ? isExpanded : true);
const onToggle = (event, isCurrentlyExpanded) => {
const willBeExpanded = setExpanded ? setExpanded(event, isCurrentlyExpanded) : isCurrentlyExpanded;
expand(willBeExpanded);
};
return (react_1.default.createElement("div", Object.assign({}, otherProps, { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension` +
(slideOutOfNode ? ` ${constants_1.CLASSPREFIX}-graphviz__node__extension--slideout` : "") +
(expanded ? ` ${constants_1.CLASSPREFIX}-graphviz__node__extension--expanded` : "") }),
!expanded && onToggle && (react_1.default.createElement(IconButton_1.default, { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension-expandbutton`, name: "item-vertmenu", text: tooltipExpand, onClick: (e) => {
onToggle(e, expanded);
} })),
expanded && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension-body` }, children),
(!!actionButtons || !!setExpanded) && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension-actions` },
!!setExpanded && (react_1.default.createElement(IconButton_1.default, { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension-reducebutton`, name: "toggler-showless", text: tooltipReduce, onClick: (e) => {
onToggle(e, expanded);
} })),
actionButtons))))));
};
exports.NodeContentExtension = NodeContentExtension;
//# sourceMappingURL=NodeContentExtension.js.map