Fix auto scroll behavior of the command bar

InseeFrLab · Oct 7, 2023 · d493fa9 · d493fa9
1 parent 3d188a1
commit d493fa9
Showing 1 changed file with 26 additions and 25 deletions.
diff --git a/web/src/ui/shared/CommandBar.tsx b/web/src/ui/shared/CommandBar.tsx
@@ -1,5 +1,5 @@
 import { tss } from "ui/theme";
-import { useReducer, useEffect, memo, useState, type ReactNode } from "react";
+import { useReducer, memo, useState, type ReactNode } from "react";
 import { useDomRect } from "powerhooks/useDomRect";
 import { CircularProgress } from "onyxia-ui/CircularProgress";
 import { IconButton, Icon, Button } from "ui/theme";
@@ -10,6 +10,9 @@ import { Dialog } from "onyxia-ui/Dialog";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import { declareComponentKeys } from "i18nifty";
 import { useTranslation } from "ui/i18n";
+import { useConst } from "powerhooks/useConst";
+import { Evt } from "evt";
+import { useEvt } from "evt/hooks";
 
 export type CommandBarProps = {
     className?: string;
@@ -45,34 +48,32 @@ export const CommandBar = memo((props: CommandBarProps) => {
 
     const panelRef = useStateRef<HTMLDivElement>(null);
 
-    const [{ isExpended, expendCount }, toggleIsExpended] = useReducer(
-        ({ isExpended, expendCount }) => ({
-            "isExpended": !isExpended,
-            "expendCount": expendCount + 1
-        }),
-        {
-            "isExpended": false,
-            "expendCount": 0
-        }
-    );
+    const [isExpended, toggleIsExpended] = useReducer(isExpended => !isExpended, false);
+
+    {
+        const evtIsExpended = useConst(() => Evt.create<boolean>(isExpended));
 
-    useEffect(() => {
-        if (!isExpended) {
-            return;
-        }
+        evtIsExpended.state = isExpended;
 
-        const panelElement = panelRef.current;
+        useEvt(
+            ctx =>
+                evtIsExpended.attachOnce(
+                    isExpended => isExpended,
+                    ctx,
+                    () => {
+                        const panelElement = panelRef.current;
 
-        assert(panelElement !== null);
+                        assert(panelElement !== null);
 
-        panelElement.scroll({
-            "top": panelElement.scrollHeight,
-            "behavior": "smooth"
-        });
-    }, [
-        expendCount >= 1,
-        JSON.stringify(entries.map(({ resp }) => (resp === undefined ? "x" : "o")))
-    ]);
+                        panelElement.scroll({
+                            "top": panelElement.scrollHeight,
+                            "behavior": "smooth"
+                        });
+                    }
+                ),
+            [JSON.stringify(entries.map(({ resp }) => (resp === undefined ? "x" : "o")))]
+        );
+    }
 
     const { cx, classes } = useStyles({
         maxHeight,