@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
54 lines • 6.25 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) => react_1.default.createElement(ActivityActionButton, { key: idx, action: action })),
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) => {
return (react_1.default.createElement(index_1.MenuItem, { icon: menuAction.icon, key: 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));
}
const ActivityActionButton = ({ action }) => {
var _a;
const actionButtonRef = react_1.default.useRef(null);
const ActionButton = () => (react_1.default.createElement(index_1.IconButton, { "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"
}, active: action.active }));
return action.notification ?
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { ref: actionButtonRef },
react_1.default.createElement(ActionButton, null)),
actionButtonRef.current && (react_1.default.createElement(index_1.DecoupledOverlay, { targetSelectorOrElement: actionButtonRef.current, paddingSize: "small" },
react_1.default.createElement(index_1.Notification, { message: action.notification.message, intent: (_a = action.notification.intent) !== null && _a !== void 0 ? _a : "neutral", onDismiss: action.notification.onClose, timeout: action.notification.timeout })))) :
react_1.default.createElement(ActionButton, null);
};
//# sourceMappingURL=ActivityControlWidget.js.map