blockstack-ui/dist/components/button/index.js

Blockstack UI components built with css-in-js and styled-system.

"use strict";

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

exports.__esModule = true;
exports.Buttons = exports.Button = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

require("core-js/modules/es6.function.bind");

require("regenerator-runtime/runtime");

require("core-js/modules/es6.object.assign");

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

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

var _ = require("../../");

var _reactPowerplug = require("react-powerplug");

var _epitath = _interopRequireDefault(require("epitath"));

var _propTypes = _interopRequireDefault(require("prop-types"));

/**
 * Handle our sizes
 */
var handleSize = function handleSize(_ref) {
  var size = _ref.size,
      hovered = _ref.hovered,
      bg = _ref.bg,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["size", "hovered", "bg"]);

  if (size === 'small') {
    return Object.assign({}, rest, {
      height: 'auto',
      py: 1,
      px: 3,
      typeProps: Object.assign({}, rest.typeProps, {
        fontSize: '12px',
        fontWeight: 500
      }),
      bg: hovered ? 'blue.light' : 'transparent',
      color: 'blue.dark',
      borderColor: hovered ? 'blue.dark' : 'blue.mid',
      boxShadow: hovered ? 'general' : 'none',
      border: '1px solid',
      flexGrow: [1, 0, 0],
      ml: [0, 2, 2],
      mr: [2, 0, 0]
    });
  }

  return Object.assign({}, rest, {
    size: size,
    bg: bg,
    hovered: hovered
  });
};
/**
 * Inverts the colors to white
 */


var handleInvert = function handleInvert(_ref2) {
  var invert = _ref2.invert,
      hovered = _ref2.hovered,
      active = _ref2.active,
      disabled = _ref2.disabled,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["invert", "hovered", "active", "disabled"]);
  return invert ? Object.assign({}, rest, {
    bg: 'white',
    color: rest.bg
  }) : rest;
};
/**
 * Makes a button outlined
 */


var handleOutline = function handleOutline(_ref3) {
  var outline = _ref3.outline,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["outline"]);
  return outline ? Object.assign({}, rest, {
    bg: 'transparent',
    borderColor: rest.bg,
    color: rest.bg
  }) : rest;
};
/**
 * This removes any props we don't want passed along to the final component/dom element
 */


var cleanProps = function cleanProps(_ref4) {
  var hovered = _ref4.hovered,
      active = _ref4.active,
      outline = _ref4.outline,
      invert = _ref4.invert,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["hovered", "active", "outline", "invert"]);
  return rest;
};

var propFn = function propFn(props) {
  return cleanProps(handleSize(handleOutline(handleInvert(props))));
};

var Button = (0, _epitath.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee(_ref5) {
  var children, disabled, Icon, outline, invert, style, bg, rest, _ref6, active, activeBind, _ref7, hovered, hoverBind, bind, defaultProps, _propFn, _propFn$typeProps, typeStyle, typeProps, props, buttonProps, labelProps, IconComponent;

  return _regenerator.default.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          children = _ref5.children, disabled = _ref5.disabled, Icon = _ref5.icon, outline = _ref5.outline, invert = _ref5.invert, style = _ref5.style, bg = _ref5.bg, rest = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["children", "disabled", "icon", "outline", "invert", "style", "bg"]);
          _context.next = 3;
          return _react.default.createElement(_reactPowerplug.Active, null);

        case 3:
          _ref6 = _context.sent;
          active = _ref6.active;
          activeBind = _ref6.bind;
          _context.next = 8;
          return _react.default.createElement(_reactPowerplug.Hover, null);

        case 8:
          _ref7 = _context.sent;
          hovered = _ref7.hovered;
          hoverBind = _ref7.bind;
          bind = Object.assign({}, activeBind, hoverBind);
          defaultProps = {
            is: 'button',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            px: 5,
            height: '48px',
            borderColor: 'transparent',
            bg: bg ? bg : hovered ? 'blue' : 'blue.dark',
            color: 'white',
            border: 2,
            borderRadius: 50,
            boxShadow: hovered ? 'button.hover' : 'button',
            fontWeight: 'semibold',
            variant: 'default',
            fontSize: 2,
            typeProps: {
              fontSize: 2
            }
          };
          _propFn = propFn(Object.assign({}, defaultProps, {
            hovered: hovered ? 'true' : undefined,
            active: active ? 'true' : undefined,
            outline: outline,
            invert: invert
          }, rest)), _propFn$typeProps = _propFn.typeProps, typeStyle = _propFn$typeProps.typeStyle, typeProps = (0, _objectWithoutPropertiesLoose2.default)(_propFn$typeProps, ["typeStyle"]), props = (0, _objectWithoutPropertiesLoose2.default)(_propFn, ["typeProps"]);
          buttonProps = Object.assign({
            style: Object.assign({}, style, {
              textDecoration: 'none',
              cursor: !disabled && hovered ? 'pointer' : undefined,
              transition: '.34s all cubic-bezier(.19,1,.22,1)',
              transform: active ? 'translateY(2px)' : 'none',
              outline: 'none'
            })
          }, props, bind);
          labelProps = Object.assign({}, typeProps, {
            style: Object.assign({}, typeStyle, {
              whiteSpace: 'nowrap',
              pointerEvents: 'none',
              userSelect: 'none',
              transform: 'translateY(-1px)'
            }),
            display: 'inline-block'
          });

          IconComponent = function IconComponent(_ref8) {
            var borderColor = _ref8.borderColor,
                color = _ref8.color,
                p = (0, _objectWithoutPropertiesLoose2.default)(_ref8, ["borderColor", "color"]);
            return Icon ? _react.default.createElement(_.Flex, {
              alignItems: "center",
              justifyContent: "center",
              color: outline ? borderColor : invert ? color : 'blue.accent',
              pl: 2,
              style: {
                pointerEvents: 'none'
              }
            }, _react.default.createElement(Icon, {
              color: "currentColor",
              size: "1.2rem",
              style: {
                display: 'block'
              }
            })) : null;
          };

          return _context.abrupt("return", _react.default.createElement(_.Flex, (0, _extends2.default)({
            flexShrink: 0
          }, buttonProps), _react.default.createElement(_.Type, labelProps, children), _react.default.createElement(IconComponent, buttonProps)));

        case 18:
        case "end":
          return _context.stop();
      }
    }
  }, _callee);
}));
exports.Button = Button;

var Buttons = function Buttons(props) {
  return _react.default.createElement(_.Flex, props);
};

exports.Buttons = Buttons;
Buttons.defaultProps = {
  justifyContent: 'space-evenly'
};
Button.propTypes = {
  outline: _propTypes.default.bool,
  invert: _propTypes.default.bool,
  size: _propTypes.default.oneOf(['small'])
};