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