@react-awesome-query-builder/antd/esm/widgets/value/MultiSelect.js

User-friendly query builder for React. AntDesign widgets

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Select } from "antd";
import { calcTextWidth, SELECT_WIDTH_OFFSET_RIGHT } from "../../utils/domUtils";
import omit from "lodash/omit";
import { Utils } from "@react-awesome-query-builder/ui";
var useOnPropsChanged = Utils.ReactUtils.useOnPropsChanged;
var mapListValues = Utils.ListUtils.mapListValues;
var Option = Select.Option;
var MultiSelectWidget = /*#__PURE__*/function (_Component) {
  function MultiSelectWidget(props) {
    var _this;
    _classCallCheck(this, MultiSelectWidget);
    _this = _callSuper(this, MultiSelectWidget, [props]);
    _this.handleChange = function (val) {
      if (val && !val.length) val = undefined; //not allow []
      _this.props.setValue(val);
    };
    _this.filterOption = function (input, option) {
      var dataForFilter = option.children || option.value;
      return dataForFilter.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    useOnPropsChanged(_this);
    _this.onPropsChanged(props);
    return _this;
  }
  _inherits(MultiSelectWidget, _Component);
  return _createClass(MultiSelectWidget, [{
    key: "onPropsChanged",
    value: function onPropsChanged(nextProps) {
      var listValues = nextProps.listValues;
      var optionsMaxWidth = 0;
      mapListValues(listValues, function (_ref) {
        var title = _ref.title,
          value = _ref.value;
        optionsMaxWidth = Math.max(optionsMaxWidth, calcTextWidth(title, null));
      });
      if (!isNaN(optionsMaxWidth) && optionsMaxWidth) {
        this.optionsMaxWidth = optionsMaxWidth;
      }
      this.options = mapListValues(listValues, function (_ref2) {
        var title = _ref2.title,
          value = _ref2.value;
        return /*#__PURE__*/React.createElement(Option, {
          key: value,
          value: value
        }, title);
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
        config = _this$props.config,
        placeholder = _this$props.placeholder,
        allowCustomValues = _this$props.allowCustomValues,
        customProps = _this$props.customProps,
        value = _this$props.value,
        readonly = _this$props.readonly;
      var renderSize = config.settings.renderSize;
      var placeholderWidth = calcTextWidth(placeholder);
      var dropdownEmptyWidth = placeholderWidth ? placeholderWidth + SELECT_WIDTH_OFFSET_RIGHT : null;
      var aValue = value && value.length ? value : undefined;
      var width = aValue ? null : dropdownEmptyWidth;
      var dropdownWidth = this.optionsMaxWidth ? this.optionsMaxWidth + SELECT_WIDTH_OFFSET_RIGHT : null;
      var customSelectProps = omit(customProps, ["showCheckboxes"]);
      return /*#__PURE__*/React.createElement(Select, _extends({
        disabled: readonly,
        mode: allowCustomValues ? "tags" : "multiple",
        style: {
          minWidth: width,
          width: width
        },
        dropdownStyle: {
          width: dropdownWidth
        },
        key: "widget-multiselect",
        popupMatchSelectWidth: false,
        placeholder: placeholder,
        size: renderSize,
        value: aValue,
        onChange: this.handleChange,
        filterOption: this.filterOption
      }, customSelectProps), this.options);
    }
  }]);
}(Component);
MultiSelectWidget.propTypes = {
  setValue: PropTypes.func.isRequired,
  config: PropTypes.object.isRequired,
  value: PropTypes.array,
  field: PropTypes.any,
  placeholder: PropTypes.string,
  customProps: PropTypes.object,
  fieldDefinition: PropTypes.object,
  readonly: PropTypes.bool,
  // from fieldSettings:
  listValues: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  allowCustomValues: PropTypes.bool
};
export { MultiSelectWidget as default };