chore: upgrade fn-sphere to v0.5

yjs · Aug 28, 2024 · 0ff5eca · 0ff5eca
1 parent b6c1231
commit 0ff5eca
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@blocksuite/sync": "^0.16.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@fn-sphere/filter": "^0.4.0",
+    "@fn-sphere/filter": "^0.5.0",
     "@mui/material": "^5.16.7",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

diff --git a/src/components/filter-button.tsx b/src/components/filter-button.tsx
@@ -15,8 +15,8 @@ import {
 import {
   createFlattenFilterGroup,
   filterFnList,
+  filterTheme,
   schema,
-  themeSpec,
 } from "./filter-sphere";
 import { Button } from "./ui/button";
 import {
@@ -52,25 +52,25 @@ export function FilterButton() {
   };
 
   return (
-    <FilterSphereProvider theme={themeSpec} context={context}>
-      <Dialog
-        open={open}
-        onOpenChange={(open) => {
-          setOpen(open);
-          if (open) {
-            return;
-          }
-          updateFilter();
-        }}
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        setOpen(open);
+        if (open) {
+          return;
+        }
+        updateFilter();
+      }}
+    >
+      <Button
+        variant={isFilterEnabled ? "default" : "secondary"}
+        disabled={!config.parseYDoc}
+        onClick={handleClick}
       >
-        <Button
-          variant={isFilterEnabled ? "default" : "secondary"}
-          disabled={!config.parseYDoc}
-          onClick={handleClick}
-        >
-          <Filter className="mr-2 h-4 w-4" />
-          Filter {isFilterEnabled ? `(${countOfFilterData})` : ""}
-        </Button>
+        <Filter className="mr-2 h-4 w-4" />
+        Filter {isFilterEnabled ? `(${countOfFilterData})` : ""}
+      </Button>
+      <FilterSphereProvider theme={filterTheme} context={context}>
         <FilterDialog
           onConfirm={() => {
             setOpen(false);
@@ -80,8 +80,8 @@ export function FilterButton() {
             reset();
           }}
         />
-      </Dialog>
-    </FilterSphereProvider>
+      </FilterSphereProvider>
+    </Dialog>
   );
 }
 
@@ -93,15 +93,15 @@ function FilterDialog({
   onReset: () => void;
 }) {
   return (
-    <DialogContent>
+    <DialogContent className={"max-h-[90vh] max-w-xl overflow-y-auto"}>
       <DialogHeader>
         <DialogTitle>Filter</DialogTitle>
         <DialogDescription></DialogDescription>
       </DialogHeader>
       <div className="grid grid-cols-4 items-center gap-4">
         <FilterBuilder />
       </div>
-      <DialogFooter>
+      <DialogFooter className="relative">
         <Button
           variant="secondary"
           onClick={() => {
@@ -117,18 +117,21 @@ function FilterDialog({
         >
           Confirm
         </Button>
-      </DialogFooter>
-      <span className="absolute bottom-2 left-2 text-xs text-muted-foreground opacity-70">
-        Powered by&nbsp;
-        <a
-          href="https://www.npmjs.com/package/@fn-sphere/filter"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hover:underline"
+        <span
+          className="absolute bottom-0 left-0 text-xs text-muted-foreground opacity-70"
+          style={{ marginLeft: 0 }}
         >
-          Filter Sphere
-        </a>
-      </span>
+          Powered by&nbsp;
+          <a
+            href="https://www.npmjs.com/package/@fn-sphere/filter"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:underline"
+          >
+            Filter Sphere
+          </a>
+        </span>
+      </DialogFooter>
     </DialogContent>
   );
 }
diff --git a/src/components/filter-sphere.tsx b/src/components/filter-sphere.tsx
@@ -3,9 +3,9 @@ import {
   createFilterTheme,
   createSingleFilter,
   defineTypedFn,
+  FilterTheme,
   presetFilter,
   SingleFilter,
-  ThemeSpec,
   useFilterRule,
   useRootRule,
   useView,
@@ -98,7 +98,7 @@ const componentsSpec = {
         onValueChange={handleChange}
         disabled={disabled}
       >
-        <SelectTrigger>
+        <SelectTrigger className="min-w-24">
           <SelectValue className={className} />
         </SelectTrigger>
         <SelectContent>
@@ -111,7 +111,7 @@ const componentsSpec = {
       </Select>
     );
   },
-} satisfies Partial<ThemeSpec["components"]>;
+} satisfies Partial<FilterTheme["components"]>;
 
 export type SingleFilterRuleProps = {
   rule: SingleFilter;
@@ -217,9 +217,9 @@ const templatesSpec = {
       </Button>
     );
   },
-} satisfies Partial<ThemeSpec["templates"]>;
+} satisfies Partial<FilterTheme["templates"]>;
 
-export const themeSpec = createFilterTheme({
+export const filterTheme = createFilterTheme({
   components: componentsSpec,
   templates: templatesSpec,
 });