@react-awesome-query-builder/mui
Version:
User-friendly query builder for React. MUI 5 widgets
83 lines (82 loc) • 3.63 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
var _ExpandMoreSharp = _interopRequireDefault(require("@mui/icons-material/ExpandMoreSharp"));
var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
var _FormLabel = _interopRequireDefault(require("@mui/material/FormLabel"));
var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
var _default = function _default(_ref) {
var valueSources = _ref.valueSources,
valueSrc = _ref.valueSrc,
title = _ref.title,
setValueSrc = _ref.setValueSrc,
readonly = _ref.readonly;
var _React$useState = _react["default"].useState(null),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
anchorEl = _React$useState2[0],
setAnchorEl = _React$useState2[1];
var handleOpen = function handleOpen(event) {
setAnchorEl(event.currentTarget);
};
var handleClose = function handleClose() {
setAnchorEl(null);
};
var toggleOpenClose = function toggleOpenClose(event) {
anchorEl ? handleClose() : handleOpen(event);
};
var handleChange = function handleChange(_e, srcKey) {
setValueSrc(srcKey);
handleClose();
};
var renderOptions = function renderOptions(valueSources) {
return valueSources.map(function (_ref2) {
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
srcKey = _ref3[0],
info = _ref3[1];
var isSelected = valueSrc == srcKey || !valueSrc && srcKey == "value";
var onClick = function onClick(e) {
return handleChange(e, srcKey);
};
return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
key: srcKey,
value: srcKey,
selected: isSelected,
onClick: onClick
}, !isSelected && /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
inset: true
}, info.label), isSelected && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], null, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)), info.label));
});
};
var open = Boolean(anchorEl);
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
size: "small",
onClick: toggleOpenClose
}, /*#__PURE__*/_react["default"].createElement(_ExpandMoreSharp["default"], null)), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
anchorEl: anchorEl,
open: open,
onClose: handleClose
}, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
component: "fieldset",
sx: {
p: 0
}
}, /*#__PURE__*/_react["default"].createElement(_FormLabel["default"], {
component: "legend",
sx: {
p: 2,
pt: 0,
pb: 1
}
}, title), renderOptions(valueSources))));
};
exports["default"] = _default;