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