@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 Icon from '../icon/Icon';
import { StyledIconWrapper, StyledMotionButton, StyledMotionChildrenWrapper, StyledMotionWaitCursorWrapper } from './Button.styles';
import WaitCursor from './wait-cursor/WaitCursor';
const Button = _ref => {
  let {
    children,
    className,
    icon,
    isDisabled,
    isSecondary,
    onClick,
    shouldShowWaitCursor,
    shouldStopPropagation,
    shouldShowAsSelectButton = false,
    shouldShowTextAsRobotoMedium = true
  } = _ref;
  const handleClick = event => {
    if (shouldStopPropagation) {
      event.stopPropagation();
    }
    onClick(event);
  };
  const buttonClasses = clsx('beta-chayns-button ellipsis', className);
  const theme = useTheme();
  const iconColor = useMemo(() => {
    if (isSecondary) {
      return theme.text;
    }
    return theme.buttonDesign === '2' ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white';
  }, [isSecondary, theme.buttonBackgroundColor, theme.buttonColor, theme.buttonDesign, theme.text]);
  const backgroundColor = useMemo(() => {
    let color;
    if (isSecondary || shouldShowAsSelectButton) {
      color = theme['202'];
    } else {
      color = theme.buttonBackgroundColor ?? theme['408'];
    }
    if (theme.buttonDesign === '2') {
      color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
    }
    return color;
  }, [isSecondary, shouldShowAsSelectButton, theme]);
  const tapStyles = useMemo(() => {
    if (theme.buttonDesign === '2') {
      return {
        backgroundColor: isSecondary || shouldShowAsSelectButton ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)` : `${theme.buttonBackgroundColor ?? ''}40`
      };
    }
    return {
      opacity: 0.6
    };
  }, [isSecondary, shouldShowAsSelectButton, theme]);
  const hoverStyles = useMemo(() => {
    if (theme.buttonDesign === '2') {
      return {
        backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)`
      };
    }
    return {
      opacity: 1
    };
  }, [theme]);
  return /*#__PURE__*/React.createElement(StyledMotionButton, {
    $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
    $shouldShowAsSelectButton: shouldShowAsSelectButton,
    $shouldShowWaitCursor: shouldShowWaitCursor,
    className: buttonClasses,
    disabled: isDisabled,
    $isDisabled: isDisabled,
    $hasChildren: !!children,
    $hasIcon: typeof icon === 'string' && icon !== '',
    $isSecondary: isSecondary,
    onClick: handleClick,
    style: {
      visibility: !backgroundColor ? 'hidden' : 'visible',
      backgroundColor
    },
    initial: {
      opacity: 0.5
    },
    animate: {
      opacity: isDisabled ? 0.5 : 1
    },
    transition: {
      visibility: {
        duration: 0
      }
    },
    whileTap: isDisabled ? {} : {
      ...tapStyles
    },
    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