xref: /MusicFree/src/pages/home/components/operations/index.tsx (revision 2b80a4291d3d2cd417d5a28e899a15a581372755) 
1import React from 'react';
2import {StyleSheet} from 'react-native';
3import rpx from '@/utils/rpx';
4import ActionButton from './ActionButton';
5import {ROUTE_PATH, useNavigate} from '@/entry/router';
6import {ScrollView} from 'react-native-gesture-handler';
7
8interface IOperationsProps {
9    orientation?: 'horizonal' | 'vertical';
10}
11
12export default function Operations(props: IOperationsProps) {
13    const navigate = useNavigate();
14    const {orientation} = props;
15
16    const actionButtons = [
17        {
18            iconName: 'heart',
19            iconColor: 'red',
20            title: '我喜欢',
21            action() {
22                navigate(ROUTE_PATH.LOCAL_SHEET_DETAIL, {
23                    id: 'favorite',
24                });
25            },
26        },
27        {
28            iconName: 'folder-music-outline',
29            title: '本地音乐',
30            action() {
31                navigate(ROUTE_PATH.LOCAL);
32            },
33        },
34        {
35            iconName: 'fire',
36            title: '推荐歌单',
37            action() {
38                navigate(ROUTE_PATH.RECOMMEND_SHEETS);
39            },
40        },
41        {
42            iconName: 'trophy-outline',
43            title: '榜单',
44            action() {
45                navigate(ROUTE_PATH.TOP_LIST);
46            },
47        },
48        {
49            iconName: 'history',
50            title: '播放记录',
51            action() {
52                navigate(ROUTE_PATH.HISTORY);
53            },
54        },
55    ];
56
57    return (
58        <ScrollView
59            style={
60                orientation === 'vertical'
61                    ? style.wrapper
62                    : style.horizonalWrapper
63            }
64            horizontal={orientation === 'vertical'}
65            contentContainerStyle={
66                orientation === 'vertical'
67                    ? style.contentWrapper
68                    : style.horizonalContentWrapper
69            }>
70            {actionButtons.map(action => (
71                <ActionButton key={action.title} {...action} />
72            ))}
73        </ScrollView>
74    );
75}
76
77const style = StyleSheet.create({
78    wrapper: {
79        marginTop: rpx(20),
80        marginBottom: rpx(20),
81        flexGrow: 0,
82        flexShrink: 0,
83        marginRight: rpx(24),
84    },
85    horizonalWrapper: {
86        marginTop: rpx(20),
87        marginBottom: rpx(20),
88        flexGrow: 0,
89        flexShrink: 0,
90    },
91    contentWrapper: {
92        flexDirection: 'row',
93        height: rpx(144),
94        paddingHorizontal: rpx(24),
95    },
96    horizonalContentWrapper: {
97        width: rpx(170),
98        flexDirection: 'column',
99        paddingVertical: rpx(24),
100    },
101});
102