@octopusdeploy/design-system-components
Version:
The design systems component library.
94 lines (93 loc) • 4.38 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionButtonType = void 0;
exports.ActionButton = ActionButton;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const useIsBusy_1 = require("../../hooks/useIsBusy");
const noOp_1 = require("../../utils/noOp");
const Button_1 = require("./Button");
var ActionButtonType;
(function (ActionButtonType) {
ActionButtonType["Primary"] = "Primary";
ActionButtonType["Secondary"] = "Secondary";
ActionButtonType["Ternary"] = "Ternary";
ActionButtonType["Save"] = "Save";
ActionButtonType["Delete"] = "Delete";
})(ActionButtonType || (exports.ActionButtonType = ActionButtonType = {}));
/**
* @deprecated
* Deprecated: 27/03/2026
* Replacement: Button.tsx
* Migration guidelines:
* - The disabled prop no longer supports a Promise. Rely on an async onClick handler, or pass in a boolean instead.
* - The busyLabel prop is no longer supported.
*/
function ActionButton({ label, accessibleName, title, busyLabel, disabled: disabledPromise, type, icon, tabIndex, keyboardFocused, onClick, formId, menuButtonAttributes }) {
// We are doubling up on the handling of the onClick promise here and in Button because the Button does not support `busyLabel`
const [onClickInvocation, setOnClickInvocation] = React.useState();
const invokePromiseOnClick = React.useCallback(async (event) => {
if (!onClick) {
return;
}
if (event.preventDefault) {
event.preventDefault();
}
const promise = onClick(event);
setOnClickInvocation(promise ?? undefined);
return promise;
}, [onClick]);
const isBusy = (0, useIsBusy_1.useIsBusy)(onClickInvocation);
const isDisabled = (0, useIsBusy_1.useIsBusy)(disabledPromise) || isBusy;
const labelToShow = isBusy && busyLabel ? busyLabel : label;
const handleOnClick = isDisabled ? noOp_1.noOp : (e) => invokePromiseOnClick(e);
const isSubmit = type === ActionButtonType.Primary || type === ActionButtonType.Save || type === ActionButtonType.Delete;
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: getButtonImportance(type), label: labelToShow, isSubmit: isSubmit, title: title, disabled: isDisabled, icon: icon, onClick: handleOnClick, autoFocus: keyboardFocused, formId: formId, tabIndex: tabIndex, accessibleName: accessibleName, "aria-controls": menuButtonAttributes?.["aria-controls"], "aria-haspopup": menuButtonAttributes?.["aria-haspopup"], "aria-expanded": menuButtonAttributes?.["aria-expanded"] }));
}
function getButtonImportance(type) {
switch (type) {
case ActionButtonType.Primary:
case ActionButtonType.Save:
return "primary";
case ActionButtonType.Ternary:
return "quiet";
case ActionButtonType.Delete:
return "destructive";
case ActionButtonType.Secondary:
default:
return "secondary";
}
}