@react-querybuilder/tremor
Version:
Custom Tremor components for react-querybuilder
289 lines (281 loc) • 9.19 kB
JavaScript
import { ValueEditor, getCompatContextProvider, isOptionGroupArray, toArray, useValueEditor, useValueSelector } from "react-querybuilder";
import { Button, DatePicker, DateRangePicker, MultiSelect, MultiSelectItem, NumberInput, Select, SelectItem, Switch, TextInput, Textarea } from "@tremor/react";
import * as React from "react";
import dayjs from "dayjs";
//#region src/TremorActionElement.tsx
/**
* @group Components
*/
const TremorActionElement = ({ className, handleOnClick, label, title, disabled, disabledTranslation, testID, rules: _rules, ruleOrGroup: _rg, path: _path, level: _level, context: _context, validation: _validation, schema: _schema,...otherProps }) => /* @__PURE__ */ React.createElement(Button, {
...otherProps,
"data-testid": testID,
type: "button",
variant: "primary",
className,
title: disabledTranslation && disabled ? disabledTranslation.title : title,
onClick: (e) => handleOnClick(e),
disabled: disabled && !disabledTranslation
}, disabledTranslation && disabled ? disabledTranslation.label : label);
//#endregion
//#region src/TremorNotToggle.tsx
/**
* @group Components
*/
const TremorNotToggle = ({ className, handleOnChange, label, checked, title, disabled, testID, path: _path, level: _level, context: _context, validation: _validation, schema: _schema, ruleGroup: _ruleGroup,...otherProps }) => {
const id = React.useId();
return /* @__PURE__ */ React.createElement("div", {
className,
"data-testid": testID
}, /* @__PURE__ */ React.createElement(Switch, {
...otherProps,
id,
name: id,
title,
disabled,
checked,
onChange: handleOnChange
}), /* @__PURE__ */ React.createElement("label", {
htmlFor: id,
title
}, label));
};
//#endregion
//#region src/TremorShiftActions.tsx
/**
* @group Components
*/
const TremorShiftActions = ({ shiftUp, shiftDown, shiftUpDisabled, shiftDownDisabled, disabled, className, labels, titles, testID }) => /* @__PURE__ */ React.createElement("div", {
"data-testid": testID,
className
}, /* @__PURE__ */ React.createElement(Button, {
type: "button",
variant: "light",
disabled: disabled || shiftUpDisabled,
onClick: shiftUp,
title: titles?.shiftUp
}, labels?.shiftUp), /* @__PURE__ */ React.createElement(Button, {
type: "button",
variant: "light",
disabled: disabled || shiftDownDisabled,
onClick: shiftDown,
title: titles?.shiftDown
}, labels?.shiftDown));
//#endregion
//#region src/utils.tsx
const toSelectItems = (list, multi) => {
const flatList = isOptionGroupArray(list) ? list.flatMap((og) => og.options) : list;
// istanbul ignore else
if (Array.isArray(flatList)) return flatList.map((opt) => multi ? /* @__PURE__ */ React.createElement(MultiSelectItem, {
key: opt.name,
value: opt.name,
"aria-disabled": !!opt.disabled
}, opt.label) : /* @__PURE__ */ React.createElement(SelectItem, {
key: opt.name,
value: opt.name,
"aria-disabled": !!opt.disabled
}, opt.label));
// istanbul ignore next
return null;
};
//#endregion
//#region src/TremorValueSelector.tsx
/**
* @group Components
*/
const TremorValueSelector = ({ className, handleOnChange, options, value, title, disabled, multiple, listsAsArrays, testID, placeholder, fieldData: _fieldData, path: _path, level: _level, context: _context, validation: _validation, schema: _schema, rule: _rule, ruleGroup: _ruleGroup, rules: _rules,...otherProps }) => {
const { onChange, val } = useValueSelector({
handleOnChange,
listsAsArrays,
multiple,
value
});
const optionElements = React.useMemo(() => toSelectItems(options, multiple), [multiple, options]);
const { enableClear: _ec,...multiSelectOtherProps } = otherProps;
return multiple ? /* @__PURE__ */ React.createElement(MultiSelect, {
...multiSelectOtherProps,
"data-testid": testID,
title,
className,
disabled,
value: toArray(val),
placeholder,
onValueChange: onChange
}, optionElements) : /* @__PURE__ */ React.createElement(Select, {
enableClear: false,
...otherProps,
"data-testid": testID,
title,
className,
value,
disabled,
onValueChange: onChange
}, optionElements);
};
//#endregion
//#region src/TremorValueEditor.tsx
const dateFormat = "YYYY-MM-DD";
const ClearableValueSelector = (props) => /* @__PURE__ */ React.createElement(TremorValueSelector, {
...props,
enableClear: true
});
/**
* @group Components
*/
const TremorValueEditor = (allProps) => {
const { fieldData, operator, value, handleOnChange, title, className, type, inputType, values: _v, listsAsArrays, parseNumbers: _parseNumbers, separator, valueSource: _vs, disabled, testID, selectorComponent = ClearableValueSelector, validation: _validation, extraProps } = 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") && inputTypeCoerced !== "date") {
if (type === "text") {
const editors = ["from", "to"].map((key, i) => {
return /* @__PURE__ */ React.createElement(TextInput, {
key,
type: inputTypeCoerced,
placeholder: placeHolderText,
value: valueAsArray[i] ?? "",
className: `${valueListItemClassName} input`,
disabled,
onValueChange: (v) => multiValueHandler(v, 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,
selectorComponent
});
}
switch (type) {
case "select":
case "multiselect": return /* @__PURE__ */ React.createElement(ValueEditor, {
...allProps,
skipHook: true,
selectorComponent
});
case "textarea": return /* @__PURE__ */ React.createElement(Textarea, {
className,
value,
title,
placeholder: placeHolderText,
disabled,
onValueChange: handleOnChange,
...extraProps
});
case "switch": return /* @__PURE__ */ React.createElement(Switch, {
className,
title,
checked: value,
disabled,
onChange: handleOnChange,
...extraProps
});
case "checkbox":
case "radio": return /* @__PURE__ */ React.createElement(ValueEditor, {
...allProps,
skipHook: true
});
}
if (inputTypeCoerced === "date") {
if (operator === "between" || operator === "notBetween") {
const twoDateArray = [null, null].map((defaultValue, i) => {
if (!valueAsArray[i]) return defaultValue;
let date = dayjs(valueAsArray[i]);
if (!date.isValid()) date = dayjs(`${dayjs().format("YYYY-MM-DD")}`);
return date.toDate();
});
return /* @__PURE__ */ React.createElement(DateRangePicker, {
"data-testid": testID,
value: {
from: twoDateArray[0],
to: twoDateArray[1]
},
className,
disabled,
placeholder: placeHolderText,
enableSelect: false,
enableClear: true,
onValueChange: (dates) => {
const dateArray = [dates.from, dates.to].map((d) => d ? dayjs(d).format(dateFormat) : "");
handleOnChange(listsAsArrays ? dateArray : dateArray.join(","));
},
...extraProps
});
}
return /* @__PURE__ */ React.createElement(DatePicker, {
"data-testid": testID,
title,
className,
placeholder: placeHolderText,
disabled,
enableClear: true,
value: !!value && dayjs(value).isValid() ? dayjs(value).toDate() : void 0,
onValueChange: (d) => handleOnChange(d ? dayjs(d).format(dateFormat) : ""),
...extraProps
});
}
if (inputTypeCoerced === "number") return /* @__PURE__ */ React.createElement(NumberInput, {
"data-testid": testID,
title,
className,
placeholder: placeHolderText,
disabled,
value,
onValueChange: handleOnChange,
...extraProps
});
if (inputType === "bigint") return /* @__PURE__ */ React.createElement(TextInput, {
"data-testid": testID,
type: inputTypeCoerced,
placeholder: placeHolderText,
value: `${value}`,
title,
className,
disabled,
onChange: (e) => bigIntValueHandler(e.target.value),
...extraProps
});
return /* @__PURE__ */ React.createElement(TextInput, {
"data-testid": testID,
title,
className,
placeholder: placeHolderText,
type: inputTypeCoerced,
disabled,
value,
onValueChange: handleOnChange,
...extraProps
});
};
//#endregion
//#region src/index.tsx
/**
* @group Props
*/
const tremorControlElements = {
actionElement: TremorActionElement,
notToggle: TremorNotToggle,
shiftActions: TremorShiftActions,
valueEditor: TremorValueEditor,
valueSelector: TremorValueSelector
};
/**
* @group Props
*/
const tremorControlClassnames = { notToggle: "flex flex-row gap-1" };
/**
* @group Components
*/
const QueryBuilderTremor = getCompatContextProvider({
controlClassnames: tremorControlClassnames,
controlElements: tremorControlElements
});
//#endregion
export { QueryBuilderTremor, TremorActionElement, TremorNotToggle, TremorShiftActions, TremorValueEditor, TremorValueSelector, tremorControlClassnames, tremorControlElements };
//# sourceMappingURL=react-querybuilder_tremor.mjs.map