1import React, {useState} from 'react'; 2import {StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import MusicBar from '@/components/musicBar'; 5import SearchResult from './searchResult'; 6import StatusBar from '@/components/base/statusBar'; 7import useColors from '@/hooks/useColors'; 8import {fontSizeConst} from '@/constants/uiConst'; 9import {useParams} from '@/entry/router'; 10import globalStyle from '@/constants/globalStyle'; 11import VerticalSafeAreaView from '@/components/base/verticalSafeAreaView'; 12import Input from '@/components/base/input'; 13import AppBar from '@/components/base/appBar'; 14 15function filterMusic(query: string, musicList: IMusic.IMusicItem[]) { 16 if (query?.length === 0) { 17 return musicList; 18 } 19 return musicList.filter(_ => 20 `${_.title} ${_.artist} ${_.album} ${_.platform}` 21 .toLowerCase() 22 .includes(query.toLowerCase()), 23 ); 24} 25 26export default function SearchMusicList() { 27 const {musicList, musicSheet} = useParams<'search-music-list'>(); 28 const [result, setResult] = useState<IMusic.IMusicItem[]>(musicList ?? []); 29 const [query, setQuery] = useState(''); 30 31 const colors = useColors(); 32 33 const onChangeSearch = (_: string) => { 34 setQuery(_); 35 // useTransition做优化 36 setResult(filterMusic(_.trim(), musicList ?? [])); 37 }; 38 39 return ( 40 <VerticalSafeAreaView style={globalStyle.fwflex1}> 41 <StatusBar /> 42 <AppBar> 43 <Input 44 style={style.searchBar} 45 fontColor={colors.appBarText} 46 placeholder="在列表中搜索歌曲" 47 accessible 48 autoFocus 49 accessibilityLabel="搜索框" 50 accessibilityHint={'在列表中搜索歌曲'} 51 value={query} 52 onChangeText={onChangeSearch} 53 /> 54 </AppBar> 55 <SearchResult result={result} musicSheet={musicSheet} /> 56 <MusicBar /> 57 </VerticalSafeAreaView> 58 ); 59} 60 61const style = StyleSheet.create({ 62 appbar: { 63 shadowColor: 'transparent', 64 backgroundColor: '#2b333eaa', 65 }, 66 searchBar: { 67 minWidth: rpx(375), 68 flex: 1, 69 borderRadius: rpx(64), 70 height: rpx(64), 71 fontSize: rpx(32), 72 }, 73 input: { 74 padding: 0, 75 color: '#666666', 76 height: rpx(64), 77 fontSize: fontSizeConst.subTitle, 78 textAlignVertical: 'center', 79 includeFontPadding: false, 80 }, 81}); 82