@octopusdeploy/design-system-components
Version:
The design systems component library.
104 lines (103 loc) • 5.25 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PageActions = PageActions;
exports.toInternalPrimaryPageAction = toInternalPrimaryPageAction;
exports.toInternalPageAction = toInternalPageAction;
exports.PageActionComponent = PageActionComponent;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const type_utils_1 = require("@octopusdeploy/type-utils");
const react_1 = __importDefault(require("react"));
const Button_1 = require("../Button");
const Menu_1 = require("../Menu");
const Tooltip_1 = require("../Tooltip");
function PageActions({ primaryAction, actions, overflowActions }) {
const internalPrimaryAction = primaryAction !== undefined ? toInternalPrimaryPageAction(primaryAction) : undefined;
const internalPageActions = react_1.default.useMemo(() => actions?.map(toInternalPageAction) ?? [], [actions]);
if (internalPageActions.length === 0 && overflowActions?.length === 0 && !internalPrimaryAction) {
return null;
}
const pageHasOverflowActions = overflowActions && overflowActions.length > 0;
return ((0, jsx_runtime_1.jsxs)("div", { className: pageActionsContainerStyles, children: [internalPageActions.map((item) => ((0, jsx_runtime_1.jsx)(PageActionComponent, { item: item }, item.type === "custom" ? item.key : item.label))), internalPrimaryAction && (0, jsx_runtime_1.jsx)(PageActionComponent, { item: internalPrimaryAction }, "primary"), pageHasOverflowActions && (0, jsx_runtime_1.jsx)(Menu_1.OverflowMenu, { menuItems: overflowActions })] }));
}
const pageActionsContainerStyles = (0, css_1.css)({
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: design_system_tokens_1.space[16],
flexWrap: "wrap",
});
function toInternalPrimaryPageAction(action) {
return action.type === "custom"
? action
: {
...action,
buttonType: "primary",
};
}
function toInternalPageAction(action) {
switch (action.type) {
case "button":
return { ...action, buttonType: action.buttonType ?? "secondary" };
case "navigate":
return { ...action, buttonType: action.buttonType ?? "secondary" };
case "custom":
return action;
default:
(0, type_utils_1.exhaustiveCheck)(action, "Not all action types have been handled");
}
}
function PageActionComponent({ item }) {
return (0, jsx_runtime_1.jsx)(PageActionTooltip, { item: item, children: renderPageAction() });
function renderPageAction() {
switch (item.type) {
case "button":
return (0, jsx_runtime_1.jsx)(ButtonPageActionComponent, { item: item });
case "navigate":
return (0, jsx_runtime_1.jsx)(NavigatePageActionComponent, { item: item });
case "custom":
return (0, jsx_runtime_1.jsx)(CustomPageActionComponent, { item: item });
default:
(0, type_utils_1.exhaustiveCheck)(item, "Unexpected simple menu item type");
}
}
}
function ButtonPageActionComponent({ item }) {
return ((0, jsx_runtime_1.jsx)(Button_1.ActionButton, { label: item.label, formId: item.formId, busyLabel: item.busyLabel, onClick: item.onClick, type: getButtonType(item.buttonType), accessibleName: item.accessibleName, disabled: item.hasPermissions === false || item.disabled, menuButtonAttributes: item.menuButtonAttributes, icon: item.icon }));
}
function getButtonType(buttonType) {
switch (buttonType) {
case "primary":
return Button_1.ActionButtonType.Primary;
case "destructive":
return Button_1.ActionButtonType.Delete;
case "secondary":
return Button_1.ActionButtonType.Secondary;
case "tertiary":
return Button_1.ActionButtonType.Ternary;
default:
(0, type_utils_1.exhaustiveCheck)(buttonType, "Not all button types have been handled");
}
}
function NavigatePageActionComponent({ item }) {
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: item.buttonType, label: item.label, onClick: item.onClick, href: item.path, external: item.external, icon: item.icon, isDownload: item.isDownload, disabled: item.hasPermissions === false || item.disabled, title: item.titleAltText }));
}
function PageActionTooltip({ item, children }) {
if (item.hasPermissions === false) {
return (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: "You don't have permissions to perform this action.", children: children });
}
if (item.extraContext) {
return (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: item.extraContext, children: children });
}
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
}
function CustomPageActionComponent({ item }) {
if (item.hasPermissions === false) {
return null;
}
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item.content });
}