@react-querybuilder/tremor
Version:
Custom Tremor components for react-querybuilder
323 lines (314 loc) • 10.9 kB
JavaScript
//#region rolldown:runtime
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_querybuilder = require("react-querybuilder");
react_querybuilder = __toESM(react_querybuilder);
let __tremor_react = require("@tremor/react");
__tremor_react = __toESM(__tremor_react);
let react = require("react");
react = __toESM(react);
let dayjs = require("dayjs");
dayjs = __toESM(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(__tremor_react.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(__tremor_react.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(__tremor_react.Button, {
type: "button",
variant: "light",
disabled: disabled || shiftUpDisabled,
onClick: shiftUp,
title: titles?.shiftUp
}, labels?.shiftUp), /* @__PURE__ */ react.createElement(__tremor_react.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 = (0, react_querybuilder.isOptionGroupArray)(list) ? list.flatMap((og) => og.options) : list;
// istanbul ignore else
if (Array.isArray(flatList)) return flatList.map((opt) => multi ? /* @__PURE__ */ react.createElement(__tremor_react.MultiSelectItem, {
key: opt.name,
value: opt.name,
"aria-disabled": !!opt.disabled
}, opt.label) : /* @__PURE__ */ react.createElement(__tremor_react.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 } = (0, react_querybuilder.useValueSelector)({
handleOnChange,
listsAsArrays,
multiple,
value
});
const optionElements = react.useMemo(() => toSelectItems(options, multiple), [multiple, options]);
const { enableClear: _ec,...multiSelectOtherProps } = otherProps;
return multiple ? /* @__PURE__ */ react.createElement(__tremor_react.MultiSelect, {
...multiSelectOtherProps,
"data-testid": testID,
title,
className,
disabled,
value: (0, react_querybuilder.toArray)(val),
placeholder,
onValueChange: onChange
}, optionElements) : /* @__PURE__ */ react.createElement(__tremor_react.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 } = (0, react_querybuilder.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(__tremor_react.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(react_querybuilder.ValueEditor, {
...allProps,
skipHook: true,
selectorComponent
});
}
switch (type) {
case "select":
case "multiselect": return /* @__PURE__ */ react.createElement(react_querybuilder.ValueEditor, {
...allProps,
skipHook: true,
selectorComponent
});
case "textarea": return /* @__PURE__ */ react.createElement(__tremor_react.Textarea, {
className,
value,
title,
placeholder: placeHolderText,
disabled,
onValueChange: handleOnChange,
...extraProps
});
case "switch": return /* @__PURE__ */ react.createElement(__tremor_react.Switch, {
className,
title,
checked: value,
disabled,
onChange: handleOnChange,
...extraProps
});
case "checkbox":
case "radio": return /* @__PURE__ */ react.createElement(react_querybuilder.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 = (0, dayjs.default)(valueAsArray[i]);
if (!date.isValid()) date = (0, dayjs.default)(`${(0, dayjs.default)().format("YYYY-MM-DD")}`);
return date.toDate();
});
return /* @__PURE__ */ react.createElement(__tremor_react.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 ? (0, dayjs.default)(d).format(dateFormat) : "");
handleOnChange(listsAsArrays ? dateArray : dateArray.join(","));
},
...extraProps
});
}
return /* @__PURE__ */ react.createElement(__tremor_react.DatePicker, {
"data-testid": testID,
title,
className,
placeholder: placeHolderText,
disabled,
enableClear: true,
value: !!value && (0, dayjs.default)(value).isValid() ? (0, dayjs.default)(value).toDate() : void 0,
onValueChange: (d) => handleOnChange(d ? (0, dayjs.default)(d).format(dateFormat) : ""),
...extraProps
});
}
if (inputTypeCoerced === "number") return /* @__PURE__ */ react.createElement(__tremor_react.NumberInput, {
"data-testid": testID,
title,
className,
placeholder: placeHolderText,
disabled,
value,
onValueChange: handleOnChange,
...extraProps
});
if (inputType === "bigint") return /* @__PURE__ */ react.createElement(__tremor_react.TextInput, {
"data-testid": testID,
type: inputTypeCoerced,
placeholder: placeHolderText,
value: `${value}`,
title,
className,
disabled,
onChange: (e) => bigIntValueHandler(e.target.value),
...extraProps
});
return /* @__PURE__ */ react.createElement(__tremor_react.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 = (0, react_querybuilder.getCompatContextProvider)({
controlClassnames: tremorControlClassnames,
controlElements: tremorControlElements
});
//#endregion
exports.QueryBuilderTremor = QueryBuilderTremor;
exports.TremorActionElement = TremorActionElement;
exports.TremorNotToggle = TremorNotToggle;
exports.TremorShiftActions = TremorShiftActions;
exports.TremorValueEditor = TremorValueEditor;
exports.TremorValueSelector = TremorValueSelector;
exports.tremorControlClassnames = tremorControlClassnames;
exports.tremorControlElements = tremorControlElements;
//# sourceMappingURL=react-querybuilder_tremor.cjs.development.js.map