Merge pull request #2 from fedorovvvv/dynamic-autoUpdate

Dynamic auto update

Author: fedorovvvv

README.md

@@ -110,11 +110,11 @@ Partial<[Options](https://floating-ui.com/docs/autoUpdate#options)>
 ```ts
 /**
 * false: Don't initialize autoUpdate;
-* object: Initialization with its own parameters;
-* undefined: Standard autoUpdate values from the documentation;
-* @default undefined
+* true: Standard autoUpdate values from the documentation;
+* object: All as in the autoUpdate documentation. Your parameters are added to the default ones;
+* @default true
 */
-autoUpdate?: false | Partial<Options>
+autoUpdate?: boolean | Partial<Options>
 ```
 
 

src/lib/index.ts

@@ -9,11 +9,11 @@ export type ComputeConfig = Omit<ComputePositionConfig, "platform"> & {
     onComputed?: (computed: ComputePositionReturn) => void
     /**
     * false: Don't initialize autoUpdate;
-    * object: Initialization with its own parameters;
-    * undefined: Standard autoUpdate values from the documentation;
-    * @default undefined
+    * true: Standard autoUpdate values from the documentation;
+    * object: All as in the autoUpdate documentation. Your parameters are added to the default ones;
+    * @default true
     */
-    autoUpdate?: false | Partial<Options>
+    autoUpdate?: boolean | Partial<Options>
 };
 export type UpdatePosition = (contentOptions?: Omit<ComputeConfig, 'autoUpdate'>) => void;
 export type ReferenceAction = (node: HTMLElement) => void;
@@ -23,11 +23,18 @@ export type ArrowOptions = { padding?: Padding, element: Writable<HTMLElement> }
 export function createFloatingActions(initOptions?: ComputeConfig): [ReferenceAction, ContentAction, UpdatePosition] {
     let referenceElement: ReferenceElement;
     let floatingElement: FloatingElement;
+    const defaultOptions:Partial<ComputeConfig> = {
+        autoUpdate: true
+    }
     let options: ComputeConfig | undefined = initOptions;
 
+    const getOptions = (mixin?:object):ComputeConfig => {
+        return {...defaultOptions, ...(initOptions || {}), ...(mixin || {}) }
+    }
+
     const updatePosition:UpdatePosition = (updateOptions) => {
         if (referenceElement && floatingElement) {
-            options = { ...initOptions, ...updateOptions };
+            options = getOptions(updateOptions);
             computePosition(referenceElement, floatingElement, options)
                 .then(v => {
                     Object.assign(floatingElement.style, {
@@ -48,15 +55,29 @@ export function createFloatingActions(initOptions?: ComputeConfig): [ReferenceAc
     const contentAction: ContentAction = (node, contentOptions) => {
         let autoUpdateDestroy:ReturnType<typeof _autoUpdate> | undefined
         floatingElement = node;
-        options = { ...initOptions, ...contentOptions };
-        updatePosition();
-        if(options.autoUpdate !== false) {
-            autoUpdateDestroy = _autoUpdate(referenceElement, floatingElement, () => updatePosition(), options.autoUpdate);
+        options = getOptions(contentOptions);
+        updatePosition(contentOptions);
+        const destroyAutoUpdate = () => {
+            if (autoUpdateDestroy) {
+                autoUpdateDestroy()
+                autoUpdateDestroy = undefined
+            }
+        }
+        const initAutoUpdate = ({autoUpdate} = options || {}):typeof autoUpdateDestroy => {
+            destroyAutoUpdate()
+            if(autoUpdate !== false) {
+                return _autoUpdate(referenceElement, floatingElement, () => updatePosition(options), (autoUpdate === true ? {} : autoUpdate));
+            }
+            return
         }
+        autoUpdateDestroy = initAutoUpdate()
         return {
-            update: updatePosition,
+            update(contentOptions:Parameters<typeof contentAction>[1]) {
+                updatePosition(contentOptions)
+                autoUpdateDestroy = initAutoUpdate(contentOptions)
+            },
             destroy() {
-                autoUpdateDestroy && autoUpdateDestroy()
+                destroyAutoUpdate()
             }
         }
     }

src/routes/index.svelte

@@ -20,11 +20,15 @@
                     });
                 },
             })
-        ]
+        ],
     });
+    let autoUpdate = false
 </script>
 
 <main>
+    <button on:click="{() => autoUpdate = !autoUpdate}">
+        toggle autoUpdate: {autoUpdate}
+    </button>
     <div class="wrapper">
         <button
             on:click='{() => opened = !opened}'
@@ -33,7 +37,9 @@
             Show/Hide
         </button>
         {#if opened}
-            <ul use:floatingContent>
+            <ul use:floatingContent="{{
+                autoUpdate
+            }}">
                 <li>OMG!</li>
                 <li>NONONO!</li>
             </ul>
@@ -50,6 +56,7 @@
     }
     main {
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         height: 500px;