@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
49 lines • 2.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlokButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const CoreComponents_1 = require("../CoreComponents");
/**
* Maps the BlokButton color schemes to MUI Button color props.
*/
const MuiButtonColorMap = {
primary: "primary",
danger: "error",
warning: "warning",
success: "success",
info: "info",
neutral: "inherit",
ai: "ai",
};
const CircularProgressColorMap = {
primary: "primary",
danger: "error",
warning: "warning",
success: "success",
info: "info",
neutral: "inherit",
ai: "ai", // Use a valid color for CircularProgress
};
/**
* Maps the BlokButton variants to MUI Button variant props.
*/
const MuiButtonVariantMap = {
solid: "contained",
outline: "outlined",
ghost: "text",
link: "link",
toggle: "toggle",
ai: "ai",
navigation: "navigation",
filter: "filter",
};
/**
* BlokButton component that wraps the MUI Button component with additional props and styles.
*/
const BlokButton = ({ ref, colorScheme = "neutral", variant = "ghost", id, children, isDisabled, isLoading, isActive, className, isFloating, loadingText, size = "medium", startIcon, endIcon, href, target, buttonType = "button", onClick, onMouseDown, onMouseOver, count, onContextMenu, isIconButton = false, ...extraProps }) => {
const childrenToUse = isIconButton ? (children) : ((0, jsx_runtime_1.jsx)("span", { className: "blok-button-label", children: children }));
return ((0, jsx_runtime_1.jsxs)(CoreComponents_1.Button, { variant: MuiButtonVariantMap[variant], color: MuiButtonColorMap[colorScheme], "data-testid": id, disabled: isDisabled || isLoading, className: (0, css_1.cx)(isActive && "button-active", isFloating && `shadow-md`, className), size: size, startIcon: startIcon, endIcon: endIcon, href: href, role: href != null ? "link" : "button", disableRipple: true, type: buttonType, onClick: onClick, onMouseDown: onMouseDown, onMouseOver: onMouseOver, onContextMenu: onContextMenu, ref: ref, ...extraProps, ...(href ? { target } : {}), children: [isLoading && ((0, jsx_runtime_1.jsx)(CoreComponents_1.CircularProgress, { size: 14, color: CircularProgressColorMap[colorScheme] })), loadingText ? loadingText : childrenToUse, count != null && count !== 0 && count !== "0" && ((0, jsx_runtime_1.jsx)("span", { "data-style-name": "operation-count", className: "button-count", children: count }))] }));
};
exports.BlokButton = BlokButton;
//# sourceMappingURL=BlokButton.js.map