fix: Fix menu active issue.

Author: jaywcjlove

package.json

@@ -36,7 +36,7 @@
     "react-dom": "17.0.2",
     "react-redux": "7.2.6",
     "react-router-dom": "6.2.1",
-    "uiw": "4.9.10"
+    "uiw": "4.9.11"
   },
   "engines": {
     "node": ">=14.0.0"

src/components/Search.tsx

@@ -1,12 +1,16 @@
 import { useState, Fragment } from 'react';
 import Input from '@uiw/react-input';
 import Button from '@uiw/react-button';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
-import { Dispatch } from '../models';
+import { Dispatch, RootState } from '../models';
 import styles from './Search.module.less';
 
 export default function Search() {
+  const { package: pkg, pkgname } = useSelector(({ global }: RootState) => ({
+    package: global.package,
+    pkgname: global.pkgname,
+  }));
   const dispatch = useDispatch<Dispatch>();
   const [value, setValue] = useState<string>();
   const navigate = useNavigate();
@@ -32,11 +36,13 @@ export default function Search() {
       label: '[email protected]',
     },
   ]);
+  const name = pkg && pkg.name ? `${pkg.name}@${pkg.version}` : pkgname;
   return (
     <Fragment>
       <Input
         className={styles.input}
         size="large"
+        defaultValue={name}
         preIcon="search"
         onChange={(e) => {
           setValue(e.target.value);

src/pages/Preview/DirectoryTrees.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import Menu, { MenuItemProps } from '@uiw/react-menu';
 import Tag from '@uiw/react-tag';
 import Loader from '@uiw/react-loader';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { RootState } from '../../models';
 import { Files } from '../../models/global';
 import styles from './DirectoryTrees.module.less';
@@ -66,19 +66,26 @@ function MeunItemView(props: { path?: string; filepath?: string; size?: number }
 }
 
 export default function DirectoryTrees() {
+  const location = useLocation();
   const { loading, files, pkgname } = useSelector(({ global, loading }: RootState) => ({
     loading: loading.effects.global.getDirectoryTrees,
     files: global.files,
     pkgname: global.pkgname,
   }));
 
+  const pathname = location.pathname.replace(new RegExp(`/pkg/${pkgname}/file`), '')
+
   function renderMenuItem(data: Files[] = [], menuItems: any = []) {
     data.forEach((item, idx) => {
       if (item.type === 'directory') {
+        const collapse = new RegExp(`^${item.path}`).test(pathname);
         menuItems.push(
           <Menu.SubMenu
             key={idx}
             icon="folder"
+            overlayProps={{
+              isOpen: collapse
+            }}
             style={{ color: '#1d64ce' }}
             text={item.path.replace(/^\//, '').replace(/(.+?).\//g, '')}
           >