File size: 2,369 Bytes
68ed806 ed19e93 cd85d9e 838db53 ed19e93 838db53 ed19e93 838db53 ed19e93 838db53 ed19e93 838db53 ed19e93 838db53 ed19e93 1157a9f ed19e93 023bae0 ed19e93 f9e19e4 ed19e93 838db53 |
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 |
import { useTranslate } from '@/hooks/common-hooks';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import { IOperatorForm } from '../../interface';
import styles from './index.less';
const formItemLayout = {
labelCol: {
sm: { span: 6 },
},
wrapperCol: {
sm: { span: 18 },
},
};
const formItemLayoutWithOutLabel = {
wrapperCol: {
sm: { span: 18, offset: 6 },
},
};
const MessageForm = ({ onValuesChange, form }: IOperatorForm) => {
const { t } = useTranslate('flow');
return (
<Form
name="basic"
{...formItemLayoutWithOutLabel}
onValuesChange={onValuesChange}
autoComplete="off"
form={form}
>
<Form.List name="messages">
{(fields, { add, remove }, {}) => (
<>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? t('msg') : ''}
required={false}
key={field.key}
>
<Form.Item
{...field}
validateTrigger={['onChange', 'onBlur']}
rules={[
{
required: true,
whitespace: true,
message: t('messageMsg'),
},
]}
noStyle
>
<Input.TextArea
rows={4}
placeholder={t('messagePlaceholder')}
style={{ width: '80%' }}
/>
</Form.Item>
{fields.length > 1 ? (
<MinusCircleOutlined
className={styles.dynamicDeleteButton}
onClick={() => remove(field.name)}
/>
) : null}
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{ width: '80%' }}
icon={<PlusOutlined />}
>
{t('addMessage')}
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
);
};
export default MessageForm;
|