File size: 3,564 Bytes
838db53 04225e2 b8168a2 64b1da0 b06739e 04225e2 36669dc b8168a2 04225e2 64b1da0 838db53 04225e2 36669dc b8168a2 36669dc 04225e2 36669dc 2653e84 36669dc 838db53 36669dc 838db53 36669dc 838db53 36669dc 838db53 36669dc b06739e db19895 36669dc 04225e2 36669dc 04225e2 |
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 |
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 { ICategorizeItem } from '../interface';
interface IProps {
nodeId?: string;
}
const DynamicCategorize = ({ 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="items">
{(fields, { add, remove }) => {
const handleAdd = () => {
const idx = fields.length;
add({ name: `Categorize ${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('name')} // TODO: repeatability check
name={[field.name, 'name']}
rules={[{ required: true, message: t('nameMessage') }]}
>
<Input />
</Form.Item>
<Form.Item
label={t('description')}
name={[field.name, 'description']}
>
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item
label={t('examples')}
name={[field.name, 'examples']}
>
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item label={t('to')} name={[field.name, 'to']}>
<Select
allowClear
options={buildCategorizeToOptions(
(form.getFieldValue(['items']) ?? [])
.map((x: ICategorizeItem) => x.to)
.filter(
(x: string) =>
x !==
form.getFieldValue(['items', field.name, 'to']),
),
)}
onChange={handleSelectChange(
form.getFieldValue(['items', field.name, 'name']),
)}
/>
</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 DynamicCategorize;
|