@react-querybuilder/chakra
Version:
Custom Chakra UI components for react-querybuilder
265 lines (255 loc) • 10.1 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 src/ChakraActionElement.tsx
/**
* @group Components
*/
const ChakraActionElement = ({ className, handleOnClick, label, title, disabled, disabledTranslation, testID: _testID, rules: _rules, level: _level, path: _path, context: _context, validation: _validation, ruleOrGroup: _ruleOrGroup, schema: _schema, ...extraProps }) => /* @__PURE__ */ React.createElement(Button, {
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 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, ...rest } = props;
return /* @__PURE__ */ React.createElement(Switch.Root, {
ref: rootRef,
...rest
}, /* @__PURE__ */ React.createElement(Switch.HiddenInput, {
ref,
...inputProps
}), /* @__PURE__ */ React.createElement(Ctrl$1, null, /* @__PURE__ */ React.createElement(Thumb, null, thumbLabel && /* @__PURE__ */ React.createElement(Switch.ThumbIndicator, { fallback: thumbLabel?.off }, 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
/**
* @group Components
*/
const ChakraNotToggle = ({ className, handleOnChange, label, checked, title, disabled, path: _path, context: _context, validation: _validation, testID: _testID, schema: _schema, ruleGroup: _ruleGroup, ...extraProps }) => /* @__PURE__ */ React.createElement(Switch$1, {
title,
className,
disabled,
checked,
onCheckedChange: (e) => handleOnChange(e.checked),
...extraProps
}, label);
//#endregion
//#region src/snippets/checkbox.tsx
const Ctrl = Checkbox.Control;
const Lbl = Checkbox.Label;
const Checkbox$1 = React.forwardRef(function Checkbox$2(props, ref) {
const { icon, children, inputProps, rootRef, ...rest } = props;
return /* @__PURE__ */ React.createElement(Checkbox.Root, {
ref: rootRef,
...rest
}, /* @__PURE__ */ React.createElement(Checkbox.HiddenInput, {
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 CRGI = RadioGroup.Item;
const ItemText = RadioGroup.ItemText;
const Radio = React.forwardRef(function Radio$1(props, ref) {
const { children, inputProps, rootRef, ...rest } = props;
return /* @__PURE__ */ React.createElement(CRGI, {
ref: rootRef,
...rest
}, /* @__PURE__ */ React.createElement(RadioGroup.ItemHiddenInput, {
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
/**
* @group Components
*/
const ChakraValueEditor = (allProps) => {
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, ...propsForValueSelector } = allProps;
const { valueAsArray, multiValueHandler, bigIntValueHandler, valueListItemClassName, inputTypeCoerced } = useValueEditor(allProps);
if (operator === "null" || operator === "notNull") return null;
const placeHolderText = fieldData?.placeholder ?? "";
if ((operator === "between" || operator === "notBetween") && (type === "select" || type === "text")) {
if (type === "text") {
const editors = ["from", "to"].map((key, i) => {
return /* @__PURE__ */ React.createElement(Input, {
key,
type: inputTypeCoerced,
value: 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, {
...allProps,
skipHook: true
});
}
switch (type) {
case "select": return /* @__PURE__ */ React.createElement(SelectorComponent, {
...propsForValueSelector,
className,
title,
value,
disabled,
handleOnChange,
options: values
});
case "multiselect": return /* @__PURE__ */ React.createElement(ValueEditor, {
...allProps,
skipHook: true
});
case "textarea": return /* @__PURE__ */ React.createElement(Textarea, {
value,
title,
disabled,
className,
placeholder: placeHolderText,
onChange: (e) => handleOnChange(e.target.value),
...extraProps
});
case "switch": return /* @__PURE__ */ React.createElement(Switch$1, {
className,
checked: !!value,
title,
disabled,
onChange: (e) => handleOnChange(e.target.checked),
...extraProps
});
case "checkbox": return /* @__PURE__ */ React.createElement(Checkbox$1, {
className,
title,
disabled,
onChange: (e) => handleOnChange(e.target.checked),
checked: !!value,
...extraProps
});
case "radio": return /* @__PURE__ */ React.createElement(RadioGroup$1, {
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, {
"data-testid": testID,
type: inputTypeCoerced,
placeholder: placeHolderText,
value: `${value}`,
title,
className,
disabled,
onChange: (e) => bigIntValueHandler(e.target.value),
...extraProps
});
return /* @__PURE__ */ React.createElement(Input, {
type: inputTypeCoerced,
value,
title,
disabled,
className,
placeholder: placeHolderText,
onChange: (e) => handleOnChange(e.target.value),
...extraProps
});
};
//#endregion
//#region src/snippets/native-select.tsx
const NativeSelectRoot = React.forwardRef(function NativeSelect$1(props, ref) {
const { icon, children, ...rest } = props;
return /* @__PURE__ */ React.createElement(NativeSelect.Root, {
ref,
...rest
}, children, /* @__PURE__ */ React.createElement(NativeSelect.Indicator, null, icon));
});
const NativeSelectField = React.forwardRef(function NativeSelectField$1(props, ref) {
const { items: itemsProp, children, ...rest } = props;
const items = React.useMemo(() => itemsProp?.map((item) => typeof item === "string" ? {
label: item,
value: item
} : item), [itemsProp]);
return /* @__PURE__ */ React.createElement(NativeSelect.Field, {
ref,
...rest
}, children, items?.map((item) => /* @__PURE__ */ React.createElement("option", {
key: item.value,
value: item.value,
disabled: item.disabled
}, item.label)));
});
//#endregion
//#region src/ChakraValueSelector.tsx
/**
* @group Components
*/
const ChakraValueSelector = ({ 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, ...extraProps }) => /* @__PURE__ */ React.createElement(NativeSelectRoot, {
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.mjs.map