xref: /MusicFree/src/components/musicSheetPage/components/header.tsx (revision 1119c2ea435417cd5c53719f91691ff2b1aa8670) 
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 Color from 'color';
6import ThemeText from '@/components/base/themeText';
7import {ImgAsset} from '@/constants/assetsConst';
8import FastImage from '@/components/base/fastImage';
9import PlayAllBar from '@/components/base/playAllBar';
10import useColors from '@/hooks/useColors';
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 = useColors();
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                {topListDetail?.description ? (
55                    <Pressable onPress={toggleShowMore}>
56                        <View
57                            style={style.albumDesc}
58                            // onLayout={evt => {
59                            //     console.log(evt.nativeEvent.layout);
60                            // }}
61                        >
62                            <ThemeText
63                                fontColor="secondary"
64                                fontSize="description"
65                                numberOfLines={maxLines}>
66                                {topListDetail.description}
67                            </ThemeText>
68                        </View>
69                    </Pressable>
70                ) : null}
71            </LinearGradient>
72            <PlayAllBar
73                sheetName={topListDetail?.title}
74                musicList={musicList}
75            />
76        </>
77    );
78}
79
80const style = StyleSheet.create({
81    wrapper: {
82        width: '100%',
83        padding: rpx(24),
84        justifyContent: 'center',
85        alignItems: 'flex-start',
86    },
87    content: {
88        flex: 1,
89        flexDirection: 'row',
90        justifyContent: 'flex-start',
91        alignItems: 'center',
92    },
93    coverImg: {
94        width: rpx(210),
95        height: rpx(210),
96        borderRadius: rpx(24),
97    },
98    details: {
99        flex: 1,
100        height: rpx(140),
101        paddingHorizontal: rpx(36),
102        justifyContent: 'space-between',
103    },
104    divider: {
105        marginVertical: rpx(18),
106    },
107
108    albumDesc: {
109        width: '100%',
110        paddingHorizontal: rpx(24),
111    },
112});
113