xref: /MusicFree/src/pages/downloading/downloadingList.tsx (revision 5589cdf32b2bb0f641e5ac7bf1f6152cd6b9b70e)
12d2302c5S猫头猫import React from 'react';
24060c00aS猫头猫import {FlatList, StyleSheet, View} from 'react-native';
32d2302c5S猫头猫import rpx from '@/utils/rpx';
4e14deecfS猫头猫import Download from '@/core/download';
51119c2eaS猫头猫import ListItem from '@/components/base/listItem';
6ff8df87dS猫头猫import {sizeFormatter} from '@/utils/fileUtils';
72d2302c5S猫头猫
84060c00aS猫头猫export default function DownloadingList() {
9e14deecfS猫头猫    const downloading = Download.useDownloadingMusic();
10e14deecfS猫头猫    const pending = Download.usePendingMusic();
11e14deecfS猫头猫    const progress = Download.useDownloadingProgress(); // progress没有更新同步
12be0a3650S猫头猫
132d2302c5S猫头猫    return (
142d2302c5S猫头猫        <View style={style.wrapper}>
152d2302c5S猫头猫            <FlatList
16ff8df87dS猫头猫                style={style.downloading}
17be0a3650S猫头猫                data={downloading.concat(pending)}
182d2302c5S猫头猫                keyExtractor={_ => `dl${_.filename}`}
19be0a3650S猫头猫                extraData={progress}
20be0a3650S猫头猫                renderItem={({item, index}) => {
21be0a3650S猫头猫                    if (index < downloading.length) {
22ff8df87dS猫头猫                        const prog = progress[item.filename];
23ff8df87dS猫头猫                        return (
24*5589cdf3S猫头猫                            <ListItem withHorizontalPadding>
251119c2eaS猫头猫                                <ListItem.Content
262d2302c5S猫头猫                                    title={item.musicItem.title}
271119c2eaS猫头猫                                    description={`${
284060c00aS猫头猫                                        prog?.progress
294060c00aS猫头猫                                            ? sizeFormatter(prog.progress)
304060c00aS猫头猫                                            : '-'
314060c00aS猫头猫                                    } / ${
321119c2eaS猫头猫                                        prog?.size
331119c2eaS猫头猫                                            ? sizeFormatter(prog.size)
341119c2eaS猫头猫                                            : '-'
354060c00aS猫头猫                                    }`}
364060c00aS猫头猫                                />
371119c2eaS猫头猫                            </ListItem>
38ff8df87dS猫头猫                        );
39be0a3650S猫头猫                    } else {
40be0a3650S猫头猫                        return (
41*5589cdf3S猫头猫                            <ListItem withHorizontalPadding>
421119c2eaS猫头猫                                <ListItem.Content
434060c00aS猫头猫                                    title={item.musicItem.title}
441119c2eaS猫头猫                                    description="等待下载"
454060c00aS猫头猫                                />
461119c2eaS猫头猫                            </ListItem>
47be0a3650S猫头猫                        );
48be0a3650S猫头猫                    }
494060c00aS猫头猫                }}
504060c00aS猫头猫            />
512d2302c5S猫头猫        </View>
522d2302c5S猫头猫    );
532d2302c5S猫头猫}
542d2302c5S猫头猫
552d2302c5S猫头猫const style = StyleSheet.create({
562d2302c5S猫头猫    wrapper: {
572d2302c5S猫头猫        width: rpx(750),
582d2302c5S猫头猫        flex: 1,
592d2302c5S猫头猫    },
60ff8df87dS猫头猫    downloading: {
61ff8df87dS猫头猫        flexGrow: 0,
62ff8df87dS猫头猫    },
632d2302c5S猫头猫});
64