xref: /MusicFree/src/pages/home/components/operations/index.tsx (revision 095287552b9baf2f2ceeb9397c563c292a4f7934) 
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            scrollEnabled={orientation === 'horizonal'}
65            showsHorizontalScrollIndicator={false}
66            horizontal={orientation === 'vertical'}
67            contentContainerStyle={
68                orientation === 'vertical'
69                    ? style.contentWrapper
70                    : style.horizonalContentWrapper
71            }>
72            {actionButtons.map(action => (
73                <ActionButton key={action.title} {...action} />
74            ))}
75        </ScrollView>
76    );
77}
78
79const style = StyleSheet.create({
80    wrapper: {
81        marginTop: rpx(20),
82        marginBottom: rpx(20),
83        flexGrow: 0,
84        flexShrink: 0,
85    },
86    horizonalWrapper: {
87        marginTop: rpx(20),
88        marginBottom: rpx(20),
89        flexGrow: 0,
90        flexShrink: 0,
91    },
92    contentWrapper: {
93        flexDirection: 'row',
94        height: rpx(144),
95        paddingHorizontal: rpx(24),
96    },
97    horizonalContentWrapper: {
98        width: rpx(170),
99        flexDirection: 'column',
100        paddingVertical: rpx(24),
101        paddingLeft: rpx(15),
102    },
103});
104