backpack-ui/dist/components/form/input.js

Lonely Planet's Components

"use strict";

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

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _entries = require("babel-runtime/core-js/object/entries");

var _entries2 = _interopRequireDefault(_entries);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _styles = require("./styles");

var _styles2 = _interopRequireDefault(_styles);

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

function Input(props) {
  var name = props.name,
      id = props.id,
      type = props.type,
      error = props.error,
      size = props.size,
      theme = props.theme,
      fill = props.fill,
      customStyles = props.customStyles,
      qaHook = props.qaHook;

  // remove custom props that throw console errors

  var sanitizedProps = (0, _entries2.default)(props).reduce(function (iter, _ref) {
    var _ref2 = (0, _slicedToArray3.default)(_ref, 2),
        key = _ref2[0],
        value = _ref2[1];

    if (key !== "fill" && key !== "customStyles") {
      iter[key] = value;
    }
    return iter;
  }, {});

  return _react2.default.createElement("input", (0, _extends3.default)({
    name: name || id,
    "data-testid": qaHook ? (0, _createQAHook2.default)(name, id, "input") : null,
    type: type
  }, sanitizedProps, {
    style: [_styles2.default.base, _styles2.default.element.input.base, size && _styles2.default.size[size], size && _styles2.default.element.input.size[size], theme && _styles2.default.theme[theme], theme && _styles2.default.element.input.theme[theme], theme && error && _styles2.default.theme[theme].error, fill && _styles2.default.fill, customStyles]
  }));
}

Input.propTypes = {
  type: _propTypes2.default.oneOf(["date", "time", "email", "file", "number", "password", "search", "tel", "text", "url", "radio", "checkbox"]).isRequired,
  id: _propTypes2.default.string.isRequired,
  name: _propTypes2.default.string,
  error: _propTypes2.default.bool,
  size: _propTypes2.default.oneOf(["tiny", "small", "medium", "large", "huge"]),
  theme: _propTypes2.default.oneOf(["base", "light", "dark", "float", "inputGroup"]),
  /**
   * Fills the width of the parent
   */
  fill: _propTypes2.default.bool,
  customStyles: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

Input.defaultProps = {
  type: "text",
  id: "",
  name: "",
  size: "medium",
  theme: "base",
  fill: false,
  customStyles: null,
  qaHook: false
};

Input.styles = _styles2.default;

exports.default = (0, _radium2.default)(Input);