@react-awesome-query-builder/mui
Version:
User-friendly query builder for React. MUI 5 widgets
279 lines (274 loc) • 14 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 _system = require("@mui/system");
var _styles = require("@mui/material/styles");
var _excluded = ["width"];
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; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 = 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"
}),
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;
// setings
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 : "";
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 _selectedListValue$ti;
// parity with Antd
var shouldRenderSelected = !multiple && !open;
var selectedTitle = (_selectedListValue$ti = selectedListValue === null || selectedListValue === void 0 ? void 0 : selectedListValue.title) !== null && _selectedListValue$ti !== void 0 ? _selectedListValue$ti : "";
var shouldHide = multiple && !open;
var value = shouldRenderSelected ? selectedTitle : shouldHide ? "" : inputValue !== null && inputValue !== void 0 ? inputValue : "";
return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
variant: "standard"
}, params, {
inputProps: _objectSpread(_objectSpread({}, params.inputProps), {}, {
value: value
}),
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(_ref2) {
var groupMaybeJson = _ref2.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(_ref3) {
var children = _ref3.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 = prefix + (renderTitle || 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;
};
exports["default"] = _default;