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

User-friendly query builder for React. MUI 5 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _Select = _interopRequireDefault(require("@mui/material/Select"));
var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var _default = function _default(_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 = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var onOpen = (0, _react.useCallback)(function () {
    setOpen(true);
  }, [setOpen]);
  var onClose = (0, _react.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["default"].createElement("span", null, prefix && /*#__PURE__*/_react["default"].createElement("span", null, prefix), matchesType ? /*#__PURE__*/_react["default"].createElement("b", null, label) : label);
      if (tooltip) {
        finalLabel = /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
          title: tooltip,
          placement: "left-start"
        }, finalLabel);
      }
      if (items) {
        return [/*#__PURE__*/_react["default"].createElement(_ListSubheader["default"], {
          disabled: disabled,
          key: path,
          disableSticky: true
        }, finalLabel), renderOptions(items, level + 1)];
      } else {
        res = /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
          disabled: disabled,
          key: path,
          value: path
        }, finalLabel);
        return res;
      }
    });
  };
  var onChange = (0, _react.useCallback)(function (e) {
    if (e.target.value === undefined) return;
    setField(e.target.value);
  }, [setField]);
  var renderValue = (0, _react.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["default"].createElement(_Select["default"], {
    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["default"].createElement(_Tooltip["default"], {
      title: !open ? tooltipText : null
    }, res);
  }
  res = /*#__PURE__*/_react["default"].createElement(_FormControl["default"], null, res);
  return res;
};
exports["default"] = _default;