wix-style-react/dist/es/src/AutoCompleteWithLabel/AutoCompleteWithLabel.js

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
import StatusAlertSmall from 'wix-ui-icons-common/StatusAlertSmall';
import Input from '../Input';
import LabelledElement from '../LabelledElement';
import Text from '../Text';
import InputWithOptions from '../InputWithOptions';
import { classes } from './AutoCompleteWithLabel.st.css';
import dataHooks from './dataHooks';
import { optionValidator } from '../DropdownLayout/DropdownLayout';

var AutoCompleteWithLabel = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(AutoCompleteWithLabel, _React$PureComponent);

  var _super = _createSuper(AutoCompleteWithLabel);

  function AutoCompleteWithLabel(props) {
    var _this;

    _classCallCheck(this, AutoCompleteWithLabel);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "onSelect", function (option) {
      var value = option.value;

      _this.setState({
        value: value
      });

      _this.props.onSelect(option);

      _this.setState({
        isEditing: false
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onChange", function (event) {
      var value = event.target.value;

      _this.setState({
        value: value,
        isEditing: true
      });

      _this.props.onChange && _this.props.onChange(event);
    });

    _defineProperty(_assertThisInitialized(_this), "_isInputControlled", function () {
      return typeof _this.props.value !== 'undefined';
    });

    _this.state = {
      value: props.value || '',
      isEditing: false
    };
    return _this;
  }

  _createClass(AutoCompleteWithLabel, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          label = _this$props.label,
          dataHook = _this$props.dataHook,
          options = _this$props.options,
          status = _this$props.status,
          suffix = _this$props.suffix,
          statusMessage = _this$props.statusMessage,
          onFocus = _this$props.onFocus,
          name = _this$props.name,
          type = _this$props.type,
          ariaLabel = _this$props.ariaLabel,
          autoFocus = _this$props.autoFocus,
          autocomplete = _this$props.autocomplete,
          disabled = _this$props.disabled,
          className = _this$props.className,
          maxLength = _this$props.maxLength,
          placeholder = _this$props.placeholder,
          _native = _this$props["native"],
          onBlur = _this$props.onBlur,
          maxHeightPixels = _this$props.maxHeightPixels;

      var _ref = this._isInputControlled() ? this.props : this.state,
          value = _ref.value;

      var predicate = this.state.isEditing ? function (option) {
        return option.value.toLowerCase().includes(value.toLowerCase());
      } : function () {
        return true;
      };
      var filteredOptions = options.filter(predicate);
      var suffixContainer = suffix ? suffix.map(function (item, index) {
        return /*#__PURE__*/React.createElement("div", {
          className: classes.suffix,
          key: "".concat(dataHook, "-").concat(index)
        }, item);
      }) : [];
      return /*#__PURE__*/React.createElement("div", {
        "data-hook": dataHook
      }, /*#__PURE__*/React.createElement(LabelledElement, {
        label: label,
        dataHook: dataHooks.labelledElement,
        value: value
      }, /*#__PURE__*/React.createElement(InputWithOptions, {
        onChange: this.onChange,
        onSelect: this.onSelect,
        dataHook: dataHooks.inputWithOptions,
        hideStatusSuffix: true,
        onFocus: onFocus,
        onBlur: onBlur,
        size: 'large',
        inputElement: /*#__PURE__*/React.createElement(Input, {
          name: name,
          type: type,
          ariaLabel: ariaLabel,
          autoFocus: autoFocus,
          autocomplete: autocomplete,
          disabled: disabled,
          maxLength: maxLength,
          placeholder: placeholder,
          dataHook: dataHooks.inputWithLabel,
          value: value,
          className: className,
          suffix: suffixContainer,
          status: status
        }),
        options: filteredOptions,
        "native": _native,
        maxHeightPixels: maxHeightPixels
      })), status === Input.StatusError && statusMessage && /*#__PURE__*/React.createElement(Text, {
        skin: "error",
        weight: "normal",
        size: "small",
        className: classes.statusMessage
      }, /*#__PURE__*/React.createElement("span", {
        className: classes.statusMessageIcon
      }, /*#__PURE__*/React.createElement(StatusAlertSmall, null)), /*#__PURE__*/React.createElement("span", {
        "data-hook": dataHooks.errorMessage,
        className: classes.errorMessageContent
      }, statusMessage)));
    }
  }]);

  return AutoCompleteWithLabel;
}(React.PureComponent);

_defineProperty(AutoCompleteWithLabel, "displayName", 'AutoCompleteWithLabel');

_defineProperty(AutoCompleteWithLabel, "propTypes", {
  /** Sets a default value for those who want to use this component un-controlled. */
  dataHook: PropTypes.string,

  /** Defines a value label to show inside of a field. */
  label: PropTypes.string.isRequired,

  /** Specify an array of options to display in the dropdown list. */
  options: PropTypes.arrayOf(optionValidator).isRequired,

  /** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */
  suffix: PropTypes.arrayOf(PropTypes.element),

  /** Specify the status of a field. */
  status: PropTypes.oneOf(['error']),

  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
  statusMessage: PropTypes.node,

  /** Defines a standard input onFocus callback. */
  onFocus: PropTypes.func,

  /** Defines a standard input onBlur callback */
  onBlur: PropTypes.func,

  /** Defines a standard input onChange callback. */
  onChange: PropTypes.func,

  /** Reference element data when a form is submitted. */
  name: PropTypes.string,

  /** Specifies the type of `<input/>` element to display. Default is text string. */
  type: PropTypes.string,

  /** Define a string that labels the current element in case where a text label is not visible on the screen. */
  ariaLabel: PropTypes.string,

  /** Focus the element on mount (standard React input autoFocus). */
  autoFocus: PropTypes.bool,

  /** Sets the value of native autocomplete attribute (check the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values  */
  autocomplete: PropTypes.string,

  /** Specifies whether input should be disabled or not. */
  disabled: PropTypes.bool,

  /** Specifies a CSS class name to be appended to the component’s root element. */
  className: PropTypes.string,

  /** Sets the maximum number of characters that can be entered into a field. */
  maxLength: PropTypes.number,

  /** Sets a placeholder message to display. */
  placeholder: PropTypes.string,

  /** Defines a callback function which is called whenever user selects a different option in the list. */
  onSelect: PropTypes.func,

  /** Indicates whether to render using the native select element */
  "native": PropTypes.bool,

  /** Value of rendered child input */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** Sets the maximum height of the dropdownLayout in pixels. */
  maxHeightPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
});

_defineProperty(AutoCompleteWithLabel, "defaultProps", _objectSpread(_objectSpread({}, Input.defaultProps), {}, {
  label: '',
  options: [],
  onSelect: function onSelect() {}
}));

export default AutoCompleteWithLabel;