@react-querybuilder/chakra
Version:
Custom Chakra UI components for react-querybuilder
415 lines (398 loc) • 15.4 kB
JavaScript
import * as React from "react";
import { FaChevronDown, FaChevronUp, FaCopy, FaGripVertical, FaLock, FaLockOpen, FaTimes } from "react-icons/fa";
import { ValueEditor, getCompatContextProvider, toOptions, useValueEditor } from "react-querybuilder";
import { Button, Checkbox, Input, NativeSelect, RadioGroup, Stack, Switch, Textarea } from "@chakra-ui/react";
//#region \0@oxc-project+runtime@0.103.0/helpers/objectWithoutPropertiesLoose.js
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (e.includes(n)) continue;
t[n] = r[n];
}
return t;
}
//#endregion
//#region \0@oxc-project+runtime@0.103.0/helpers/objectWithoutProperties.js
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o, r, i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var s = Object.getOwnPropertySymbols(e);
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
//#endregion
//#region \0@oxc-project+runtime@0.103.0/helpers/typeof.js
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o$1) {
return typeof o$1;
} : function(o$1) {
return o$1 && "function" == typeof Symbol && o$1.constructor === Symbol && o$1 !== Symbol.prototype ? "symbol" : typeof o$1;
}, _typeof(o);
}
//#endregion
//#region \0@oxc-project+runtime@0.103.0/helpers/toPrimitive.js
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
//#endregion
//#region \0@oxc-project+runtime@0.103.0/helpers/toPropertyKey.js
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
//#endregion
//#region \0@oxc-project+runtime@0.103.0/helpers/defineProperty.js
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
//#endregion
//#region \0@oxc-project+runtime@0.103.0/helpers/objectSpread2.js
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function(r$1) {
return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(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$1) {
_defineProperty(e, r$1, t[r$1]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r$1) {
Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
});
}
return e;
}
//#endregion
//#region src/ChakraActionElement.tsx
const _excluded$7 = [
"className",
"handleOnClick",
"label",
"title",
"disabled",
"disabledTranslation",
"testID",
"rules",
"level",
"path",
"context",
"validation",
"ruleOrGroup",
"schema"
];
/**
* @group Components
*/
const ChakraActionElement = (_ref) => {
let { className, handleOnClick, label, title, disabled, disabledTranslation, testID: _testID, rules: _rules, level: _level, path: _path, context: _context, validation: _validation, ruleOrGroup: _ruleOrGroup, schema: _schema } = _ref, extraProps = _objectWithoutProperties(_ref, _excluded$7);
return /* @__PURE__ */ React.createElement(Button, _objectSpread2({
className,
title: disabledTranslation && disabled ? disabledTranslation.title : title,
onClick: (e) => handleOnClick(e),
disabled: disabled && !disabledTranslation
}, extraProps), disabledTranslation && disabled ? disabledTranslation.label : label);
};
//#endregion
//#region src/snippets/switch.tsx
const _excluded$6 = [
"inputProps",
"children",
"rootRef",
"trackLabel",
"thumbLabel"
];
const Ctrl$1 = Switch.Control;
const Thumb = Switch.Thumb;
const Lbl$1 = Switch.Label;
const Switch$1 = React.forwardRef(function Switch$2(props, ref) {
const { inputProps, children, rootRef, trackLabel, thumbLabel } = props, rest = _objectWithoutProperties(props, _excluded$6);
return /* @__PURE__ */ React.createElement(Switch.Root, _objectSpread2({ ref: rootRef }, rest), /* @__PURE__ */ React.createElement(Switch.HiddenInput, _objectSpread2({ ref }, inputProps)), /* @__PURE__ */ React.createElement(Ctrl$1, null, /* @__PURE__ */ React.createElement(Thumb, null, thumbLabel && /* @__PURE__ */ React.createElement(Switch.ThumbIndicator, { fallback: thumbLabel === null || thumbLabel === void 0 ? void 0 : thumbLabel.off }, thumbLabel === null || thumbLabel === void 0 ? void 0 : thumbLabel.on)), trackLabel && /* @__PURE__ */ React.createElement(Switch.Indicator, { fallback: trackLabel.off }, trackLabel.on)), children != null && /* @__PURE__ */ React.createElement(Lbl$1, null, children));
});
//#endregion
//#region src/ChakraNotToggle.tsx
const _excluded$5 = [
"className",
"handleOnChange",
"label",
"checked",
"title",
"disabled",
"path",
"context",
"validation",
"testID",
"schema",
"ruleGroup"
];
/**
* @group Components
*/
const ChakraNotToggle = (_ref) => {
let { className, handleOnChange, label, checked, title, disabled, path: _path, context: _context, validation: _validation, testID: _testID, schema: _schema, ruleGroup: _ruleGroup } = _ref, extraProps = _objectWithoutProperties(_ref, _excluded$5);
return /* @__PURE__ */ React.createElement(Switch$1, _objectSpread2({
title,
className,
disabled,
checked,
onCheckedChange: (e) => handleOnChange(e.checked)
}, extraProps), label);
};
//#endregion
//#region src/snippets/checkbox.tsx
const _excluded$4 = [
"icon",
"children",
"inputProps",
"rootRef"
];
const Ctrl = Checkbox.Control;
const Lbl = Checkbox.Label;
const Checkbox$1 = React.forwardRef(function Checkbox$2(props, ref) {
const { icon, children, inputProps, rootRef } = props, rest = _objectWithoutProperties(props, _excluded$4);
return /* @__PURE__ */ React.createElement(Checkbox.Root, _objectSpread2({ ref: rootRef }, rest), /* @__PURE__ */ React.createElement(Checkbox.HiddenInput, _objectSpread2({ ref }, inputProps)), /* @__PURE__ */ React.createElement(Ctrl, null, icon || /* @__PURE__ */ React.createElement(Checkbox.Indicator, null)), children != null && /* @__PURE__ */ React.createElement(Lbl, null, children));
});
//#endregion
//#region src/snippets/radio.tsx
const _excluded$3 = [
"children",
"inputProps",
"rootRef"
];
const CRGI = RadioGroup.Item;
const ItemText = RadioGroup.ItemText;
const Radio = React.forwardRef(function Radio$1(props, ref) {
const { children, inputProps, rootRef } = props, rest = _objectWithoutProperties(props, _excluded$3);
return /* @__PURE__ */ React.createElement(CRGI, _objectSpread2({ ref: rootRef }, rest), /* @__PURE__ */ React.createElement(RadioGroup.ItemHiddenInput, _objectSpread2({ ref }, inputProps)), /* @__PURE__ */ React.createElement(RadioGroup.ItemIndicator, null), children && /* @__PURE__ */ React.createElement(ItemText, null, children));
});
const RadioGroup$1 = RadioGroup.Root;
//#endregion
//#region src/ChakraValueEditor.tsx
const _excluded$2 = [
"fieldData",
"operator",
"value",
"handleOnChange",
"title",
"className",
"type",
"inputType",
"values",
"listsAsArrays",
"separator",
"valueSource",
"testID",
"disabled",
"selectorComponent",
"extraProps",
"parseNumbers"
];
/**
* @group Components
*/
const ChakraValueEditor = (allProps) => {
var _fieldData$placeholde;
const { fieldData, operator, value, handleOnChange, title, className, type, inputType, values = [], listsAsArrays: _listsAsArrays, separator, valueSource: _vs, testID, disabled, selectorComponent: SelectorComponent = allProps.schema.controls.valueSelector, extraProps, parseNumbers: _parseNumbers } = allProps, propsForValueSelector = _objectWithoutProperties(allProps, _excluded$2);
const { valueAsArray, multiValueHandler, bigIntValueHandler, valueListItemClassName, inputTypeCoerced } = useValueEditor(allProps);
if (operator === "null" || operator === "notNull") return null;
const placeHolderText = (_fieldData$placeholde = fieldData === null || fieldData === void 0 ? void 0 : fieldData.placeholder) !== null && _fieldData$placeholde !== void 0 ? _fieldData$placeholde : "";
if ((operator === "between" || operator === "notBetween") && (type === "select" || type === "text")) {
if (type === "text") {
const editors = ["from", "to"].map((key, i) => {
var _valueAsArray$i;
return /* @__PURE__ */ React.createElement(Input, _objectSpread2({
key,
type: inputTypeCoerced,
value: (_valueAsArray$i = valueAsArray[i]) !== null && _valueAsArray$i !== void 0 ? _valueAsArray$i : "",
disabled,
className: valueListItemClassName,
placeholder: placeHolderText,
onChange: (e) => multiValueHandler(e.target.value, i)
}, extraProps));
});
return /* @__PURE__ */ React.createElement("span", {
"data-testid": testID,
className,
title
}, editors[0], separator, editors[1]);
}
return /* @__PURE__ */ React.createElement(ValueEditor, _objectSpread2(_objectSpread2({}, allProps), {}, { skipHook: true }));
}
switch (type) {
case "select": return /* @__PURE__ */ React.createElement(SelectorComponent, _objectSpread2(_objectSpread2({}, propsForValueSelector), {}, {
className,
title,
value,
disabled,
handleOnChange,
options: values
}));
case "multiselect": return /* @__PURE__ */ React.createElement(ValueEditor, _objectSpread2(_objectSpread2({}, allProps), {}, { skipHook: true }));
case "textarea": return /* @__PURE__ */ React.createElement(Textarea, _objectSpread2({
value,
title,
disabled,
className,
placeholder: placeHolderText,
onChange: (e) => handleOnChange(e.target.value)
}, extraProps));
case "switch": return /* @__PURE__ */ React.createElement(Switch$1, _objectSpread2({
className,
checked: !!value,
title,
disabled,
onChange: (e) => handleOnChange(e.target.checked)
}, extraProps));
case "checkbox": return /* @__PURE__ */ React.createElement(Checkbox$1, _objectSpread2({
className,
title,
disabled,
onChange: (e) => handleOnChange(e.target.checked),
checked: !!value
}, extraProps));
case "radio": return /* @__PURE__ */ React.createElement(RadioGroup$1, _objectSpread2({
className,
title,
value,
onChange: (e) => handleOnChange(e.target.value),
disabled
}, extraProps), /* @__PURE__ */ React.createElement(Stack, { direction: "row" }, values.map((v) => /* @__PURE__ */ React.createElement(Radio, {
key: v.name,
value: v.name
}, v.label))));
}
if (inputType === "bigint") return /* @__PURE__ */ React.createElement(Input, _objectSpread2({
"data-testid": testID,
type: inputTypeCoerced,
placeholder: placeHolderText,
value: `${value}`,
title,
className,
disabled,
onChange: (e) => bigIntValueHandler(e.target.value)
}, extraProps));
return /* @__PURE__ */ React.createElement(Input, _objectSpread2({
type: inputTypeCoerced,
value,
title,
disabled,
className,
placeholder: placeHolderText,
onChange: (e) => handleOnChange(e.target.value)
}, extraProps));
};
//#endregion
//#region src/snippets/native-select.tsx
const _excluded$1 = ["icon", "children"], _excluded2 = ["items", "children"];
const NativeSelectRoot = React.forwardRef(function NativeSelect$1(props, ref) {
const { icon, children } = props, rest = _objectWithoutProperties(props, _excluded$1);
return /* @__PURE__ */ React.createElement(NativeSelect.Root, _objectSpread2({ ref }, rest), children, /* @__PURE__ */ React.createElement(NativeSelect.Indicator, null, icon));
});
const NativeSelectField = React.forwardRef(function NativeSelectField$1(props, ref) {
const { items: itemsProp, children } = props, rest = _objectWithoutProperties(props, _excluded2);
const items = React.useMemo(() => itemsProp === null || itemsProp === void 0 ? void 0 : itemsProp.map((item) => typeof item === "string" ? {
label: item,
value: item
} : item), [itemsProp]);
return /* @__PURE__ */ React.createElement(NativeSelect.Field, _objectSpread2({ ref }, rest), children, items === null || items === void 0 ? void 0 : items.map((item) => /* @__PURE__ */ React.createElement("option", {
key: item.value,
value: item.value,
disabled: item.disabled
}, item.label)));
});
//#endregion
//#region src/ChakraValueSelector.tsx
const _excluded = [
"className",
"handleOnChange",
"options",
"value",
"title",
"disabled",
"testID",
"rule",
"ruleGroup",
"rules",
"level",
"path",
"context",
"validation",
"operator",
"field",
"fieldData",
"multiple",
"listsAsArrays",
"schema"
];
/**
* @group Components
*/
const ChakraValueSelector = (_ref) => {
let { className, handleOnChange, options, value, title, disabled, testID: _testID, rule: _rule, ruleGroup: _ruleGroup, rules: _rules, level: _level, path: _path, context: _context, validation: _validation, operator: _operator, field: _field, fieldData: _fieldData, multiple: _multiple, listsAsArrays: _listsAsArrays, schema: _schema } = _ref, extraProps = _objectWithoutProperties(_ref, _excluded);
return /* @__PURE__ */ React.createElement(NativeSelectRoot, _objectSpread2({
className,
title
}, extraProps), /* @__PURE__ */ React.createElement(NativeSelectField, {
value,
onChange: (e) => handleOnChange(e.target.value),
disabled
}, toOptions(options)));
};
//#endregion
//#region src/index.tsx
/**
* @group Props
*/
const chakraControlElements = {
actionElement: ChakraActionElement,
valueSelector: ChakraValueSelector,
notToggle: ChakraNotToggle,
valueEditor: ChakraValueEditor
};
/**
* @group Props
*/
const chakraTranslations = {
dragHandle: { label: /* @__PURE__ */ React.createElement(FaGripVertical, null) },
removeGroup: { label: /* @__PURE__ */ React.createElement(FaTimes, null) },
removeRule: { label: /* @__PURE__ */ React.createElement(FaTimes, null) },
cloneRuleGroup: { label: /* @__PURE__ */ React.createElement(FaCopy, null) },
cloneRule: { label: /* @__PURE__ */ React.createElement(FaCopy, null) },
lockGroup: { label: /* @__PURE__ */ React.createElement(FaLockOpen, null) },
lockRule: { label: /* @__PURE__ */ React.createElement(FaLockOpen, null) },
lockGroupDisabled: { label: /* @__PURE__ */ React.createElement(FaLock, null) },
lockRuleDisabled: { label: /* @__PURE__ */ React.createElement(FaLock, null) },
shiftActionDown: { label: /* @__PURE__ */ React.createElement(FaChevronDown, null) },
shiftActionUp: { label: /* @__PURE__ */ React.createElement(FaChevronUp, null) }
};
/**
* @group Components
*/
const QueryBuilderChakra = getCompatContextProvider({
controlElements: chakraControlElements,
translations: chakraTranslations
});
//#endregion
export { ChakraActionElement, ChakraNotToggle, ChakraValueEditor, ChakraValueSelector, QueryBuilderChakra, chakraControlElements, chakraTranslations };
//# sourceMappingURL=react-querybuilder_chakra.legacy-esm.js.map