xref: /MusicFree/src/pages/home/components/operations/index.tsx (revision 8e47be56b0121ae1a9c00382d70902276ffca225) 
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            showsHorizontalScrollIndicator={false}
65            horizontal={orientation === 'vertical'}
66            contentContainerStyle={
67                orientation === 'vertical'
68                    ? style.contentWrapper
69                    : style.horizonalContentWrapper
70            }>
71            {actionButtons.map(action => (
72                <>
73                    {/* {index !== 0 ? <Divider vertical={orientation === 'vertical'}></Divider> : null} */}
74                    <ActionButton key={action.title} {...action} />
75                </>
76            ))}
77        </ScrollView>
78    );
79}
80
81const style = StyleSheet.create({
82    wrapper: {
83        marginTop: rpx(20),
84        marginBottom: rpx(20),
85        flexGrow: 0,
86        flexShrink: 0,
87        marginRight: rpx(24),
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    },
105});
106