optimizely-oui/module/js/components/Input/index.js

Optimizely's Component Library.

import _pt from "prop-types";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { useCallback } from "react";
import classNames from "classnames";
import Label from "../Label";
import Icon from "react-oui-icons";
import ButtonIcon from "../ButtonIcon";
var Input = React.forwardRef(function (_ref, ref) {
  var className = _ref.className,
      defaultValue = _ref.defaultValue,
      displayError = _ref.displayError,
      focus = _ref.focus,
      hasClearButton = _ref.hasClearButton,
      hasSpellCheck = _ref.hasSpellCheck,
      id = _ref.id,
      _ref$isAutoCompleteEn = _ref.isAutoCompleteEnabled,
      isAutoCompleteEnabled = _ref$isAutoCompleteEn === void 0 ? true : _ref$isAutoCompleteEn,
      isDisabled = _ref.isDisabled,
      isFilter = _ref.isFilter,
      isOptional = _ref.isOptional,
      isReadOnly = _ref.isReadOnly,
      isRequired = _ref.isRequired,
      label = _ref.label,
      leftIconName = _ref.leftIconName,
      max = _ref.max,
      maxLength = _ref.maxLength,
      min = _ref.min,
      note = _ref.note,
      onBlur = _ref.onBlur,
      onChange = _ref.onChange,
      onClearButtonClick = _ref.onClearButtonClick,
      onClick = _ref.onClick,
      onFocus = _ref.onFocus,
      onInput = _ref.onInput,
      onKeyDown = _ref.onKeyDown,
      placeholder = _ref.placeholder,
      rightIconName = _ref.rightIconName,
      RightContainer = _ref.RightContainer,
      step = _ref.step,
      testSection = _ref.testSection,
      textAlign = _ref.textAlign,
      type = _ref.type,
      value = _ref.value,
      props = _objectWithoutProperties(_ref, ["className", "defaultValue", "displayError", "focus", "hasClearButton", "hasSpellCheck", "id", "isAutoCompleteEnabled", "isDisabled", "isFilter", "isOptional", "isReadOnly", "isRequired", "label", "leftIconName", "max", "maxLength", "min", "note", "onBlur", "onChange", "onClearButtonClick", "onClick", "onFocus", "onInput", "onKeyDown", "placeholder", "rightIconName", "RightContainer", "step", "testSection", "textAlign", "type", "value"]);

  var renderNote = useCallback(function () {
    return React.createElement("div", {
      className: "oui-form-note",
      "data-test-section": testSection && testSection + "-note"
    }, note);
  }, [note, testSection]);

  var renderIcon = function renderIcon(iconName) {
    return React.createElement(Icon, {
      name: iconName,
      size: "medium"
    });
  };

  var renderClearButton = function renderClearButton() {
    return React.createElement(ButtonIcon, {
      title: "Clear Input",
      iconName: "close",
      size: "small",
      style: "plain",
      onClick: onClearButtonClick
    });
  };

  var renderInput = function renderInput() {
    var hasAlignStyle = false;

    if (textAlign) {
      hasAlignStyle = true;
    }

    var classes = classNames("oui-text-input", {
      "oui-text-input--read-only": isReadOnly
    }, {
      "oui-text-input--search": isFilter
    }, {
      "oui-form-bad-news": displayError
    }, _defineProperty({}, "text--".concat(textAlign), hasAlignStyle), className);
    var input = React.createElement("input", _extends({
      autoComplete: isAutoCompleteEnabled ? "on" : "off",
      "data-oui-component": true,
      className: classes,
      id: id,
      ref: ref,
      type: type,
      value: value,
      defaultValue: defaultValue,
      placeholder: placeholder,
      required: isRequired,
      readOnly: isReadOnly,
      disabled: isDisabled,
      onInput: onInput,
      onChange: onChange,
      onClick: onClick,
      onBlur: onBlur,
      onKeyDown: onKeyDown,
      onFocus: onFocus,
      min: min,
      max: max,
      spellCheck: hasSpellCheck,
      step: step
    }, typeof maxLength === "undefined" ? {} : {
      maxLength: maxLength
    }, {
      "data-test-section": testSection,
      autoFocus: focus
    }, props));

    if (leftIconName || !!RightContainer || rightIconName || hasClearButton) {
      var _classNames2;

      var containerClasses = classNames("position--relative", (_classNames2 = {}, _defineProperty(_classNames2, "oui-text-input-with-icon--left", leftIconName), _defineProperty(_classNames2, "oui-text-input-with-icon--right", rightIconName), _classNames2));
      return React.createElement("div", {
        className: containerClasses
      }, leftIconName && React.createElement("span", {
        className: "flex oui-input-icon__left"
      }, renderIcon(leftIconName)), input, rightIconName && !hasClearButton && React.createElement("span", {
        className: "flex oui-input-icon__right"
      }, renderIcon(rightIconName)), !!RightContainer && !hasClearButton && React.createElement("span", {
        className: "flex oui-text-input__right-container"
      }, React.createElement(RightContainer, null)), hasClearButton && React.createElement("span", {
        className: "flex oui-text-input__clear-button"
      }, renderClearButton()));
    }

    return input;
  };

  if (label) {
    return React.createElement("div", {
      "data-oui-component": true,
      className: classNames({
        "oui-form-bad-news": displayError
      })
    }, React.createElement(Label, {
      testSection: testSection && testSection + "-label",
      isRequired: isRequired,
      isOptional: isOptional,
      inputId: id
    }, label), renderInput(), note && renderNote());
  }

  return React.createElement(React.Fragment, null, renderInput(), note && renderNote());
});
Input.propTypes = {
  onInput: _pt.func,
  onFocus: _pt.func,
  onClick: _pt.func,
  onClearButtonClick: _pt.func,
  onChange: _pt.func,
  onBlur: _pt.func,
  note: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
  min: _pt.number,
  maxLength: _pt.number,
  max: _pt.number,
  leftIconName: _pt.string,
  label: _pt.string,
  isReadOnly: _pt.bool,
  isFilter: _pt.bool,
  isDisabled: _pt.bool,
  isAutoCompleteEnabled: _pt.bool,
  hasSpellCheck: _pt.bool,
  hasClearButton: _pt.bool,
  focus: _pt.bool,
  displayError: _pt.bool,
  defaultValue: _pt.string,
  className: _pt.string,

  /** Id to link label and input for accessibility reasons
   *  @param {Object} props Object of props
   *  @returns {Error} Error or null
   */
  id: function verifyIDProp(props) {
    if (props.label && !props.id) {
      return new Error("Inputs must include an id when a label is specified for accessibility purposes.");
    }

    return null;
  },

  /** Adds an optional label if there is a label provided
   *  @param {Object} props Object of props
   *  @returns {Error} Error or null
   */
  isOptional: function verifyIsOptionalProp(props) {
    if (props.isOptional && !props.label) {
      return new Error("Must include a value for the label prop to use the isOptional prop");
    }

    return null;
  },

  /** Includes required asterisk label if true
   *  @param {Object} props Object of props
   *  @returns {Error} Error or null
   */
  isRequired: function verifyIsRequiredProp(props) {
    if (props.isRequired && !props.label) {
      return new Error("Must include a value for the label prop to use the isRequired prop");
    }

    return null;
  }
};
Input.displayName = "Input";
Input.defaultProps = {
  note: null,
  isRequired: false,
  hasSpellCheck: true
};
export default Input;