refactor: update type of advanced filter

lawvs · Aug 3, 2024 · 257136b · 257136b
1 parent d6f2029
commit 257136b
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 73 deletions.
diff --git a/packages/playground/src/app.tsx b/packages/playground/src/app.tsx
@@ -15,7 +15,7 @@ export const App = () => {
   const { rule, predicate, openFilterDialog } = useAdvancedFilter({
     storageKey: "fn-sphere-flatten-filter",
     schema: presetSchema,
-    filterList: dataFilters,
+    filterFnList: dataFilters,
     fieldDeepLimit: Infinity,
     dialogProps: {
       width: "600px",

diff --git a/packages/playground/src/filter/create-advanced-filter.ts b/packages/playground/src/filter/create-advanced-filter.ts
@@ -8,7 +8,7 @@ import {
   createSingleFilter,
   defaultMapFieldName,
   defaultMapFilterName,
-  type BasicFilterBuilderProps,
+  type BasicFilterSphereInput,
 } from "@fn-sphere/filter";
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
@@ -20,7 +20,7 @@ import {
 } from "./flatten-filter-dialog.js";
 
 type OpenFilterProps<Data = unknown> = {
-  filterBuilder: BasicFilterBuilderProps<Data> & {
+  filterBuilder: BasicFilterSphereInput<Data> & {
     // uncontrolled mode only for the dialog
     defaultRule: FilterGroup | undefined;
   };
@@ -29,26 +29,21 @@ type OpenFilterProps<Data = unknown> = {
   abortSignal?: AbortSignal;
 };
 
-// See https://stackoverflow.com/questions/43159887/make-a-single-property-optional-in-typescript
-type PartialBy<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-
-export type CreateAdvancedFilterProps<Data = unknown> = PartialBy<
-  BasicFilterBuilderProps<Data>,
-  "filterList"
-> & {
-  defaultRule?: FilterGroup | undefined;
-  /**
-   *
-   * Set `null` to disable storage.
-   *
-   * The default storage implementation uses `localStorage` for storage/retrieval, `JSON.stringify()`/`JSON.parse()` for serialization/deserialization.
-   *
-   * @default null
-   */
-  storageKey?: string | null;
-  dialogProps?: OpenFilterProps<Data>["dialogProps"];
-  container?: OpenFilterProps<Data>["container"];
-};
+export type CreateAdvancedFilterProps<Data = unknown> =
+  BasicFilterSphereInput<Data> & {
+    defaultRule?: FilterGroup | undefined;
+    /**
+     *
+     * Set `null` to disable storage.
+     *
+     * The default storage implementation uses `localStorage` for storage/retrieval, `JSON.stringify()`/`JSON.parse()` for serialization/deserialization.
+     *
+     * @default null
+     */
+    storageKey?: string | null;
+    dialogProps?: OpenFilterProps<Data>["dialogProps"];
+    container?: OpenFilterProps<Data>["container"];
+  };
 
 export const openFlattenFilterDialog = async <Data>(
   options: OpenFilterProps<Data>,
@@ -110,7 +105,7 @@ export const openFlattenFilterDialog = async <Data>(
 
 export const defaultOptions = {
   schema: z.any(),
-  filterList: presetFilter,
+  filterFnList: presetFilter,
   fieldDeepLimit: 1,
   mapFieldName: defaultMapFieldName,
   mapFilterName: defaultMapFilterName,
@@ -157,8 +152,8 @@ export const createAdvancedFilter = <Data>(
     const rule = await getRule();
     const predicate = createFilterPredicate({
       schema: options.schema,
-      filterList: options.filterList,
-      rule,
+      filterFnList: options.filterFnList,
+      filterRule: rule,
     });
     return predicate;
   };
@@ -175,7 +170,7 @@ export const createAdvancedFilter = <Data>(
       const result = await openFlattenFilterDialog({
         filterBuilder: {
           schema: options.schema,
-          filterList: options.filterList,
+          filterFnList: options.filterFnList,
           fieldDeepLimit: options.fieldDeepLimit,
           mapFieldName: options.mapFieldName,
           mapFilterName: options.mapFilterName,

diff --git a/...ges/filter/src/flatten-filter-builder.tsx → ...und/src/filter/flatten-filter-builder.tsx b/...ges/filter/src/flatten-filter-builder.tsx → ...und/src/filter/flatten-filter-builder.tsx
@@ -1,17 +1,50 @@
-import { countNumberOfRules } from "@fn-sphere/core";
-import { Fragment } from "react";
-import { FilterSchemaProvider } from "./hooks/use-filter-schema-context.js";
-import { useView } from "./theme/index.js";
-import type { BasicFilterSphereInput } from "./types.js";
+import { countNumberOfRules, type FilterId } from "@fn-sphere/core";
+import type {
+  BasicFilterSphereInput,
+  FilterGroup,
+  SingleFilter,
+} from "@fn-sphere/filter";
 import {
   createFilterGroup,
   createSingleFilter,
-  defaultMapFieldName,
-  defaultMapFilterName,
-  isFlattenFilterGroup,
-} from "./utils.js";
+  FilterSchemaProvider,
+  useFilterSphere,
+  useView,
+} from "@fn-sphere/filter";
+import { Fragment } from "react";
+
+interface FlattenFilterBuilderProps<Data = unknown>
+  extends BasicFilterSphereInput<Data> {
+  filterRule?: FilterGroup;
+  onRuleChange?: (rule: FilterGroup) => void;
+}
 
-type FilterBuilderProps<Data = unknown> = BasicFilterSphereInput<Data>;
+export type FlattenFilterGroup = {
+  id: FilterId;
+  type: "FilterGroup";
+  op: "or";
+  conditions: {
+    id: FilterId;
+    type: "FilterGroup";
+    op: "and";
+    conditions: SingleFilter[];
+  }[];
+};
+
+const isFlattenFilterGroup = (
+  filterGroup: FilterGroup,
+): filterGroup is FlattenFilterGroup => {
+  if (filterGroup.op === "and") {
+    return false;
+  }
+
+  return filterGroup.conditions.every(
+    (group) =>
+      group.type === "FilterGroup" &&
+      group.op === "and" &&
+      group.conditions.every((rule) => rule.type === "Filter"),
+  );
+};
 
 const createFlattenFilterGroup = () =>
   createFilterGroup({
@@ -25,14 +58,13 @@ const createFlattenFilterGroup = () =>
   });
 
 export const FlattenFilterBuilder = <Data,>({
-  schema,
-  filterList,
   filterRule: filterGroup = createFlattenFilterGroup(),
-  fieldDeepLimit = 1,
-  mapFieldName = defaultMapFieldName,
-  mapFilterName = defaultMapFilterName,
-  onRuleChange,
-}: FilterBuilderProps<Data>) => {
+  ...props
+}: FlattenFilterBuilderProps<Data>) => {
+  const { context } = useFilterSphere({
+    ruleValue: filterGroup,
+    ...props,
+  });
   const {
     RuleJoiner,
     FilterGroupContainer,
@@ -47,7 +79,7 @@ export const FlattenFilterBuilder = <Data,>({
         <div>Invalid Rule</div>
         <ButtonView
           onClick={() => {
-            onRuleChange?.(createFlattenFilterGroup());
+            props.onRuleChange?.(createFlattenFilterGroup());
           }}
         >
           Reset Filter
@@ -62,7 +94,7 @@ export const FlattenFilterBuilder = <Data,>({
       <FilterGroupContainer isRoot filterGroup={filterGroup}>
         <ButtonView
           onClick={() => {
-            onRuleChange?.(createFlattenFilterGroup());
+            props.onRuleChange?.(createFlattenFilterGroup());
           }}
         >
           Add Filter
@@ -72,18 +104,7 @@ export const FlattenFilterBuilder = <Data,>({
   }
 
   return (
-    <FilterSchemaProvider
-      value={{
-        schema,
-        filterList,
-        filterRule: filterGroup,
-        onRuleChange,
-
-        mapFieldName,
-        mapFilterName,
-        fieldDeepLimit,
-      }}
-    >
+    <FilterSchemaProvider value={context}>
       <FilterGroupContainer isRoot filterGroup={filterGroup}>
         {filterGroup.conditions.map((andGroup, groupIdx) => {
           return (

diff --git a/packages/playground/src/filter/flatten-filter-dialog.tsx b/packages/playground/src/filter/flatten-filter-dialog.tsx
@@ -6,19 +6,19 @@ import {
 import {
   createFilterGroup,
   createSingleFilter,
-  FlattenFilterBuilder,
-  type BasicFilterBuilderProps,
+  type BasicFilterSphereInput,
 } from "@fn-sphere/filter";
 import { useState } from "react";
 import { Dialog, type DialogProps } from "tdesign-react";
+import { FlattenFilterBuilder } from "./flatten-filter-builder";
 
 type FilterValue<Data> = {
   rule: FilterGroup;
   predicate: (data: Data) => boolean;
 };
 
 export type FlattenFilterDialogProps<Data> = {
-  filterBuilder: BasicFilterBuilderProps<Data> & {
+  filterBuilder: BasicFilterSphereInput<Data> & {
     rule?: FilterGroup;
     defaultRule?: FilterGroup;
   };
@@ -46,7 +46,9 @@ export const FlattenFilterDialog = <Data,>({
   const controlled = filterBuilder.rule !== undefined;
   // This state will be used only when the dialog is uncontrolled.
   const [filterGroup, setFilterGroup] = useState(filterBuilder.defaultRule);
-  const filterList = filterBuilder.filterList ?? presetFilter;
+  const filterFnList = filterBuilder.filterFnList ?? presetFilter;
+  const realRule = controlled ? filterBuilder.rule : filterGroup;
+
   return (
     <Dialog
       visible={open}
@@ -62,26 +64,26 @@ export const FlattenFilterDialog = <Data,>({
             }),
           predicate: createFilterPredicate({
             schema: filterBuilder.schema,
-            filterList,
-            rule: filterGroup,
+            filterFnList,
+            filterRule: filterGroup,
           }),
         });
       }}
     >
       <FlattenFilterBuilder
         schema={filterBuilder.schema}
-        filterList={filterList}
+        filterFnList={filterFnList}
         fieldDeepLimit={filterBuilder.fieldDeepLimit}
         mapFieldName={filterBuilder.mapFieldName}
         mapFilterName={filterBuilder.mapFilterName}
-        rule={controlled ? filterBuilder.rule : filterGroup}
-        onChange={(newRule) => {
+        filterRule={realRule}
+        onRuleChange={(newRule) => {
           onRuleChange?.({
             rule: newRule,
             predicate: createFilterPredicate({
               schema: filterBuilder.schema,
-              filterList,
-              rule: newRule,
+              filterFnList,
+              filterRule: newRule,
             }),
           });
           if (!controlled) {

diff --git a/packages/playground/src/filter/use-advanced-filter.ts b/packages/playground/src/filter/use-advanced-filter.ts
@@ -18,7 +18,7 @@ export type UseAdvancedFilterProps<Data = unknown> =
  * ```tsx
  * const { rule, predicate, openFilter } = useFilter({
  *   schema: schema,
- *   filterList: filterList,
+ *   filterFnList: filterFnList,
  * });
  *
  * await openFilter();
@@ -57,8 +57,8 @@ export const useAdvancedFilter = <Data>(
     rule,
     predicate: createFilterPredicate({
       schema: options.schema,
-      filterList: options.filterList,
-      rule,
+      filterFnList: options.filterFnList,
+      filterRule: rule,
     }),
     openFilterDialog: async ({
       abortSignal,
@@ -77,7 +77,7 @@ export const useAdvancedFilter = <Data>(
         const data = await openFlattenFilterDialog({
           filterBuilder: {
             schema: options.schema,
-            filterList: options.filterList,
+            filterFnList: options.filterFnList,
             fieldDeepLimit: options.fieldDeepLimit,
             defaultRule: rule,
           },