File size: 3,363 Bytes
4a1cf8b |
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 |
import { useTranslate } from '@/hooks/commonHooks';
import { CloseOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, Select, Typography } from 'antd';
import { useUpdateNodeInternals } from 'reactflow';
import { Operator } from '../constant';
import {
useBuildFormSelectOptions,
useHandleFormSelectChange,
} from '../form-hooks';
import { IGenerateParameter } from '../interface';
interface IProps {
nodeId?: string;
}
const DynamicParameters = ({ nodeId }: IProps) => {
const updateNodeInternals = useUpdateNodeInternals();
const form = Form.useFormInstance();
const buildCategorizeToOptions = useBuildFormSelectOptions(
Operator.Categorize,
nodeId,
);
const { handleSelectChange } = useHandleFormSelectChange(nodeId);
const { t } = useTranslate('flow');
return (
<>
<Form.List name="parameters">
{(fields, { add, remove }) => {
const handleAdd = () => {
const idx = fields.length;
add({ name: `parameter ${idx + 1}` });
if (nodeId) updateNodeInternals(nodeId);
};
return (
<div
style={{ display: 'flex', rowGap: 10, flexDirection: 'column' }}
>
{fields.map((field) => (
<Card
size="small"
key={field.key}
extra={
<CloseOutlined
onClick={() => {
remove(field.name);
}}
/>
}
>
<Form.Item
label={t('key')} // TODO: repeatability check
name={[field.name, 'key']}
rules={[{ required: true, message: t('nameMessage') }]}
>
<Input />
</Form.Item>
<Form.Item
label={t('componentId')}
name={[field.name, 'component_id']}
>
<Select
allowClear
options={buildCategorizeToOptions(
(form.getFieldValue(['parameters']) ?? [])
.map((x: IGenerateParameter) => x.component_id)
.filter(
(x: string) =>
x !==
form.getFieldValue([
'parameters',
field.name,
'component_id',
]),
),
)}
onChange={handleSelectChange(
form.getFieldValue(['parameters', field.name, 'key']),
)}
/>
</Form.Item>
</Card>
))}
<Button type="dashed" onClick={handleAdd} block>
+ Add Item
</Button>
</div>
);
}}
</Form.List>
<Form.Item noStyle shouldUpdate>
{() => (
<Typography>
<pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
</Typography>
)}
</Form.Item>
</>
);
};
export default DynamicParameters;
|