xref: /MusicFree/src/components/panels/types/setUserVariables.tsx (revision 338a48676f6ed35193dc1aa55d97c1c1a31f1b30) 
1import React, {useRef} from 'react';
2import {KeyboardAvoidingView, StyleSheet} from 'react-native';
3import rpx, {vmax} from '@/utils/rpx';
4import useColors from '@/hooks/useColors';
5
6import ThemeText from '@/components/base/themeText';
7import {ScrollView} from 'react-native-gesture-handler';
8import PanelBase from '../base/panelBase';
9import {hidePanel} from '../usePanel';
10import ListItem from '@/components/base/listItem';
11import Input from '@/components/base/input';
12import globalStyle from '@/constants/globalStyle';
13import PanelHeader from '../base/panelHeader';
14
15interface IUserVariablesProps {
16    title?: string;
17    onOk: (values: Record<string, string>, closePanel: () => void) => void;
18    variables: IPlugin.IUserVariable[];
19    initValues?: Record<string, string>;
20    onCancel?: () => void;
21}
22
23export default function SetUserVariables(props: IUserVariablesProps) {
24    const {onOk, onCancel, variables, initValues = {}, title} = props;
25
26    const colors = useColors();
27
28    const resultRef = useRef({...initValues});
29
30    return (
31        <PanelBase
32            awareKeyboard
33            height={vmax(80)}
34            keyboardAvoidBehavior="none"
35            renderBody={() => (
36                <>
37                    <PanelHeader
38                        title={ title ?? '设置用户变量'}
39                        onCancel={() => {
40                            onCancel?.();
41                            hidePanel();
42                        }}
43                        onOk={async () => {
44                            onOk(resultRef.current, hidePanel);
45                        }}
46                    />
47                    <KeyboardAvoidingView
48                        behavior="padding"
49                        style={globalStyle.flex1}>
50                        <ScrollView
51                            contentContainerStyle={{
52                                paddingBottom: vmax(20), // TODO: 先这样吧，keyboardAvoidingView没用好，之后再优化吧
53                            }}>
54                            {variables.map(it => (
55                                <ListItem
56                                    withHorizontalPadding
57                                    style={styles.listItem}>
58                                    <ThemeText
59                                        numberOfLines={1}
60                                        ellipsizeMode="tail"
61                                        style={styles.varName}>
62                                        {it.name ?? it.key}
63                                    </ThemeText>
64                                    <Input
65                                        defaultValue={initValues[it.key]}
66                                        onChangeText={e => {
67                                            resultRef.current[it.key] = e;
68                                        }}
69                                        style={[
70                                            styles.input,
71                                            {
72                                                backgroundColor:
73                                                    colors.placeholder,
74                                            },
75                                        ]}
76                                        placeholder={it.hint}
77                                    />
78                                </ListItem>
79                            ))}
80                        </ScrollView>
81                    </KeyboardAvoidingView>
82                </>
83            )}
84        />
85    );
86}
87
88const styles = StyleSheet.create({
89    wrapper: {
90        width: rpx(750),
91    },
92    opeartions: {
93        width: rpx(750),
94        paddingHorizontal: rpx(24),
95        flexDirection: 'row',
96        height: rpx(100),
97        alignItems: 'center',
98        justifyContent: 'space-between',
99    },
100    listItem: {
101        justifyContent: 'space-between',
102    },
103    varName: {
104        maxWidth: '35%',
105    },
106    input: {
107        width: '50%',
108        paddingVertical: rpx(8),
109        paddingHorizontal: rpx(12),
110        borderRadius: rpx(8),
111    },
112});
113