@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
47 lines • 3.66 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MediaButtonStandalone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const type_1 = require("../button/types/type");
//components
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const loader_1 = require("../loader/loader");
// styles
const mediaButton_styled_1 = require("./mediaButton.styled");
//constants
const TRANSITION_DURATION = '0.4s';
const FIRST_ICON_TWISTED_TRANSFORM_VALUE = 'rotateY(180deg) rotateZ(90deg)';
const FIRST_ICON_NOT_TWISTED_TRANSFORM_VALUE = 'rotateY(0deg) rotateZ(0deg)';
const SECOND_ICON_NOT_TWISTED_TRANSFORM_VALUE = 'rotateY(0deg) rotateZ(0deg)';
const SECOND_ICON_TWISTED_TRANSFORM_VALUE = 'rotateY(-180deg) rotateZ(-90deg)';
const MediaButtonStandaloneComponent = (props, ref) => {
const iconSize = props.styles?.buttonContainer?.width;
const iconColor = props.disabled
? props.styles?.icon?.disabled?.color
: props.styles?.icon?.color;
const { ['aria-label']: iconAriaLabel, altText: iconAltText, ...icon } = props.icon;
const { ['aria-label']: twistedIconAriaLabel, altText: twistedIconAltText, ...twistedIcon } = props.twistedIcon ?? {};
const ariaLabel = props.twisted
? (twistedIconAriaLabel ?? twistedIconAltText)
: (iconAriaLabel ?? iconAltText);
// When 'twisted' changes, We turn around the icon combined with the css property backface-visibility=hidden in the file icon.styled.ts
const iconTwistAnimationTransformValue = props.twisted
? FIRST_ICON_TWISTED_TRANSFORM_VALUE
: FIRST_ICON_NOT_TWISTED_TRANSFORM_VALUE;
const twistedIconTwistAnimationTransformValue = props.twisted
? SECOND_ICON_NOT_TWISTED_TRANSFORM_VALUE
: SECOND_ICON_TWISTED_TRANSFORM_VALUE;
return ((0, jsx_runtime_1.jsx)(mediaButton_styled_1.ContainerStyled, { ref: ref, "aria-label": ariaLabel, disabled: props.disabled, hasBackground: props.hasBackground, loading: props.loading, styles: props.styles, tabIndex: props.tabIndex, twistedIcon: !!twistedIcon, type: type_1.ButtonType.BUTTON, onClick: props.onClick, children: (0, jsx_runtime_1.jsxs)(mediaButton_styled_1.ButtonStyled, { styles: props.styles, children: [(props.styles?.loader?.variant || props.loader?.variant) && ((0, jsx_runtime_1.jsx)(loader_1.Loader, { variant: props.styles?.loader?.variant, visible: props.loading, width: iconSize, ...props.loader })), !props.loading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: iconColor, height: iconSize, tabIndex: props.twisted ? -1 : 0, transitionDuration: TRANSITION_DURATION, twistAnimationTransformValue: twistedIcon ? iconTwistAnimationTransformValue : null, width: iconSize, ...icon }), twistedIcon && ((0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: props.styles?.iconToTransition?.color, height: iconSize, tabIndex: props.twisted ? 0 : -1, transitionDuration: TRANSITION_DURATION, twistAnimationTransformValue: twistedIconTwistAnimationTransformValue, width: iconSize, ...twistedIcon }))] }))] }) }));
};
/**
* @description
* MediaButton component is used to show a button with an icon.
* @param {React.PropsWithChildren<IMediaButtonStandAlone>} props
* @returns {JSX.Element}
*/
exports.MediaButtonStandalone = react_1.default.forwardRef(MediaButtonStandaloneComponent);
//# sourceMappingURL=mediaButtonStandAlone.js.map