@react-awesome-query-builder/antd/esm/widgets/value/Select.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 { calcTextWidth, SELECT_WIDTH_OFFSET_RIGHT } from "../../utils/domUtils";
import { Select } from "antd";
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;

// see type ListItem
var mapListItemToOptionKeys = {
  value: "value",
  title: "children",
  groupTitle: "grouplabel" // not supported
};
var SelectWidget = /*#__PURE__*/function (_Component) {
  function SelectWidget(props) {
    var _this;
    _classCallCheck(this, SelectWidget);
    _this = _callSuper(this, SelectWidget, [props]);
    _this.handleChange = function (val) {
      _this.props.setValue(val);
    };
    _this.filterOption = function (input, option) {
      var config = _this.props.config;
      var keysForFilter = config.settings.listKeysForSearch.map(function (k) {
        return mapListItemToOptionKeys[k];
      });
      var valueForFilter = keysForFilter.map(function (k) {
        return typeof option[k] == "string" ? option[k] : "";
      }).join("\0");
      var matches = valueForFilter.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      return matches;
    };
    useOnPropsChanged(_this);
    _this.onPropsChanged(props);
    return _this;
  }
  _inherits(SelectWidget, _Component);
  return _createClass(SelectWidget, [{
    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,
        customProps = _this$props.customProps,
        value = _this$props.value,
        readonly = _this$props.readonly;
      var renderSize = config.settings.renderSize;
      var placeholderWidth = calcTextWidth(placeholder);
      var dropdownWidth = this.optionsMaxWidth ? this.optionsMaxWidth + SELECT_WIDTH_OFFSET_RIGHT : null;
      var dropdownEmptyWidth = placeholderWidth ? placeholderWidth + SELECT_WIDTH_OFFSET_RIGHT : null;
      var width = value ? dropdownWidth : dropdownEmptyWidth;
      var aValue = value != undefined ? value + "" : undefined;
      var customSelectProps = omit(customProps, [""]);
      return /*#__PURE__*/React.createElement(Select, _extends({
        disabled: readonly,
        style: {
          width: width
        },
        key: "widget-select",
        popupMatchSelectWidth: false,
        placeholder: placeholder,
        size: renderSize,
        value: aValue,
        onChange: this.handleChange,
        filterOption: this.filterOption
      }, customSelectProps), this.options);
    }
  }]);
}(Component);
SelectWidget.propTypes = {
  setValue: PropTypes.func.isRequired,
  config: PropTypes.object.isRequired,
  field: PropTypes.any,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  //key in listValues
  customProps: PropTypes.object,
  fieldDefinition: PropTypes.object,
  readonly: PropTypes.bool,
  // from fieldSettings:
  listValues: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
export { SelectWidget as default };