help. i want use form in Modal.confirm.

[tieucoctu]

What problem does this feature solve?

Use form in Modal.Confirm and valid field in confirm

What does the proposed API look like?

export const ModalConfirm = (props: Props) => {
  const {
    title,
    typeColor = 'info',
    cancelText = 'Huỷ',
    okText = 'Xác nhận',
    handleConfirm,
    content,
    okButtonProps,
    ...restProps
  } = props;

  return Modal.confirm({
    ...restProps,
    cancelText,
    className: `wrap-modal-confirm wrap-btn modal-${typeColor}`,
    title: title,
    content: content,
    centered: true,
    open: false,
    async onOk(): Promise<void> {
      await handleConfirm?.();
    },
    okText,
    okButtonProps: { ...okButtonProps, className: `btn-${typeColor} ` },
    cancelButtonProps: { className: `ant-btn-primary btn-grey` },
  });
};
export const InfoPopup = (props: Props) => ModalConfirm({ ...props, icon: <InfoCircleFilled />, typeColor: 'info' });
export const ErrorPopup = (props: Props) => ModalConfirm({ ...props, icon: <WarningFilled />, typeColor: 'error' });
export const WarningPopup = (props: Props) =>
  ModalConfirm({ ...props, icon: <ExclamationCircleFilled />, typeColor: 'primary' });
export const SuccessPopup = (props: Props) =>
  ModalConfirm({ ...props, icon: <CheckCircleFilled />, typeColor: 'success' });

use component

 const handleDeleteRole = () => {
            return ErrorPopup({
              title: 'Bạn có chắc chắn muốn xóa?',
              width: 480,
              okButtonProps: {
                htmlType: 'submit',
              },
              content: (
                <Form onFinish={SubmitDelete}>
                  <p>Thao tác thực hiện xoá vai trò này khỏi danh sách quản lý các vai trò.</p>
                  <p>vui lòng nhập lý do.</p>
                  <Form.Item name={'note'} rules={[{ required: true, message: 'Vui loại nhap lý do' }]}>
                    <TextArea
                      className="text-area-content"
                      autoSize={{ minRows: 6 }}
                      onChange={(e) => handleOnChangeNode(e.target.value)}
                      placeholder="Nhập lý do..."
                    />
                  </Form.Item>
                </Form>
              ),
              handleConfirm: () => SubmitDelete({ id: record?.id }),
            });
          };

[afc163]

Try useModal: https://ant.design/components/modal#components-modal-demo-hooks

[tieucoctu]

props open in Modal.Confirm is not working ?