blockstack-ui/dist/components/inputs/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.Textarea = exports.Input = void 0;

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

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

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

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

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

require("regenerator-runtime/runtime");

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

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

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

var _primitives = require("../primitives");

var _common = require("../../common");

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

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

function _templateObject() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  input::placeholder,\n  textarea::placeholder {\n    /* Chrome, Firefox, Opera, Safari 10.1+ */\n    color: ", " !important;\n    opacity: 1; /* Firefox */\n  }\n\n  input:-ms-input-placeholder,\n  textarea:-ms-input-placeholder {\n    /* Internet Explorer 10-11 */\n    color: ", " !important;\n  }\n\n  input::-ms-input-placeholder,\n  textarea::-ms-input-placeholder {\n    /* Microsoft Edge */\n    color: ", " !important;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var colors = _common.theme.colors;
var StyledInputWrapper = (0, _styledComponents.default)(_primitives.Box)(_templateObject(), function (props) {
  return props.variant === 'marketing' || props.variant === 'dark' ? colors.blue.neutral : colors.blue.medium;
}, function (props) {
  return props.variant === 'marketing' || props.variant === 'dark' ? colors.blue.neutral : colors.blue.medium;
}, function (props) {
  return props.variant === 'marketing' || props.variant === 'dark' ? colors.blue.neutral : colors.blue.medium;
});
/**
 * Themed inputs
 *
 * We have two themes: ui + marketing
 */

var Input = (0, _epitath.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee(_ref) {
  var _ref$variant, variant, disabled, style, p, _ref2, focused, bind, defaultProps, defaultStyles, marketingStyles, darkStyles, styleProps, props;

  return _regenerator.default.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _ref$variant = _ref.variant, variant = _ref$variant === void 0 ? 'default' : _ref$variant, disabled = _ref.disabled, style = _ref.style, p = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["variant", "disabled", "style"]);
          _context.next = 3;
          return _react.default.createElement(_reactPowerplug.Focus, null);

        case 3:
          _ref2 = _context.sent;
          focused = _ref2.focused;
          bind = _ref2.bind;
          defaultProps = {
            pr: 4,
            pl: 4,
            pt: 3,
            pb: 3,
            height: '48px',
            fontSize: 2,
            boxShadow: focused ? 'focused.light' : undefined
          };
          defaultStyles = {
            borderColor: 'blue.mid',
            border: 1,
            borderRadius: 2,
            color: 'blue.dark',
            height: '48px',
            width: 1
          };
          marketingStyles = {
            borderColor: 'blue',
            border: 1,
            borderRadius: '48px',
            pr: 6,
            pl: 6,
            fontFamily: 'brand',
            color: 'blue',
            width: 1,
            boxShadow: focused ? 'focused.marketing' : 'general'
          };
          darkStyles = {
            borderColor: focused ? 'borders.dark.focus' : 'borders.dark',
            bg: 'blue.darker',
            border: 1,
            borderRadius: '8px',
            color: 'white',
            width: 1,
            boxShadow: undefined
          };

          styleProps = function styleProps() {
            switch (variant) {
              case 'marketing':
                return marketingStyles;

              case 'dark':
                return darkStyles;

              default:
                return defaultStyles;
            }
          };

          props = Object.assign({}, defaultProps, styleProps(), p);
          return _context.abrupt("return", _react.default.createElement(StyledInputWrapper, {
            width: "100%",
            variant: variant
          }, _react.default.createElement(_primitives.Box, (0, _extends2.default)({
            is: "input",
            style: Object.assign({}, style, {
              outline: 'none',
              pointerEvents: disabled ? 'none' : undefined
            }),
            disabled: disabled
          }, props, bind))));

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

var Textarea = function Textarea(p) {
  return _react.default.createElement(Input, (0, _extends2.default)({
    is: "textarea"
  }, p));
};

exports.Textarea = Textarea;