feat(QueryBuilder): default custom renderers

lumada-design · Dec 20, 2023 · 583b454 · 583b454
1 parent f90ca70
commit 583b454
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/packages/core/src/QueryBuilder/QueryBuilder.tsx b/packages/core/src/QueryBuilder/QueryBuilder.tsx
@@ -22,6 +22,7 @@ import {
   HvQueryBuilderQueryOperator,
   HvQueryBuilderChangedQuery,
   HvQueryBuilderRenderers,
+  defaultRendererKey,
 } from "./types";
 import { clearNodeIds, emptyGroup } from "./utils";
 import reducer from "./utils/reducer";
@@ -80,6 +81,23 @@ export const HvQueryBuilder = (props: HvQueryBuilderProps) => {
     classes: classesProp,
   } = useDefaultProps("HvQueryBuilder", props);
 
+  if (
+    import.meta.env.DEV &&
+    [
+      Object.values(attributes || {}).map(({ type }) => type),
+      Object.values(operators || {})
+        .map((ops) => ops.map(({ operator }) => operator))
+        .flat(),
+    ]
+      .flat()
+      ?.find((key) => key === defaultRendererKey)
+  ) {
+    // eslint-disable-next-line no-console
+    console.error(
+      `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`
+    );
+  }
+
   const { classes } = useClasses(classesProp);
 
   const currentAttributes = useRef<HvQueryBuilderProps["attributes"] | null>(

diff --git a/packages/core/src/QueryBuilder/Rule/Value/Value.tsx b/packages/core/src/QueryBuilder/Rule/Value/Value.tsx
@@ -5,7 +5,7 @@ import { BooleanValue } from "./BooleanValue";
 import { NumericValue } from "./NumericValue";
 import { TextValue } from "./TextValue";
 import { DateTimeValue } from "./DateTimeValue";
-import { HvQueryBuilderRendererProps } from "../../types";
+import { HvQueryBuilderRendererProps, defaultRendererKey } from "../../types";
 import { EmptyValue } from "./EmptyValue";
 
 export interface ValueProps {
@@ -28,11 +28,27 @@ export const Value = ({
 
   // Custom renderer
   if (attrType && renderers?.[attrType]) {
+    // Renderer to be used by order:
+    // 1. Custom attribute renderer
+    // 2. Custom attribute-operator renderer
+    // 3. Custom attribute-DEFAULT renderer
+    // 4. Custom master DEFAULT renderer
+    // 5. Custom master DEFAULT-operator renderer
+    // 6. Custom master DEFAULT-DEFAULT renderer
     const Renderer: React.FC<HvQueryBuilderRendererProps> | undefined =
+      (typeof renderers[attrType] === "function" && renderers[attrType]) ||
       (typeof renderers[attrType] === "object" &&
         operator &&
         renderers[attrType][operator]) ||
-      (typeof renderers[attrType] === "function" && renderers[attrType]) ||
+      (typeof renderers[attrType] === "object" &&
+        renderers[attrType][defaultRendererKey]) ||
+      (typeof renderers[defaultRendererKey] === "function" &&
+        renderers[defaultRendererKey]) ||
+      (typeof renderers[defaultRendererKey] === "object" &&
+        operator &&
+        renderers[defaultRendererKey][operator]) ||
+      (typeof renderers[defaultRendererKey] === "object" &&
+        renderers[defaultRendererKey][defaultRendererKey]) ||
       undefined;
 
     if (Renderer) {

diff --git a/packages/core/src/QueryBuilder/types.ts b/packages/core/src/QueryBuilder/types.ts
@@ -1,3 +1,5 @@
+export const defaultRendererKey = "DEFAULT";
+
 const defaultAttributes = [
   "boolean",
   "numeric",