@react-awesome-query-builder/mui
Version:
User-friendly query builder for React. MUI 5 widgets
283 lines (277 loc) • 13.9 kB
JavaScript
"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _omit = _interopRequireDefault(require("lodash/omit"));
var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"));
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
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 _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
var _ui = require("@react-awesome-query-builder/ui");
var _styles = require("@mui/material/styles");
var _excluded = ["width"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var useListValuesAutocomplete = _ui.Hooks.useListValuesAutocomplete;
var emptyArray = [];
// tip: option can contain `group: {label, title}` intead of `groupTitle`
// but it's internal format, made for field autocomplete
// see `JSON.stringify(option.group)` and `JSON.parse(groupMaybeJson)`
var _default = exports["default"] = function _default(props) {
var allowCustomValues = props.allowCustomValues,
multiple = props.multiple,
disableClearable = props.disableClearable,
selectedValue = props.value,
customProps = props.customProps,
readonly = props.readonly,
config = props.config,
filterOptionsConfig = props.filterOptionsConfig,
errorText = props.errorText,
tooltipText = props.tooltipText,
isFieldAutocomplete = props.isFieldAutocomplete;
var stringifyOption = (0, _react.useCallback)(function (option) {
var keysForFilter = config.settings.listKeysForSearch;
var valueForFilter = keysForFilter.map(function (k) {
return typeof option[k] == "string" ? option[k] : "";
}).join("\0");
return valueForFilter;
}, [config]);
var defaultFilterOptionsConfig = {
stringify: stringifyOption
};
var filterOptionsFn = (0, _Autocomplete.createFilterOptions)(filterOptionsConfig || defaultFilterOptionsConfig);
// hook
var _useListValuesAutocom = useListValuesAutocomplete(props, {
debounceTimeout: 100,
multiple: multiple,
uif: "mui",
isFieldAutocomplete: isFieldAutocomplete
}),
open = _useListValuesAutocom.open,
onOpen = _useListValuesAutocom.onOpen,
onClose = _useListValuesAutocom.onClose,
onChange = _useListValuesAutocom.onChange,
onInputChange = _useListValuesAutocom.onInputChange,
inputValue = _useListValuesAutocom.inputValue,
options = _useListValuesAutocom.options,
isInitialLoading = _useListValuesAutocom.isInitialLoading,
isLoading = _useListValuesAutocom.isLoading,
aPlaceholder = _useListValuesAutocom.aPlaceholder,
extendOptions = _useListValuesAutocom.extendOptions,
getOptionSelected = _useListValuesAutocom.getOptionSelected,
getOptionDisabled = _useListValuesAutocom.getOptionDisabled,
getOptionIsCustom = _useListValuesAutocom.getOptionIsCustom,
getOptionLabel = _useListValuesAutocom.getOptionLabel,
selectedListValue = _useListValuesAutocom.selectedListValue;
// settings
var _config$settings = config.settings,
defaultSelectWidth = _config$settings.defaultSelectWidth,
defaultSearchWidth = _config$settings.defaultSearchWidth;
var _ref = customProps || {},
width = _ref.width,
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var customInputProps = rest.input || {};
var inputWidth = customInputProps.width || defaultSearchWidth; // todo: use as min-width for Autocomplete comp
customInputProps = (0, _omit["default"])(customInputProps, ["width"]);
var customAutocompleteProps = (0, _omit["default"])(rest, ["showSearch", "showCheckboxes"]);
var fullWidth = false;
var minWidth = width || defaultSelectWidth;
var style = {
width: multiple ? undefined : minWidth,
minWidth: minWidth
};
var placeholder = !readonly ? aPlaceholder : "";
// For accessibility, always give the input field an aria-label
var ariaLabel = placeholder || config.settings.fieldPlaceholder;
var hasValue = selectedValue != null;
// should be simple value to prevent re-render!s
var value = hasValue ? selectedValue : multiple ? emptyArray : null;
var filterOptions = function filterOptions(options, params) {
var filtered = filterOptionsFn(options, params);
var extended = extendOptions(filtered);
return extended;
};
var groupBy = function groupBy(option) {
return option !== null && option !== void 0 && option.group ? JSON.stringify(option.group) : option === null || option === void 0 ? void 0 : option.groupTitle;
};
var theme = (0, _styles.useTheme)();
// render
var renderInput = function renderInput(params) {
var _ref2, _selectedListValue$ti, _ref3;
// parity with Antd
var shouldRenderSelected = !multiple && !open;
var selectedTitle = (_ref2 = (_selectedListValue$ti = selectedListValue === null || selectedListValue === void 0 ? void 0 : selectedListValue.title) !== null && _selectedListValue$ti !== void 0 ? _selectedListValue$ti : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref2 !== void 0 ? _ref2 : "";
var shouldHide = multiple && !open;
var renderValue = shouldRenderSelected ? selectedTitle : shouldHide ? "" : (_ref3 = inputValue !== null && inputValue !== void 0 ? inputValue : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref3 !== void 0 ? _ref3 : "";
return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
variant: "standard"
}, params, {
inputProps: _objectSpread(_objectSpread({
"aria-label": ariaLabel
}, params.inputProps), {}, {
value: renderValue
}),
InputProps: _objectSpread(_objectSpread({}, params.InputProps), {}, {
readOnly: readonly,
endAdornment: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], {
color: "inherit",
size: 20
}) : null, params.InputProps.endAdornment)
}),
disabled: readonly,
placeholder: placeholder,
error: !!errorText
//onChange={onInputChange}
}, customInputProps));
};
var GroupHeader = function GroupHeader(_ref4) {
var groupMaybeJson = _ref4.groupMaybeJson;
if (!groupMaybeJson) return null;
var group = {
label: groupMaybeJson
};
if (typeof groupMaybeJson === "string" && groupMaybeJson[0] === "{") {
try {
group = JSON.parse(groupMaybeJson);
} catch (_) {
// ignore
}
}
var groupLabel = group.label;
if (groupLabel && group.tooltip) {
groupLabel = /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
title: group.tooltip,
placement: "left-start"
}, /*#__PURE__*/_react["default"].createElement("span", null, groupLabel));
}
var res = /*#__PURE__*/_react["default"].createElement("div", {
style: {
position: "sticky",
top: "-8px",
padding: "4px 10px",
color: theme.palette.primary.main,
backgroundColor: theme.palette.background["default"]
}
}, groupLabel);
return res;
};
var GroupItems = function GroupItems(_ref5) {
var children = _ref5.children;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
};
var renderGroup = function renderGroup(params) {
var res = /*#__PURE__*/_react["default"].createElement("div", {
key: params.key
}, /*#__PURE__*/_react["default"].createElement(GroupHeader, {
groupMaybeJson: params.group
}), /*#__PURE__*/_react["default"].createElement(GroupItems, null, params.children));
return res;
};
var renderTags = function renderTags(value, getTagProps) {
return value.map(function (option, index) {
return /*#__PURE__*/_react["default"].createElement(_Chip["default"], (0, _extends2["default"])({
key: option.value,
label: getOptionLabel(option),
size: "small",
variant: getOptionIsCustom(option) ? "outlined" : "filled"
}, getTagProps({
index: index
})));
});
};
var isOptionEqualToValue = function isOptionEqualToValue(option, value) {
return (option === null || option === void 0 ? void 0 : option.value) == value;
};
var renderOption = function renderOption(props, option) {
var title = option.title,
renderTitle = option.renderTitle,
value = option.value,
isHidden = option.isHidden,
tooltip = option.tooltip,
group = option.group,
groupTitle = option.groupTitle;
var isGrouped = groupTitle || group;
var isSelected = multiple ? (selectedValue || []).includes(value) : selectedValue == value;
var className = getOptionIsCustom(option) ? "customSelectOption" : undefined;
var prefix = !isFieldAutocomplete && isGrouped ? "\xA0\xA0" : "";
var finalTitle = renderTitle || prefix + title;
var titleSpan = /*#__PURE__*/_react["default"].createElement("span", {
className: className
}, finalTitle);
if (tooltip) {
titleSpan = /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
title: tooltip,
placement: "left-start"
}, titleSpan);
}
if (isHidden) return null;
if (option.specialValue) {
return /*#__PURE__*/_react["default"].createElement("div", props, finalTitle);
} else if (multiple) {
var itemContent = isSelected ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], null, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)), titleSpan) : /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
inset: true
}, titleSpan);
return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], (0, _extends2["default"])({}, props, {
size: "small",
selected: isSelected
}), itemContent);
} else {
return /*#__PURE__*/_react["default"].createElement("div", props, titleSpan);
}
};
var res = /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], (0, _extends2["default"])({
disableClearable: disableClearable,
disableCloseOnSelect: multiple,
fullWidth: fullWidth,
multiple: multiple,
style: style,
freeSolo: allowCustomValues,
loading: isInitialLoading,
open: open,
onOpen: onOpen,
onClose: onClose,
inputValue: inputValue,
onInputChange: onInputChange,
label: placeholder,
onChange: onChange,
value: value,
disabled: readonly,
readOnly: readonly,
options: options,
groupBy: groupBy,
getOptionLabel: getOptionLabel,
getOptionDisabled: getOptionDisabled,
renderInput: renderInput,
renderGroup: renderGroup,
renderTags: renderTags,
renderOption: renderOption,
filterOptions: filterOptions,
isOptionEqualToValue: isOptionEqualToValue,
size: "small"
}, customAutocompleteProps));
if (tooltipText) {
res = /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
title: !open ? tooltipText : null,
placement: "top-start"
}, res);
}
res = /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
fullWidth: fullWidth
}, res);
return res;
};