fix: fold menu (#367)

Kanaries · Apr 8, 2024 · 70784d4 · 70784d4
1 parent c8dd5ed
commit 70784d4
Showing 1 changed file with 18 additions and 37 deletions.
diff --git a/packages/graphic-walker/src/components/selectContext/index.tsx b/packages/graphic-walker/src/components/selectContext/index.tsx
@@ -3,6 +3,7 @@ import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
 import { Float } from '@headlessui-float/react';
 import { blockContext } from '../../fields/fieldsContext';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 
 export interface ISelectContextOption {
     key: string;
@@ -40,70 +41,50 @@ const SelectContext: React.FC<ISelectContextProps> = (props) => {
         }
     }, [selected]);
 
-    const block = useContext(blockContext);
-
-    const middleware = useMemo(() => {
-        return [
-            {
-                name: 'blockContextTransform',
-                fn({ x, y }) {
-                    const blockRect = block.current?.getBoundingClientRect();
-                    const { x: offsetx, y: offsety } = blockRect ?? { x: 0, y: 0 };
-                    return {
-                        x: x - offsetx,
-                        y: y - offsety,
-                    };
-                },
-            },
-        ];
-    }, [block]);
-
     if (disable) {
         return <Fragment>{props.children}</Fragment>;
     }
 
     return (
-        <Listbox multiple value={selected} onChange={setSelected}>
-            <Float as="div" middleware={middleware} className={className}>
-                <div className="relative w-full flex items-center space-x-2">
-                    <span className="flex-1 block truncate text-start">{props.children}</span>
-                    <Listbox.Button className="grow-0 shrink-0 flex items-center relative">
+        <Popover>
+            <div className="relative w-full flex items-center space-x-2">
+                <span className="flex-1 block truncate text-start">{props.children}</span>
+                <PopoverTrigger asChild>
+                    <div className="grow-0 shrink-0 flex items-center relative">
                         <Cog6ToothIcon className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
                         {selected.length > 0 && (
                             <span className="absolute top-0 right-0 h-4 px-1 translate-x-1/2 -translate-y-1/2 scale-[67%] flex items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-normal pointer-events-none">
                                 {selected.length > 10 ? '10+' : selected.length}
                             </span>
                         )}
-                    </Listbox.Button>
-                </div>
-                <Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
-                    <Listbox.Options className="absolute mt-1 max-h-60 min-w-full overflow-auto rounded-md bg-popover text-popover-foreground py-1 text-base shadow-lg border focus:outline-none sm:text-sm">
+                    </div>
+                </PopoverTrigger>
+            </div>
+            <PopoverContent className="mt-1 max-h-60 w-fit overflow-auto rounded-md py-1 px-0 text-base sm:text-sm">
+                <Listbox multiple value={selected} onChange={setSelected}>
+                    <Listbox.Options static>
                         {options.map((option) => (
                             <Listbox.Option
                                 key={option.key}
-                                className={({ active }) =>
-                                    `relative cursor-default rounded-md mx-1 select-none py-2 pl-10 pr-4 ${
-                                        active ? 'bg-accent text-accent-foreground' : 'text-popover-foreground'
-                                    }`
-                                }
+                                className={`relative cursor-default rounded-md mx-1 select-none py-2 pl-10 pr-4 text-popover-foreground hover:bg-accent hover:text-accent-foreground`}
                                 value={option}
                             >
                                 {({ selected }) => (
                                     <>
                                         <span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>{option.label}</span>
-                                        {selected ? (
+                                        {selected && (
                                             <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-accent-foreground">
                                                 <CheckIcon className="h-5 w-5" aria-hidden="true" />
                                             </span>
-                                        ) : null}
+                                        )}
                                     </>
                                 )}
                             </Listbox.Option>
                         ))}
                     </Listbox.Options>
-                </Transition>
-            </Float>
-        </Listbox>
+                </Listbox>
+            </PopoverContent>
+        </Popover>
     );
 };