@react-awesome-query-builder/mui/esm/widgets/core/MuiFieldSelect.js

User-friendly query builder for React. MUI 5 widgets

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useState } from "react";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import ListSubheader from "@mui/material/ListSubheader";
import FormControl from "@mui/material/FormControl";
import Tooltip from "@mui/material/Tooltip";
export default (function (_ref) {
  var items = _ref.items,
    setField = _ref.setField,
    selectedKey = _ref.selectedKey,
    readonly = _ref.readonly,
    placeholder = _ref.placeholder,
    errorText = _ref.errorText,
    selectedLabel = _ref.selectedLabel,
    selectedOpts = _ref.selectedOpts,
    selectedAltLabel = _ref.selectedAltLabel,
    selectedFullLabel = _ref.selectedFullLabel;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var onOpen = useCallback(function () {
    setOpen(true);
  }, [setOpen]);
  var onClose = useCallback(function () {
    setOpen(false);
  }, [setOpen]);
  var renderOptions = function renderOptions(fields) {
    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    return Object.keys(fields).map(function (fieldKey) {
      var field = fields[fieldKey];
      var items = field.items,
        path = field.path,
        label = field.label,
        disabled = field.disabled,
        matchesType = field.matchesType,
        tooltip = field.tooltip;
      var prefix = "\xA0\xA0".repeat(level);
      var finalLabel = /*#__PURE__*/React.createElement("span", null, prefix && /*#__PURE__*/React.createElement("span", null, prefix), matchesType ? /*#__PURE__*/React.createElement("b", null, label) : label);
      if (tooltip) {
        finalLabel = /*#__PURE__*/React.createElement(Tooltip, {
          title: tooltip,
          placement: "left-start"
        }, finalLabel);
      }
      if (items) {
        return [/*#__PURE__*/React.createElement(ListSubheader, {
          disabled: disabled,
          key: path,
          disableSticky: true
        }, finalLabel), renderOptions(items, level + 1)];
      } else {
        res = /*#__PURE__*/React.createElement(MenuItem, {
          disabled: disabled,
          key: path,
          value: path
        }, finalLabel);
        return res;
      }
    });
  };
  var onChange = useCallback(function (e) {
    if (e.target.value === undefined) return;
    setField(e.target.value);
  }, [setField]);
  var renderValue = useCallback(function (selectedValue) {
    if (!readonly && !selectedValue) return placeholder;
    var findLabel = function findLabel(fields) {
      return fields.map(function (field) {
        if (!field.items) return field.path === selectedValue ? field.label : null;
        return findLabel(field.items);
      });
    };
    var label = findLabel(items).filter(function (v) {
      if (Array.isArray(v)) {
        return v.some(function (value) {
          return value !== null;
        });
      } else {
        return v !== null;
      }
    }).pop();
    return label;
  }, [readonly, placeholder, items]);
  var hasValue = selectedKey != null;
  var tooltipText = selectedAltLabel || selectedFullLabel;
  if (tooltipText == selectedLabel) tooltipText = null;
  var res = /*#__PURE__*/React.createElement(Select, {
    error: !!errorText,
    variant: "standard",
    autoWidth: true,
    displayEmpty: true,
    placeholder: placeholder,
    onChange: onChange,
    value: hasValue ? selectedKey : "",
    disabled: readonly,
    renderValue: renderValue,
    size: "small",
    open: open,
    onOpen: onOpen,
    onClose: onClose
  }, renderOptions(items));
  if (tooltipText) {
    res = /*#__PURE__*/React.createElement(Tooltip, {
      title: !open ? tooltipText : null
    }, res);
  }
  res = /*#__PURE__*/React.createElement(FormControl, null, res);
  return res;
});