File size: 3,398 Bytes
04225e2 b8168a2 b06739e 36669dc 04225e2 36669dc b8168a2 04225e2 b06739e db19895 04225e2 36669dc b8168a2 36669dc 04225e2 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 |
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);
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="name"
name={[field.name, 'name']}
// initialValue={`Categorize ${field.name + 1}`}
rules={[
{ required: true, message: 'Please input your name!' },
]}
>
<Input />
</Form.Item>
<Form.Item
label="description"
name={[field.name, 'description']}
>
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item label="examples" name={[field.name, 'examples']}>
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item label="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;
|