File size: 3,444 Bytes
838db53 04225e2 b8168a2 b06739e 36669dc 04225e2 36669dc b8168a2 04225e2 b06739e db19895 838db53 04225e2 36669dc b8168a2 36669dc 04225e2 36669dc 838db53 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 |
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 { ICategorizeItem } from '../interface';
import { useBuildCategorizeToOptions, useHandleToSelectChange } from './hooks';
interface IProps {
nodeId?: string;
}
const DynamicCategorize = ({ nodeId }: IProps) => {
const updateNodeInternals = useUpdateNodeInternals();
const form = Form.useFormInstance();
const buildCategorizeToOptions = useBuildCategorizeToOptions();
const { handleSelectChange } = useHandleToSelectChange(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')}
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;
|