xref: /MusicFree/src/components/musicSheetPage/components/header.tsx (revision 1fa77b042dffea2ad8db31c1b15672ed8f3755cf) 
1import React, {useState} from 'react';
2import {Pressable, StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import LinearGradient from 'react-native-linear-gradient';
5import {Divider, useTheme} from 'react-native-paper';
6import Color from 'color';
7import ThemeText from '@/components/base/themeText';
8import {ImgAsset} from '@/constants/assetsConst';
9import FastImage from '@/components/base/fastImage';
10import PlayAllBar from '@/components/base/playAllBar';
11
12interface IHeaderProps {
13    topListDetail: IMusic.IMusicSheetItem | null;
14    musicList: IMusic.IMusicItem[] | null;
15}
16export default function Header(props: IHeaderProps) {
17    const {topListDetail, musicList} = props;
18    const {colors} = useTheme();
19
20    const [maxLines, setMaxLines] = useState<number | undefined>(6);
21
22    const toggleShowMore = () => {
23        if (maxLines) {
24            setMaxLines(undefined);
25        } else {
26            setMaxLines(6);
27        }
28    };
29
30    return (
31        <>
32            <LinearGradient
33                colors={[
34                    Color(colors.primary).alpha(0.8).toString(),
35                    Color(colors.primary).alpha(0.15).toString(),
36                ]}
37                style={style.wrapper}>
38                <View style={style.content}>
39                    <FastImage
40                        style={style.coverImg}
41                        uri={topListDetail?.artwork ?? topListDetail?.coverImg}
42                        emptySrc={ImgAsset.albumDefault}
43                    />
44                    <View style={style.details}>
45                        <ThemeText>{topListDetail?.title}</ThemeText>
46                        <ThemeText fontColor="secondary" fontSize="description">
47                            共
48                            {topListDetail?.worksNum ??
49                                (musicList ? musicList.length ?? 0 : '-')}
50                            首{' '}
51                        </ThemeText>
52                    </View>
53                </View>
54                <Divider style={style.divider} />
55                {topListDetail?.description ? (
56                    <Pressable onPress={toggleShowMore}>
57                        <View
58                            style={style.albumDesc}
59                            // onLayout={evt => {
60                            //     console.log(evt.nativeEvent.layout);
61                            // }}
62                        >
63                            <ThemeText
64                                fontColor="secondary"
65                                fontSize="description"
66                                numberOfLines={maxLines}>
67                                {topListDetail.description}
68                            </ThemeText>
69                        </View>
70                    </Pressable>
71                ) : null}
72            </LinearGradient>
73            <PlayAllBar
74                sheetName={topListDetail?.title}
75                musicList={musicList}
76            />
77        </>
78    );
79}
80
81const style = StyleSheet.create({
82    wrapper: {
83        width: '100%',
84        padding: rpx(24),
85        justifyContent: 'center',
86        alignItems: 'flex-start',
87    },
88    content: {
89        flex: 1,
90        flexDirection: 'row',
91        justifyContent: 'flex-start',
92        alignItems: 'center',
93    },
94    coverImg: {
95        width: rpx(210),
96        height: rpx(210),
97        borderRadius: rpx(24),
98    },
99    details: {
100        flex: 1,
101        height: rpx(140),
102        paddingHorizontal: rpx(36),
103        justifyContent: 'space-between',
104    },
105    divider: {
106        marginVertical: rpx(18),
107    },
108
109    albumDesc: {
110        width: '100%',
111        paddingHorizontal: rpx(24),
112    },
113});
114