@react-querybuilder/tremor
Version:
Custom Tremor components for react-querybuilder
417 lines (402 loc) • 13.8 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 \0@oxc-project+runtime@0.89.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.89.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.89.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.89.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.89.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.89.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.89.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/TremorActionElement.tsx
const _excluded$2 = [
"className",
"handleOnClick",
"label",
"title",
"disabled",
"disabledTranslation",
"testID",
"rules",
"ruleOrGroup",
"path",
"level",
"context",
"validation",
"schema"
];
/**
* @group Components
*/
const TremorActionElement = (_ref) => {
let { className, handleOnClick, label, title, disabled, disabledTranslation, testID, rules: _rules, ruleOrGroup: _rg, path: _path, level: _level, context: _context, validation: _validation, schema: _schema } = _ref, otherProps = _objectWithoutProperties(_ref, _excluded$2);
return /* @__PURE__ */ React.createElement(Button, _objectSpread2(_objectSpread2({}, 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
const _excluded$1 = [
"className",
"handleOnChange",
"label",
"checked",
"title",
"disabled",
"testID",
"path",
"level",
"context",
"validation",
"schema",
"ruleGroup"
];
/**
* @group Components
*/
const TremorNotToggle = (_ref) => {
let { className, handleOnChange, label, checked, title, disabled, testID, path: _path, level: _level, context: _context, validation: _validation, schema: _schema, ruleGroup: _ruleGroup } = _ref, otherProps = _objectWithoutProperties(_ref, _excluded$1);
const id = React.useId();
return /* @__PURE__ */ React.createElement("div", {
className,
"data-testid": testID
}, /* @__PURE__ */ React.createElement(Switch, _objectSpread2(_objectSpread2({}, 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 === null || titles === void 0 ? void 0 : titles.shiftUp
}, labels === null || labels === void 0 ? void 0 : labels.shiftUp), /* @__PURE__ */ React.createElement(Button, {
type: "button",
variant: "light",
disabled: disabled || shiftDownDisabled,
onClick: shiftDown,
title: titles === null || titles === void 0 ? void 0 : titles.shiftDown
}, labels === null || labels === void 0 ? void 0 : 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
const _excluded = [
"className",
"handleOnChange",
"options",
"value",
"title",
"disabled",
"multiple",
"listsAsArrays",
"testID",
"placeholder",
"fieldData",
"path",
"level",
"context",
"validation",
"schema",
"rule",
"ruleGroup",
"rules"
], _excluded2 = ["enableClear"];
/**
* @group Components
*/
const TremorValueSelector = (_ref) => {
let { 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 } = _ref, otherProps = _objectWithoutProperties(_ref, _excluded);
const { onChange, val } = useValueSelector({
handleOnChange,
listsAsArrays,
multiple,
value
});
const optionElements = React.useMemo(() => toSelectItems(options, multiple), [multiple, options]);
const { enableClear: _ec } = otherProps, multiSelectOtherProps = _objectWithoutProperties(otherProps, _excluded2);
return multiple ? /* @__PURE__ */ React.createElement(MultiSelect, _objectSpread2(_objectSpread2({}, multiSelectOtherProps), {}, {
"data-testid": testID,
title,
className,
disabled,
value: toArray(val),
placeholder,
onValueChange: onChange
}), optionElements) : /* @__PURE__ */ React.createElement(Select, _objectSpread2(_objectSpread2({ 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, _objectSpread2(_objectSpread2({}, props), {}, { enableClear: true }));
/**
* @group Components
*/
const TremorValueEditor = (allProps) => {
var _fieldData$placeholde;
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$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") && inputTypeCoerced !== "date") {
if (type === "text") {
const editors = ["from", "to"].map((key, i) => {
var _valueAsArray$i;
return /* @__PURE__ */ React.createElement(TextInput, _objectSpread2({
key,
type: inputTypeCoerced,
placeholder: placeHolderText,
value: (_valueAsArray$i = valueAsArray[i]) !== null && _valueAsArray$i !== void 0 ? _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, _objectSpread2(_objectSpread2({}, allProps), {}, {
skipHook: true,
selectorComponent
}));
}
switch (type) {
case "select":
case "multiselect": return /* @__PURE__ */ React.createElement(ValueEditor, _objectSpread2(_objectSpread2({}, allProps), {}, {
skipHook: true,
selectorComponent
}));
case "textarea": return /* @__PURE__ */ React.createElement(Textarea, _objectSpread2({
className,
value,
title,
placeholder: placeHolderText,
disabled,
onValueChange: handleOnChange
}, extraProps));
case "switch": return /* @__PURE__ */ React.createElement(Switch, _objectSpread2({
className,
title,
checked: value,
disabled,
onChange: handleOnChange
}, extraProps));
case "checkbox":
case "radio": return /* @__PURE__ */ React.createElement(ValueEditor, _objectSpread2(_objectSpread2({}, 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, _objectSpread2({
"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, _objectSpread2({
"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, _objectSpread2({
"data-testid": testID,
title,
className,
placeholder: placeHolderText,
disabled,
value,
onValueChange: handleOnChange
}, extraProps));
if (inputType === "bigint") return /* @__PURE__ */ React.createElement(TextInput, _objectSpread2({
"data-testid": testID,
type: inputTypeCoerced,
placeholder: placeHolderText,
value: `${value}`,
title,
className,
disabled,
onChange: (e) => bigIntValueHandler(e.target.value)
}, extraProps));
return /* @__PURE__ */ React.createElement(TextInput, _objectSpread2({
"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.legacy-esm.js.map