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

User-friendly query builder for React. MUI 5 widgets

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback } from "react";
import IconButton from "@mui/material/IconButton";
import ExpandMoreSharpIcon from "@mui/icons-material/ExpandMoreSharp";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Check from "@mui/icons-material/Check";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
var ValueSource = /*#__PURE__*/React.memo(function (_ref) {
  var valueSrc = _ref.valueSrc,
    srcKey = _ref.srcKey,
    handleChange = _ref.handleChange,
    info = _ref.info;
  var isSelected = valueSrc == srcKey || !valueSrc && srcKey == "value";
  var onClick = useCallback(function (e) {
    return handleChange(e, srcKey);
  }, [handleChange, srcKey]);
  return /*#__PURE__*/React.createElement(MenuItem, {
    value: srcKey,
    selected: isSelected,
    onClick: onClick
  }, !isSelected && /*#__PURE__*/React.createElement(ListItemText, {
    inset: true
  }, info.label), isSelected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Check, null)), info.label));
});
var ValueSources = /*#__PURE__*/React.memo(function (_ref2) {
  var valueSources = _ref2.valueSources,
    valueSrc = _ref2.valueSrc,
    title = _ref2.title,
    setValueSrc = _ref2.setValueSrc,
    readonly = _ref2.readonly,
    config = _ref2.config;
  var renderSize = config.settings.renderSize;
  var _React$useState = React.useState(null),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    anchorEl = _React$useState2[0],
    setAnchorEl = _React$useState2[1];
  var handleOpen = useCallback(function (event) {
    setAnchorEl(event.currentTarget);
  }, [setAnchorEl]);
  var handleClose = useCallback(function () {
    setAnchorEl(null);
  }, [setAnchorEl]);
  var toggleOpenClose = useCallback(function (event) {
    anchorEl ? handleClose() : handleOpen(event);
  }, [handleClose, handleOpen, anchorEl]);
  var handleChange = useCallback(function (_e, srcKey) {
    setValueSrc(srcKey);
    handleClose();
  }, [handleClose, setValueSrc]);
  var renderOptions = function renderOptions(valueSources) {
    return valueSources.map(function (_ref3) {
      var _ref4 = _slicedToArray(_ref3, 2),
        srcKey = _ref4[0],
        info = _ref4[1];
      return /*#__PURE__*/React.createElement(ValueSource, {
        key: srcKey,
        valueSrc: valueSrc,
        srcKey: srcKey,
        handleChange: handleChange,
        info: info
      });
    });
  };
  var open = Boolean(anchorEl);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
    size: renderSize,
    onClick: toggleOpenClose
  }, /*#__PURE__*/React.createElement(ExpandMoreSharpIcon, null)), /*#__PURE__*/React.createElement(Menu, {
    size: renderSize,
    anchorEl: anchorEl,
    open: open,
    onClose: handleClose
  }, /*#__PURE__*/React.createElement(FormControl, {
    component: "fieldset",
    sx: {
      p: 0
    }
  }, /*#__PURE__*/React.createElement(FormLabel, {
    component: "legend",
    sx: {
      p: 2,
      pt: 0,
      pb: 1
    }
  }, title), renderOptions(valueSources))));
});
export default ValueSources;