ghg-react/lib/TextInputStyledComponents/TextInputStyledComponents.js

A library of React components for my own use.

var _templateObject = _taggedTemplateLiteral(["color: red;"], ["color: red;"]),
    _templateObject2 = _taggedTemplateLiteral(["\n    border: ", ";\n    display: block;\n  "], ["\n    border: ", ";\n    display: block;\n  "]),
    _templateObject3 = _taggedTemplateLiteral(["margin-bottom: 16px;"], ["margin-bottom: 16px;"]);

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React from "react";
import PropTypes from "prop-types";
import Label from "../Label";
import styled from "styled-components";

/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */
var TextInput = function TextInput(_ref) {
  var htmlId = _ref.htmlId,
      name = _ref.name,
      label = _ref.label,
      _ref$type = _ref.type,
      type = _ref$type === undefined ? "text" : _ref$type,
      _ref$required = _ref.required,
      required = _ref$required === undefined ? false : _ref$required,
      onChange = _ref.onChange,
      placeholder = _ref.placeholder,
      value = _ref.value,
      error = _ref.error,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, ["htmlId", "name", "label", "type", "required", "onChange", "placeholder", "value", "error", "children"]);

  var Error = styled.div(_templateObject);

  var Input = styled.input(_templateObject2, error && "solid 1px red");

  var Fieldset = styled.div(_templateObject3);

  return React.createElement(
    Fieldset,
    null,
    React.createElement(Label, { htmlFor: htmlId, label: label, required: required }),
    React.createElement(Input, Object.assign({
      id: htmlId,
      type: type,
      name: name,
      placeholder: placeholder,
      value: value,
      onChange: onChange
    }, props)),
    children,
    error && React.createElement(
      Error,
      null,
      error
    )
  );
};

TextInput.propTypes = {
  /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */
  htmlId: PropTypes.string.isRequired,

  /** Input name. Recommend setting this to match object's property so a single change handler can be used. */
  name: PropTypes.string.isRequired,

  /** Input label */
  label: PropTypes.string.isRequired,

  /** Input type */
  type: PropTypes.oneOf(["text", "number", "password"]),

  /** Mark label with asterisk if set to true */
  required: PropTypes.bool,

  /** Function to call onChange */
  onChange: PropTypes.func.isRequired,

  /** Placeholder to display when empty */
  placeholder: PropTypes.string,

  /** Value */
  value: PropTypes.any,

  /** String to display when error occurs */
  error: PropTypes.string,

  /** Child component to display next to the input */
  children: PropTypes.node
};

export default TextInput;