/
index.tsx
119 lines (106 loc) · 2.49 KB
/
index.tsx
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/** @module Plugins.Local.Components */
import { useCallback, useState } from 'react'
import { Button, Typography, Space, Modal, Form, InputNumber } from 'antd'
import { SelectOutlined } from '@ant-design/icons'
import globalStyle from '@/styles/index.module.css'
/**
* Props
*/
export interface IProps {
parallel?: boolean
onSelect: (data?: any) => void
}
export interface LocalParallelProps {
onSelect: (data: any) => void
}
/**
* Local parallel
* @param props Props
* @returns LocalParallel
*/
const LocalParallel: React.FunctionComponent<LocalParallelProps> = ({
onSelect
}) => {
// State
const [open, setOpen] = useState<boolean>(false)
// Data
const [form] = Form.useForm()
/**
* On open
*/
const onOpen = useCallback(() => setOpen(true), [])
/**
* On close
*/
const onClose = useCallback(() => setOpen(false), [])
/**
* On ok
* @param values Values
*/
const onOk = useCallback(
(values: { nCores: number }): void => {
const nCores = values.nCores
onSelect({ inUseConfiguration: { nCores: { value: nCores } } })
onClose()
},
[onClose, onSelect]
)
// Render
return (
<>
<Modal
open={open}
title="Local plugin"
onCancel={onClose}
onOk={form.submit}
maskClosable={false}
width="80%"
>
<Form form={form} initialValues={{ nCores: 2 }} onFinish={onOk}>
<Form.Item
label="Number of cores"
name="nCores"
rules={[{ type: 'number', min: 1 }]}
>
<InputNumber />
</Form.Item>
</Form>
</Modal>
<Space className={globalStyle.fullWidth}>
<Typography.Text>Local computing</Typography.Text>
<Button type="primary" onClick={onOpen} icon={<SelectOutlined />}>
Select
</Button>
</Space>
</>
)
}
/**
* Local
* @param props Props
* @returns Local
*/
const Local: React.FunctionComponent<IProps> = ({ parallel, onSelect }) => {
/**
* On click
*/
const onClick = useCallback(() => {
onSelect()
}, [onSelect])
/**
* Render
*/
if (parallel) return <LocalParallel onSelect={onSelect} />
return (
<Space
className={globalStyle.fullWidth}
style={{ display: 'flex', justifyContent: 'space-between' }}
>
<Typography.Text>Local computing</Typography.Text>
<Button type="primary" onClick={onClick} icon={<SelectOutlined />}>
Select
</Button>
</Space>
)
}
export default Local