Skip to content

Commit cd938b0

Browse files
arndomarndom
authored
feat(ui-pkgs): add deleteButtonProps to Show components (#6699)
1 parent 8d8cddb commit cd938b0

File tree

16 files changed

+687
-75
lines changed

16 files changed

+687
-75
lines changed

‎.changeset/yellow-chicken-notice.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@refinedev/chakra-ui": minor
3+
"@refinedev/ui-types": minor
4+
"@refinedev/mantine": minor
5+
"@refinedev/antd": minor
6+
"@refinedev/mui": minor
7+
---
8+
9+
- Add `deleteButtonProps` prop to the `Show` component of UI packages: AntDesign, Manitine, Charka-UI, Material-UI
10+
- Add documenation for this addition
11+
12+
[Resolves #6692](https://github.com/refinedev/refine/issues/6692)

‎documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md

+115-1
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,121 @@ render(
359359

360360
[Refer to the `usePermissions` documentation for detailed usage. &#8594](/docs/api-reference/core/hooks/authentication/usePermissions/)
361361

362+
### deleteButtonProps
363+
364+
If the resource has the `canDelete` property and you want to customize this button, you can use the `deleteButtonProps` property like the code below.
365+
366+
```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
367+
setInitialRoutes(["/posts/show/123"]);
368+
const { ShowButton, Edit } = RefineAntd;
369+
370+
const { default: simpleRest } = RefineSimpleRest;
371+
372+
const dataProvider = simpleRest("https://api.fake-rest.refine.dev");
373+
374+
const customDataProvider = {
375+
...dataProvider,
376+
deleteOne: async ({ resource, id, variables }) => {
377+
return {
378+
data: {},
379+
};
380+
},
381+
};
382+
383+
const authProvider = {
384+
login: async () => {
385+
return {
386+
success: true,
387+
redirectTo: "/",
388+
};
389+
},
390+
register: async () => {
391+
return {
392+
success: true,
393+
};
394+
},
395+
forgotPassword: async () => {
396+
return {
397+
success: true,
398+
};
399+
},
400+
updatePassword: async () => {
401+
return {
402+
success: true,
403+
};
404+
},
405+
logout: async () => {
406+
return {
407+
success: true,
408+
redirectTo: "/",
409+
};
410+
},
411+
check: () => ({
412+
authenticated: true,
413+
}),
414+
onError: async (error) => {
415+
console.error(error);
416+
return { error };
417+
},
418+
getPermissions: async () => ["admin"],
419+
getIdentity: async () => null,
420+
};
421+
422+
// visible-block-start
423+
import { Show } from "@refinedev/antd";
424+
import { usePermissions } from "@refinedev/core";
425+
426+
const PostShow: React.FC = () => {
427+
const { data: permissionsData } = usePermissions();
428+
return (
429+
<Show
430+
/* highlight-start */
431+
canDelete={permissionsData?.includes("admin")}
432+
deleteButtonProps={{ size: "small" }}
433+
canEdit={permissionsData?.includes("admin")}
434+
/* highlight-end */
435+
>
436+
<p>Rest of your page here</p>
437+
</Show>
438+
);
439+
};
440+
// visible-block-end
441+
442+
render(
443+
<ReactRouter.BrowserRouter>
444+
<RefineAntdDemo
445+
authProvider={authProvider}
446+
dataProvider={customDataProvider}
447+
resources={[
448+
{
449+
name: "posts",
450+
list: "/posts",
451+
show: "/posts/show/:id",
452+
edit: "/posts/edit/:id",
453+
},
454+
]}
455+
>
456+
<ReactRouter.Routes>
457+
<ReactRouter.Route
458+
path="/posts"
459+
element={
460+
<div>
461+
<p>This page is empty.</p>
462+
<ShowButton recordItemId="123">Show Item 123</ShowButton>
463+
</div>
464+
}
465+
/>
466+
<ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
467+
<ReactRouter.Route
468+
path="/posts/edit/:id"
469+
element={<Edit>Edit Page</Edit>}
470+
/>
471+
</ReactRouter.Routes>
472+
</RefineAntdDemo>
473+
</ReactRouter.BrowserRouter>,
474+
);
475+
```
476+
362477
### recordItemId
363478

364479
The `<Show>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL (when used on a custom page, modal or drawer).
@@ -897,7 +1012,6 @@ If [`canEdit`](#candelete-and-canedit) is `false`, [`<EditButton>`][edit-button]
8971012

8981013
```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
8991014
setInitialRoutes(["/posts/show/123"]);
900-
9011015
// visible-block-start
9021016
import { Show } from "@refinedev/antd";
9031017
import { Button } from "antd";

‎documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md

+112-1
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,118 @@ render(
229229
);
230230
```
231231

232-
### canEdit and editButtonProps
232+
> For more information, refer to the [`usePermission` documentation &#8594](/docs/authentication/hooks/use-permissions)
233+
234+
### deleteButtonProps
235+
236+
If the resource has the `canDelete` property and you want to customize this button, you can use the `deleteButtonProps` property like the code below.
237+
238+
```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
239+
setInitialRoutes(["/posts/show/123"]);
240+
import { Refine } from "@refinedev/core";
241+
import { ShowButton } from "@refinedev/chakra-ui";
242+
import dataProvider from "@refinedev/simple-rest";
243+
244+
// visible-block-start
245+
import { Show } from "@refinedev/chakra-ui";
246+
import { usePermissions } from "@refinedev/core";
247+
248+
const PostShow: React.FC = () => {
249+
const { data: permissionsData } = usePermissions();
250+
251+
return (
252+
<Show
253+
/* highlight-start */
254+
canDelete={permissionsData?.includes("admin")}
255+
deleteButtonProps={{ size: "small" }}
256+
canEdit={permissionsData?.includes("admin")}
257+
/* highlight-end */
258+
>
259+
<p>Rest of your page here</p>
260+
</Show>
261+
);
262+
};
263+
// visible-block-end
264+
265+
const App = () => {
266+
const simpleRestDataProvider = dataProvider(
267+
"https://api.fake-rest.refine.dev",
268+
);
269+
270+
const customDataProvider = {
271+
...simpleRestDataProvider,
272+
deleteOne: async ({ resource, id, variables }) => {
273+
return {
274+
data: {},
275+
};
276+
},
277+
};
278+
279+
const authProvider = {
280+
login: async () => {
281+
return {
282+
success: true,
283+
redirectTo: "/",
284+
};
285+
},
286+
register: async () => {
287+
return {
288+
success: true,
289+
};
290+
},
291+
forgotPassword: async () => {
292+
return {
293+
success: true,
294+
};
295+
},
296+
updatePassword: async () => {
297+
return {
298+
success: true,
299+
};
300+
},
301+
logout: async () => {
302+
return {
303+
success: true,
304+
redirectTo: "/",
305+
};
306+
},
307+
check: async () => ({
308+
authenticated: true,
309+
}),
310+
onError: async (error) => {
311+
console.error(error);
312+
return { error };
313+
},
314+
getPermissions: async () => ["admin"],
315+
getIdentity: async () => null,
316+
};
317+
318+
return (
319+
<ReactRouter.BrowserRouter>
320+
<RefineHeadlessDemo
321+
notificationProvider={RefineChakra.notificationProvider()}
322+
resources={[
323+
{
324+
name: "posts",
325+
show: "/posts/show/:id",
326+
list: "/posts",
327+
},
328+
]}
329+
>
330+
<ReactRouter.Routes>
331+
<ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
332+
<ReactRouter.Route path="/posts" element={<DummyListPage />} />
333+
</ReactRouter.Routes>
334+
</RefineHeadlessDemo>
335+
</ReactRouter.BrowserRouter>
336+
);
337+
};
338+
render(
339+
<Wrapper>
340+
<App />
341+
</Wrapper>,
342+
);
343+
```
233344

234345
`canEdit` allows you to add an edit button inside the `<Show>` component. If the resource has the `canEdit` property, Refine adds the edit button by default. If you want to customize this button you can use the `editButtonProps` property.
235346

‎documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md

+124
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,130 @@ render(
265265

266266
> For more information, refer to the [`usePermission` documentation &#8594](/docs/authentication/hooks/use-permissions)
267267
268+
### deleteButtonProps
269+
270+
If the resource has the `canDelete` property and you want to customize this button, you can use the `deleteButtonProps` property like the code below.
271+
272+
```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
273+
setInitialRoutes(["/posts/show/123"]);
274+
import { Refine } from "@refinedev/core";
275+
import { ShowButton } from "@refinedev/mantine";
276+
import routerProvider from "@refinedev/react-router-v6/legacy";
277+
import dataProvider from "@refinedev/simple-rest";
278+
279+
// visible-block-start
280+
import { Show } from "@refinedev/mantine";
281+
import { usePermissions } from "@refinedev/core";
282+
import { Title } from "@mantine/core";
283+
284+
const PostShow: React.FC = () => {
285+
const { data: permissionsData } = usePermissions();
286+
287+
return (
288+
<Show
289+
/* highlight-start */
290+
canDelete={permissionsData?.includes("admin")}
291+
deleteButtonProps={{ size: "small" }}
292+
canEdit={permissionsData?.includes("admin")}
293+
/* highlight-end */
294+
>
295+
<p>Rest of your page here</p>
296+
</Show>
297+
);
298+
};
299+
// visible-block-end
300+
301+
const App = () => {
302+
const simpleRestDataProvider = dataProvider(
303+
"https://api.fake-rest.refine.dev",
304+
);
305+
306+
const customDataProvider = {
307+
...simpleRestDataProvider,
308+
deleteOne: async ({ resource, id, variables }) => {
309+
return {
310+
data: {},
311+
};
312+
},
313+
};
314+
315+
const authProvider = {
316+
login: async () => {
317+
return {
318+
success: true,
319+
redirectTo: "/",
320+
};
321+
},
322+
register: async () => {
323+
return {
324+
success: true,
325+
};
326+
},
327+
forgotPassword: async () => {
328+
return {
329+
success: true,
330+
};
331+
},
332+
updatePassword: async () => {
333+
return {
334+
success: true,
335+
};
336+
},
337+
logout: async () => {
338+
return {
339+
success: true,
340+
redirectTo: "/",
341+
};
342+
},
343+
check: async () => ({
344+
authenticated: true,
345+
}),
346+
onError: async (error) => {
347+
console.error(error);
348+
return { error };
349+
},
350+
getPermissions: async () => ["admin"],
351+
getIdentity: async () => null,
352+
};
353+
354+
return (
355+
<ReactRouter.BrowserRouter>
356+
<RefineMantineDemo
357+
dataProvider={customDataProvider}
358+
authProvider={authProvider}
359+
resources={[
360+
{
361+
name: "posts",
362+
show: "/posts/show/:id",
363+
list: "/posts",
364+
},
365+
]}
366+
>
367+
<ReactRouter.Routes>
368+
<ReactRouter.Route
369+
path="/posts"
370+
element={
371+
<div>
372+
<p>This page is empty.</p>
373+
<RefineMantine.ShowButton recordItemId="123">
374+
Show Item 123
375+
</RefineMantine.ShowButton>
376+
</div>
377+
}
378+
/>
379+
<ReactRouter.Route element={<PostShow />} path="/posts/show/:id" />
380+
</ReactRouter.Routes>
381+
</RefineMantineDemo>
382+
</ReactRouter.BrowserRouter>
383+
);
384+
};
385+
render(
386+
<Wrapper>
387+
<App />
388+
</Wrapper>,
389+
);
390+
```
391+
268392
### recordItemId
269393

270394
The `<Show>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL, such as when it's used on a custom page, modal or drawer.

0 commit comments

Comments
 (0)