feat(directory): add serach box

Version

@@ -1 +1 @@
-3.6.9
+3.6.10

directory/Version

@@ -1 +1 @@
-1.2.10
+1.2.15

directory/src/component/scss/dropdown.module.scss

@@ -64,10 +64,10 @@
   }
 
   .menu {
+    scrollbar-gutter: stable;
     opacity: 0;
     position: absolute;
     background-color: var(--root-background-color);
-    min-width: 38.2vw;
     width: max-content;
     max-height: 61.8vh;
     max-width: 61.8vw;

directory/src/component/scss/search_box.module.scss

@@ -0,0 +1,77 @@
+.search-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  margin: 0.5rem;
+
+  .icon {
+    position: absolute;
+    width: 0.8rem;
+    height: 0.8rem;
+    display: inline-block;
+    vertical-align: middle;
+    border-left: 0.15em solid var(--text-color-full);
+    border-bottom: 0.15em solid var(--text-color-full);
+    border-right: 0.15em solid var(--text-color-full);
+    border-top: 0.15em solid var(--text-color-full);
+    transform: translate(0rem, 0.2rem) rotate(-45deg);
+  }
+
+  .icon_dot {
+    position: absolute;
+    background-color: var(--text-color-full);
+    width: 0.1em;
+    height: 0.4em;
+    transform: translate(1.2rem, 1.2rem) rotate(-45deg);
+  }
+
+  .input {
+    flex-grow: 1;
+    font-size: 1.5rem;
+    width: 100%;
+    margin-left: 2rem;
+    padding-right: 2rem;
+    background-color: transparent;
+    border: unset;
+    border-bottom: 0.15em solid var(--home-item-outline-color);
+    color: var(--text-color);
+    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+  }
+
+  .input:focus, .input:hover {
+    outline: none;
+    border-bottom: 0.15em solid var(--text-color);
+  }
+
+  .icon_clear {
+    position: absolute;
+    right: 1rem;
+    width: 2rem;
+    height: 2rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+    visibility: hidden;
+
+    &.active {
+      opacity: 1;
+      visibility: unset;
+    }
+
+    .line {
+      position: absolute;
+      width: 2rem;
+      height: 0.2rem;
+      background-color: var(--text-color);
+
+      &:nth-child(1) {
+        transform: translate(0rem, 0.8rem) rotate(45deg);
+      }
+
+      &:nth-child(2) {
+        transform: translate(0rem, 0.8rem) rotate(-45deg);
+      }
+    }
+  }
+}

directory/src/component/search_box.jsx

@@ -0,0 +1,49 @@
+import React, {
+  useState,
+} from 'react'
+import PropTypes from 'prop-types';
+import classes from './scss/search_box.module.scss'
+import { useI18n } from '@/state/language';
+
+export default function SearchBox(props) {
+  const { i18n } = useI18n()
+  const [searchField, setSearchField] = useState('');
+
+  const filterBySearch = (event) => {
+    const query = event.target.value;
+    props.handleOnChange(query);
+    setSearchField(query);
+  };
+
+  return (
+    <>
+      <section className={`${classes['search-box']} ${props.className ? props.className : ''}`}>
+        <section className={classes.icon} />
+        <section className={classes.icon_dot} />
+        <input
+          type="text"
+          className={classes.input}
+          placeholder={i18n(props.altText)}
+          onChange={filterBySearch}
+          value={searchField} />
+        <section
+          className={`${classes.icon_clear} ${searchField === '' ? '' : classes.active}`}
+          onClick={() => {
+            setSearchField('');
+            props.handleOnChange('');
+          }}
+        >
+          <section className={classes.line} />
+          <section className={classes.line} />
+        </section>
+      </section>
+    </>
+  )
+}
+SearchBox.propTypes = {
+  className: PropTypes.string,
+  text: PropTypes.string,
+  altText: PropTypes.string,
+  handleOnChange: PropTypes.func,
+  searchField: PropTypes.string,
+};

directory/src/i18n.json

@@ -150,6 +150,10 @@
       "fast_navigation": {
         "zh-CN": "🧭 快速导航",
         "en-US": "🧭 Fast Navigation"
+      },
+      "search_by_name": {
+        "zh-CN": "名字搜索",
+        "en-US": "Search by Name"
       }
     }
 }

directory/src/routes/path/Home.jsx

@@ -22,6 +22,7 @@ import CharIcon from '@/component/char_icon';
 import Border from '@/component/border';
 import useUmami from '@parcellab/react-use-umami';
 import Switch from '@/component/switch';
+import SearchBox from '@/component/search_box';
 
 const voiceOnAtom = atomWithStorage('voiceOn', false)
 let lastVoiceState = 'ended'
@@ -42,6 +43,9 @@ export default function Home() {
   const [voiceSrc, setVoiceSrc] = useState(null)
   const [voiceReplay, setVoiceReplay] = useState(false)
   const { language } = useLanguage()
+  const [navigationList, setNavigationList] = useState([])
+  const [searchField, setSearchField] = useState('');
+  const [updatedList, setUpdatedList] = useState([])
 
   useEffect(() => {
     setTitle('dynamic_compile')
@@ -102,8 +106,41 @@ export default function Home() {
         })
       }
     }
-    setFastNavigation(list)
+    setNavigationList(list)
-  }, [currentTab, fastNavigateDict, isShown, language, setFastNavigation])
+    setUpdatedList(list)
+  }, [fastNavigateDict, isShown, language])
+
+  useEffect(() => {
+    const list = navigationList.filter((item) => { return (item.name.toLowerCase().indexOf(searchField.toLowerCase()) !== -1) || (item.type === 'date'); })
+    const newList = []
+    for (let i = 0; i < list.length - 1; i++) {
+      const firstType = list[i].type
+      const secondType = list[i + 1].type
+      if (firstType === 'date' && secondType === 'date') {
+        continue
+      }
+      newList.push(list[i])
+    }
+    if (list.length > 0 && list[list.length - 1].type !== 'date') {
+      newList.push(list[list.length - 1])
+    }
+    setUpdatedList(newList)
+  }, [navigationList, searchField])
+
+  useEffect(() => {
+    setFastNavigation([
+      {
+        type: "custom",
+        component: <SearchBox
+          key="search-box"
+          altText={"search_by_name"}
+          handleOnChange={(e) => { setSearchField(e) }}
+          searchField={searchField}
+        />
+      },
+      ...updatedList
+    ])
+  }, [searchField, setFastNavigation, updatedList])
 
   const handleVoicePlay = useCallback((src) => {
     if (!voiceOn) {

directory/src/routes/path/Operator.jsx

@@ -67,7 +67,8 @@ export default function Operator() {
   const {
     setTitle,
     setTabs,
-    setHeaderIcon
+    setHeaderIcon,
+    setFastNavigation
   } = useHeader()
   const { setExtraArea } = useAppbar()
   const [config, setConfig] = useState(null)
@@ -110,7 +111,8 @@ export default function Operator() {
 
   useEffect(() => {
     setExtraArea([])
-  }, [setExtraArea])
+    setFastNavigation([])
+  }, [setExtraArea, setFastNavigation])
 
   useEffect(() => {
     if (backgrounds.length > 0) setCurrentBackground(backgrounds[0])

package.json

@@ -21,35 +21,35 @@
     "vite:directory:preview": "vite preview"
   },
   "devDependencies": {
-    "@perfsee/rollup": "^1.6.0",
+    "@perfsee/rollup": "^1.8.2",
-    "@types/react": "^18.2.0",
+    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.1",
+    "@types/react-dom": "^18.2.6",
-    "@vitejs/plugin-react-swc": "^3.3.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.39.0",
+    "eslint": "^8.43.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "prop-types": "^15.8.1",
-    "rollup": "^3.21.2",
+    "rollup": "^3.25.1",
-    "sass": "^1.62.1",
+    "sass": "^1.63.6",
-    "stylelint": "^15.6.0",
+    "stylelint": "^15.9.0",
     "stylelint-config-standard": "^30.0.1",
     "stylelint-config-standard-scss": "^7.0.1",
-    "vite": "^4.3.3"
+    "vite": "^4.3.9"
   },
   "dependencies": {
     "@parcellab/react-use-umami": "^2.0.1",
-    "dotenv": "^16.0.3",
+    "dotenv": "^16.3.1",
-    "jotai": "^2.0.4",
+    "jotai": "^2.2.1",
     "node-fetch": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
-    "react-router-dom": "^6.11.0",
+    "react-router-dom": "^6.14.0",
     "react-simple-typewriter": "^5.0.1",
     "reset-css": "^5.0.1",
     "sharp": "^0.31.3",
-    "yaml": "^2.2.2"
+    "yaml": "^2.3.1"
   }
 }