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

Optimizely's Component Library.

"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _Label = _interopRequireDefault(require("../Label"));

var _reactOuiIcons = _interopRequireDefault(require("react-oui-icons"));

var _ButtonIcon = _interopRequireDefault(require("../ButtonIcon"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

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; }

var Input = _react["default"].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 = (0, _react.useCallback)(function () {
    return _react["default"].createElement("div", {
      className: "oui-form-note",
      "data-test-section": testSection && testSection + "-note"
    }, note);
  }, [note, testSection]);

  var renderIcon = function renderIcon(iconName) {
    return _react["default"].createElement(_reactOuiIcons["default"], {
      name: iconName,
      size: "medium"
    });
  };

  var renderClearButton = function renderClearButton() {
    return _react["default"].createElement(_ButtonIcon["default"], {
      title: "Clear Input",
      iconName: "close",
      size: "small",
      style: "plain",
      onClick: onClearButtonClick
    });
  };

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

    if (textAlign) {
      hasAlignStyle = true;
    }

    var classes = (0, _classnames["default"])("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["default"].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 = (0, _classnames["default"])("position--relative", (_classNames2 = {}, _defineProperty(_classNames2, "oui-text-input-with-icon--left", leftIconName), _defineProperty(_classNames2, "oui-text-input-with-icon--right", rightIconName), _classNames2));
      return _react["default"].createElement("div", {
        className: containerClasses
      }, leftIconName && _react["default"].createElement("span", {
        className: "flex oui-input-icon__left"
      }, renderIcon(leftIconName)), input, rightIconName && !hasClearButton && _react["default"].createElement("span", {
        className: "flex oui-input-icon__right"
      }, renderIcon(rightIconName)), !!RightContainer && !hasClearButton && _react["default"].createElement("span", {
        className: "flex oui-text-input__right-container"
      }, _react["default"].createElement(RightContainer, null)), hasClearButton && _react["default"].createElement("span", {
        className: "flex oui-text-input__clear-button"
      }, renderClearButton()));
    }

    return input;
  };

  if (label) {
    return _react["default"].createElement("div", {
      "data-oui-component": true,
      className: (0, _classnames["default"])({
        "oui-form-bad-news": displayError
      })
    }, _react["default"].createElement(_Label["default"], {
      testSection: testSection && testSection + "-label",
      isRequired: isRequired,
      isOptional: isOptional,
      inputId: id
    }, label), renderInput(), note && renderNote());
  }

  return _react["default"].createElement(_react["default"].Fragment, null, renderInput(), note && renderNote());
});

Input.propTypes = {
  onInput: _propTypes["default"].func,
  onFocus: _propTypes["default"].func,
  onClick: _propTypes["default"].func,
  onClearButtonClick: _propTypes["default"].func,
  onChange: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,
  note: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].oneOf([null])]),
  min: _propTypes["default"].number,
  maxLength: _propTypes["default"].number,
  max: _propTypes["default"].number,
  leftIconName: _propTypes["default"].string,
  label: _propTypes["default"].string,
  isReadOnly: _propTypes["default"].bool,
  isFilter: _propTypes["default"].bool,
  isDisabled: _propTypes["default"].bool,
  isAutoCompleteEnabled: _propTypes["default"].bool,
  hasSpellCheck: _propTypes["default"].bool,
  hasClearButton: _propTypes["default"].bool,
  focus: _propTypes["default"].bool,
  displayError: _propTypes["default"].bool,
  defaultValue: _propTypes["default"].string,
  className: _propTypes["default"].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
};
var _default = Input;
exports["default"] = _default;