@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
100 lines • 8.24 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);
};
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;
};
import React from "react";
import classNames from "classnames";
import Color from "color";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import { Divider, Icon, IconButton, OverflowText, Section, SectionHeader, Spacing, StickyTarget, Toolbar, ToolbarSection, Tooltip, } from "../index.js";
/**
* Manage display of a grouped content section.
* Add info, actions and context annotations by using its properties.
* Can be nested into each other.
*/
export var ContentGroup = function (_a) {
var _b;
var _c;
var children = _a.children, _d = _a.className, className = _d === void 0 ? "" : _d, title = _a.title, contextInfo = _a.contextInfo, annotation = _a.annotation, actionOptions = _a.actionOptions, _e = _a.isCollapsed, isCollapsed = _e === void 0 ? false : _e, textToggleCollapse = _a.textToggleCollapse, handlerToggleCollapse = _a.handlerToggleCollapse, _f = _a.borderMainConnection, borderMainConnection = _f === void 0 ? false : _f, _g = _a.borderSubConnection, borderSubConnection = _g === void 0 ? false : _g, _h = _a.level, level = _h === void 0 ? 1 : _h, _j = _a.minimumHeadlineLevel, minimumHeadlineLevel = _j === void 0 ? 3 : _j, _k = _a.whitespaceSize, whitespaceSize = _k === void 0 ? "small" : _k, style = _a.style, stickyHeaderProps = _a.stickyHeaderProps, description = _a.description, hideGroupDivider = _a.hideGroupDivider, contentProps = _a.contentProps, otherContentWrapperProps = __rest(_a, ["children", "className", "title", "contextInfo", "annotation", "actionOptions", "isCollapsed", "textToggleCollapse", "handlerToggleCollapse", "borderMainConnection", "borderSubConnection", "level", "minimumHeadlineLevel", "whitespaceSize", "style", "stickyHeaderProps", "description", "hideGroupDivider", "contentProps"]);
var displayHeader = title || handlerToggleCollapse;
var borderGradient = undefined;
if (typeof borderSubConnection === "object") {
var borderColors_1 = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
borderGradient = borderColors_1.reduce(function (acc, borderColor, index) {
try {
var color = Color(borderColor);
acc.push("".concat(color.rgb().toString(), " ") +
"".concat((index / borderColors_1.length) * 100, "% ") +
"".concat(((index + 1) / borderColors_1.length) * 100, "%"));
}
catch (_a) {
// eslint-disable-next-line no-console
console.warn("Received invalid background color for tag: " + borderColor);
}
return acc;
}, []);
}
var contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
var _l = contentProps !== null && contentProps !== void 0 ? contentProps : {}, contentClassName = _l.className, otherContentProps = __rest(_l, ["className"]);
var headerContent = displayHeader ? (React.createElement(React.Fragment, null,
React.createElement(SectionHeader, { className: "".concat(eccgui, "-contentgroup__header") },
React.createElement(Toolbar, null,
handlerToggleCollapse && (React.createElement(ToolbarSection, null,
React.createElement(IconButton, { className: "".concat(eccgui, "-contentgroup__header__toggler"), name: isCollapsed ? "toggler-showmore" : "toggler-showless", text: textToggleCollapse !== null && textToggleCollapse !== void 0 ? textToggleCollapse : (isCollapsed ? "Show more" : "Show less"), onClick: handlerToggleCollapse }),
React.createElement(Spacing, { vertical: true, size: "small" }))),
title && (React.createElement(ToolbarSection, { canShrink: true },
React.createElement("h" +
Math.min(Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel), 6).toString(), {
children: React.createElement(OverflowText, null, title),
className: "".concat(eccgui, "-contentgroup__header__title"),
}),
description && (React.createElement(React.Fragment, null,
React.createElement(Spacing, { vertical: true, size: "tiny" }),
React.createElement(Tooltip, { content: description },
React.createElement(Icon, { name: "item-info", small: true, className: "dmapp--text-info" })))))),
contextInfoElements &&
((_c = contextInfoElements[0]) === null || _c === void 0 ? void 0 : _c.props) &&
Object.values(contextInfoElements[0].props).every(function (v) { return v !== undefined; }) && (React.createElement(ToolbarSection, { className: "".concat(eccgui, "-contentgroup__header__context"), canGrow: true },
React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content ") },
React.createElement(Spacing, { vertical: true, size: "tiny" }),
contextInfoElements))),
(!isCollapsed || !handlerToggleCollapse) && actionOptions && (React.createElement(ToolbarSection, { className: "".concat(eccgui, "-contentgroup__header__options") },
React.createElement(Spacing, { vertical: true, size: "small" }),
actionOptions)))),
(!isCollapsed || !handlerToggleCollapse) && (React.createElement(React.Fragment, null,
!hideGroupDivider && React.createElement(Divider, { addSpacing: "small" }),
React.createElement(Spacing, { size: whitespaceSize }))))) : (React.createElement(React.Fragment, null));
return (React.createElement(Section, __assign({ className: "".concat(eccgui, "-contentgroup") +
(className ? " ".concat(className) : "") +
(whitespaceSize ? " ".concat(eccgui, "-contentgroup--padding-").concat(whitespaceSize) : "") +
(borderMainConnection ? " ".concat(eccgui, "-contentgroup--border-main") : "") +
(borderSubConnection ? " ".concat(eccgui, "-contentgroup--border-sub") : ""), style: borderGradient
? __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), (_b = {}, _b["--".concat(eccgui, "-color-contentgroup-border-sub")] = borderGradient.join(", "), _b))
: style }, otherContentWrapperProps),
headerContent && stickyHeaderProps ? (React.createElement(StickyTarget, __assign({}, stickyHeaderProps), headerContent)) : (headerContent),
(!isCollapsed || !handlerToggleCollapse) && (React.createElement(React.Fragment, null,
React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content") },
React.createElement("div", __assign({ className: classNames("".concat(eccgui, "-contentgroup__content__body"), contentClassName) }, otherContentProps), children),
contextInfo && !displayHeader && (React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content__context") }, contextInfoElements)),
annotation && React.createElement("div", null, annotation),
actionOptions && !displayHeader && (React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content__options") }, actionOptions)))))));
};
//# sourceMappingURL=ContentGroup.js.map