@react-querybuilder/material
Version:
Custom MUI (Material Design) components for react-querybuilder
613 lines (612 loc) • 22.5 kB
JavaScript
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
//#region \0rolldown/runtime.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
let react = require("react");
react = __toESM(react);
let react_querybuilder = require("react-querybuilder");
let _mui_icons_material_Close = require("@mui/icons-material/Close");
_mui_icons_material_Close = __toESM(_mui_icons_material_Close);
let _mui_icons_material_ContentCopy = require("@mui/icons-material/ContentCopy");
_mui_icons_material_ContentCopy = __toESM(_mui_icons_material_ContentCopy);
let _mui_icons_material_DragIndicator = require("@mui/icons-material/DragIndicator");
_mui_icons_material_DragIndicator = __toESM(_mui_icons_material_DragIndicator);
let _mui_icons_material_KeyboardArrowDown = require("@mui/icons-material/KeyboardArrowDown");
_mui_icons_material_KeyboardArrowDown = __toESM(_mui_icons_material_KeyboardArrowDown);
let _mui_icons_material_KeyboardArrowUp = require("@mui/icons-material/KeyboardArrowUp");
_mui_icons_material_KeyboardArrowUp = __toESM(_mui_icons_material_KeyboardArrowUp);
let _mui_icons_material_Lock = require("@mui/icons-material/Lock");
_mui_icons_material_Lock = __toESM(_mui_icons_material_Lock);
let _mui_icons_material_LockOpen = require("@mui/icons-material/LockOpen");
_mui_icons_material_LockOpen = __toESM(_mui_icons_material_LockOpen);
let _mui_material_Button = require("@mui/material/Button");
_mui_material_Button = __toESM(_mui_material_Button);
let _mui_material_Checkbox = require("@mui/material/Checkbox");
_mui_material_Checkbox = __toESM(_mui_material_Checkbox);
let _mui_material_FormControl = require("@mui/material/FormControl");
_mui_material_FormControl = __toESM(_mui_material_FormControl);
let _mui_material_FormControlLabel = require("@mui/material/FormControlLabel");
_mui_material_FormControlLabel = __toESM(_mui_material_FormControlLabel);
let _mui_material_InputLabel = require("@mui/material/InputLabel");
_mui_material_InputLabel = __toESM(_mui_material_InputLabel);
let _mui_material_ListSubheader = require("@mui/material/ListSubheader");
_mui_material_ListSubheader = __toESM(_mui_material_ListSubheader);
let _mui_material_MenuItem = require("@mui/material/MenuItem");
_mui_material_MenuItem = __toESM(_mui_material_MenuItem);
let _mui_material_Radio = require("@mui/material/Radio");
_mui_material_Radio = __toESM(_mui_material_Radio);
let _mui_material_RadioGroup = require("@mui/material/RadioGroup");
_mui_material_RadioGroup = __toESM(_mui_material_RadioGroup);
let _mui_material_Select = require("@mui/material/Select");
_mui_material_Select = __toESM(_mui_material_Select);
let _mui_material_Switch = require("@mui/material/Switch");
_mui_material_Switch = __toESM(_mui_material_Switch);
let _mui_material_TextareaAutosize = require("@mui/material/TextareaAutosize");
_mui_material_TextareaAutosize = __toESM(_mui_material_TextareaAutosize);
let _mui_material_TextField = require("@mui/material/TextField");
_mui_material_TextField = __toESM(_mui_material_TextField);
//#region src/RQBMaterialContext.ts
/**
* @group Components
*/
const RQBMaterialContext = (0, react.createContext)(null);
//#endregion
//#region src/MaterialActionElement.tsx
/**
* @group Components
*/
const MaterialActionElement = ({ className, handleOnClick, label, title, disabled, disabledTranslation, testID, path, level, rules, context, validation, ruleOrGroup, schema, muiComponents: muiComponentsProp, ...otherProps }) => {
const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
const key = muiComponents ? "mui" : "no-mui";
if (!muiComponents) {
const AE = react_querybuilder.ActionElement;
return /* @__PURE__ */ react.createElement(AE, {
key,
className,
handleOnClick,
label,
title,
disabled,
disabledTranslation,
testID,
path,
level,
rules,
context,
validation,
ruleOrGroup,
schema
});
}
const { Button } = muiComponents;
return /* @__PURE__ */ react.createElement(Button, {
key,
variant: "contained",
color: "secondary",
className,
title: disabledTranslation && disabled ? disabledTranslation.title : title,
size: "small",
disabled: disabled && !disabledTranslation,
onClick: (e) => handleOnClick(e),
...otherProps
}, disabledTranslation && disabled ? disabledTranslation.label : label);
};
//#endregion
//#region src/MaterialDragHandle.tsx
/**
* @group Components
*/
const MaterialDragHandle = (0, react.forwardRef)(({ className, title, path, level, testID, label, disabled, context, validation, schema, ruleOrGroup, muiComponents: muiComponentsProp, ...otherProps }, dragRef) => {
const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
const key = muiComponents ? "mui" : "no-mui";
if (!muiComponents) return /* @__PURE__ */ react.createElement(react_querybuilder.DragHandle, {
key,
path,
level,
className,
title,
testID,
label,
disabled,
context,
validation,
schema,
ruleOrGroup
});
const { DragIndicator } = muiComponents;
return /* @__PURE__ */ react.createElement("span", {
key,
ref: dragRef,
className,
title
}, /* @__PURE__ */ react.createElement(DragIndicator, otherProps));
});
//#endregion
//#region src/MaterialNotToggle.tsx
/**
* @group Components
*/
const MaterialNotToggle = ({ className, handleOnChange, label, checked, title, disabled, level, path, context, validation, testID, schema, ruleGroup, muiComponents: muiComponentsProp, ...otherProps }) => {
const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
const { FormControlLabel, Switch } = muiComponents ?? {};
const switchControl = (0, react.useMemo)(() => Switch && /* @__PURE__ */ react.createElement(Switch, {
checked: !!checked,
onChange: (e) => handleOnChange(e.target.checked),
...otherProps
}), [
checked,
handleOnChange,
otherProps,
Switch
]);
const key = muiComponents ? "mui" : "no-mui";
if (!muiComponents) return /* @__PURE__ */ react.createElement(react_querybuilder.NotToggle, {
key,
className,
handleOnChange,
label,
checked,
title,
disabled,
path,
level,
context,
validation,
testID,
schema,
ruleGroup
});
return /* @__PURE__ */ react.createElement(FormControlLabel, {
key,
className,
title,
disabled,
control: switchControl,
label: label ?? ""
});
};
//#endregion
//#region src/MaterialShiftActions.tsx
/**
* @group Components
*/
const MaterialShiftActions = ({ path, shiftUp, shiftDown, shiftUpDisabled, shiftDownDisabled, disabled, className, labels, titles, testID, muiComponents: muiComponentsProp, ...otherProps }) => {
const muiComponents = react.useContext(RQBMaterialContext) ?? muiComponentsProp;
const key = muiComponents ? "mui" : "no-mui";
if (!muiComponents) return /* @__PURE__ */ react.createElement(react_querybuilder.ShiftActions, {
key,
path,
disabled,
className,
labels,
titles,
testID,
shiftUp,
shiftDown,
shiftUpDisabled,
shiftDownDisabled,
...otherProps
});
const { Button } = muiComponents;
return /* @__PURE__ */ react.createElement("div", {
key,
"data-testid": testID,
className
}, /* @__PURE__ */ react.createElement(Button, {
sx: { boxShadow: "none" },
variant: "contained",
color: "secondary",
className,
title: titles?.shiftUp,
size: "small",
disabled: disabled || shiftUpDisabled,
onClick: shiftUp
}, labels?.shiftUp), /* @__PURE__ */ react.createElement(Button, {
sx: { boxShadow: "none" },
variant: "contained",
color: "secondary",
className,
title: titles?.shiftDown,
size: "small",
disabled: disabled || shiftDownDisabled,
onClick: shiftDown
}, labels?.shiftDown));
};
//#endregion
//#region src/MaterialValueEditor.tsx
/**
* @group Components
*/
const MaterialValueEditor = (props) => {
const { muiComponents: muiComponentsProp, ...propsForValueEditor } = props;
const { field: _f, fieldData, operator, value, handleOnChange, title, className, type, inputType, path, level, values = [], listsAsArrays, separator, valueSource: _vs, disabled, testID, selectorComponent: SelectorComponent = props.schema.controls.valueSelector, showInputLabels: silProp, extraProps, parseNumbers: _parseNumbers, ...propsForValueSelector } = propsForValueEditor;
const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
const { valueAsArray, multiValueHandler, bigIntValueHandler, parseNumberMethod, valueListItemClassName, inputTypeCoerced } = (0, react_querybuilder.useValueEditor)(propsForValueEditor);
const masterKey = muiComponents ? "mui" : "no-mui";
const { Checkbox, FormControl, FormControlLabel, Radio, RadioGroup, Switch, TextareaAutosize, TextField, showInputLabels: silCtx } = (0, react.useMemo)(() => muiComponents ?? {}, [muiComponents]);
if (!muiComponents) return /* @__PURE__ */ react.createElement(react_querybuilder.ValueEditor, {
skipHook: true,
key: masterKey,
...propsForValueEditor
});
if (operator === "null" || operator === "notNull") return null;
const placeHolderText = fieldData?.placeholder ?? "";
const showInputLabels = silProp || silCtx;
if ((operator === "between" || operator === "notBetween") && (type === "select" || type === "text")) {
const editors = ["From", "To"].map((key, i) => {
if (type === "text") return /* @__PURE__ */ react.createElement(TextField, {
key,
variant: "standard",
type: inputTypeCoerced,
className: valueListItemClassName,
placeholder: placeHolderText,
value: valueAsArray[i] ?? "",
disabled,
label: showInputLabels ? key : void 0,
onChange: (e) => multiValueHandler(e.target.value, i),
...extraProps
});
return /* @__PURE__ */ react.createElement(SelectorComponent, {
key,
...propsForValueSelector,
title: showInputLabels ? key : void 0,
path,
level,
className: valueListItemClassName,
handleOnChange: (v) => multiValueHandler(v, i),
muiComponents,
disabled,
value: valueAsArray[i] ?? (0, react_querybuilder.getFirstOption)(values),
options: values,
listsAsArrays
});
});
return /* @__PURE__ */ react.createElement(FormControl, {
key: masterKey,
"data-testid": testID,
className,
title,
disabled
}, editors[0], separator, editors[1]);
}
switch (type) {
case "select":
case "multiselect": return /* @__PURE__ */ react.createElement(SelectorComponent, {
key: masterKey,
...propsForValueSelector,
muiComponents,
path,
level,
className,
handleOnChange,
options: values,
value,
disabled,
title,
multiple: type === "multiselect",
listsAsArrays
});
case "textarea": return /* @__PURE__ */ react.createElement(TextareaAutosize, {
key: masterKey,
value,
title,
disabled,
className,
placeholder: placeHolderText,
onChange: (e) => handleOnChange(e.target.value),
...extraProps
});
case "switch": return /* @__PURE__ */ react.createElement(Switch, {
key: masterKey,
checked: !!value,
title,
disabled,
className,
onChange: (e) => handleOnChange(e.target.checked),
...extraProps
});
case "checkbox": return /* @__PURE__ */ react.createElement(Checkbox, {
key: masterKey,
className,
title,
onChange: (e) => handleOnChange(e.target.checked),
checked: !!value,
disabled,
...extraProps
});
case "radio": return /* @__PURE__ */ react.createElement(FormControl, {
key: masterKey,
className,
title,
component: "fieldset",
disabled,
...extraProps
}, /* @__PURE__ */ react.createElement(RadioGroup, {
value,
onChange: (e) => handleOnChange(e.target.value)
}, values.map((v) => /* @__PURE__ */ react.createElement(FormControlLabel, {
key: v.name,
disabled,
value: v.name,
control: /* @__PURE__ */ react.createElement(Radio, null),
name: v.name,
label: v.label
}))));
}
/**
* TODO: Provide either (1) examples or (2) alternate exports that support `inputType`
* "date", "datetime-local", and "time", with components from `@mui/x-date-pickers`
* (`<DatePicker />`, `<DateTimePicker />`, and `<TimePicker />`, respecitively).
*/
if (inputType === "bigint") return /* @__PURE__ */ react.createElement(TextField, {
key: masterKey,
variant: "standard",
"data-testid": testID,
type: inputTypeCoerced,
placeholder: placeHolderText,
value: `${value}`,
title,
className,
disabled,
label: showInputLabels ? title : void 0,
onChange: (e) => bigIntValueHandler(e.target.value),
...extraProps
});
return /* @__PURE__ */ react.createElement(TextField, {
key: masterKey,
variant: "standard",
type: inputTypeCoerced,
value,
title,
disabled,
className,
placeholder: placeHolderText,
label: showInputLabels ? title : void 0,
onChange: (e) => handleOnChange((0, react_querybuilder.parseNumber)(e.target.value, { parseNumbers: parseNumberMethod })),
...extraProps
});
};
//#endregion
//#region src/utils.tsx
// v8 ignore next
const defaultToOptionsOptions = {
ListSubheader: () => null,
MenuItem: () => /* @__PURE__ */ react.createElement(react.Fragment, null)
};
const toOptions = (arr = [], { ListSubheader, MenuItem } = defaultToOptionsOptions) => {
if ((0, react_querybuilder.isOptionGroupArray)(arr)) {
const optArray = [];
for (const og of arr) optArray.push(/* @__PURE__ */ react.createElement(ListSubheader, { key: og.label }, og.label), ...og.options.map((opt) => /* @__PURE__ */ react.createElement(MenuItem, {
key: opt.name,
value: opt.name
}, opt.label)));
return optArray;
}
/* v8 ignore else -- @preserve */
if (Array.isArray(arr)) return arr.map((opt) => /* @__PURE__ */ react.createElement(MenuItem, {
key: opt.name,
value: opt.name
}, opt.label));
/* v8 ignore next -- @preserve */
return null;
};
//#endregion
//#region src/MaterialValueSelector.tsx
/**
* @group Components
*/
const MaterialValueSelector = ({ className, handleOnChange, options, value, disabled, title, multiple, listsAsArrays, testID, rule, ruleGroup, rules, level, path, context, validation, operator, field, fieldData, schema, muiComponents: muiComponentsProp, showInputLabels: silProp, defaultValue: _defaultValue, ...otherProps }) => {
const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
const { onChange, val } = (0, react_querybuilder.useValueSelector)({
handleOnChange,
listsAsArrays,
multiple,
value
});
const muiSelectChangeHandler = react.useCallback(({ target: { value: v } }) => {
onChange(v);
}, [onChange]);
const key = muiComponents ? "mui" : "no-mui";
if (!muiComponents) {
const VS = react_querybuilder.ValueSelector;
return /* @__PURE__ */ react.createElement(VS, {
key,
className,
handleOnChange,
options,
value,
disabled,
title,
multiple,
listsAsArrays,
testID,
rule,
ruleGroup,
rules,
level,
path,
context,
validation,
operator,
field,
fieldData,
schema
});
}
const { FormControl, InputLabel, ListSubheader, MenuItem, Select, showInputLabels: silCtx } = muiComponents;
const showInputLabels = silProp || silCtx;
return /* @__PURE__ */ react.createElement(FormControl, {
key,
variant: "standard",
className,
title,
disabled
}, showInputLabels && /* @__PURE__ */ react.createElement(InputLabel, null, title), /* @__PURE__ */ react.createElement(Select, {
value: val,
onChange: muiSelectChangeHandler,
multiple,
disabled,
label: showInputLabels ? title : void 0,
...otherProps
}, toOptions(options, {
ListSubheader,
MenuItem
})));
};
//#endregion
//#region src/translations.tsx
const CloseIconWrapper = () => {
const muiComponents = react.useContext(RQBMaterialContext);
if (!muiComponents) return react_querybuilder.defaultTranslations.removeRule.label;
const { CloseIcon } = muiComponents;
return /* @__PURE__ */ react.createElement(CloseIcon, null);
};
const ContentCopyIconWrapper = () => {
const muiComponents = react.useContext(RQBMaterialContext);
if (!muiComponents) return react_querybuilder.defaultTranslations.cloneRule.label;
const { ContentCopyIcon } = muiComponents;
return /* @__PURE__ */ react.createElement(ContentCopyIcon, null);
};
const LockIconWrapper = () => {
const muiComponents = react.useContext(RQBMaterialContext);
if (!muiComponents) return react_querybuilder.defaultTranslations.lockRuleDisabled.label;
const { LockIcon } = muiComponents;
return /* @__PURE__ */ react.createElement(LockIcon, null);
};
const LockOpenIconWrapper = () => {
const muiComponents = react.useContext(RQBMaterialContext);
if (!muiComponents) return react_querybuilder.defaultTranslations.lockRule.label;
const { LockOpenIcon } = muiComponents;
return /* @__PURE__ */ react.createElement(LockOpenIcon, null);
};
const ShiftDownIconWrapper = () => {
const muiComponents = react.useContext(RQBMaterialContext);
if (!muiComponents) return react_querybuilder.defaultTranslations.shiftActionDown.label;
const { KeyboardArrowDownIcon } = muiComponents;
return /* @__PURE__ */ react.createElement(KeyboardArrowDownIcon, null);
};
const ShiftUpIconWrapper = () => {
const muiComponents = react.useContext(RQBMaterialContext);
if (!muiComponents) return react_querybuilder.defaultTranslations.shiftActionUp.label;
const { KeyboardArrowUpIcon } = muiComponents;
return /* @__PURE__ */ react.createElement(KeyboardArrowUpIcon, null);
};
const materialTranslations = {
removeGroup: { label: /* @__PURE__ */ react.createElement(CloseIconWrapper, null) },
removeRule: { label: /* @__PURE__ */ react.createElement(CloseIconWrapper, null) },
cloneRule: { label: /* @__PURE__ */ react.createElement(ContentCopyIconWrapper, null) },
cloneRuleGroup: { label: /* @__PURE__ */ react.createElement(ContentCopyIconWrapper, null) },
lockGroup: { label: /* @__PURE__ */ react.createElement(LockOpenIconWrapper, null) },
lockRule: { label: /* @__PURE__ */ react.createElement(LockOpenIconWrapper, null) },
lockGroupDisabled: { label: /* @__PURE__ */ react.createElement(LockIconWrapper, null) },
lockRuleDisabled: { label: /* @__PURE__ */ react.createElement(LockIconWrapper, null) },
shiftActionDown: { label: /* @__PURE__ */ react.createElement(ShiftDownIconWrapper, null) },
shiftActionUp: { label: /* @__PURE__ */ react.createElement(ShiftUpIconWrapper, null) }
};
//#endregion
//#region src/useMuiComponents.ts
const defaultMuiComponents = {
DragIndicator: _mui_icons_material_DragIndicator.default,
Button: _mui_material_Button.default,
Checkbox: _mui_material_Checkbox.default,
CloseIcon: _mui_icons_material_Close.default,
ContentCopyIcon: _mui_icons_material_ContentCopy.default,
FormControl: _mui_material_FormControl.default,
FormControlLabel: _mui_material_FormControlLabel.default,
InputLabel: _mui_material_InputLabel.default,
KeyboardArrowDownIcon: _mui_icons_material_KeyboardArrowDown.default,
KeyboardArrowUpIcon: _mui_icons_material_KeyboardArrowUp.default,
ListSubheader: _mui_material_ListSubheader.default,
LockIcon: _mui_icons_material_Lock.default,
LockOpenIcon: _mui_icons_material_LockOpen.default,
MenuItem: _mui_material_MenuItem.default,
Radio: _mui_material_Radio.default,
RadioGroup: _mui_material_RadioGroup.default,
Select: _mui_material_Select.default,
Switch: _mui_material_Switch.default,
TextareaAutosize: _mui_material_TextareaAutosize.default,
TextField: _mui_material_TextField.default
};
/**
* @group Hooks
*/
const useMuiComponents = (preloadedComponents) => {
const muiComponentsFromContext = (0, react.useContext)(RQBMaterialContext);
return (0, react.useMemo)(() => preloadedComponents && muiComponentsFromContext ? {
...defaultMuiComponents,
...muiComponentsFromContext,
...preloadedComponents
} : preloadedComponents ? {
...defaultMuiComponents,
...preloadedComponents
} : muiComponentsFromContext ? {
...defaultMuiComponents,
...muiComponentsFromContext
} : defaultMuiComponents, [muiComponentsFromContext, preloadedComponents]);
};
//#endregion
//#region src/index.tsx
/**
* @group Props
*/
const materialControlElements = {
actionElement: MaterialActionElement,
dragHandle: MaterialDragHandle,
notToggle: MaterialNotToggle,
shiftActions: MaterialShiftActions,
valueEditor: MaterialValueEditor,
valueSelector: MaterialValueSelector
};
const MaterialContextProvider = (0, react_querybuilder.getCompatContextProvider)({
controlElements: materialControlElements,
translations: materialTranslations
});
/**
* @group Components
*/
const QueryBuilderMaterial = ({ muiComponents: muiComponentsProp, showInputLabels, ...props }) => {
const muiComponents = useMuiComponents(muiComponentsProp);
const ctxValue = (0, react.useMemo)(() => ({
...muiComponents,
...muiComponentsProp,
showInputLabels
}), [
muiComponents,
muiComponentsProp,
showInputLabels
]);
return /* @__PURE__ */ react.createElement(RQBMaterialContext.Provider, { value: ctxValue }, /* @__PURE__ */ react.createElement(MaterialContextProvider, props));
};
//#endregion
exports.MaterialActionElement = MaterialActionElement;
exports.MaterialDragHandle = MaterialDragHandle;
exports.MaterialNotToggle = MaterialNotToggle;
exports.MaterialShiftActions = MaterialShiftActions;
exports.MaterialValueEditor = MaterialValueEditor;
exports.MaterialValueSelector = MaterialValueSelector;
exports.QueryBuilderMaterial = QueryBuilderMaterial;
exports.RQBMaterialContext = RQBMaterialContext;
exports.defaultMuiComponents = defaultMuiComponents;
exports.materialControlElements = materialControlElements;
exports.materialTranslations = materialTranslations;
exports.useMuiComponents = useMuiComponents;
//# sourceMappingURL=react-querybuilder_material.cjs.development.js.map