ambitious-aqua•2y ago

Drawer OnClose -- Additional function without overriding original behaviour?

Hi! I'm using a <Drawer> that passes drawerProps in. Inside the drawerProps is a default onClose function that closes the window. However, I'd like to call an additional function refetch() alongside it. Directly setting onClose to refetch() overrides the original onClose function. Is there a way I could use both?

5 Replies

kapa.ai•2y ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can call multiple functions within the onClose prop. You just need to create a new function that calls both the refetch() function and the original onClose function. Here's how you can do it:

const { drawerProps, tableQueryResult: { refetch } } = useDrawerForm();

const handleClose = () => {
    refetch();
    drawerProps.onClose();
};

<Drawer {...drawerProps} onClose={handleClose} />

const { drawerProps, tableQueryResult: { refetch } } = useDrawerForm();

const handleClose = () => {
    refetch();
    drawerProps.onClose();
};

<Drawer {...drawerProps} onClose={handleClose} />

In this example, handleClose is a new function that calls both refetch() and the original onClose function. When the Drawer is closed, both functions will be called. Please note that if warnWhenUnsavedChanges is true, it will show a confirmation modal before closing the <Drawer>. If you override this function, you have to handle this confirmation modal manually. For more information, you can refer to the useDrawerForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useDrawerForm). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below

ambitious-aquaOP•2y ago

@kapa.ai Does <Form> have a prop similar to onSubmit?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, the <Form> component in Ant Design, which is used in Refine, has an onFinish prop that acts similarly to onSubmit. The onFinish prop is a function that is called when the form is successfully validated and submitted. Here's an example of how you can use it:

<Form onFinish={values => console.log(values)}>
  ...
</Form>

<Form onFinish={values => console.log(values)}>
  ...
</Form>

In this example, the onFinish function will log the form values when the form is submitted. You can also use the onFinish prop with the useForm hook in Refine. The useForm hook returns an onFinish method that you can pass to the onFinish prop of the <Form> component. Here's an example:

const { onFinish } = useForm();

<Form onFinish={onFinish}>
  ...
</Form>

const { onFinish } = useForm();

<Form onFinish={onFinish}>
  ...
</Form>

In this example, the onFinish method from the useForm hook is passed to the onFinish prop of the <Form> component. For more information, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm) and the Form component documentation (https://ant.design/components/form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below

Drawer OnClose -- Additional function without overriding original behaviour?

Did you find this page helpful?