UNPKG

@patternfly/react-core

Version:

This library provides a set of common React components for use with the PatternFly reference implementation.

71 lines 6.57 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Button = exports.ButtonState = exports.ButtonSize = exports.ButtonType = exports.ButtonVariant = void 0; const tslib_1 = require("tslib"); const jsx_runtime_1 = require("react/jsx-runtime"); const react_1 = require("react"); const button_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Button/button")); const react_styles_1 = require("@patternfly/react-styles"); const Spinner_1 = require("../Spinner"); const ouia_1 = require("../../helpers/OUIA/ouia"); const Badge_1 = require("../Badge"); var ButtonVariant; (function (ButtonVariant) { ButtonVariant["primary"] = "primary"; ButtonVariant["secondary"] = "secondary"; ButtonVariant["tertiary"] = "tertiary"; ButtonVariant["danger"] = "danger"; ButtonVariant["warning"] = "warning"; ButtonVariant["link"] = "link"; ButtonVariant["plain"] = "plain"; ButtonVariant["control"] = "control"; ButtonVariant["stateful"] = "stateful"; })(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {})); var ButtonType; (function (ButtonType) { ButtonType["button"] = "button"; ButtonType["submit"] = "submit"; ButtonType["reset"] = "reset"; })(ButtonType || (exports.ButtonType = ButtonType = {})); var ButtonSize; (function (ButtonSize) { ButtonSize["default"] = "default"; ButtonSize["sm"] = "sm"; ButtonSize["lg"] = "lg"; })(ButtonSize || (exports.ButtonSize = ButtonSize = {})); var ButtonState; (function (ButtonState) { ButtonState["read"] = "read"; ButtonState["unread"] = "unread"; ButtonState["attention"] = "attention"; })(ButtonState || (exports.ButtonState = ButtonState = {})); const ButtonBase = (_a) => { var { children = null, className = '', component = 'button', isClicked = false, isBlock = false, isDisabled = false, isAriaDisabled = false, isLoading = null, isDanger = false, spinnerAriaValueText, spinnerAriaLabelledBy, spinnerAriaLabel, size = ButtonSize.default, inoperableEvents = ['onClick', 'onKeyPress'], isInline = false, type = ButtonType.button, variant = ButtonVariant.primary, state = ButtonState.unread, hasNoPadding = false, iconPosition = 'start', 'aria-label': ariaLabel = null, icon = null, role, ouiaId, ouiaSafe = true, tabIndex = null, innerRef, countOptions } = _a, props = tslib_1.__rest(_a, ["children", "className", "component", "isClicked", "isBlock", "isDisabled", "isAriaDisabled", "isLoading", "isDanger", "spinnerAriaValueText", "spinnerAriaLabelledBy", "spinnerAriaLabel", "size", "inoperableEvents", "isInline", "type", "variant", "state", "hasNoPadding", "iconPosition", 'aria-label', "icon", "role", "ouiaId", "ouiaSafe", "tabIndex", "innerRef", "countOptions"]); const ouiaProps = (0, ouia_1.useOUIAProps)(exports.Button.displayName, ouiaId, ouiaSafe, variant); const Component = component; const isButtonElement = Component === 'button'; const isInlineSpan = isInline && Component === 'span'; const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right'; const preventedEvents = inoperableEvents.reduce((handlers, eventToPrevent) => (Object.assign(Object.assign({}, handlers), { [eventToPrevent]: (event) => { event.preventDefault(); } })), {}); const getDefaultTabIdx = () => { if (isDisabled) { return isButtonElement ? null : -1; } else if (isAriaDisabled) { return null; } else if (isInlineSpan) { return 0; } }; const _icon = icon && ((0, jsx_runtime_1.jsx)("span", { className: (0, react_styles_1.css)(button_1.default.buttonIcon, children && button_1.default.modifiers[isIconAlignedAtEnd ? 'end' : 'start']), children: icon })); const _children = children && (0, jsx_runtime_1.jsx)("span", { className: (0, react_styles_1.css)('pf-v6-c-button__text'), children: children }); // We only want to render the aria-disabled attribute when true, similar to the disabled attribute natively. const shouldRenderAriaDisabled = isAriaDisabled || (!isButtonElement && isDisabled); return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), (shouldRenderAriaDisabled && { 'aria-disabled': true }), { "aria-label": ariaLabel, className: (0, react_styles_1.css)(button_1.default.button, button_1.default.modifiers[variant], isBlock && button_1.default.modifiers.block, isDisabled && !isButtonElement && button_1.default.modifiers.disabled, isAriaDisabled && button_1.default.modifiers.ariaDisabled, isClicked && button_1.default.modifiers.clicked, isInline && variant === ButtonVariant.link && button_1.default.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && button_1.default.modifiers.danger, isLoading !== null && variant !== ButtonVariant.plain && button_1.default.modifiers.progress, isLoading && button_1.default.modifiers.inProgress, hasNoPadding && variant === ButtonVariant.plain && button_1.default.modifiers.noPadding, variant === ButtonVariant.stateful && button_1.default.modifiers[state], size === ButtonSize.sm && button_1.default.modifiers.small, size === ButtonSize.lg && button_1.default.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : role, ref: innerRef }, ouiaProps, { children: [isLoading && ((0, jsx_runtime_1.jsx)("span", { className: (0, react_styles_1.css)(button_1.default.buttonProgress), children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: Spinner_1.spinnerSize.md, isInline: isInline, "aria-valuetext": spinnerAriaValueText, "aria-label": spinnerAriaLabel, "aria-labelledby": spinnerAriaLabelledBy }) })), isIconAlignedAtEnd ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [_children, _icon] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [_icon, _children] })), countOptions && ((0, jsx_runtime_1.jsx)("span", { className: (0, react_styles_1.css)(button_1.default.buttonCount, countOptions.className), children: (0, jsx_runtime_1.jsx)(Badge_1.Badge, { isRead: countOptions.isRead, isDisabled: isDisabled, children: countOptions.count }) }))] }))); }; exports.Button = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(ButtonBase, Object.assign({ innerRef: ref }, props))); exports.Button.displayName = 'Button'; //# sourceMappingURL=Button.js.map