xref: /MusicFree/src/pages/home/components/operations/index.tsx (revision 7bd66ef78593106374aab32def6a6e18577a12d0) 
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                <>
74                    {/* {index !== 0 ? <Divider vertical={orientation === 'vertical'}></Divider> : null} */}
75                    <ActionButton key={action.title} {...action} />
76                </>
77            ))}
78        </ScrollView>
79    );
80}
81
82const style = StyleSheet.create({
83    wrapper: {
84        marginTop: rpx(20),
85        marginBottom: rpx(20),
86        flexGrow: 0,
87        flexShrink: 0,
88    },
89    horizonalWrapper: {
90        marginTop: rpx(20),
91        marginBottom: rpx(20),
92        flexGrow: 0,
93        flexShrink: 0,
94    },
95    contentWrapper: {
96        flexDirection: 'row',
97        height: rpx(144),
98        paddingHorizontal: rpx(24),
99    },
100    horizonalContentWrapper: {
101        width: rpx(170),
102        flexDirection: 'column',
103        paddingVertical: rpx(24),
104        paddingLeft: rpx(15),
105    },
106});
107