@helpscout/hsds-react/components/Button/Button.utils.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.useButton = exports.useButtonAs = exports.useButtonClassnames = exports.THEMES = exports.SIZES = exports.STYLE_OUTLINED = exports.STYLE_LINK = exports.STYLE_FILLED = exports.THEME_BRAND = exports.THEME_GREY = exports.THEME_GREEN = exports.THEME_RED = exports.THEME_BLUE = exports.SIZE_XXS = exports.SIZE_XS = exports.SIZE_SM = exports.SIZE_MD = exports.SIZE_LG = exports.SIZE_XL = exports.SIZE_XXL = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = require("styled-components");

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _reactRouterDom = require("react-router-dom");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var SIZE_XXL = 'xxl';
exports.SIZE_XXL = SIZE_XXL;
var SIZE_XL = 'xl';
exports.SIZE_XL = SIZE_XL;
var SIZE_LG = 'lg';
exports.SIZE_LG = SIZE_LG;
var SIZE_MD = 'md';
exports.SIZE_MD = SIZE_MD;
var SIZE_SM = 'sm';
exports.SIZE_SM = SIZE_SM;
var SIZE_XS = 'xs';
exports.SIZE_XS = SIZE_XS;
var SIZE_XXS = 'xxs';
exports.SIZE_XXS = SIZE_XXS;
var THEME_BLUE = 'blue';
exports.THEME_BLUE = THEME_BLUE;
var THEME_RED = 'red';
exports.THEME_RED = THEME_RED;
var THEME_GREEN = 'green';
exports.THEME_GREEN = THEME_GREEN;
var THEME_GREY = 'grey';
exports.THEME_GREY = THEME_GREY;
var THEME_BRAND = 'brand';
exports.THEME_BRAND = THEME_BRAND;
var STYLE_FILLED = 'filled';
exports.STYLE_FILLED = STYLE_FILLED;
var STYLE_LINK = 'link';
exports.STYLE_LINK = STYLE_LINK;
var STYLE_OUTLINED = 'outlined';
exports.STYLE_OUTLINED = STYLE_OUTLINED;
var SIZES = [SIZE_XXL, SIZE_XL, SIZE_LG, SIZE_MD, SIZE_SM, SIZE_XS, SIZE_XXS];
exports.SIZES = SIZES;
var THEMES = [THEME_BLUE, THEME_RED, THEME_GREEN, THEME_GREY];
exports.THEMES = THEMES;

var useButtonTheme = function useButtonTheme(_ref) {
  var theme = _ref.theme;
  var styledTheme = (0, _styledComponents.useTheme)();

  if (styledTheme && styledTheme.brandColor) {
    return THEME_BRAND;
  }

  if (THEMES.includes(theme)) return theme;
  if (theme === 'gray') return THEME_GREY;
  return THEME_BLUE;
};

var useButtonSize = function useButtonSize(_ref2) {
  var size = _ref2.size;
  if (SIZES.includes(size)) return size;
  if (size === 'lgxl') return SIZE_XL; // old overwrite

  return SIZE_LG;
};

var useButtonStyle = function useButtonStyle(_ref3) {
  var filled = _ref3.filled,
      outlined = _ref3.outlined,
      linked = _ref3.linked;
  if (filled) return STYLE_FILLED;
  if (outlined) return STYLE_OUTLINED;
  if (linked) return STYLE_LINK;
  return STYLE_FILLED;
};

var useButtonChildren = function useButtonChildren(_ref4) {
  var children = _ref4.children;
  return (0, _react.useMemo)(function () {
    return _react.default.Children.map(children, function (child, index) {
      if (!child) return;
      if (!child.hasOwnProperty('type')) return child;
      if (child.type !== _Icon.default) return child;

      var len = _react.default.Children.count(children);

      var isFirst = index === 0;
      var isLast = index === len - 1;
      var isOnly = isFirst && isLast;
      return /*#__PURE__*/_react.default.cloneElement(child, {
        offsetLeft: isFirst && !isOnly,
        offsetRight: isLast && !isOnly
      });
    });
  }, [children]);
};

var useButtonClassnames = function useButtonClassnames(defaultClassname, props) {
  var className = props.className,
      disabled = props.disabled,
      inlined = props.inlined,
      isFirst = props.isFirst,
      isLast = props.isLast,
      isNotOnly = props.isNotOnly,
      loading = props.loading,
      prefixIcon = props.prefixIcon,
      rounded = props.rounded,
      seamless = props.seamless,
      suffixIcon = props.suffixIcon;
  var theme = useButtonTheme(props);
  var size = useButtonSize(props);
  var style = useButtonStyle(props);
  var isDisabled = disabled || loading;
  return (0, _classnames.default)(defaultClassname, seamless && "is-seamless", isDisabled && 'is-disabled', isFirst && 'is-first', isLast && 'is-last', isNotOnly && 'is-notOnly', loading && 'is-loading', rounded && 'is-rounded', size && "is-size-" + size, style && "is-style-" + style, theme && "is-theme-" + theme, inlined && 'is-inlined', prefixIcon && 'has-prefix-icon', suffixIcon && 'has-suffix-icon', className);
};

exports.useButtonClassnames = useButtonClassnames;

var useButtonAs = function useButtonAs(_ref5) {
  var as = _ref5.as,
      disabled = _ref5.disabled,
      href = _ref5.href,
      loading = _ref5.loading,
      rel = _ref5.rel,
      tabIndex = _ref5.tabIndex,
      submit = _ref5.submit,
      target = _ref5.target,
      to = _ref5.to;
  var isDisabled = disabled || loading;
  var type = submit ? 'submit' : 'button';
  var hrefValue = href || to;
  var selector = as || Boolean(hrefValue) ? 'a' : 'button';

  if (selector === 'button') {
    return {
      as: to ? _reactRouterDom.Link : selector,
      to: to ? to : undefined,
      type: type,
      disabled: isDisabled
    };
  }

  return {
    as: to ? _reactRouterDom.Link : selector,
    role: 'button',
    tabIndex: isDisabled ? undefined : tabIndex || 0,
    href: selector === 'a' && isDisabled ? undefined : hrefValue,
    to: to ? to : undefined,
    target: selector === 'a' ? target : undefined,
    'aria-disabled': !isDisabled ? undefined : isDisabled,
    rel: selector === 'a' ? rel : undefined
  };
};

exports.useButtonAs = useButtonAs;

var useButton = function useButton(props) {
  var as = props.as,
      className = props.className,
      disabled = props.disabled,
      href = props.href,
      isFirst = props.isFirst,
      isLast = props.isLast,
      isNotOnly = props.isNotOnly,
      loading = props.loading,
      rel = props.rel,
      rounded = props.rounded,
      submit = props.submit,
      target = props.target,
      to = props.to,
      otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "disabled", "href", "isFirst", "isLast", "isNotOnly", "loading", "rel", "rounded", "submit", "target", "to"]);
  var children = useButtonChildren(props);
  var componentClassName = useButtonClassnames('c-Button', props);
  var additionalProps = useButtonAs({
    as: as,
    disabled: disabled,
    href: href,
    loading: loading,
    rel: rel,
    submit: submit,
    target: target,
    to: to
  });
  var prefixIcon = otherProps.prefixIcon,
      suffixIcon = otherProps.suffixIcon,
      rest = (0, _objectWithoutPropertiesLoose2.default)(otherProps, ["prefixIcon", "suffixIcon"]);
  return (0, _extends2.default)({
    'data-testid': 'Button'
  }, (0, _getValidProps.default)(rest), additionalProps, {
    className: componentClassName,
    children: children,
    loading: loading,
    prefixIcon: prefixIcon,
    suffixIcon: suffixIcon
  });
};

exports.useButton = useButton;