xref: /MusicFree/src/pages/artistDetail/components/header.tsx (revision e650bfb34226e2a09d15cbf7832c4805a87cd60e)
14060c00aS猫头猫import React, {useEffect} from 'react';
24060c00aS猫头猫import {StyleSheet, View} from 'react-native';
3be474dd8S猫头猫import rpx from '@/utils/rpx';
420e2869eS猫头猫import Animated, {
520e2869eS猫头猫    useAnimatedStyle,
620e2869eS猫头猫    useSharedValue,
720e2869eS猫头猫    withTiming,
820e2869eS猫头猫} from 'react-native-reanimated';
920e2869eS猫头猫import {useAtomValue} from 'jotai';
1020e2869eS猫头猫import {scrollToTopAtom} from '../store/atoms';
1120e2869eS猫头猫import ThemeText from '@/components/base/themeText';
1220e2869eS猫头猫import Tag from '@/components/base/tag';
13e7fa3837S猫头猫import {useParams} from '@/entry/router';
14*e650bfb3S猫头猫import Image from '@/components/base/image';
15*e650bfb3S猫头猫import {ImgAsset} from '@/constants/assetsConst';
16be474dd8S猫头猫
1720e2869eS猫头猫const headerHeight = rpx(350);
187cee35b5S猫头猫
197cee35b5S猫头猫interface IHeaderProps {
207cee35b5S猫头猫    neverFold?: boolean;
217cee35b5S猫头猫}
227cee35b5S猫头猫
237cee35b5S猫头猫export default function Header(props: IHeaderProps) {
247cee35b5S猫头猫    const {neverFold} = props;
257cee35b5S猫头猫
26e7fa3837S猫头猫    const {artistItem} = useParams<'artist-detail'>();
2720e2869eS猫头猫
2820e2869eS猫头猫    const heightValue = useSharedValue(headerHeight);
2920e2869eS猫头猫    const opacityValue = useSharedValue(1);
3020e2869eS猫头猫    const scrollToTopState = useAtomValue(scrollToTopAtom);
3120e2869eS猫头猫
3220e2869eS猫头猫    const heightStyle = useAnimatedStyle(() => {
3320e2869eS猫头猫        return {
3420e2869eS猫头猫            height: heightValue.value,
3520e2869eS猫头猫            opacity: opacityValue.value,
3620e2869eS猫头猫        };
3720e2869eS猫头猫    });
3820e2869eS猫头猫
3920e2869eS猫头猫    const avatar = artistItem.avatar?.startsWith('//')
4020e2869eS猫头猫        ? `https:${artistItem.avatar}`
4120e2869eS猫头猫        : artistItem.avatar;
4220e2869eS猫头猫
4320e2869eS猫头猫    /** 折叠 */
4420e2869eS猫头猫    useEffect(() => {
457cee35b5S猫头猫        if (neverFold) {
467cee35b5S猫头猫            heightValue.value = withTiming(headerHeight);
477cee35b5S猫头猫            opacityValue.value = withTiming(1);
487cee35b5S猫头猫            return;
497cee35b5S猫头猫        }
5020e2869eS猫头猫        if (scrollToTopState) {
5120e2869eS猫头猫            heightValue.value = withTiming(headerHeight);
5220e2869eS猫头猫            opacityValue.value = withTiming(1);
5320e2869eS猫头猫        } else {
5420e2869eS猫头猫            heightValue.value = withTiming(0);
5520e2869eS猫头猫            opacityValue.value = withTiming(0);
5620e2869eS猫头猫        }
577cee35b5S猫头猫    }, [scrollToTopState, neverFold]);
5820e2869eS猫头猫
5920e2869eS猫头猫    return (
60*e650bfb3S猫头猫        <Animated.View style={[styles.wrapper, heightStyle]}>
61*e650bfb3S猫头猫            <View style={styles.headerWrapper}>
62*e650bfb3S猫头猫                <Image
63*e650bfb3S猫头猫                    emptySrc={ImgAsset.albumDefault}
64*e650bfb3S猫头猫                    uri={avatar}
65*e650bfb3S猫头猫                    style={styles.artist}
66*e650bfb3S猫头猫                />
67*e650bfb3S猫头猫                <View style={styles.info}>
68*e650bfb3S猫头猫                    <View style={styles.title}>
6920e2869eS猫头猫                        <ThemeText
7020e2869eS猫头猫                            fontSize="title"
71*e650bfb3S猫头猫                            style={styles.titleText}
7220e2869eS猫头猫                            numberOfLines={1}
7320e2869eS猫头猫                            ellipsizeMode="tail">
74c9fce3b5S猫头猫                            {artistItem?.name ?? ''}
7520e2869eS猫头猫                        </ThemeText>
76c9fce3b5S猫头猫                        {artistItem.platform ? (
774060c00aS猫头猫                            <Tag tagName={artistItem.platform} />
781fbef60aS猫头猫                        ) : null}
7920e2869eS猫头猫                    </View>
8020e2869eS猫头猫
81c9fce3b5S猫头猫                    {artistItem.fans ? (
8220e2869eS猫头猫                        <ThemeText fontSize="subTitle" fontColor="secondary">
8320e2869eS猫头猫                            粉丝数: {artistItem.fans}
8420e2869eS猫头猫                        </ThemeText>
851fbef60aS猫头猫                    ) : null}
8620e2869eS猫头猫                </View>
8720e2869eS猫头猫            </View>
8820e2869eS猫头猫
8920e2869eS猫头猫            <ThemeText
90*e650bfb3S猫头猫                style={styles.description}
9120e2869eS猫头猫                numberOfLines={2}
9220e2869eS猫头猫                ellipsizeMode="tail"
9320e2869eS猫头猫                fontColor="secondary"
9420e2869eS猫头猫                fontSize="description">
95c9fce3b5S猫头猫                {artistItem?.description ?? ''}
9620e2869eS猫头猫            </ThemeText>
9720e2869eS猫头猫        </Animated.View>
9820e2869eS猫头猫    );
99be474dd8S猫头猫}
100be474dd8S猫头猫
101*e650bfb3S猫头猫const styles = StyleSheet.create({
102be474dd8S猫头猫    wrapper: {
103be474dd8S猫头猫        width: rpx(750),
10420e2869eS猫头猫        height: headerHeight,
10520e2869eS猫头猫        backgroundColor: 'rgba(28, 28, 28, 0.1)',
10620e2869eS猫头猫        zIndex: 1,
10720e2869eS猫头猫    },
108*e650bfb3S猫头猫    artist: {
109*e650bfb3S猫头猫        width: rpx(144),
110*e650bfb3S猫头猫        height: rpx(144),
111*e650bfb3S猫头猫        borderRadius: rpx(16),
112*e650bfb3S猫头猫    },
11320e2869eS猫头猫    headerWrapper: {
11420e2869eS猫头猫        width: rpx(750),
11520e2869eS猫头猫        paddingTop: rpx(24),
11620e2869eS猫头猫        paddingHorizontal: rpx(24),
11720e2869eS猫头猫        height: rpx(240),
11820e2869eS猫头猫        flexDirection: 'row',
11920e2869eS猫头猫        alignItems: 'center',
12020e2869eS猫头猫    },
12120e2869eS猫头猫    info: {
12220e2869eS猫头猫        marginLeft: rpx(24),
12320e2869eS猫头猫        justifyContent: 'space-around',
12420e2869eS猫头猫        height: rpx(144),
12520e2869eS猫头猫    },
12620e2869eS猫头猫    title: {
12720e2869eS猫头猫        flexDirection: 'row',
12820e2869eS猫头猫        alignItems: 'center',
12920e2869eS猫头猫    },
13020e2869eS猫头猫    titleText: {
13120e2869eS猫头猫        marginRight: rpx(18),
13220e2869eS猫头猫        maxWidth: rpx(400),
13320e2869eS猫头猫    },
13420e2869eS猫头猫    description: {
13520e2869eS猫头猫        marginTop: rpx(24),
13620e2869eS猫头猫        width: rpx(750),
13720e2869eS猫头猫        paddingHorizontal: rpx(24),
138be474dd8S猫头猫    },
139be474dd8S猫头猫});
140