* dropdown: add more floating-ui options to dropdown menu.

easysoft · Nov 8, 2024 · 6d86b8f · 6d86b8f
1 parent 6adea53
commit 6d86b8f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/lib/dropdown/src/component/dropdown-menu.tsx b/lib/dropdown/src/component/dropdown-menu.tsx
@@ -18,6 +18,9 @@ export class DropdownMenu<T extends DropdownMenuOptions = DropdownMenuOptions> e
         defaultNestedShow: false,
         expandOnSearch: false,
         nestedSearch: false,
+        flip: false,
+        shift: true,
+        offset: 1,
     };
 
     static inheritNestedProps = [...SearchMenu.inheritNestedProps, 'container', 'tree'];
@@ -56,19 +59,24 @@ export class DropdownMenu<T extends DropdownMenuOptions = DropdownMenuOptions> e
         }
 
         let {maxHeight} = this.props;
+        const {flip: flipSetting, shift: shiftSetting, offset: offsetSetting} = this.props;
         computePosition(trigger, element, {
             placement: this.props.placement,
-            middleware: [flip(), shift(), offset(1), size({
-                apply({availableWidth, availableHeight}) {
-                    if (maxHeight) {
-                        const [maxHeightVal, unit] = parseSize(maxHeight);
-                        maxHeight = Math.min(unit === '%' ? (maxHeightVal *  window.innerHeight) : maxHeightVal, availableHeight - 2);
-                    } else {
-                        maxHeight = availableHeight;
-                    }
-                    $element.css({maxHeight, maxWidth: availableWidth - 2});
-                },
-            })],
+            middleware: [
+                flipSetting ? flip() : null,
+                shiftSetting ? shift(typeof shiftSetting === 'object' ? shiftSetting : undefined) : null,
+                offset(offsetSetting),
+                size({
+                    apply({availableWidth, availableHeight}) {
+                        if (maxHeight) {
+                            const [maxHeightVal, unit] = parseSize(maxHeight);
+                            maxHeight = Math.min(unit === '%' ? (maxHeightVal *  window.innerHeight) : maxHeightVal, availableHeight - 2);
+                        } else {
+                            maxHeight = availableHeight;
+                        }
+                        $element.css({maxHeight, maxWidth: availableWidth - 2});
+                    },
+                })],
         }).then(({x, y}) => {
             $element.css({
                 left: x,

diff --git a/lib/dropdown/src/types/dropdown-menu-options.ts b/lib/dropdown/src/types/dropdown-menu-options.ts
@@ -1,4 +1,4 @@
-import type {Placement} from '@floating-ui/dom';
+import type {Placement, ShiftOptions, Derivable, OffsetOptions} from '@floating-ui/dom';
 import type {SearchMenuOptions} from '@zui/menu';
 import type {Dropdown} from '../vanilla';
 
@@ -7,4 +7,7 @@ export interface DropdownMenuOptions extends SearchMenuOptions {
     relativeTarget?: unknown;
     tree?: boolean;
     dropdown?: Dropdown;
+    flip?: boolean;
+    shift?: boolean | ShiftOptions | Derivable<ShiftOptions>;
+    offset?: OffsetOptions;
 }