@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
114 lines (113 loc) • 4.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("motion/react");
var _react2 = _interopRequireDefault(require("react"));
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
var _Tooltip = _interopRequireDefault(require("../../tooltip/Tooltip"));
var _ActionButton = require("./ActionButton.styles");
var _popup = require("../../../types/popup");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const LABEL_GAP = 6;
const LABEL_TRANSITION = {
duration: 0.3
};
/**
* Shared action button UI used by both primary and secondary actions.
* Keeps layout and animations consistent while isolating styling details.
*/
const ActionButton = ({
action,
actionType,
backgroundColor,
isCollapsed,
isDisabled,
isExpanded,
isHidden,
isShrunk,
isSolo,
onClick,
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
showLabel,
shouldUseContentWidth,
height,
shouldShowKeyboardHighlighting = false
}) => {
var _action$disabledReaso, _action$status, _action$status2;
const isPrimary = actionType === 'primary';
const isSecondary = actionType === 'secondary';
const actionColor = action.color ?? '#FFFFFF';
const isActionDisabled = isDisabled || Boolean(action.isDisabled);
const disabledReason = (_action$disabledReaso = action.disabledReason) === null || _action$disabledReaso === void 0 ? void 0 : _action$disabledReaso.trim();
const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
const iconSize = height - 24;
const actionContent = /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionContent, null, /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledIconSlot, {
$height: height,
$isDisabled: isActionDisabled
}, typeof action.icon === 'string' ? /*#__PURE__*/_react2.default.createElement(_Icon.default, {
icons: [action.icon],
color: actionColor,
size: iconSize
}) : action.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
initial: false
}, showLabel && /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledLabelWrapper, {
animate: {
opacity: 1,
width: 'auto',
marginLeft: LABEL_GAP
},
exit: {
opacity: 0,
width: 0,
marginLeft: 0
},
initial: {
opacity: 0,
width: 0,
marginLeft: 0
},
transition: LABEL_TRANSITION
}, /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledSecondaryLabel, {
style: {
color: actionColor
}
}, action.label))));
return /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionButton, {
"aria-disabled": isActionDisabled,
disabled: isActionDisabled && !shouldShowDisabledReason,
$backgroundColor: backgroundColor,
$isCollapsed: isCollapsed,
$isExpanded: isSecondary ? isExpanded : undefined,
$isInteractionDisabled: isActionDisabled,
$isHidden: isSecondary ? isHidden : undefined,
$isPrimary: isPrimary,
$isSecondary: isSecondary,
$isShrunk: isPrimary ? isShrunk : undefined,
$isSolo: isPrimary ? isSolo : undefined,
$pulseColors: (_action$status = action.status) === null || _action$status === void 0 ? void 0 : _action$status.pulseColors,
$height: height,
$statusType: (_action$status2 = action.status) === null || _action$status2 === void 0 ? void 0 : _action$status2.type,
$shouldUseContentWidth: shouldUseContentWidth,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onFocus: onFocus,
onBlur: onBlur,
type: "button"
}, shouldShowDisabledReason && disabledReason ? /*#__PURE__*/_react2.default.createElement(_Tooltip.default, {
alignment: _popup.PopupAlignment.BottomRight,
item: {
text: disabledReason
},
maxItemWidth: 400
}, actionContent) : actionContent);
};
ActionButton.displayName = 'ActionButton';
var _default = exports.default = ActionButton;
//# sourceMappingURL=ActionButton.js.map