blob: 0cb8c36f5cdf23f139952168baa602567caf57b6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
import * as React from 'react';
import { BackendList } from '~/components/BackendList';
import { useBackendConfigForm } from '~/modules/backend/hooks';
import type { ClashAPIConfigWithAddedAt } from '~/store/types';
import type { ClashAPIConfig } from '~/types';
import s0 from './APIConfig.module.scss';
import Button from './Button';
import Field from './Field';
import SvgYacd from './SvgYacd';
type Props = {
apiConfigs: ClashAPIConfigWithAddedAt[];
selectedClashAPIConfigIndex: number;
onAddConfig: (config: ClashAPIConfig) => void;
onRemoveConfig: (config: ClashAPIConfig) => void;
onSelectConfig: (config: ClashAPIConfig) => void;
};
const { useRef } = React;
export default function APIConfig({
apiConfigs,
selectedClashAPIConfigIndex,
onAddConfig,
onRemoveConfig,
onSelectConfig,
}: Props) {
const contentEl = useRef(null);
const { baseURL, secret, errMsg, handleInputOnChange, handleContentOnKeyDown, onConfirm } =
useBackendConfigForm({ onAddConfig });
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div className={s0.root} ref={contentEl} onKeyDown={handleContentOnKeyDown}>
<div className={s0.header}>
<div className={s0.icon}>
<SvgYacd width={160} height={160} stroke="var(--stroke)" />
</div>
</div>
<div className={s0.body}>
<div className={s0.hostnamePort}>
<Field
id="baseURL"
name="baseURL"
label="API Base URL"
type="text"
placeholder="http://127.0.0.1:9090"
value={baseURL}
onChange={handleInputOnChange}
/>
<Field
id="secret"
name="secret"
label="Secret(optional)"
value={secret}
type="text"
onChange={handleInputOnChange}
/>
</div>
</div>
<div className={s0.error}>{errMsg ? errMsg : null}</div>
<div className={s0.footer}>
<Button label="Add" onClick={onConfirm} />
</div>
<div style={{ height: 20 }} />
<BackendList
apiConfigs={apiConfigs}
selectedClashAPIConfigIndex={selectedClashAPIConfigIndex}
onRemove={onRemoveConfig}
onSelect={onSelectConfig}
/>
</div>
);
}
|
