@breakaway/react-core
Version:
This library provides a set of common React components for use with the PatternFly reference implementation.
63 lines • 6.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NewButton = exports.NewButtonType = exports.NewButtonVariant = void 0;
const tslib_1 = require("tslib");
// @ts-nocheck
const React = tslib_1.__importStar(require("react"));
const button_module_js_1 = tslib_1.__importDefault(require("@breakaway/react-styles/css/components/Button/button.module.js"));
const base_module_css_1 = tslib_1.__importDefault(require("@breakaway/react-styles/css/base/base.module.css"));
const button_module_css_1 = tslib_1.__importDefault(require("@breakaway/react-styles/css/components/Button/button.module.css"));
const react_styles_1 = require("@breakaway/react-styles");
const Spinner_1 = require("../Spinner");
const helpers_1 = require("../../helpers");
const Badge_1 = require("../Badge");
var NewButtonVariant;
(function (NewButtonVariant) {
NewButtonVariant["primary"] = "primary";
NewButtonVariant["secondary"] = "secondary";
NewButtonVariant["tertiary"] = "tertiary";
NewButtonVariant["danger"] = "danger";
NewButtonVariant["warning"] = "warning";
NewButtonVariant["link"] = "link";
NewButtonVariant["plain"] = "plain";
NewButtonVariant["control"] = "control";
})(NewButtonVariant = exports.NewButtonVariant || (exports.NewButtonVariant = {}));
var NewButtonType;
(function (NewButtonType) {
NewButtonType["button"] = "button";
NewButtonType["submit"] = "submit";
NewButtonType["reset"] = "reset";
})(NewButtonType = exports.NewButtonType || (exports.NewButtonType = {}));
const ButtonBase = (_a) => {
var { children = null, className = '', component = 'button', isActive = false, isBlock = false, isDisabled = false, isAriaDisabled = false, isLoading = null, isDanger = false, spinnerAriaValueText, spinnerAriaLabelledBy, spinnerAriaLabel, isSmall = false, isLarge = false, inoperableEvents = ['onClick', 'onKeyPress'], isInline = false, type = NewButtonType.button, variant = NewButtonVariant.primary, iconPosition = 'left', 'aria-label': ariaLabel = null, icon = null, ouiaId, ouiaSafe = true, tabIndex = null, innerRef, countOptions, useDarkTheme = false } = _a, props = tslib_1.__rest(_a, ["children", "className", "component", "isActive", "isBlock", "isDisabled", "isAriaDisabled", "isLoading", "isDanger", "spinnerAriaValueText", "spinnerAriaLabelledBy", "spinnerAriaLabel", "isSmall", "isLarge", "inoperableEvents", "isInline", "type", "variant", "iconPosition", 'aria-label', "icon", "ouiaId", "ouiaSafe", "tabIndex", "innerRef", "countOptions", "useDarkTheme"]);
const ouiaProps = helpers_1.useOUIAProps(exports.NewButton.displayName, ouiaId, ouiaSafe, variant);
const Component = component;
const isButtonElement = Component === 'button';
const isInlineSpan = isInline && Component === 'span';
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;
}
};
return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: react_styles_1.css(base_module_css_1.default.root, button_module_css_1.default[button_module_js_1.default.button], button_module_css_1.default[button_module_js_1.default.modifiers[variant]], isBlock && button_module_css_1.default[button_module_js_1.default.modifiers.block], isDisabled && button_module_css_1.default[button_module_js_1.default.modifiers.disabled], isAriaDisabled && button_module_css_1.default[button_module_js_1.default.modifiers.ariaDisabled], isActive && button_module_css_1.default[button_module_js_1.default.modifiers.active], isInline && variant === NewButtonVariant.link && button_module_css_1.default[button_module_js_1.default.modifiers.inline], isDanger && (variant === NewButtonVariant.secondary || variant === NewButtonVariant.link) && button_module_css_1.default[button_module_js_1.default.modifiers.danger], isLoading !== null && children !== null && button_module_css_1.default[button_module_js_1.default.modifiers.progress], isLoading && button_module_css_1.default[button_module_js_1.default.modifiers.inProgress], isSmall && button_module_css_1.default[button_module_js_1.default.modifiers.small], isLarge && button_module_css_1.default[button_module_js_1.default.modifiers.displayLg], useDarkTheme && button_module_css_1.default[button_module_js_1.default.themeDark], className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
isLoading && (React.createElement("span", { className: react_styles_1.css(button_module_css_1.default[button_module_js_1.default.buttonProgress]) },
React.createElement(Spinner_1.Spinner, { size: Spinner_1.spinnerSize.md, "aria-valuetext": spinnerAriaValueText, "aria-label": spinnerAriaLabel, "aria-labelledby": spinnerAriaLabelledBy }))),
variant === NewButtonVariant.plain && children === null && icon ? icon : null,
variant !== NewButtonVariant.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: react_styles_1.css(button_module_css_1.default[button_module_js_1.default.buttonIcon], button_module_css_1.default[button_module_js_1.default.modifiers.start]) }, icon)),
children,
variant !== NewButtonVariant.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: react_styles_1.css(button_module_css_1.default[button_module_js_1.default.buttonIcon], button_module_css_1.default[button_module_js_1.default.modifiers.end]) }, icon)),
countOptions && (React.createElement("span", { className: react_styles_1.css(button_module_css_1.default[button_module_js_1.default.buttonCount], countOptions.className) },
React.createElement(Badge_1.Badge, { isRead: countOptions.isRead }, countOptions.count)))));
};
exports.NewButton = React.forwardRef((props, ref) => (React.createElement(ButtonBase, Object.assign({ innerRef: ref }, props))));
exports.NewButton.displayName = 'NewButton';
//# sourceMappingURL=NewButton.js.map