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

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

import clsx from 'clsx';
import { AnimatePresence } from 'motion/react';
import React, { useMemo } from 'react';
import { useTheme } from 'styled-components';
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
import Icon from '../icon/Icon';
import { StyledIconWrapper, StyledMotionButton, StyledMotionChildrenWrapper, StyledMotionWaitCursorWrapper } from './Button.styles';
import WaitCursor from './wait-cursor/WaitCursor';
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 = clsx('beta-chayns-button ellipsis', className);
  const theme = useTheme();
  const effectiveButtonDesign = buttonDesign ?? theme.buttonDesign;
  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
  const iconColor = 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 = 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 = 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 = useMemo(() => {
    if (effectiveButtonDesign === 2) {
      return {
        backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)`
      };
    }
    return {
      opacity: 1
    };
  }, [theme, effectiveButtonDesign]);
  return /*#__PURE__*/React.createElement(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__*/React.createElement(AnimatePresence, {
    initial: false
  }, icon && /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
    color: iconColor,
    icons: [icon]
  })), shouldShowWaitCursor && /*#__PURE__*/React.createElement(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__*/React.createElement(WaitCursor, {
    color: iconColor ?? 'white',
    shouldHideBackground: true
  })), !shouldShowWaitCursor && children && /*#__PURE__*/React.createElement(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';
export default Button;
//# sourceMappingURL=Button.js.map