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

User-friendly query builder for React. AntDesign widgets

import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useCallback, useMemo } from "react";
import { Tooltip, Select } from "antd";
import { BUILT_IN_PLACEMENTS, SELECT_WIDTH_OFFSET_RIGHT, calcTextWidth } from "../../utils/domUtils";
var Option = Select.Option,
  OptGroup = 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 = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var _useState3 = useState(""),
    _useState4 = _slicedToArray(_useState3, 2),
    searchValue = _useState4[0],
    setSearchValue = _useState4[1];
  var selectText = selectedLabel || placeholder;
  var selectWidth = calcTextWidth(selectText);
  var isFieldSelected = !!selectedKey;
  var dropdownPlacement = config.settings.dropdownPlacement;
  var dropdownAlign = dropdownPlacement ? BUILT_IN_PLACEMENTS[dropdownPlacement] : undefined;
  var width = isFieldSelected && !showSearch || !selectWidth ? null : selectWidth + SELECT_WIDTH_OFFSET_RIGHT;
  var tooltipText = selectedAltLabel || selectedFullLabel;
  if (tooltipText == selectedLabel) tooltipText = null;
  var style = useMemo(function () {
    return {
      width: width
    };
  }, [width]);
  var onChange = useCallback(function (key) {
    setField(key);
  }, [setField]);
  var onSearch = useCallback(function (search) {
    setSearchValue(search);
  }, [setSearchValue]);
  var filterOption = 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.createElement(Tooltip, {
            title: tooltip
          }, groupLabel);
        }
        var grp = /*#__PURE__*/React.createElement(OptGroup, {
          key: pathKey,
          label: groupLabel
        }, simpleList);
        return [grp].concat(_toConsumableArray(complexList));
      } else {
        var optionText = matchesType ? /*#__PURE__*/React.createElement("b", null, prefix + label) : prefix + label;
        var option = tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
          title: tooltip
        }, optionText) : optionText;
        return /*#__PURE__*/React.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.createElement(Select, _extends({
    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.createElement(Tooltip, {
      title: !open ? tooltipText : null
    }, res);
  }
  return res;
};
FieldSelect.displayName = "FieldSelect";
export default FieldSelect;