afraid-scarlet•4mo ago

onCancel

How to warm me onCancel: onCancel={() => { if (onCancel) { onCancel(); return; } close(); if (fileId !== null) { handleCancel(); } list("funcionarios", "replace"); }}

5 Replies

kapa.ai•4mo ago

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The onCancel property is used in the context of mutations in Refine. It can be utilized when the mutationMode is set to "undoable". It provides a function that can be used to cancel the ongoing mutation. By defining onCancel, undoable notification will not be shown automatically. This gives you the flexibility to handle the cancellation process in your own way, such as showing a custom notification or implementing any other desired behavior to allow users to cancel the mutation. Here is an example of how to use onCancel in a mutation:

import { useRef } from "react";  
import { useDelete } from "@refinedev/core";  
  
const MyComponent = () => {  
 const { mutate } = useDelete();  
 const cancelRef = useRef<(() => void) | null>(null);  
  
 const deleteItem = () => {  
 mutate({  
 //...  
 mutationMode: "undoable",  
 onCancel: (cancelMutation) => {  
 cancelRef.current = cancelMutation;  
 },  
 });  
 };  
  
 const cancelDelete = () => {  
 cancelRef.current?.();  
 };  
  
 return (  
 <>  
 <button onClick={deleteItem}>Delete</button>  
 <button onClick={cancelDelete}>Cancel</button>  
 </>  
 );  
};

import { useRef } from "react";  
import { useDelete } from "@refinedev/core";  
  
const MyComponent = () => {  
 const { mutate } = useDelete();  
 const cancelRef = useRef<(() => void) | null>(null);  
  
 const deleteItem = () => {  
 mutate({  
 //...  
 mutationMode: "undoable",  
 onCancel: (cancelMutation) => {  
 cancelRef.current = cancelMutation;  
 },  
 });  
 };  
  
 const cancelDelete = () => {  
 cancelRef.current?.();  
 };  
  
 return (  
 <>  
 <button onClick={deleteItem}>Delete</button>  
 <button onClick={cancelDelete}>Cancel</button>  
 </>  
 );  
};

In this example, onCancel is used to set a reference to the cancel function of the mutation. This reference is then used in the cancelDelete function to cancel the mutation when needed. You can find more information about onCancel in the Refine documentation for useDelete (https://refine.dev/docs/data/hooks/use-delete#oncancel), useUpdateMany (https://refine.dev/docs/data/hooks/use-update-many#oncancel), useUpdate (https://refine.dev/docs/data/hooks/use-update#oncancel), and useDeleteMany (https://refine.dev/docs/data/hooks/use-delete-many#oncancel). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

afraid-scarlet•4mo ago

@kapa.ai how to warm me if I want to cancel or close a modal form

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, you can use the warnWhenUnsavedChanges property of the useModalForm hook to show a warning when the user tries to leave the page with unsaved changes. This is used to prevent the user from accidentally leaving the page. By default, this property is set to false. Here is an example of how to use it:

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: true,  
});

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: true,  
});

In this example, if the user tries to close the modal form with unsaved changes, a warning will be shown. You can also set this value in the <Refine> component. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#warnwhenunsavedchanges). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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