@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
50 lines • 5.8 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActivityControlWidget = ActivityControlWidget;
const react_1 = __importDefault(require("react"));
const constants_1 = require("../../configuration/constants");
const index_1 = require("../../index");
/** Shows the status of activities and supports actions on these activities. */
function ActivityControlWidget(props) {
var _a;
const { "data-test-id": dataTestIdLegacy, "data-testid": dataTestId, progressBar, progressSpinner, activityActions, activityContextMenu, additionalActions, small, border, hasSpacing, canShrink, tags, progressSpinnerFinishedIcon, timerExecutionMsg = "", labelWrapper = react_1.default.createElement(index_1.OverflowText, { inline: true }), } = props;
const spinnerClassNames = ((_a = progressSpinner === null || progressSpinner === void 0 ? void 0 : progressSpinner.className) !== null && _a !== void 0 ? _a : "") + ` ${constants_1.CLASSPREFIX}-spinner--permanent`;
const widget = (react_1.default.createElement(index_1.OverviewItem, { "data-test-id": dataTestIdLegacy, "data-testid": dataTestId, hasSpacing: border || hasSpacing, densityHigh: small },
progressBar && react_1.default.createElement(index_1.ProgressBar, Object.assign({}, progressBar)),
(progressSpinner || progressSpinnerFinishedIcon) && (react_1.default.createElement(index_1.OverviewItemDepiction, { "data-testid": dataTestId ? `${dataTestId}-progress-spinner` : undefined, "data-test-id": dataTestIdLegacy ? `${dataTestIdLegacy}-progress-spinner` : undefined, keepColors: true }, progressSpinnerFinishedIcon ? (react_1.default.cloneElement(progressSpinnerFinishedIcon, { small, large: !small })) : (react_1.default.createElement(index_1.Spinner, Object.assign({ position: "inline", size: small ? "tiny" : "small", stroke: small ? "bold" : "medium" }, progressSpinner, { className: spinnerClassNames }))))),
react_1.default.createElement(index_1.OverviewItemDescription, null,
props.label && (react_1.default.createElement(index_1.OverviewItemLine, { "data-testid": dataTestId ? `${dataTestId}-label` : undefined, "data-test-id": dataTestIdLegacy ? `${dataTestIdLegacy}-label` : undefined, small: small },
react_1.default.cloneElement(labelWrapper, {}, props.label),
timerExecutionMsg && (props.statusMessage || tags) && react_1.default.createElement(react_1.default.Fragment, null,
"\u00A0(",
timerExecutionMsg,
")"))),
(props.statusMessage || tags) && (react_1.default.createElement(index_1.OverviewItemLine, { "data-testid": dataTestId ? `${dataTestId}-status-message` : undefined, "data-test-id": dataTestIdLegacy ? `${dataTestIdLegacy}-status-message` : undefined, small: true },
tags,
props.statusMessage && (react_1.default.createElement(index_1.OverflowText, { passDown: true }, props.statusMessage.length > 50 ? (react_1.default.createElement(index_1.Tooltip, { content: props.statusMessage, size: "large", placement: "top-start", rootBoundary: "viewport" }, props.statusMessage)) : (props.statusMessage))))),
timerExecutionMsg && !(props.statusMessage || tags) && (react_1.default.createElement(index_1.OverviewItemLine, { "data-testid": dataTestId ? `${dataTestId}-status-message` : undefined, "data-test-id": dataTestIdLegacy ? `${dataTestIdLegacy}-status-message` : undefined, small: true }, timerExecutionMsg))),
react_1.default.createElement(index_1.OverviewItemActions, { "data-testid": dataTestId ? `${dataTestId}-actions` : undefined, "data-test-id": dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined },
activityActions &&
activityActions.map((action, idx) => {
var _a, _b;
return (react_1.default.createElement(index_1.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_1.default.createElement(index_1.ContextMenu, { "data-test-id": activityContextMenu["data-test-id"], togglerText: activityContextMenu.tooltip }, activityContextMenu.menuItems.map((menuAction, idx) => {
var _a;
return (react_1.default.createElement(index_1.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 }));
}))))));
const classname = `${constants_1.CLASSPREFIX}-addon-activitycontrol` + (canShrink ? ` ${constants_1.CLASSPREFIX}-addon-activitycontrol--shrink` : "");
return border ? (react_1.default.createElement(index_1.Card, { isOnlyLayout: true, elevation: 0, className: classname }, widget)) : (react_1.default.createElement("div", { className: classname }, widget));
}
//# sourceMappingURL=ActivityControlWidget.js.map