@react-awesome-query-builder/antd/cjs/widgets/core/FieldSelect.js

User-friendly query builder for React. AntDesign widgets

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _domUtils = require("../../utils/domUtils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var Option = _antd.Select.Option,
  OptGroup = _antd.Select.OptGroup;

// see type FieldItemSearchableKeys
var mapFieldItemToOptionKeys = {
  key: "_value2",
  path: "value",
  label: "label",
  altLabel: "title",
  tooltip: "_tooltip",
  grouplabel: "grouplabel",
  fullLabel: "_fullLabel"
};
var FieldSelect = function FieldSelect(props) {
  var setField = props.setField,
    config = props.config,
    customProps = props.customProps,
    items = props.items,
    placeholder = props.placeholder,
    selectedKey = props.selectedKey,
    selectedLabel = props.selectedLabel,
    selectedOpts = props.selectedOpts,
    selectedAltLabel = props.selectedAltLabel,
    selectedFullLabel = props.selectedFullLabel,
    readonly = props.readonly,
    errorText = props.errorText;
  var _ref = customProps || {},
    showSearch = _ref.showSearch;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var _useState3 = (0, _react.useState)(""),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    searchValue = _useState4[0],
    setSearchValue = _useState4[1];
  var selectText = selectedLabel || placeholder;
  var selectWidth = (0, _domUtils.calcTextWidth)(selectText);
  var isFieldSelected = !!selectedKey;
  var dropdownPlacement = config.settings.dropdownPlacement;
  var dropdownAlign = dropdownPlacement ? _domUtils.BUILT_IN_PLACEMENTS[dropdownPlacement] : undefined;
  var width = isFieldSelected && !showSearch || !selectWidth ? null : selectWidth + _domUtils.SELECT_WIDTH_OFFSET_RIGHT;
  var tooltipText = selectedAltLabel || selectedFullLabel;
  if (tooltipText == selectedLabel) tooltipText = null;
  var style = (0, _react.useMemo)(function () {
    return {
      width: width
    };
  }, [width]);
  var onChange = (0, _react.useCallback)(function (key) {
    setField(key);
  }, [setField]);
  var onSearch = (0, _react.useCallback)(function (search) {
    setSearchValue(search);
  }, [setSearchValue]);
  var filterOption = (0, _react.useCallback)(function (input, option) {
    var keysForFilter = config.settings.fieldItemKeysForSearch.map(function (k) {
      return mapFieldItemToOptionKeys[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;
  }, [config.settings.fieldItemKeysForSearch]);
  var _renderSelectItems = function renderSelectItems(fields) {
    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    return fields.map(function (field) {
      var items = field.items,
        key = field.key,
        path = field.path,
        label = field.label,
        fullLabel = field.fullLabel,
        altLabel = field.altLabel,
        tooltip = field.tooltip,
        grouplabel = field.grouplabel,
        disabled = field.disabled,
        matchesType = field.matchesType;
      var groupPrefix = level > 0 ? "\xA0\xA0".repeat(level) : "";
      var prefix = level > 1 ? "\xA0\xA0".repeat(level - 1) : "";
      var pathKey = path || key;
      if (items) {
        var simpleItems = items.filter(function (it) {
          return !it.items;
        });
        var complexItems = items.filter(function (it) {
          return !!it.items;
        });
        var complexList = complexItems.length ? _renderSelectItems(complexItems, level + 1) : [];
        var simpleList = simpleItems.length ? _renderSelectItems(simpleItems, level + 1) : [];
        var groupLabel = groupPrefix + label;
        if (tooltip) {
          groupLabel = /*#__PURE__*/_react["default"].createElement(_antd.Tooltip, {
            title: tooltip
          }, groupLabel);
        }
        var grp = /*#__PURE__*/_react["default"].createElement(OptGroup, {
          key: pathKey,
          label: groupLabel
        }, simpleList);
        return [grp].concat((0, _toConsumableArray2["default"])(complexList));
      } else {
        var optionText = matchesType ? /*#__PURE__*/_react["default"].createElement("b", null, prefix + label) : prefix + label;
        var option = tooltip ? /*#__PURE__*/_react["default"].createElement(_antd.Tooltip, {
          title: tooltip
        }, optionText) : optionText;
        return /*#__PURE__*/_react["default"].createElement(Option, {
          key: pathKey,
          value: pathKey,
          title: altLabel,
          grouplabel: grouplabel,
          label: label,
          disabled: disabled,
          _fullLabel: fullLabel,
          _tooltip: tooltip,
          _value2: key
        }, option);
      }
    }).flat(Infinity);
  };
  var fieldSelectItems = _renderSelectItems(items);
  var res = /*#__PURE__*/_react["default"].createElement(_antd.Select, (0, _extends2["default"])({
    open: open,
    onDropdownVisibleChange: setOpen,
    dropdownAlign: dropdownAlign,
    popupMatchSelectWidth: false,
    style: style,
    placeholder: placeholder,
    size: config.settings.renderSize,
    onChange: onChange,
    value: selectedKey || undefined,
    optionLabelProp: "label",
    filterOption: filterOption,
    disabled: readonly,
    status: errorText && "error",
    showSearch: !!showSearch,
    searchValue: searchValue,
    onSearch: showSearch ? onSearch : undefined
  }, customProps), fieldSelectItems);
  if (tooltipText) {
    res = /*#__PURE__*/_react["default"].createElement(_antd.Tooltip, {
      title: !open ? tooltipText : null
    }, res);
  }
  return res;
};
FieldSelect.displayName = "FieldSelect";
var _default = exports["default"] = FieldSelect;