@chayns-components/core/lib/cjs/components/button/Button.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _styledComponents = require("styled-components");
var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
var _Icon = _interopRequireDefault(require("../icon/Icon"));
var _Button = require("./Button.styles");
var _WaitCursor = _interopRequireDefault(require("./wait-cursor/WaitCursor"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Button = ({
  children,
  className,
  icon,
  isDisabled,
  isSecondary,
  onClick,
  shouldShowWaitCursor,
  shouldStopPropagation,
  shouldShowAsSelectButton = false,
  shouldShowTextAsRobotoMedium = true,
  buttonDesign,
  tapDuration = 0.5,
  shouldEnableKeyboardHighlighting
}) => {
  const handleClick = event => {
    if (shouldStopPropagation) {
      event.stopPropagation();
    }
    onClick(event);
  };
  const buttonClasses = (0, _clsx.default)('beta-chayns-button ellipsis', className);
  const theme = (0, _styledComponents.useTheme)();
  const effectiveButtonDesign = buttonDesign ?? theme.buttonDesign;
  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
  const iconColor = (0, _react2.useMemo)(() => {
    if (isSecondary) {
      return theme.text;
    }
    return effectiveButtonDesign === 2 ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white';
  }, [isSecondary, theme.buttonBackgroundColor, theme.buttonColor, effectiveButtonDesign, theme.text]);
  const backgroundColor = (0, _react2.useMemo)(() => {
    let color;
    if (isSecondary || shouldShowAsSelectButton) {
      color = theme['202'];
    } else {
      color = theme.buttonBackgroundColor ?? theme['408'];
    }
    if (effectiveButtonDesign === 2) {
      color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
    }
    return color;
  }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);
  const tapStyles = (0, _react2.useMemo)(() => {
    if (effectiveButtonDesign === 2) {
      return {
        backgroundColor: isSecondary || shouldShowAsSelectButton ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)` : `${theme.buttonBackgroundColor ?? ''}40`
      };
    }
    return {
      opacity: 0.6
    };
  }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);
  const hoverStyles = (0, _react2.useMemo)(() => {
    if (effectiveButtonDesign === 2) {
      return {
        backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)`
      };
    }
    return {
      opacity: 1
    };
  }, [theme, effectiveButtonDesign]);
  return /*#__PURE__*/_react2.default.createElement(_Button.StyledMotionButton, {
    $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
    $shouldShowAsSelectButton: shouldShowAsSelectButton,
    $shouldShowWaitCursor: shouldShowWaitCursor,
    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
    className: buttonClasses,
    disabled: isDisabled,
    $isDisabled: isDisabled,
    $hasChildren: !!children,
    $hasIcon: typeof icon === 'string' && icon !== '',
    $isSecondary: isSecondary,
    $effectiveButtonDesign: effectiveButtonDesign,
    onClick: handleClick,
    style: {
      visibility: !backgroundColor ? 'hidden' : 'visible',
      backgroundColor
    },
    initial: {
      opacity: 0.5
    },
    animate: {
      opacity: isDisabled ? 0.5 : 1
    },
    transition: {
      visibility: {
        duration: 0
      },
      duration: tapDuration,
      ease: 'easeIn',
      type: 'tween'
    },
    whileTap: isDisabled ? {} : {
      ...tapStyles,
      transition: {
        duration: 0
      }
    },
    whileHover: isDisabled ? {} : {
      ...hoverStyles
    }
  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
    initial: false
  }, icon && /*#__PURE__*/_react2.default.createElement(_Button.StyledIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
    color: iconColor,
    icons: [icon]
  })), shouldShowWaitCursor && /*#__PURE__*/_react2.default.createElement(_Button.StyledMotionWaitCursorWrapper, {
    animate: {
      opacity: 1,
      width: 40
    },
    exit: {
      opacity: 0,
      width: 0
    },
    initial: {
      opacity: 0,
      width: 0
    },
    key: "wait-cursor",
    style: {
      overflow: 'hidden'
    },
    transition: {
      duration: 0.2
    }
  }, /*#__PURE__*/_react2.default.createElement(_WaitCursor.default, {
    color: iconColor ?? 'white',
    shouldHideBackground: true
  })), !shouldShowWaitCursor && children && /*#__PURE__*/_react2.default.createElement(_Button.StyledMotionChildrenWrapper, {
    animate: {
      opacity: 1,
      width: 'auto'
    },
    exit: {
      opacity: 0,
      width: 0
    },
    initial: {
      opacity: 0,
      width: 0
    },
    key: "children"
    // style={{ overflow: 'hidden' }}
    ,
    transition: {
      duration: 0.2
    }
  }, children)));
};
Button.displayName = 'Button';
var _default = exports.default = Button;
//# sourceMappingURL=Button.js.map