feat(web): scrolling to selected model or group on Schema or Content …

…page (#1139) feat: scroll to selected model or group Co-authored-by: Nour Balaha <[email protected]>
reearth · May 7, 2024 · 38193cc · 38193cc
1 parent 1ba220a
commit 38193cc
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 17 deletions.
diff --git a/web/src/components/molecules/Model/ModelsList/GroupsList.tsx b/web/src/components/molecules/Model/ModelsList/GroupsList.tsx
@@ -28,6 +28,24 @@ const GroupsList: React.FC<Props> = ({
     return selectedKey ? [selectedKey] : [];
   }, [selectedKey]);
 
+  const scrollToSelected = useCallback(
+    (node: HTMLElement | null) => node?.scrollIntoView({ block: "nearest" }),
+    [],
+  );
+
+  const items = useMemo(
+    () =>
+      groups?.map(group => ({
+        label: (
+          <div ref={group.id === selectedKey ? scrollToSelected : undefined}>
+            {collapsed ? <Icon icon="dot" /> : group.name}
+          </div>
+        ),
+        key: group.id,
+      })),
+    [collapsed, groups, scrollToSelected, selectedKey],
+  );
+
   const handleClick = useCallback(
     (e: MenuInfo) => {
       onGroupSelect?.(e.key);
@@ -54,10 +72,7 @@ const GroupsList: React.FC<Props> = ({
           selectedKeys={selectedKeys}
           mode={collapsed ? "vertical" : "inline"}
           collapsed={collapsed}
-          items={groups?.map(group => ({
-            label: collapsed ? <Icon icon="dot" /> : group.name,
-            key: group.id,
-          }))}
+          items={items}
           onClick={handleClick}
         />
       </MenuWrapper>

diff --git a/web/src/components/molecules/Model/ModelsList/ModelsList.tsx b/web/src/components/molecules/Model/ModelsList/ModelsList.tsx
@@ -49,19 +49,30 @@ const ModelsList: React.FC<Props> = ({
     return selectedKey ? [selectedKey] : [];
   }, [selectedKey]);
 
-  const items = useMemo(() => {
-    return models
-      ?.sort((a, b) => {
-        if (a.order !== undefined && b.order !== undefined) {
-          return a.order - b.order;
-        }
-        return 0;
-      })
-      .map(model => ({
-        label: collapsed ? <Icon icon="dot" /> : model.name,
-        key: model.id,
-      }));
-  }, [collapsed, models]);
+  const scrollToSelected = useCallback(
+    (node: HTMLElement | null) => node?.scrollIntoView({ block: "nearest" }),
+    [],
+  );
+
+  const items = useMemo(
+    () =>
+      models
+        ?.sort((a, b) => {
+          if (a.order !== undefined && b.order !== undefined) {
+            return a.order - b.order;
+          }
+          return 0;
+        })
+        .map(model => ({
+          label: (
+            <div ref={model.id === selectedKey ? scrollToSelected : undefined}>
+              {collapsed ? <Icon icon="dot" /> : model.name}
+            </div>
+          ),
+          key: model.id,
+        })),
+    [collapsed, models, scrollToSelected, selectedKey],
+  );
 
   return (
     <SchemaStyledMenu>