@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
106 lines • 3.43 kB
JavaScript
import { AnimatePresence } from 'motion/react';
import React from 'react';
import Icon from '../../icon/Icon';
import Tooltip from '../../tooltip/Tooltip';
import { StyledActionButton, StyledActionContent, StyledIconSlot, StyledLabelWrapper, StyledSecondaryLabel } from './ActionButton.styles';
import { PopupAlignment } from '../../../types/popup';
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
}) => {
const isPrimary = actionType === 'primary';
const isSecondary = actionType === 'secondary';
const actionColor = action.color ?? '#FFFFFF';
const isActionDisabled = isDisabled || Boolean(action.isDisabled);
const disabledReason = action.disabledReason?.trim();
const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
const iconSize = height - 24;
const actionContent = /*#__PURE__*/React.createElement(StyledActionContent, null, /*#__PURE__*/React.createElement(StyledIconSlot, {
$height: height,
$isDisabled: isActionDisabled
}, typeof action.icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
icons: [action.icon],
color: actionColor,
size: iconSize
}) : action.icon), /*#__PURE__*/React.createElement(AnimatePresence, {
initial: false
}, showLabel && /*#__PURE__*/React.createElement(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__*/React.createElement(StyledSecondaryLabel, {
style: {
color: actionColor
}
}, action.label))));
return /*#__PURE__*/React.createElement(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?.pulseColors,
$height: height,
$statusType: action.status?.type,
$shouldUseContentWidth: shouldUseContentWidth,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onFocus: onFocus,
onBlur: onBlur,
type: "button"
}, shouldShowDisabledReason && disabledReason ? /*#__PURE__*/React.createElement(Tooltip, {
alignment: PopupAlignment.BottomRight,
item: {
text: disabledReason
},
maxItemWidth: 400
}, actionContent) : actionContent);
};
ActionButton.displayName = 'ActionButton';
export default ActionButton;
//# sourceMappingURL=ActionButton.js.map