新增长按收藏列表名自动跳转列表顶部的功能

publish/changeLog.md

@@ -1,6 +1,7 @@
 ### 新增
 
-- 新增自定义源，但需要注意的是，移动端自定义源的环境与PC端不同，某些API不可用
+- 新增自定义源（实验性功能），但需要注意的是，移动端自定义源的环境与PC端不同，某些API不可用
+- 新增长按收藏列表名自动跳转列表顶部的功能
 
 ### 优化
 

src/screens/Home/Views/Mylist/MusicList/ActiveList.tsx

@@ -14,12 +14,13 @@ import { LIST_IDS } from '@/config/constant'
 
 export interface ActiveListProps {
   onShowSearchBar: () => void
+  onScrollToTop: () => void
 }
 export interface ActiveListType {
   setVisibleBar: (visible: boolean) => void
 }
 
-export default forwardRef<ActiveListType, ActiveListProps>(({ onShowSearchBar }, ref) => {
+export default forwardRef<ActiveListType, ActiveListProps>(({ onShowSearchBar, onScrollToTop }, ref) => {
   const theme = useTheme()
   const currentListId = useActiveListId()
   let currentListName = currentListId == LIST_IDS.TEMP ? global.i18n.t(`list_${LIST_IDS.TEMP}`) : listState.allList.find(l => l.id === currentListId)?.name ?? ''
@@ -42,7 +43,7 @@ export default forwardRef<ActiveListType, ActiveListProps>(({ onShowSearchBar },
   }, [])
 
   return (
-    <TouchableOpacity onPress={showList} style={{ ...styles.currentList, opacity: visibleBar ? 1 : 0, borderBottomColor: theme['c-border-background'] }}>
+    <TouchableOpacity onPress={showList} onLongPress={onScrollToTop} style={{ ...styles.currentList, opacity: visibleBar ? 1 : 0, borderBottomColor: theme['c-border-background'] }}>
       <Icon style={styles.currentListIcon} color={theme['c-button-font']} name="chevron-right" size={12} />
       <Text numberOfLines={1} style={styles.currentListText} color={theme['c-button-font']}>{currentListName}</Text>
       <TouchableOpacity style={styles.currentListBtns} onPress={onShowSearchBar}>

src/screens/Home/Views/Mylist/MusicList/List.tsx

@@ -28,6 +28,7 @@ export interface ListType {
   selectAll: (isAll: boolean) => void
   getSelectedList: () => LX.List.ListMusics
   scrollToInfo: (info: LX.Music.MusicInfo) => void
+  scrollToTop: () => void
 }
 
 const usePlayIndex = () => {
@@ -91,6 +92,12 @@ const List = forwardRef<ListType, ListProps>(({ onShowMenu, onMuiltSelectMode, o
         flatListRef.current?.scrollToIndex({ index: Math.floor(index / (rowInfo.current.rowNum ?? 1)), viewPosition: 0.3, animated: true })
       })
     },
+    scrollToTop() {
+      flatListRef.current?.scrollToOffset({
+        offset: 0,
+        animated: true,
+      })
+    },
   }))
 
   useEffect(() => {

src/screens/Home/Views/Mylist/MusicList/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 
 import listState from '@/store/list/state'
 import ListMenu, { type ListMenuType, type Position, type SelectInfo } from './ListMenu'
@@ -31,15 +31,15 @@ export default () => {
   const isShowSearchBarModeBar = useRef(false)
   // console.log('render index list')
 
-  const hancelMultiSelect = () => {
+  const hancelMultiSelect = useCallback(() => {
     if (isShowSearchBarModeBar.current) {
       multipleModeBarRef.current?.setVisibleBar(false)
     } else activeListRef.current?.setVisibleBar(false)
     isShowMultipleModeBar.current = true
     multipleModeBarRef.current?.show()
     listRef.current?.setIsMultiSelectMode(true)
-  }
-  const hancelExitSelect = () => {
+  }, [])
+  const hancelExitSelect = useCallback(() => {
     if (isShowSearchBarModeBar.current) {
       multipleModeBarRef.current?.setVisibleBar(true)
     } else activeListRef.current?.setVisibleBar(true)
@@ -47,13 +47,16 @@ export default () => {
     multipleModeBarRef.current?.exitSelectMode()
     listRef.current?.setIsMultiSelectMode(false)
     isShowMultipleModeBar.current = false
-  }
-  const hancelSwitchSelectMode = (mode: SelectMode) => {
+  }, [])
+  const hancelSwitchSelectMode = useCallback((mode: SelectMode) => {
     multipleModeBarRef.current?.setSwitchMode(mode)
     listRef.current?.setSelectMode(mode)
-  }
+  }, [])
+  const hancelScrollToTop = useCallback(() => {
+    listRef.current?.scrollToTop()
+  }, [])
 
-  const showMenu = (musicInfo: LX.Music.MusicInfo, index: number, position: Position) => {
+  const showMenu = useCallback((musicInfo: LX.Music.MusicInfo, index: number, position: Position) => {
     listMenuRef.current?.show({
       musicInfo,
       index,
@@ -61,15 +64,15 @@ export default () => {
       single: false,
       selectedList: listRef.current!.getSelectedList(),
     }, position)
-  }
-  const handleShowSearch = () => {
+  }, [])
+  const handleShowSearch = useCallback(() => {
     isShowSearchBarModeBar.current = true
     if (isShowMultipleModeBar.current) {
       multipleModeBarRef.current?.setVisibleBar(false)
     } else activeListRef.current?.setVisibleBar(false)
     listSearchBarRef.current?.show()
-  }
-  const handleExitSearch = () => {
+  }, [])
+  const handleExitSearch = useCallback(() => {
     isShowSearchBarModeBar.current = false
     listMusicSearchRef.current?.hide()
     listSearchBarRef.current?.hide()
@@ -77,35 +80,35 @@ export default () => {
     if (isShowMultipleModeBar.current) {
       multipleModeBarRef.current?.setVisibleBar(true)
     } else activeListRef.current?.setVisibleBar(true)
-  }
-  const handleScrollToInfo = (info: LX.Music.MusicInfo) => {
+  }, [])
+  const handleScrollToInfo = useCallback((info: LX.Music.MusicInfo) => {
     listRef.current?.scrollToInfo(info)
     handleExitSearch()
-  }
-  const onLayout = (e: LayoutChangeEvent) => {
+  }, [])
+  const onLayout = useCallback((e: LayoutChangeEvent) => {
     layoutHeightRef.current = e.nativeEvent.layout.height
-  }
+  }, [])
 
-  const handleAddMusic = (info: SelectInfo) => {
+  const handleAddMusic = useCallback((info: SelectInfo) => {
     if (info.selectedList.length) {
       listMusicMultiAddRef.current?.show({ selectedList: info.selectedList, listId: info.listId, isMove: false })
     } else {
       listMusicAddRef.current?.show({ musicInfo: info.musicInfo, listId: info.listId, isMove: false })
     }
-  }
-  const handleMoveMusic = (info: SelectInfo) => {
+  }, [])
+  const handleMoveMusic = useCallback((info: SelectInfo) => {
     if (info.selectedList.length) {
       listMusicMultiAddRef.current?.show({ selectedList: info.selectedList, listId: info.listId, isMove: true })
     } else {
       listMusicAddRef.current?.show({ musicInfo: info.musicInfo, listId: info.listId, isMove: true })
     }
-  }
+  }, [])
 
 
   return (
     <View style={styles.container}>
       <View style={{ zIndex: 2 }}>
-        <ActiveList ref={activeListRef} onShowSearchBar={handleShowSearch} />
+        <ActiveList ref={activeListRef} onShowSearchBar={handleShowSearch} onScrollToTop={hancelScrollToTop} />
         <MultipleModeBar
           ref={multipleModeBarRef}
           onSwitchMode={hancelSwitchSelectMode}