react-misc-toolbox/dist/SCButton.js

- [ ] diagramexample | optimize creating from blank slate

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  padding: ', ';\n  font-size: ', ';\n  display: flex;\n  font-family: PT Sans, sans-serif;\n  align-items: center;\n  justify-content: center;\n  transition: background 250ms ease-in-out, color 250ms ease-in-out;\n\n  cursor: pointer;\n  background-color: ', ';\n  color: ', ';\n  :hover {\n    background-color: ', ';\n    color: ', ';\n  }\n  :active {\n    background-color: ', ';\n    color: ', ';\n  }\n'], ['\n  padding: ', ';\n  font-size: ', ';\n  display: flex;\n  font-family: PT Sans, sans-serif;\n  align-items: center;\n  justify-content: center;\n  transition: background 250ms ease-in-out, color 250ms ease-in-out;\n\n  cursor: pointer;\n  background-color: ', ';\n  color: ', ';\n  :hover {\n    background-color: ', ';\n    color: ', ';\n  }\n  :active {\n    background-color: ', ';\n    color: ', ';\n  }\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  pointer-events: none;\n'], ['\n  pointer-events: none;\n']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: flex-start;\n  align-items: center;\n'], ['\n  justify-content: flex-start;\n  align-items: center;\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: space-between;\n'], ['\n  justify-content: space-between;\n']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: flex-start;\n  align-items: center;\n  padding: 0;\n  height: 2.25rem;\n'], ['\n  justify-content: flex-start;\n  align-items: center;\n  padding: 0;\n  height: 2.25rem;\n']),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: flex-start;\n  align-items: center;\n  flex-grow: ', ';\n  background-color: ', ';\n  transition: flex-grow 0.5s ease-in-out, background-color 0.5s ease-in-out;\n  height: 2.25rem;\n'], ['\n  justify-content: flex-start;\n  align-items: center;\n  flex-grow: ', ';\n  background-color: ', ';\n  transition: flex-grow 0.5s ease-in-out, background-color 0.5s ease-in-out;\n  height: 2.25rem;\n']),
    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  flex-grow: ', ';\n\n  transition: flex-grow 0.5s ease-in-out;\n'], ['\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  flex-grow: ', ';\n\n  transition: flex-grow 0.5s ease-in-out;\n']),
    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n  pointer-events: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  height: 1.5rem;\n  margin-right: 1.5rem;\n  width: 1.5rem;\n  padding: 0.6rem;\n'], ['\n  pointer-events: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  height: 1.5rem;\n  margin-right: 1.5rem;\n  width: 1.5rem;\n  padding: 0.6rem;\n']),
    _templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n  background-image: url(/static/google.svg);\n'], ['\n  background-image: url(/static/google.svg);\n']),
    _templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n  background-image: url(/static/facebook.svg);\n'], ['\n  background-image: url(/static/facebook.svg);\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);

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

var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);

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

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

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var getBackgroundColor = function getBackgroundColor(_ref) {
  var _ref$balance = _ref.balance,
      balance = _ref$balance === undefined ? 50 : _ref$balance,
      _ref$isOn = _ref.isOn,
      isOn = _ref$isOn === undefined ? true : _ref$isOn,
      colors = _ref.colors,
      invert = _ref.invert;
  var iOn = colors.on,
      iOff = colors.off,
      transitionType = colors.transition;

  var on = void 0,
      off = void 0;
  if (invert) {
    on = iOff;
    off = iOn;
  } else {
    on = iOn;
    off = iOff;
  }

  switch (transitionType) {
    case 'text':
    case 'mix':
      return _tinycolor2.default.mix(on.backgroundColor, off.backgroundColor, balance);
    case 'smooth':
      if (isOn === true) {
        return (0, _tinycolor2.default)(on.backgroundColor).darken(balance / 5);
      } else {
        return (0, _tinycolor2.default)(off.backgroundColor).darken(balance / 5);
      }
    case 'contrast':
      if (isOn === true) {
        return (0, _tinycolor2.default)(off.backgroundColor).darken(balance / 5);
      } else {
        return (0, _tinycolor2.default)(on.backgroundColor).darken(balance / 5);
      }
    default:
      break;
  }
};
var getColor = function getColor(_ref2) {
  var _ref2$balance = _ref2.balance,
      balance = _ref2$balance === undefined ? 50 : _ref2$balance,
      _ref2$isOn = _ref2.isOn,
      isOn = _ref2$isOn === undefined ? true : _ref2$isOn,
      colors = _ref2.colors,
      invert = _ref2.invert;
  var iOn = colors.on,
      iOff = colors.off,
      transitionType = colors.transition;

  var on = void 0,
      off = void 0;
  if (invert) {
    on = iOff;
    off = iOn;
  } else {
    on = iOn;
    off = iOff;
  }
  switch (transitionType) {
    case 'text':
    case 'mix':
      return _tinycolor2.default.mix(on.color, off.color, balance);
    case 'smooth':
      if (isOn === true) {
        return (0, _tinycolor2.default)(on.color).darken(balance / 5);
      } else {
        return (0, _tinycolor2.default)(off.color).darken((100 - balance) / 5);
      }
    case 'contrast':
      if (isOn === true) {
        return (0, _tinycolor2.default)(off.color).darken(balance / 5);
      } else {
        return (0, _tinycolor2.default)(on.color).darken((100 - balance) / 5);
      }
    default:
      break;
  }
};

var StyledButton = _styledComponents2.default.div(_templateObject, function (_ref3) {
  var size = _ref3.size;

  switch (size) {
    case 'none':
      return {};
    case 's':
      return '0.25rem 0.5rem';
    case 'm':
      return '0.5rem 0.75rem';
    case 'l':
      return '0.75rem 1rem';
    default:
      return {};
  }
}, function (_ref4) {
  var size = _ref4.size;

  switch (size) {
    case 'none':
      return {};
    case 's':
      return '1.25rem';
    case 'm':
      return '1.5rem';
    case 'l':
      return '1.75rem';
    default:
      return {};
  }
}, function (_ref5) {
  var _ref5$invert = _ref5.invert,
      invert = _ref5$invert === undefined ? false : _ref5$invert,
      isOn = _ref5.isOn,
      colors = _ref5.colors,
      _ref5$isDisabled = _ref5.isDisabled,
      isDisabled = _ref5$isDisabled === undefined ? false : _ref5$isDisabled;

  if (isDisabled) {
    return colors.disabled && colors.disabled.backgroundColor || '#fff';
  }
  if (isOn) {
    return !invert ? colors.on.backgroundColor : colors.off.backgroundColor;
  } else {
    return !invert ? colors.off.backgroundColor : colors.on.backgroundColor;
  }
}, function (_ref6) {
  var _ref6$invert = _ref6.invert,
      invert = _ref6$invert === undefined ? false : _ref6$invert,
      isOn = _ref6.isOn,
      colors = _ref6.colors,
      _ref6$isDisabled = _ref6.isDisabled,
      isDisabled = _ref6$isDisabled === undefined ? false : _ref6$isDisabled;

  if (isDisabled) {
    return colors.disabled && colors.disabled.color || '#000';
  }
  if (isOn) {
    return !invert ? colors.on.color : colors.off.color;
  } else {
    return !invert ? colors.off.color : colors.on.color;
  }
}, function (_ref7) {
  var _ref7$invert = _ref7.invert,
      invert = _ref7$invert === undefined ? false : _ref7$invert,
      _ref7$balance = _ref7.balance,
      balance = _ref7$balance === undefined ? isOn ? 25 : 75 : _ref7$balance,
      isOn = _ref7.isOn,
      colors = _ref7.colors,
      _ref7$isDisabled = _ref7.isDisabled,
      isDisabled = _ref7$isDisabled === undefined ? false : _ref7$isDisabled,
      hasTouch = _ref7.hasTouch;
  return !isDisabled && !hasTouch && getBackgroundColor({ invert: invert, balance: balance, isOn: isOn, colors: colors, isDisabled: isDisabled }).toString();
}, function (_ref8) {
  var _ref8$invert = _ref8.invert,
      invert = _ref8$invert === undefined ? false : _ref8$invert,
      _ref8$balance = _ref8.balance,
      balance = _ref8$balance === undefined ? isOn ? 25 : 75 : _ref8$balance,
      isOn = _ref8.isOn,
      colors = _ref8.colors,
      _ref8$isDisabled = _ref8.isDisabled,
      isDisabled = _ref8$isDisabled === undefined ? false : _ref8$isDisabled,
      hasTouch = _ref8.hasTouch;
  return !isDisabled && !hasTouch && getColor({ invert: invert, balance: balance, isOn: isOn, colors: colors, isDisabled: isDisabled }).toString();
}, function (_ref9) {
  var _ref9$invert = _ref9.invert,
      invert = _ref9$invert === undefined ? false : _ref9$invert,
      isOn = _ref9.isOn,
      _ref9$balance = _ref9.balance,
      balance = _ref9$balance === undefined ? 50 : _ref9$balance,
      colors = _ref9.colors,
      _ref9$isDisabled = _ref9.isDisabled,
      isDisabled = _ref9$isDisabled === undefined ? false : _ref9$isDisabled;
  return !isDisabled && getBackgroundColor({ invert: invert, balance: balance, isOn: isOn, colors: colors, isDisabled: isDisabled }).toString();
}, function (_ref10) {
  var _ref10$invert = _ref10.invert,
      invert = _ref10$invert === undefined ? false : _ref10$invert,
      _ref10$balance = _ref10.balance,
      balance = _ref10$balance === undefined ? 50 : _ref10$balance,
      isOn = _ref10.isOn,
      colors = _ref10.colors,
      _ref10$isDisabled = _ref10.isDisabled,
      isDisabled = _ref10$isDisabled === undefined ? false : _ref10$isDisabled;
  return !isDisabled && getColor({ invert: invert, balance: balance, isOn: isOn, colors: colors, isDisabled: isDisabled }).toString();
});
var StyledExpandLess = (0, _styledComponents2.default)(_SVGExpandLess2.default)(_templateObject2);
var StyledExpandMore = (0, _styledComponents2.default)(_SVGExpandMore2.default)(_templateObject2);
var GoogleButton = (0, _styledComponents2.default)(StyledButton)(_templateObject3);
var CaretdownButton = (0, _styledComponents2.default)(StyledButton)(_templateObject4);
var CancelButton = (0, _styledComponents2.default)(StyledButton)(_templateObject4);
var FacebookButton = (0, _styledComponents2.default)(StyledButton)(_templateObject3);
var MercuryButton = (0, _styledComponents2.default)(StyledButton)(_templateObject5);
var MercurySide = _styledComponents2.default.div(_templateObject6, function (_ref11) {
  var isOn = _ref11.isOn;
  return isOn ? 1 : 0.5;
}, function (_ref12) {
  var colors = _ref12.colors,
      isOn = _ref12.isOn;
  return isOn ? colors.off.backgroundColor : colors.on.backgroundColor;
});
var MercuryCenter = _styledComponents2.default.div(_templateObject7, function (_ref13) {
  var isOn = _ref13.isOn;
  return isOn ? 0.5 : 1;
});

var Icon = _styledComponents2.default.div(_templateObject8);

var GoogleIcon = (0, _styledComponents2.default)(Icon)(_templateObject9);

var FacebookIcon = (0, _styledComponents2.default)(Icon)(_templateObject10);

var SCButton = function SCButton(_ref14) {
  var _ref14$shouldRenderIc = _ref14.shouldRenderIcon,
      shouldRenderIcon = _ref14$shouldRenderIc === undefined ? true : _ref14$shouldRenderIc,
      _ref14$renderIcon = _ref14.renderIcon,
      renderIcon = _ref14$renderIcon === undefined ? function () {
    return null;
  } : _ref14$renderIcon,
      _ref14$dataTestId = _ref14.dataTestId,
      dataTestId = _ref14$dataTestId === undefined ? 'button' : _ref14$dataTestId,
      _ref14$type = _ref14.type,
      type = _ref14$type === undefined ? 'default' : _ref14$type,
      _ref14$invert = _ref14.invert,
      invert = _ref14$invert === undefined ? false : _ref14$invert,
      children = _ref14.children,
      containerRef = _ref14.containerRef,
      className = _ref14.className,
      style = _ref14.style,
      isOn = _ref14.isOn,
      onClick = _ref14.onClick,
      isDisabled = _ref14.isDisabled,
      _ref14$size = _ref14.size,
      size = _ref14$size === undefined ? 'm' : _ref14$size,
      _ref14$colors = _ref14.colors,
      colorsProp = _ref14$colors === undefined ? _defaultStyles.buttonStyles.neutral : _ref14$colors,
      props = (0, _objectWithoutProperties3.default)(_ref14, ['shouldRenderIcon', 'renderIcon', 'dataTestId', 'type', 'invert', 'children', 'containerRef', 'className', 'style', 'isOn', 'onClick', 'isDisabled', 'size', 'colors']);

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

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

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

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

    //const getClassName = ({ className, isOn, isDisabled }) => {
    //  const baseClass = `button button--${type}`
    //  const baseDisabledClass = `button--disabled button--${type}--disabled`
    //  const 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}`
    //    }
    //  }
    //}
    if (isDisabled) {
      return {
        'data-testid': dataTestId + '-disabled',
        style: style
        //  className: getClassName({ className, isOn, isDisabled }),
      };
    }
    return (0, _extends3.default)({
      ref: containerRef,
      'data-testid': dataTestId,
      style: style,
      className: 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));
      }
    }, props);
  };

  var commonProps = (0, _extends3.default)({
    getButtonProps: getButtonProps,
    size: size,
    colors: colors,
    isOn: isOn,
    isDisabled: isDisabled,
    hasTouch: checksForTouch()
  }, getButtonProps((0, _extends3.default)({
    onClick: onClick,
    className: className,
    style: style
  }, props)));
  var renderButtonWithIcon = function renderButtonWithIcon(_ref16) {
    var Button = _ref16.Button,
        Icon = _ref16.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 renderChildren = function renderChildren(type) {
    var icon = void 0;
    switch (type) {
      case 'caretdown':
        icon = isOn ? _react2.default.createElement(StyledExpandLess, null) : _react2.default.createElement(StyledExpandMore, null);
        renderIcon = function renderIcon(props) {
          return isOn ? _react2.default.createElement(StyledExpandLess, (0, _extends3.default)({}, props)) : _react2.default.createElement(StyledExpandMore, (0, _extends3.default)({}, props));
        };

        return typeof children === 'function' ? children((0, _extends3.default)({ icon: icon, renderIcon: renderIcon }, commonProps)) : _react2.default.createElement(
          CaretdownButton,
          (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(
          CancelButton,
          (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: FacebookButton, Icon: FacebookIcon });

      case 'google':
        return renderButtonWithIcon({ Button: GoogleButton, Icon: GoogleIcon });

      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(
          MercuryButton,
          (0, _extends3.default)({}, commonProps),
          _react2.default.createElement(MercurySide, { isOn: isOn, colors: colors }),
          renderIcon(),
          _react2.default.createElement(
            MercuryCenter,
            { isOn: isOn },
            children
          ),
          renderIcon(),
          _react2.default.createElement(MercurySide, { isOn: isOn, colors: colors })
        );
      default:
        return typeof children === 'function' ? children((0, _extends3.default)({}, commonProps)) : _react2.default.createElement(
          StyledButton,
          (0, _extends3.default)({}, commonProps),
          children
        );
    }
  };

  return renderChildren(type);
};

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