From 35ecd2022bdf59c7a017a8dc130494fb000ad296 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Sat, 4 Nov 2023 11:43:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=95=BF=E6=8C=89=E6=94=B6?= =?UTF-8?q?=E8=97=8F=E5=88=97=E8=A1=A8=E5=90=8D=E8=87=AA=E5=8A=A8=E8=B7=B3?= =?UTF-8?q?=E8=BD=AC=E5=88=97=E8=A1=A8=E9=A1=B6=E9=83=A8=E7=9A=84=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- publish/changeLog.md | 3 +- .../Views/Mylist/MusicList/ActiveList.tsx | 5 +- .../Home/Views/Mylist/MusicList/List.tsx | 7 +++ .../Home/Views/Mylist/MusicList/index.tsx | 47 ++++++++++--------- 4 files changed, 37 insertions(+), 25 deletions(-) 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 ( - +