Refine Example app-crm: open Modal without changing page
I'm using this as a reference: https://github.com/refinedev/refine/tree/master/examples/app-crm
In the contact page, the example code for list page has:
<ListTitleButton toPath="contacts" buttonText="Add new contact"/> }
This is the ListTitleButton in the example:
return (
<Button
onClick={() => {
return go({
to:
query: {
to: pathname,
},
options: {
keepQuery: true,
},
type: "replace",
});
}}
>
</Button>
);
};
And their contacts return a modal:
<>
<Modal
open
title="Create Contact"
style={{ display: isHaveOverModal ? "none" : "inherit" }}
onCancel={() => {
list("contacts", "replace");
}}
okText="Save"
okButtonProps={{
...saveButtonProps,
}}
>
App.js:
<Route path="/contacts" element={<ContactsListPage><Outlet /> </ContactsListPage>}>
<Route index element={null} />
<Route path="show/:id" element={<ContactShowPage />} />
<Route path="create" element={<ContactCreatePage><Outlet /></ContactCreatePage> }></Route> </Route>
How did they achieve opening that modal inside list page without loading a new page because when I try to replicate, it just render a new page?
In the contact page, the example code for list page has:
<ListTitleButton toPath="contacts" buttonText="Add new contact"/> }
This is the ListTitleButton in the example:
return (
<Button
onClick={() => {
return go({
to:
${createUrl(toPath)},query: {
to: pathname,
},
options: {
keepQuery: true,
},
type: "replace",
});
}}
>
</Button>
);
};
And their contacts return a modal:
<>
<Modal
open
title="Create Contact"
style={{ display: isHaveOverModal ? "none" : "inherit" }}
onCancel={() => {
list("contacts", "replace");
}}
okText="Save"
okButtonProps={{
...saveButtonProps,
}}
>
App.js:
<Route path="/contacts" element={<ContactsListPage><Outlet /> </ContactsListPage>}>
<Route index element={null} />
<Route path="show/:id" element={<ContactShowPage />} />
<Route path="create" element={<ContactCreatePage><Outlet /></ContactCreatePage> }></Route> </Route>
How did they achieve opening that modal inside list page without loading a new page because when I try to replicate, it just render a new page?
GitHub
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibilty. - refinedev/refine
