diff --git a/publish/changeLog.md b/publish/changeLog.md index 87cae20..d9f1918 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -1,6 +1,7 @@ ### 新增 -- 新增自定义源,但需要注意的是,移动端自定义源的环境与PC端不同,某些API不可用 +- 新增自定义源(实验性功能),但需要注意的是,移动端自定义源的环境与PC端不同,某些API不可用 +- 新增长按收藏列表名自动跳转列表顶部的功能 ### 优化 diff --git a/src/screens/Home/Views/Mylist/MusicList/ActiveList.tsx b/src/screens/Home/Views/Mylist/MusicList/ActiveList.tsx index 52a57cd..307faa9 100644 --- a/src/screens/Home/Views/Mylist/MusicList/ActiveList.tsx +++ b/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(({ onShowSearchBar }, ref) => { +export default forwardRef(({ 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(({ onShowSearchBar }, }, []) return ( - + {currentListName} diff --git a/src/screens/Home/Views/Mylist/MusicList/List.tsx b/src/screens/Home/Views/Mylist/MusicList/List.tsx index 7649f00..ae5e2c9 100644 --- a/src/screens/Home/Views/Mylist/MusicList/List.tsx +++ b/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(({ 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(() => { diff --git a/src/screens/Home/Views/Mylist/MusicList/index.tsx b/src/screens/Home/Views/Mylist/MusicList/index.tsx index 5ec6360..35ffb6a 100644 --- a/src/screens/Home/Views/Mylist/MusicList/index.tsx +++ b/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 ( - +