wix-style-react/dist/src/MultiSelect/InputWithTags.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

var _Tag = _interopRequireDefault(require("../Tag/Tag"));

var _Input = _interopRequireDefault(require("../Input"));

var _InputWithTagsSt = require("./InputWithTags.st.css");

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

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

var _SortableList = _interopRequireDefault(require("../SortableList/SortableList"));

var _dndStyles = _interopRequireDefault(require("../dnd-styles"));

var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));

var _DropDownArrow = _interopRequireDefault(require("wix-ui-icons-common/system/DropDownArrow"));

var _excluded = ["tags", "onRemoveTag", "onReorder", "placeholder", "status", "statusMessage", "disabled", "delimiters", "mode", "size"],
    _excluded2 = ["onManuallyInput", "inputElement", "closeOnSelect", "predicate", "onClickOutside", "fixedHeader", "fixedFooter", "dataHook", "onFocus", "withSelection", "onBlur", "menuArrow", "onInputClicked"],
    _excluded3 = ["label"],
    _excluded4 = ["id", "label"],
    _excluded5 = ["item", "previewStyles", "isPlaceholder", "isPreview"];

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }

var InputWithTags = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(InputWithTags, _React$Component);

  var _super = _createSuper(InputWithTags);

  function InputWithTags(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, InputWithTags);
    _this = _super.call(this, props);
    _this.focus = _this.focus.bind((0, _assertThisInitialized2["default"])(_this));
    _this.blur = _this.blur.bind((0, _assertThisInitialized2["default"])(_this));
    _this.select = _this.select.bind((0, _assertThisInitialized2["default"])(_this));
    _this.renderReorderableTag = _this.renderReorderableTag.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleInputFocus = _this.handleInputFocus.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleInputBlur = _this.handleInputBlur.bind((0, _assertThisInitialized2["default"])(_this));
    _this.state = {
      inputValue: '',
      inputHasFocus: false
    };
    return _this;
  }

  (0, _createClass2["default"])(InputWithTags, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.autoFocus && this.props.onFocus();
    }
  }, {
    key: "handleClick",
    value: function handleClick(e) {
      if (!this.props.disabled) {
        this.input.focus();
        this.props.onInputClicked && this.props.onInputClicked(e);
      }
    }
  }, {
    key: "handleInputFocus",
    value: function handleInputFocus(e) {
      this.setState({
        inputHasFocus: true
      });
      this.props.onFocus && this.props.onFocus(e);
    }
  }, {
    key: "handleInputBlur",
    value: function handleInputBlur(e) {
      this.setState({
        inputHasFocus: false
      });
      this.props.onBlur && this.props.onBlur(e);
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _this2 = this;

      var _this$props = this.props,
          tags = _this$props.tags,
          onRemoveTag = _this$props.onRemoveTag,
          onReorder = _this$props.onReorder,
          placeholder = _this$props.placeholder,
          status = _this$props.status,
          statusMessage = _this$props.statusMessage,
          disabled = _this$props.disabled,
          delimiters = _this$props.delimiters,
          mode = _this$props.mode,
          size = _this$props.size,
          inputProps = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
      var hasFocus = this.state.inputHasFocus;
      var isSelectMode = mode === 'select';
      var className = (0, _classnames["default"])(_InputWithTagsSt.classes.inputWithTagsContainer, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, _InputWithTagsSt.classes.disabled, disabled), (0, _defineProperty2["default"])(_classNames, _InputWithTagsSt.classes[status], status), (0, _defineProperty2["default"])(_classNames, _InputWithTagsSt.classes.readOnly, isSelectMode), (0, _defineProperty2["default"])(_classNames, _InputWithTagsSt.classes.hasFocus, hasFocus && !disabled), (0, _defineProperty2["default"])(_classNames, _InputWithTagsSt.classes.hasMaxHeight, !(0, _isUndefined["default"])(this.props.maxHeight) || !(0, _isUndefined["default"])(this.props.maxNumRows)), (0, _defineProperty2["default"])(_classNames, _InputWithTagsSt.classes.sizeSmall, size === 'small'), (0, _defineProperty2["default"])(_classNames, _InputWithTagsSt.classes.sizeLarge, size === 'large'), _classNames));
      /* eslint-disable no-unused-vars */

      var onManuallyInput = inputProps.onManuallyInput,
          inputElement = inputProps.inputElement,
          closeOnSelect = inputProps.closeOnSelect,
          predicate = inputProps.predicate,
          onClickOutside = inputProps.onClickOutside,
          fixedHeader = inputProps.fixedHeader,
          fixedFooter = inputProps.fixedFooter,
          dataHook = inputProps.dataHook,
          onFocus = inputProps.onFocus,
          withSelection = inputProps.withSelection,
          onBlur = inputProps.onBlur,
          menuArrow = inputProps.menuArrow,
          onInputClicked = inputProps.onInputClicked,
          desiredProps = (0, _objectWithoutProperties2["default"])(inputProps, _excluded2);
      var rowMultiplier;

      if (tags.length && tags[0].size === 'large') {
        rowMultiplier = 47;
      } else {
        rowMultiplier = 35;
      }

      var maxHeight = this.props.maxHeight || this.props.maxNumRows * rowMultiplier || 'initial';
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: className,
        "data-status": status,
        style: {
          maxHeight: maxHeight
        },
        onClick: this.handleClick,
        "data-hook": this.props.dataHook,
        "data-focus": hasFocus && !disabled || null
      }, onReorder ? /*#__PURE__*/_react["default"].createElement(_SortableList["default"], {
        contentClassName: _InputWithTagsSt.classes.tagsContainer,
        items: tags,
        onDrop: onReorder,
        renderItem: this.renderReorderableTag
      }) : tags.map(function (_ref) {
        var label = _ref.label,
            rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded3);
        return /*#__PURE__*/_react["default"].createElement(_Tag["default"], (0, _extends2["default"])({
          key: rest.id,
          dataHook: "tag",
          disabled: disabled,
          onRemove: onRemoveTag,
          className: _InputWithTagsSt.classes.tag
        }, rest), label);
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: (0, _classnames["default"])(_InputWithTagsSt.classes.input, !tags.length),
        "data-hook": "inner-input-with-tags"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames["default"])(_InputWithTagsSt.classes.hiddenDiv, (0, _defineProperty2["default"])({}, _InputWithTagsSt.classes.smallFont, size === 'small'))
      }, this.state.inputValue), /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({
        size: size,
        width: this.props.width,
        ref: function ref(input) {
          return _this2.input = input;
        },
        onFocus: this.handleInputFocus,
        onBlur: this.handleInputBlur,
        placeholder: tags.length === 0 ? placeholder : ''
      }, desiredProps, {
        dataHook: "inputWithTags-input",
        disabled: disabled,
        disableEditing: isSelectMode,
        onChange: function onChange(e) {
          if (!delimiters.includes(e.target.value)) {
            _this2.setState({
              inputValue: e.target.value
            });

            desiredProps.onChange && desiredProps.onChange(e);
          }
        },
        withSelection: true,
        prefix: this.props.customSuffix && !this.props.hideCustomSuffix && !this.state.inputHasFocus && /*#__PURE__*/_react["default"].createElement("span", {
          "data-hook": "custom-suffix",
          className: _InputWithTagsSt.classes.customSuffix
        }, this.props.customSuffix)
      }))), /*#__PURE__*/_react["default"].createElement("div", {
        className: _InputWithTagsSt.classes.inputSuffix
      }, !disabled && ['error', 'warning', 'loading'].includes(status) && /*#__PURE__*/_react["default"].createElement("div", {
        className: _InputWithTagsSt.classes.statusIndicator
      }, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
        status: status,
        message: statusMessage,
        dataHook: "input-status"
      })), isSelectMode && /*#__PURE__*/_react["default"].createElement("div", {
        className: _InputWithTagsSt.classes.menuArrow,
        "data-hook": "input-menu-arrow"
      }, /*#__PURE__*/_react["default"].createElement(_DropDownArrow["default"], null))));
    }
  }, {
    key: "renderReorderableTag",
    value: function renderReorderableTag(_ref2) {
      var _classNames3;

      var _ref2$item = _ref2.item,
          id = _ref2$item.id,
          label = _ref2$item.label,
          itemProps = (0, _objectWithoutProperties2["default"])(_ref2$item, _excluded4),
          previewStyles = _ref2.previewStyles,
          isPlaceholder = _ref2.isPlaceholder,
          isPreview = _ref2.isPreview,
          rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded5);
      var _this$props2 = this.props,
          onRemoveTag = _this$props2.onRemoveTag,
          disabled = _this$props2.disabled;

      var _classes = (0, _classnames["default"])(_InputWithTagsSt.classes.tag, (_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, _dndStyles["default"].itemPlaceholder, isPlaceholder), (0, _defineProperty2["default"])(_classNames3, _InputWithTagsSt.classes.draggedTagPlaceholder, isPlaceholder), (0, _defineProperty2["default"])(_classNames3, _dndStyles["default"].itemPreview, isPreview), (0, _defineProperty2["default"])(_classNames3, _InputWithTagsSt.classes.draggedTag, isPreview), _classNames3));

      return /*#__PURE__*/_react["default"].createElement("div", {
        style: previewStyles
      }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], (0, _extends2["default"])({
        id: id,
        dataHook: "tag",
        disabled: disabled,
        className: _classes,
        onRemove: onRemoveTag
      }, itemProps, rest), label));
    }
  }, {
    key: "focus",
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: "blur",
    value: function blur() {
      this.input.blur();
    }
  }, {
    key: "select",
    value: function select() {
      this.input.select();
    }
  }, {
    key: "clear",
    value: function clear() {
      this.input.clear();
    }
  }]);
  return InputWithTags;
}(_react["default"].Component);

InputWithTags.propTypes = {
  onRemoveTag: _propTypes["default"].func,
  tags: _propTypes["default"].array,
  onReorder: _propTypes["default"].func,
  maxHeight: _propTypes["default"].string,
  maxNumRows: _propTypes["default"].number,
  onKeyDown: _propTypes["default"].func,
  dataHook: _propTypes["default"].string,
  placeholder: _propTypes["default"].string,
  onFocus: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,
  onInputClicked: _propTypes["default"].func,
  autoFocus: _propTypes["default"].bool,
  disabled: _propTypes["default"].bool,

  /** The status of the input */
  status: _propTypes["default"].oneOf(['error', 'warning', 'loading']),

  /** Text to be shown in the status icon tooltip */
  statusMessage: _propTypes["default"].string,
  mode: _propTypes["default"].oneOf(['select']),
  delimiters: _propTypes["default"].array,
  width: _propTypes["default"].string,
  customSuffix: _propTypes["default"].node,
  hideCustomSuffix: _propTypes["default"].bool
};
InputWithTags.defaultProps = {
  onRemoveTag: function onRemoveTag() {},
  tags: [],
  placeholder: '',
  delimiters: []
};
var _default = InputWithTags;
exports["default"] = _default;