feat(QueryBuilder): empty and is not empty operators as value renderers

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

Hide file tree

Showing 5 changed files with 36 additions and 17 deletions.
diff --git a/packages/core/src/QueryBuilder/Rule/Operator/Operator.tsx b/packages/core/src/QueryBuilder/Rule/Operator/Operator.tsx
@@ -55,12 +55,7 @@ export const Operator = ({
             id,
             operator: selected.id.toString(),
             value:
-              value === "range" ||
-              selected.id === "range" ||
-              selected.id === "IsNotEmpty" ||
-              selected.id === "Empty"
-                ? null
-                : undefined,
+              value === "range" || selected.id === "range" ? null : undefined,
           });
         } else {
           dispatchAction({

diff --git a/packages/core/src/QueryBuilder/Rule/Rule.tsx b/packages/core/src/QueryBuilder/Rule/Rule.tsx
@@ -74,9 +74,6 @@ export const Rule = (props: RuleProps) => {
     return -1;
   }, [attribute, attributes, combinator, operators]);
 
-  const shouldShowValueInput =
-    operator !== "Empty" && operator !== "IsNotEmpty";
-
   return (
     <HvGrid
       container
@@ -103,14 +100,12 @@ export const Rule = (props: RuleProps) => {
       )}
       {attribute != null && (operator != null || availableOperators === 0) && (
         <HvGrid item xs={12} md>
-          {shouldShowValueInput && (
-            <Value
-              attribute={attribute}
-              id={id}
-              operator={operator}
-              value={value}
-            />
-          )}
+          <Value
+            attribute={attribute}
+            id={id}
+            operator={operator}
+            value={value}
+          />
         </HvGrid>
       )}
       <HvGrid item className={classes.actionsContainer}>

diff --git a/packages/core/src/QueryBuilder/Rule/Value/EmptyValue/EmptyValue.tsx b/packages/core/src/QueryBuilder/Rule/Value/EmptyValue/EmptyValue.tsx
@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+import { useQueryBuilderContext } from "../../../Context";
+
+export interface EmptyValueProps {
+  id: React.Key;
+}
+
+export const EmptyValue = ({ id }: EmptyValueProps) => {
+  const { dispatchAction } = useQueryBuilderContext();
+
+  // Clear value on first render
+  useEffect(() => {
+    dispatchAction({
+      type: "set-value",
+      id,
+      value: null,
+    });
+  }, [dispatchAction, id]);
+
+  return null;
+};
diff --git a/packages/core/src/QueryBuilder/Rule/Value/EmptyValue/index.ts b/packages/core/src/QueryBuilder/Rule/Value/EmptyValue/index.ts
@@ -0,0 +1 @@
+export * from "./EmptyValue";
diff --git a/packages/core/src/QueryBuilder/Rule/Value/Value.tsx b/packages/core/src/QueryBuilder/Rule/Value/Value.tsx
@@ -6,6 +6,7 @@ import { NumericValue } from "./NumericValue";
 import { TextValue } from "./TextValue";
 import { DateTimeValue } from "./DateTimeValue";
 import { HvQueryBuilderRendererProps } from "../../types";
+import { EmptyValue } from "./EmptyValue";
 
 export interface ValueProps {
   id: React.Key;
@@ -46,6 +47,11 @@ export const Value = ({
     }
   }
 
+  // Built-in behavior for "Empty" and "IsNotEmpty" operators
+  if (operator === "Empty" || operator === "IsNotEmpty") {
+    return <EmptyValue id={id} />;
+  }
+
   // Built-in attributes
   switch (attrType) {
     case "boolean": {