@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
55 lines • 6.17 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);
};
import React from "react";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import { Card, ContextMenu, IconButton, MenuItem, OverflowText, OverviewItem, OverviewItemActions, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, ProgressBar, Spinner, Tooltip, } from "../../index.js";
/** Shows the status of activities and supports actions on these activities. */
export function ActivityControlWidget(props) {
var _a;
var dataTestIdLegacy = props["data-test-id"], dataTestId = props["data-testid"], progressBar = props.progressBar, progressSpinner = props.progressSpinner, activityActions = props.activityActions, activityContextMenu = props.activityContextMenu, additionalActions = props.additionalActions, small = props.small, border = props.border, hasSpacing = props.hasSpacing, canShrink = props.canShrink, tags = props.tags, progressSpinnerFinishedIcon = props.progressSpinnerFinishedIcon, _b = props.timerExecutionMsg, timerExecutionMsg = _b === void 0 ? "" : _b, _c = props.labelWrapper, labelWrapper = _c === void 0 ? React.createElement(OverflowText, { inline: true }) : _c;
var spinnerClassNames = ((_a = progressSpinner === null || progressSpinner === void 0 ? void 0 : progressSpinner.className) !== null && _a !== void 0 ? _a : "") + " ".concat(eccgui, "-spinner--permanent");
var widget = (React.createElement(OverviewItem, { "data-test-id": dataTestIdLegacy, "data-testid": dataTestId, hasSpacing: border || hasSpacing, densityHigh: small },
progressBar && React.createElement(ProgressBar, __assign({}, progressBar)),
(progressSpinner || progressSpinnerFinishedIcon) && (React.createElement(OverviewItemDepiction, { "data-testid": dataTestId ? "".concat(dataTestId, "-progress-spinner") : undefined, "data-test-id": dataTestIdLegacy ? "".concat(dataTestIdLegacy, "-progress-spinner") : undefined, keepColors: true }, progressSpinnerFinishedIcon ? (React.cloneElement(progressSpinnerFinishedIcon, { small: small, large: !small })) : (React.createElement(Spinner, __assign({ position: "inline", size: small ? "tiny" : "small", stroke: small ? "bold" : "medium" }, progressSpinner, { className: spinnerClassNames }))))),
React.createElement(OverviewItemDescription, null,
props.label && (React.createElement(OverviewItemLine, { "data-testid": dataTestId ? "".concat(dataTestId, "-label") : undefined, "data-test-id": dataTestIdLegacy ? "".concat(dataTestIdLegacy, "-label") : undefined, small: small },
React.cloneElement(labelWrapper, {}, props.label),
timerExecutionMsg && (props.statusMessage || tags) && React.createElement(React.Fragment, null,
"\u00A0(",
timerExecutionMsg,
")"))),
(props.statusMessage || tags) && (React.createElement(OverviewItemLine, { "data-testid": dataTestId ? "".concat(dataTestId, "-status-message") : undefined, "data-test-id": dataTestIdLegacy ? "".concat(dataTestIdLegacy, "-status-message") : undefined, small: true },
tags,
props.statusMessage && (React.createElement(OverflowText, { passDown: true }, props.statusMessage.length > 50 ? (React.createElement(Tooltip, { content: props.statusMessage, size: "large", placement: "top-start", rootBoundary: "viewport" }, props.statusMessage)) : (props.statusMessage))))),
timerExecutionMsg && !(props.statusMessage || tags) && (React.createElement(OverviewItemLine, { "data-testid": dataTestId ? "".concat(dataTestId, "-status-message") : undefined, "data-test-id": dataTestIdLegacy ? "".concat(dataTestIdLegacy, "-status-message") : undefined, small: true }, timerExecutionMsg))),
React.createElement(OverviewItemActions, { "data-testid": dataTestId ? "".concat(dataTestId, "-actions") : undefined, "data-test-id": dataTestIdLegacy ? "".concat(dataTestIdLegacy, "-actions") : undefined },
activityActions &&
activityActions.map(function (action, idx) {
var _a, _b;
return (React.createElement(IconButton, { key: typeof action.icon === "string"
? action.icon
: (_b = (_a = action["data-test-id"]) !== null && _a !== void 0 ? _a : action["data-testid"]) !== null && _b !== void 0 ? _b : idx, "data-test-id": action["data-test-id"], "data-testid": action["data-testid"], name: action.icon, text: action.tooltip, onClick: action.action, disabled: action.disabled, intent: action.hasStateWarning ? "warning" : undefined, tooltipProps: {
hoverOpenDelay: 200,
placement: "bottom",
} }));
}),
additionalActions,
activityContextMenu && activityContextMenu.menuItems.length > 0 && (React.createElement(ContextMenu, { "data-test-id": activityContextMenu["data-test-id"], togglerText: activityContextMenu.tooltip }, activityContextMenu.menuItems.map(function (menuAction, idx) {
var _a;
return (React.createElement(MenuItem, { icon: menuAction.icon, key: typeof menuAction.icon === "string"
? menuAction.icon
: (_a = menuAction["data-test-id"]) !== null && _a !== void 0 ? _a : idx, onClick: menuAction.action, text: menuAction.tooltip }));
}))))));
var classname = "".concat(eccgui, "-addon-activitycontrol") + (canShrink ? " ".concat(eccgui, "-addon-activitycontrol--shrink") : "");
return border ? (React.createElement(Card, { isOnlyLayout: true, elevation: 0, className: classname }, widget)) : (React.createElement("div", { className: classname }, widget));
}
//# sourceMappingURL=ActivityControlWidget.js.map