File size: 3,297 Bytes
838db53 04225e2 ce16003 970e973 b8168a2 64b1da0 970e973 b06739e 04225e2 36669dc b8168a2 04225e2 64b1da0 838db53 04225e2 36669dc 970e973 b8168a2 36669dc 04225e2 36669dc 2653e84 36669dc 838db53 36669dc 838db53 36669dc 838db53 36669dc 838db53 36669dc b06739e 36669dc 04225e2 36669dc 1157a9f 36669dc 04225e2 ce16003 04225e2 ce16003 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 } from 'antd';
import { humanId } from 'human-id';
import { useUpdateNodeInternals } from 'reactflow';
import { Operator } from '../constant';
import { useBuildFormSelectOptions } 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 { t } = useTranslate('flow');
return (
<>
<Form.List name="items">
{(fields, { add, remove }) => {
const handleAdd = () => {
add({ name: humanId() });
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']),
),
)}
/>
</Form.Item>
</Card>
))}
<Button type="dashed" onClick={handleAdd} block>
+ {t('addItem')}
</Button>
</div>
);
}}
</Form.List>
{/* <Form.Item noStyle shouldUpdate>
{() => (
<Typography>
<pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
</Typography>
)}
</Form.Item> */}
</>
);
};
export default DynamicCategorize;
|