feat(interface): marquee for long text

CoroModLoader · Aug 28, 2023 · 568365c · 568365c
1 parent c8b814d
commit 568365c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/interface/package.json b/interface/package.json
@@ -16,6 +16,7 @@
     "@tabler/icons-react": "^2.32.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.0",
     "react-virtuoso": "^4.5.0"
   },
   "devDependencies": {

diff --git a/interface/pages/main.tsx b/interface/pages/main.tsx
@@ -2,7 +2,8 @@ import { Alert, Button, Divider, Flex, Modal, NavLink, ScrollArea, Stack, Tabs,
 import { useDebouncedValue, useDisclosure, useViewportSize } from "@mantine/hooks";
 import { Prism } from "@mantine/prism";
 import { IconEye, IconFileImport, IconHourglassEmpty, IconSearch, IconSettings, IconX } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import Marquee from "react-fast-marquee";
 import { Virtuoso } from "react-virtuoso";
 import { Settings } from "../components/settings";
 import create_root from "../src/react";
@@ -65,12 +66,21 @@ function Viewer()
                     itemContent={index =>
                     {
                         const file = filtered[index];
-
-                        return <NavLink
-                            label={file}
-                            active={selected === file}
-                            onClick={() => set_selected(file)}
-                        />;
+                        const long = file.length > 50;
+                        const active = selected === file;
+
+                        const Wrapping = active && long ? Marquee : Fragment;
+
+                        return <Wrapping
+                            pauseOnHover
+                            play={selected === file}
+                        >
+                            <NavLink
+                                label={file}
+                                active={active}
+                                onClick={() => set_selected(file)}
+                            />
+                        </Wrapping>;
                     }}
                 />
             </ScrollArea>

diff --git a/interface/yarn.lock b/interface/yarn.lock
@@ -2261,6 +2261,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-fast-marquee@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.0.tgz#3749a9d0f522234e1e3ab776f105cd0accd76a4a"
+  integrity sha512-jtuwT9SNjrqxnE7lGZ8mTL1I8Q4+9G4aBta2p+y2Pa3SjR17QROblwrLICyM8rbjQFHgHawTHcaH9HvoVO2NOA==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"