react-misc-toolbox/dist/LegacyButton.js

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDeviceDetect = require('react-device-detect');

var _recompose = require('recompose');

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

var _SVGClear = require('./svg/SVGClear');

var _SVGClear2 = _interopRequireDefault(_SVGClear);

var _SVGDone = require('./svg/SVGDone');

var _SVGDone2 = _interopRequireDefault(_SVGDone);

var _SVGAdd = require('./svg/SVGAdd');

var _SVGAdd2 = _interopRequireDefault(_SVGAdd);

var _SVGRemove = require('./svg/SVGRemove');

var _SVGRemove2 = _interopRequireDefault(_SVGRemove);

var _SVGExpandLess = require('./svg/SVGExpandLess');

var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);

var _SVGExpandMore = require('./svg/SVGExpandMore');

var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);

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

var _SVGCancel = require('./svg/SVGCancel');

var _SVGCancel2 = _interopRequireDefault(_SVGCancel);

var _tinycolor = require('tinycolor2');

var _tinycolor2 = _interopRequireDefault(_tinycolor);

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);

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

// import {getButtonStyles} from './defaultStyles'
var Button = function Button(_ref) {
  var _ref$shouldRenderIcon = _ref.shouldRenderIcon,
      shouldRenderIcon = _ref$shouldRenderIcon === undefined ? true : _ref$shouldRenderIcon,
      _ref$renderIcon = _ref.renderIcon,
      renderIcon = _ref$renderIcon === undefined ? 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$invert = _ref.invert,
      invert = _ref$invert === undefined ? false : _ref$invert,
      transition = _ref.transition,
      children = _ref.children,
      containerRef = _ref.containerRef,
      className = _ref.className,
      style = _ref.style,
      isOn = _ref.isOn,
      isDisabled = _ref.disabled,
      onClick = _ref.onClick,
      _onMouseOver = _ref.onMouseOver,
      _onTouchStart = _ref.onTouchStart,
      _onTouchEnd = _ref.onTouchEnd,
      _onMouseLeave = _ref.onMouseLeave,
      _onMouseDown = _ref.onMouseDown,
      _onMouseUp = _ref.onMouseUp,
      _ref$size = _ref.size,
      size = _ref$size === undefined ? 'm' : _ref$size,
      _ref$colors = _ref.colors,
      colorsProp = _ref$colors === undefined ? _defaultStyles.buttonStyles.neutral : _ref$colors,
      transparency = _ref.transparency,
      props = (0, _objectWithoutProperties3.default)(_ref, ['shouldRenderIcon', 'renderIcon', 'dataTestId', 'type', 'invert', 'transition', 'children', 'containerRef', 'className', 'style', 'isOn', 'disabled', 'onClick', 'onMouseOver', 'onTouchStart', 'onTouchEnd', 'onMouseLeave', 'onMouseDown', 'onMouseUp', 'size', 'colors', 'transparency']);

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

  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends3.default)({}, state, newState);
  }, {
    isMouseOver: false,
    isMouseDown: false
  }),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  var isMouseOver = state.isMouseOver,
      isMouseDown = state.isMouseDown;

  var setIsMouseOver = function setIsMouseOver(x) {
    return setState({ isMouseOver: x });
  };
  var setIsMouseDown = function setIsMouseDown(x) {
    return setState({ isMouseDown: x });
  };

  var hasTouch = function hasTouch() {
    return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
  };

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

    var baseClass = 'button button--' + type;
    var baseDisabledClass = 'button--disabled button--' + type + '--disabled';
    var baseToggleClass = 'button--' + type + '--' + (isOn ? 'on' : 'off');
    if (!isDisabled) {
      if (typeof isOn !== 'undefined') {
        if (typeof className !== 'undefined') {
          return baseClass + ' ' + baseToggleClass + ' ' + className;
        } else {
          return baseClass + ' ' + baseToggleClass;
        }
      } else {
        if (typeof className !== 'undefined') {
          return baseClass + ' ' + className;
        } else {
          return '' + baseClass;
        }
      }
    } else {
      if (typeof className !== 'undefined') {
        return baseClass + ' ' + baseDisabledClass + ' ' + className;
      } else {
        return baseClass + ' ' + baseDisabledClass;
      }
    }
  };

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

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

    var transitionType = transition ? transition : colors.transition;
    var getTransitionStyle = function getTransitionStyle() {
      var _colors = colors,
          iOn = _colors.on,
          iOff = _colors.off,
          disabled = _colors.disabled;

      var on = void 0,
          off = void 0;
      if (invert) {
        on = iOff;
        off = iOn;
      } else {
        on = iOn;
        off = iOff;
      }
      var color = void 0,
          backgroundColor = void 0;
      if (!isDisabled) {
        var getBackgroundColor = function getBackgroundColor() {
          var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
          var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'on';

          if (on.backgroundColor && off.backgroundColor) {
            switch (transitionType) {
              case 'text':
              case 'mix':
                return _tinycolor2.default.mix(on.backgroundColor, off.backgroundColor, amount);
              case 'smooth':
                if (prefix === 'on') {
                  return (0, _tinycolor2.default)(on.backgroundColor).darken(amount / 5);
                } else {
                  return (0, _tinycolor2.default)(off.backgroundColor).darken(amount / 5);
                }
              case 'contrast':
                if (prefix === 'on') {
                  return (0, _tinycolor2.default)(off.backgroundColor).darken(amount / 5);
                } else {
                  return (0, _tinycolor2.default)(on.backgroundColor).darken(amount / 5);
                }
              default:
                break;
            }
          }
        };
        var getColor = function getColor() {
          var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
          var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'on';

          switch (transitionType) {
            case 'text':
            case 'mix':
              return _tinycolor2.default.mix(on.color, off.color, amount);
            case 'smooth':
              if (prefix === 'on') {
                return (0, _tinycolor2.default)(on.color).darken(amount / 5);
              } else {
                return (0, _tinycolor2.default)(off.color).darken((100 - amount) / 5);
              }
            case 'contrast':
              if (prefix === 'on') {
                return (0, _tinycolor2.default)(off.color).darken(amount / 5);
              } else {
                return (0, _tinycolor2.default)(on.color).darken((100 - amount) / 5);
              }
            default:
              break;
          }
        };

        if (isOn) {
          if (isMouseDown && isMouseOver) {
            color = getColor(50, 'on');

            backgroundColor = getBackgroundColor(50, 'on');
          } else {
            if (isMouseOver && !hasTouch()) {
              color = getColor(25, 'on');

              backgroundColor = getBackgroundColor(25, 'on');
            } else {
              color = on.color;
              backgroundColor = on.backgroundColor;
            }
          }
        } else {
          if (isMouseDown && isMouseOver) {
            color = getColor(50, 'off');

            backgroundColor = getBackgroundColor(50, 'off');
          } else {
            if (isMouseOver && !hasTouch()) {
              color = getColor(75, 'off');

              backgroundColor = getBackgroundColor(75, 'off');
            } else {
              color = off.color;
              backgroundColor = off.backgroundColor;
            }
          }
        }
      } else {
        color = disabled && disabled.color ? disabled.color : _defaultStyles.buttonStyles.neutral.disabled.color;
        backgroundColor = disabled && disabled.backgroundColor ? disabled.backgroundColor : _defaultStyles.buttonStyles.neutral.disabled.backgroundColor;
      }
      if (transparency) {
        backgroundColor = (0, _tinycolor2.default)(backgroundColor).setAlpha(transparency);
      }
      return {
        color: color,
        backgroundColor: backgroundColor
      };
    };
    var getSize = function getSize() {
      switch (size) {
        case 'none':
          return {};
        case 's':
          return { padding: '0.25rem 0.5rem', fontSize: '1.25rem' };
        case 'm':
          return { padding: '0.5rem 0.75rem', fontSize: '1.5rem' };
        case 'l':
          return { padding: '0.75rem 1rem', fontSize: '1.75rem' };
        default:
          return {};
      }
    };
    var getDefaultStyle = function getDefaultStyle() {
      return (0, _extends3.default)({
        display: 'flex',
        fontFamily: 'PT Sans, sans-serif',
        alignItems: 'center',
        justifyContent: 'center',
        transition: 'background 250ms ease-in-out, color 250ms ease-in-out',

        cursor: 'pointer'
      }, getSize(), getTransitionStyle());
    };
    if (isDisabled) {
      return {
        'data-testid': dataTestId + '-disabled',
        style: (0, _extends3.default)({}, getDefaultStyle(), style),
        className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
      };
    }
    return (0, _extends3.default)({
      ref: containerRef,
      'data-testid': dataTestId,
      style: (0, _extends3.default)({}, getDefaultStyle(), style),
      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));
        //setIsMouseOver(false)
      },
      onMouseOver: function onMouseOver(e) {
        for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
          args[_key2 - 1] = arguments[_key2];
        }

        _onMouseOver && _onMouseOver.apply(undefined, [e].concat(args));
        setIsMouseOver(true);
      },
      onMouseLeave: function onMouseLeave(e) {
        for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
          args[_key3 - 1] = arguments[_key3];
        }

        _onMouseLeave && _onMouseLeave.apply(undefined, [e].concat(args));
        setIsMouseOver(false);
        setIsMouseDown(false);
      },
      onMouseDown: function onMouseDown(e) {
        for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
          args[_key4 - 1] = arguments[_key4];
        }

        _onMouseDown && _onMouseDown.apply(undefined, [e].concat(args));
        setIsMouseDown(true);
      },
      onMouseUp: function onMouseUp(e) {
        for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
          args[_key5 - 1] = arguments[_key5];
        }

        _onMouseUp && _onMouseUp.apply(undefined, [e].concat(args));
        setIsMouseDown(false);
      },
      onTouchStart: function onTouchStart(e) {
        for (var _len6 = arguments.length, args = Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
          args[_key6 - 1] = arguments[_key6];
        }

        _onTouchStart && _onTouchStart.apply(undefined, [e].concat(args));
      },
      onTouchEnd: function onTouchEnd(e) {
        for (var _len7 = arguments.length, args = Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
          args[_key7 - 1] = arguments[_key7];
        }

        _onTouchEnd && _onTouchEnd.apply(undefined, [e].concat(args));
      },
      className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
    }, props);
  };
  var renderChildren = function renderChildren(type) {
    var icon = void 0;

    switch (type) {
      case 'caretdown':
        icon = isOn ? _react2.default.createElement(_SVGExpandLess2.default, { style: { pointerEvents: 'none' } }) : _react2.default.createElement(_SVGExpandMore2.default, { style: { pointerEvents: 'none' } });
        renderIcon = function renderIcon(props) {
          return isOn ? _react2.default.createElement(_SVGExpandLess2.default, (0, _extends3.default)({ style: { pointerEvents: 'none' } }, props)) : _react2.default.createElement(_SVGExpandMore2.default, (0, _extends3.default)({ style: { pointerEvents: 'none' } }, props));
        };
        return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon, renderIcon: renderIcon }) : _react2.default.createElement(
          'div',
          (0, _extends3.default)({}, getButtonProps({
            onClick: onClick,
            className: className,
            style: (0, _extends3.default)({ justifyContent: 'space-between' }, style)
          })),
          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 '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(
          'div',
          (0, _extends3.default)({}, getButtonProps({
            onClick: onClick,
            className: className,
            style: (0, _extends3.default)({ justifyContent: 'center', alignItems: 'center' }, style)
          })),
          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':
        renderIcon = function renderIcon(props) {
          return _react2.default.createElement('div', props);
        };
        return typeof children === 'function' ? children({
          getButtonProps: getButtonProps,
          isMouseOver: isMouseOver,
          icon: icon
        }) : _react2.default.createElement(
          'div',
          (0, _extends3.default)({}, getButtonProps({
            onClick: onClick,
            className: className,
            style: (0, _extends3.default)({ justifyContent: 'flex-start', alignItems: 'center' }, style)
          })),
          children ? _react2.default.createElement(
            _react.Fragment,
            null,
            renderIcon({
              style: {
                pointerEvents: 'none',
                backgroundImage: 'url(\'/static/facebook.svg\')',
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                height: '1.5rem',
                marginRight: '1.5rem',
                width: '1.5rem',
                padding: '0.6rem'
              }
            }),
            _react2.default.createElement(
              'div',
              { style: { display: 'flex', justifyContent: 'space-between' } },
              children
            )
          ) : renderIcon({
            style: {
              pointerEvents: 'none',
              backgroundImage: 'url(\'/static/facebook.svg\')'
            }
          })
        );
      case 'google':
        renderIcon = function renderIcon(props) {
          return _react2.default.createElement('div', props);
        };
        return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon }) : _react2.default.createElement(
          'div',
          (0, _extends3.default)({}, getButtonProps({
            onClick: onClick,
            className: className,
            style: (0, _extends3.default)({ justifyContent: 'flex-start', alignItems: 'center' }, style)
          })),
          children ? _react2.default.createElement(
            _react.Fragment,
            null,
            renderIcon({
              style: {
                pointerEvents: 'none',
                backgroundImage: 'url(\'/static/google.svg\')',
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                height: '1.5rem',
                marginRight: '1.5rem',
                width: '1.5rem',
                padding: '0.6rem'
              }
            }),
            _react2.default.createElement(
              'div',
              { style: { display: 'flex', justifyContent: 'space-between' } },
              children
            )
          ) : renderIcon({
            style: {
              pointerEvents: 'none',
              backgroundImage: 'url(\'/static/facebook.svg\')'
            }
          })
        );
      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;
        };

        return typeof children === 'function' ? children({
          getButtonProps: getButtonProps,
          renderIcon: renderIcon
        }) : _react2.default.createElement(
          'div',
          (0, _extends3.default)({}, getButtonProps({
            onClick: onClick,
            className: className,
            style: (0, _extends3.default)({ justifyContent: 'center', alignItems: 'center' }, style)
          })),
          _react2.default.createElement('div', {
            style: {
              flexGrow: isOn ? 1 : 0.5,
              backgroundColor: '#33b',
              transition: 'flex-grow 0.5s ease-in-out',
              height: '1rem'
            },
            className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__left', 'collapsed', 'expanded')
          }),
          renderIcon(),
          _react2.default.createElement(
            'div',
            {
              style: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexGrow: isOn ? 0.5 : 1
              },
              className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__center', 'collapsed', 'expanded')
            },
            children
          ),
          renderIcon(),
          _react2.default.createElement('div', {
            style: {
              flexGrow: isOn ? 1 : 0.5,
              backgroundColor: '#33b',
              transition: 'flex-grow 0.5s ease-in-out',
              height: '1rem'
            },
            className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__right', 'collapsed', 'expanded')
          })
        );
      default:
        return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver }) : _react2.default.createElement(
          'div',
          (0, _extends3.default)({}, getButtonProps((0, _extends3.default)({ onClick: onClick, className: className, style: style }, props))),
          children
        );
    }
  };

  return renderChildren(type);
};

exports.Button = Button;
Button.defaultProps = {
  colors: _defaultStyles.buttonStyles.transparentNeutral
};

var enhance = (0, _recompose.compose)();
//onlyUpdateForKeys([`isOn`, `isMouseOver`, `isMouseDown`, `children`, `disabled`])

Button.propTypes = {
  type: _propTypes2.default.string,
  onClick: _propTypes2.default.func
};
exports.default = enhance(Button);