xref: /MusicFree/src/components/musicSheetPage/components/header.tsx (revision 095287552b9baf2f2ceeb9397c563c292a4f7934) 
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>{musicSheet?.title}</ThemeText>
40                        <ThemeText
41                            fontColor="textSecondary"
42                            fontSize="description">
43                            共
44                            {musicSheet?.worksNum ??
45                                (musicList ? musicList.length ?? 0 : '-')}
46                            首{' '}
47                        </ThemeText>
48                    </View>
49                </View>
50                {musicSheet?.description ? (
51                    <Pressable onPress={toggleShowMore}>
52                        <View
53                            style={style.albumDesc}
54                            // onLayout={evt => {
55                            //     console.log(evt.nativeEvent.layout);
56                            // }}
57                        >
58                            <ThemeText
59                                fontColor="textSecondary"
60                                fontSize="description"
61                                numberOfLines={maxLines}>
62                                {musicSheet.description}
63                            </ThemeText>
64                        </View>
65                    </Pressable>
66                ) : null}
67            </View>
68            <PlayAllBar
69                canStar={canStar}
70                musicList={musicList}
71                musicSheet={musicSheet}
72            />
73        </View>
74    );
75}
76
77const style = StyleSheet.create({
78    wrapper: {
79        width: '100%',
80        padding: rpx(24),
81        justifyContent: 'center',
82        alignItems: 'flex-start',
83    },
84    content: {
85        flex: 1,
86        flexDirection: 'row',
87        justifyContent: 'flex-start',
88        alignItems: 'center',
89    },
90    coverImg: {
91        width: rpx(210),
92        height: rpx(210),
93        borderRadius: rpx(24),
94    },
95    details: {
96        flex: 1,
97        height: rpx(140),
98        paddingHorizontal: rpx(36),
99        justifyContent: 'space-between',
100    },
101    divider: {
102        marginVertical: rpx(18),
103    },
104
105    albumDesc: {
106        width: '100%',
107        marginTop: rpx(28),
108    },
109});
110