@geezee/react-ui/esm/button/button.js

Modern and minimalist React UI library.

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _JSXStyle from "styled-jsx/style";
import React, { useRef, useState, useMemo, useImperativeHandle } from 'react';
import useTheme from '../styles/use-theme';
import ButtonDrip from './button.drip';
import ButtonLoading from './button-loading';
import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils';
import { useButtonGroupContext } from '../button-group/button-group-context';
import { getButtonColors, getButtonCursor, getButtonDripColor, getButtonSize, getTagSize } from './styles';
var defaultButtonProps = {
  toggleable: false,
  isTag: false,
  variant: 'line',
  color: 'default',
  size: 'medium',
  htmlType: 'button',
  ghost: false,
  loading: false,
  shadow: false,
  auto: false,
  effect: true,
  disabled: false,
  className: '',
  dashed: false
};
var defaultTagProps = {
  toggleable: false,
  isTag: true,
  variant: 'line',
  color: 'default',
  size: 'medium',
  effect: true,
  disabled: false,
  className: ''
};

var TagOrButtonRender = function TagOrButtonRender(_ref, ref) {
  var btnProps = _extends({}, _ref);

  var theme = useTheme();
  var buttonRef = useRef(null);
  useImperativeHandle(ref, function () {
    return buttonRef.current;
  });

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      dripShow = _useState4[0],
      setDripShow = _useState4[1];

  var _useState5 = useState(0),
      _useState6 = _slicedToArray(_useState5, 2),
      dripX = _useState6[0],
      setDripX = _useState6[1];

  var _useState7 = useState(0),
      _useState8 = _slicedToArray(_useState7, 2),
      dripY = _useState8[0],
      setDripY = _useState8[1];

  var groupConfig = useButtonGroupContext();
  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);

  var toggleable = filteredProps.toggleable,
      children = filteredProps.children,
      disabled = filteredProps.disabled,
      variant = filteredProps.variant,
      color = filteredProps.color,
      loading = filteredProps.loading,
      shadow = filteredProps.shadow,
      ghost = filteredProps.ghost,
      effect = filteredProps.effect,
      onClick = filteredProps.onClick,
      auto = filteredProps.auto,
      size = filteredProps.size,
      icon = filteredProps.icon,
      htmlType = filteredProps.htmlType,
      iconRight = filteredProps.iconRight,
      className = filteredProps.className,
      isTag = filteredProps.isTag,
      dashed = filteredProps.dashed,
      props = _objectWithoutProperties(filteredProps, ["toggleable", "children", "disabled", "variant", "color", "loading", "shadow", "ghost", "effect", "onClick", "auto", "size", "icon", "htmlType", "iconRight", "className", "isTag", "dashed"]);

  var buttonOrTagColors = useMemo(function () {
    return getButtonColors(theme.palette, filteredProps, isTag);
  }, [theme.palette, filteredProps]);

  var _useMemo = useMemo(function () {
    return getButtonCursor(disabled, loading);
  }, [disabled, loading]),
      cursor = _useMemo.cursor,
      events = _useMemo.events;

  var _useMemo2 = useMemo(function () {
    return isTag ? getTagSize(size) : getButtonSize(size, auto);
  }, [size, auto, isTag]),
      height = _useMemo2.height,
      minWidth = _useMemo2.minWidth,
      padding = _useMemo2.padding,
      width = _useMemo2.width,
      fontSize = _useMemo2.fontSize;

  var dripColor = useMemo(function () {
    return getButtonDripColor(theme.palette, filteredProps);
  }, [theme.palette, filteredProps]);
  var colors = buttonOrTagColors["default"];
  var hoverColors = buttonOrTagColors.hover;
  var activeColors = buttonOrTagColors.active;

  if (loading) {
    colors = buttonOrTagColors.active;
    hoverColors = buttonOrTagColors.active;
    activeColors = buttonOrTagColors.active;
  }
  /* istanbul ignore next */


  var dripCompletedHandle = function dripCompletedHandle() {
    setDripShow(false);
    setDripX(0);
    setDripY(0);
  };

  var clickHandler = function clickHandler(event) {
    if (disabled || loading) return;

    if (isTag && toggleable) {
      setActive(!active);
    }

    var showDrip = !shadow && !ghost && effect;
    /* istanbul ignore next */

    if (showDrip && buttonRef.current) {
      var rect = buttonRef.current.getBoundingClientRect();
      setDripShow(true);
      setDripX(event.clientX - rect.left);
      setDripY(event.clientY - rect.top);
    }

    onClick && onClick(event);
  };

  var ButtonOrTag = isTag ? 'span' : 'button';
  var childrenWithIcon = useMemo(function () {
    return getButtonChildrenWithIcon(loading, auto, size, children, {
      icon: icon,
      iconRight: iconRight
    }, isTag);
  }, [loading, auto, size, children, icon, iconRight]);
  return /*#__PURE__*/React.createElement(ButtonOrTag, _extends({
    ref: buttonRef,
    type: isTag ? undefined : htmlType,
    disabled: disabled // @ts-ignore https://github.com/microsoft/TypeScript/issues/28892
    ,
    onClick: clickHandler
  }, props, {
    className: _JSXStyle.dynamic([["1390653496", [padding, height, height, minWidth, width, theme.expressiveness.R1, fontSize, colors.color, colors.bg, theme.expressiveness.L2, dashed ? theme.expressiveness.cLineStyle2 : theme.expressiveness.cLineStyle1, colors.border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', padding, height, colors.color, colors.bg, hoverColors.color, hoverColors.color, hoverColors.bg, hoverColors.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px', activeColors.color, activeColors.color, activeColors.bg, activeColors.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || "".concat(isTag ? 'tag' : 'btn', " ").concat(isTag && toggleable && active ? 'active' : '', " ").concat(className))
  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
    color: colors.color
  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
    x: dripX,
    y: dripY,
    color: dripColor,
    onCompleted: dripCompletedHandle
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1390653496",
    dynamic: [padding, height, height, minWidth, width, theme.expressiveness.R1, fontSize, colors.color, colors.bg, theme.expressiveness.L2, dashed ? theme.expressiveness.cLineStyle2 : theme.expressiveness.cLineStyle1, colors.border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', padding, height, colors.color, colors.bg, hoverColors.color, hoverColors.color, hoverColors.bg, hoverColors.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px', activeColors.color, activeColors.color, activeColors.bg, activeColors.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
  }, ".tag.__jsx-style-dynamic-selector,.btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;padding:0 ".concat(padding, ";height:").concat(height, ";line-height:").concat(height, ";min-width:").concat(minWidth, ";width:").concat(width, ";border-radius:").concat(theme.expressiveness.R1, ";font-weight:500;font-size:").concat(fontSize, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(colors.color, ";background-color:").concat(colors.bg, ";border:").concat(theme.expressiveness.L2, " ").concat(dashed ? theme.expressiveness.cLineStyle2 : theme.expressiveness.cLineStyle1, " ").concat(colors.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";--cfx-ui-button-padding:").concat(padding, ";--cfx-ui-button-height:").concat(height, ";--cfx-ui-button-color:").concat(colors.color, ";--cfx-ui-button-bg:").concat(colors.bg, ";}.tag.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:hover{color:").concat(hoverColors.color, ";--cfx-ui-button-color:").concat(hoverColors.color, ";background-color:").concat(hoverColors.bg, ";border-color:").concat(hoverColors.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.tag.active.__jsx-style-dynamic-selector,.tag.__jsx-style-dynamic-selector:active,.btn.__jsx-style-dynamic-selector:active{color:").concat(activeColors.color, ";--cfx-ui-button-color:").concat(activeColors.color, ";background-color:").concat(activeColors.bg, ";border-color:").concat(activeColors.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.tag.__jsx-style-dynamic-selector .text,.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-2px;}.tag.__jsx-style-dynamic-selector .text p,.tag.__jsx-style-dynamic-selector .text pre,.tag.__jsx-style-dynamic-selector .text div,.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.tag.__jsx-style-dynamic-selector .hidden,.btn.__jsx-style-dynamic-selector .hidden{visibility:hidden;}")));
};

var Button = React.forwardRef(TagOrButtonRender);
var TagBase = React.forwardRef(TagOrButtonRender);
Button.defaultProps = defaultButtonProps;
TagBase.defaultProps = defaultTagProps;
export default React.memo(Button);
export var Tag = React.memo(TagBase);