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