ghg-react/lib/TextInputModules/TextInputModules.js

A library of React components for my own use.

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 styles from './textInput.css';

/** 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']);

  return React.createElement(
    'div',
    { className: styles.fieldset },
    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,
      className: error && styles.inputError
    }, props)),
    children,
    error && React.createElement(
      'div',
      { className: styles.error },
      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;