react-misc-toolbox/dist/Button.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Button = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _SVGCross = require('./svg/SVGCross');

var _SVGCross2 = _interopRequireDefault(_SVGCross);

var _SVGFullscreen = require('./svg/SVGFullscreen');

var _SVGFullscreen2 = _interopRequireDefault(_SVGFullscreen);

var _SVGFullscreenExit = require('./svg/SVGFullscreenExit');

var _SVGFullscreenExit2 = _interopRequireDefault(_SVGFullscreenExit);

var _StyledButton = require('./StyledButton');

var _defaultStyles = require('./defaultStyles');

var _helperFunctions = require('./helperFunctions');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Button = function Button(_ref) {
  var _ref$colors = _ref.colors,
      colorsProp = _ref$colors === undefined ? 'transparentNeutral' : _ref$colors,
      _ref$subcolors = _ref.subcolors,
      subcolorsProp = _ref$subcolors === undefined ? '' : _ref$subcolors,
      _ref$shouldRenderIcon = _ref.shouldRenderIcon,
      shouldRenderIcon = _ref$shouldRenderIcon === undefined ? true : _ref$shouldRenderIcon,
      _ref$renderIcon = _ref.renderIcon,
      renderIcon = _ref$renderIcon === undefined ? function () {
    return null;
  } : _ref$renderIcon,
      _ref$dataTestId = _ref.dataTestId,
      dataTestId = _ref$dataTestId === undefined ? 'button' : _ref$dataTestId,
      _ref$type = _ref.type,
      type = _ref$type === undefined ? 'default' : _ref$type,
      _ref$subtype = _ref.subtype,
      subtype = _ref$subtype === undefined ? '' : _ref$subtype,
      _ref$isInverted = _ref.isInverted,
      isInverted = _ref$isInverted === undefined ? false : _ref$isInverted,
      children = _ref.children,
      containerRef = _ref.containerRef,
      className = _ref.className,
      style = _ref.style,
      isOn = _ref.isOn,
      onClick = _ref.onClick,
      _ref$isDisabled = _ref.isDisabled,
      isDisabled = _ref$isDisabled === undefined ? false : _ref$isDisabled,
      _ref$size = _ref.size,
      size = _ref$size === undefined ? 15 : _ref$size,
      _ref$sizeFontRatio = _ref.sizeFontRatio,
      sizeFontRatio = _ref$sizeFontRatio === undefined ? 1 : _ref$sizeFontRatio,
      _ref$mercuryRatio = _ref.mercuryRatio,
      mercuryRatio = _ref$mercuryRatio === undefined ? [20, 10] : _ref$mercuryRatio,
      _ref$marginLock = _ref.marginLock,
      marginLock = _ref$marginLock === undefined ? false : _ref$marginLock,
      _ref$sideTransform = _ref.sideTransform,
      sideTransform = _ref$sideTransform === undefined ? 0.5 : _ref$sideTransform,
      props = (0, _objectWithoutProperties3.default)(_ref, ['colors', 'subcolors', 'shouldRenderIcon', 'renderIcon', 'dataTestId', 'type', 'subtype', 'isInverted', 'children', 'containerRef', 'className', 'style', 'isOn', 'onClick', 'isDisabled', 'size', 'sizeFontRatio', 'mercuryRatio', 'marginLock', 'sideTransform']);

  //let isOn, onClick
  //let { internalIsOn, internalOnClick } = useState(false)
  //if (externalOnClick) {
  //  isOn = externalIsOn
  //  onClick = externalOnClick
  //} else {
  //  isOn = internalIsOn
  //  onClick = internalOnClick
  //}
  var colors = void 0,
      subcolors = void 0;

  if (typeof colorsProp === 'string') {
    colors = _defaultStyles.buttonStyles[colorsProp];
  } else {
    colors = colorsProp;
  }

  if (typeof subcolorsProp === 'string') {
    if (subcolorsProp.length > 0) {
      subcolors = _defaultStyles.buttonStyles[subcolorsProp];
    } else {
      subcolors = colors;
    }
  } else {
    subcolors = colors;
  }

  var checksForTouch = function checksForTouch() {
    if (typeof document !== 'undefined') {
      return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
    }
    return false;
  };

  var getButtonProps = function getButtonProps() {
    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick = _ref2.onClick,
        className = _ref2.className,
        style = _ref2.style,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['onClick', 'className', 'style']);

    var getClassName = function getClassName(_ref3) {
      var className = _ref3.className,
          isOn = _ref3.isOn,
          isDisabled = _ref3.isDisabled;

      return className + ' ' + (0, _helperFunctions.advancedMulti)({
        unflattenedBases: ['button', 'button-' + type],
        flipVars: [[isOn, 'on', 'off'], [isDisabled, 'disabled', null]]
      });
    };
    if (isDisabled) {
      return {
        'data-testid': dataTestId + '-disabled',
        style: style,
        className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
      };
    }
    return (0, _extends3.default)({
      ref: containerRef,
      'data-testid': dataTestId,
      style: style,
      //className,
      onClick: function onClick(e) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }

        e.stopPropagation();
        !isDisabled && _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
    }, props);
  };

  var commonProps = (0, _extends3.default)({
    getButtonProps: getButtonProps,
    size: size,
    sizeFontRatio: sizeFontRatio,
    colors: colors,
    isOn: isOn,
    isInverted: isInverted,
    isDisabled: isDisabled,
    hasTouch: checksForTouch()
  }, getButtonProps((0, _extends3.default)({
    onClick: onClick,
    className: className,
    style: style
  }, props)));
  var renderButtonWithIcon = function renderButtonWithIcon(_ref4) {
    var Button = _ref4.Button,
        Icon = _ref4.Icon;

    return typeof children === 'function' ? children((0, _extends3.default)({}, commonProps, { Icon: Icon })) : _react2.default.createElement(
      Button,
      (0, _extends3.default)({}, commonProps),
      children ? _react2.default.createElement(
        _react.Fragment,
        null,
        _react2.default.createElement(Icon, null),
        children
      ) : _react2.default.createElement(Icon, null)
    );
  };

  var renderMercurySide = function renderMercurySide() {
    return _react2.default.createElement(_StyledButton.MERCURY_SIDE, {
      isOn: isOn,
      size: size,
      isInverted: isInverted,
      colors: subcolors,
      mercuryRatio: mercuryRatio,
      marginLock: marginLock,
      sideTransform: sideTransform
    });
  };
  var renderMercuryBSide = function renderMercuryBSide() {
    return marginLock && _react2.default.createElement(_StyledButton.MERCURY_BSIDE, {
      isOn: isOn,
      size: size,
      isInverted: isInverted,
      colors: subcolors,
      mercuryRatio: mercuryRatio,
      marginLock: marginLock,
      sideTransform: sideTransform
    });
  };
  var renderMercuryCenter = function renderMercuryCenter() {
    return _react2.default.createElement(
      _StyledButton.MERCURY_CENTER,
      { isOn: isOn, size: size, mercuryRatio: mercuryRatio, marginLock: marginLock },
      children
    );
  };

  var renderChildren = function renderChildren(type) {
    var icon = void 0;
    switch (type) {
      case 'caretdown':
        icon = isOn ? _react2.default.createElement(_StyledButton.EXPAND_LESS, null) : _react2.default.createElement(_StyledButton.EXPAND_MORE, null);
        renderIcon = function renderIcon(props) {
          return isOn ? _react2.default.createElement(_StyledButton.EXPAND_LESS, (0, _extends3.default)({}, props)) : _react2.default.createElement(_StyledButton.EXPAND_MORE, (0, _extends3.default)({}, props));
        };

        return typeof children === 'function' ? children((0, _extends3.default)({ icon: icon, renderIcon: renderIcon }, commonProps)) : _react2.default.createElement(
          _StyledButton.CARETDOWN_BUTTON,
          (0, _extends3.default)({}, commonProps),
          children ? _react2.default.createElement(
            _react.Fragment,
            null,
            children,
            renderIcon({
              style: { marginLeft: '0.75rem' }
            })
          ) : renderIcon()
        );
      case 'cancel':
        icon = _react2.default.createElement(_SVGCross2.default, { viewBox: '0 0 20 20', size: 16 });
        renderIcon = function renderIcon(props) {
          return _react2.default.createElement(_SVGCross2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props));
        };
        return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon }) : _react2.default.createElement(
          _StyledButton.CANCEL_BUTTON,
          (0, _extends3.default)({}, commonProps),
          children ? _react2.default.createElement(
            _react.Fragment,
            null,
            _react2.default.createElement(
              'div',
              { style: { display: 'flex', justifyContent: 'space-between' } },
              children
            ),
            renderIcon({ style: { pointerEvents: 'none', marginLeft: '0.75rem' } })
          ) : renderIcon({ style: { pointerEvents: 'none' } })
        );
      case 'facebook':
        return renderButtonWithIcon({ Button: _StyledButton.FACEBOOK_BUTTON, Icon: _StyledButton.FACEBOOK_ICON });

      case 'google':
        return renderButtonWithIcon({ Button: _StyledButton.GOOGLE_BUTTON, Icon: _StyledButton.GOOGLE_ICON });

      case 'mercurydrop':
        renderIcon = shouldRenderIcon ? renderIcon ? renderIcon : function (props) {
          return isOn ? _react2.default.createElement(_SVGFullscreenExit2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props)) : _react2.default.createElement(_SVGFullscreen2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props));
        } : function () {
          return null;
        };

        var renderMercuryInside = function renderMercuryInside() {
          switch (subtype) {
            case '':
            case 'horizontal':
              return _react2.default.createElement(
                _react2.default.Fragment,
                null,
                renderMercurySide(),
                renderMercuryBSide(),
                renderIcon(),
                renderMercuryCenter(),
                renderIcon(),
                renderMercuryBSide(),
                renderMercurySide()
              );
            case 'right':
              return _react2.default.createElement(
                _react2.default.Fragment,
                null,
                renderMercuryCenter(),
                renderIcon(),
                renderMercuryBSide(),
                renderMercurySide()
              );
            case 'left':
              return _react2.default.createElement(
                _react2.default.Fragment,
                null,
                renderMercurySide(),
                renderMercuryBSide(),
                renderIcon(),
                renderMercuryCenter()
              );
          }
        };
        return typeof children === 'function' ? children({
          getButtonProps: getButtonProps,
          renderIcon: renderIcon
        }) : _react2.default.createElement(
          _StyledButton.MERCURY_BUTTON,
          (0, _extends3.default)({}, commonProps),
          renderMercuryInside()
        );
      default:
        return typeof children === 'function' ? children((0, _extends3.default)({}, commonProps)) : _react2.default.createElement(
          _StyledButton.BUTTON,
          (0, _extends3.default)({}, commonProps),
          children
        );
    }
  };

  return renderChildren(type);
};

exports.Button = Button;
exports.default = _react2.default.memo(Button);