From 1ef63bd873aa7725fda2f162c5511ccec15a006f Mon Sep 17 00:00:00 2001 From: Batuhan Wilhelm Date: Wed, 18 Dec 2024 14:35:41 +0300 Subject: [PATCH 01/17] feat(ci): add dispatch for build all examples workflow --- .github/workflows/build-examples.yml | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/.github/workflows/build-examples.yml b/.github/workflows/build-examples.yml index 2f2f25320399..f6f9e364d139 100644 --- a/.github/workflows/build-examples.yml +++ b/.github/workflows/build-examples.yml @@ -23,10 +23,11 @@ on: - cron: "0 6 * * *" workflow_dispatch: inputs: - environment: - description: "Environment to run tests against" - type: environment + build_all_examples: + description: "Build all examples" + type: boolean required: false + default: true jobs: chunks: @@ -67,7 +68,7 @@ jobs: - name: Split Into Chunks id: chunkstep - run: CHUNKS=6 BASE_REF=${{ github.base_ref }} BUILD_ALL_EXAMPLES=${{ (contains(steps.pr-labels.outputs.labels, ' build-examples ') || github.event_name == 'schedule' ) && 'true' || 'false' }} node ./.github/workflows/scripts/build-example-chunks.js + run: CHUNKS=6 BASE_REF=${{ github.base_ref }} BUILD_ALL_EXAMPLES=${{ (github.event.inputs.build_all_examples || contains(steps.pr-labels.outputs.labels, ' build-examples ') || github.event_name == 'schedule' ) && 'true' || 'false' }} node ./.github/workflows/scripts/build-example-chunks.js build-chunk-1: runs-on: ubuntu-latest From 35ebf6b0566d896fc0aba72ca066a023fcf278f7 Mon Sep 17 00:00:00 2001 From: Batuhan Wilhelm Date: Wed, 18 Dec 2024 14:47:04 +0300 Subject: [PATCH 02/17] chore(ci): remove paths from release.yml --- .github/workflows/release.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 3a8ca942433a..914caccd60ba 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -2,9 +2,6 @@ name: Release on: push: - paths: - - ".changeset/**" - - "packages/**" branches: - main From 00f6c5f548a7bb61abe2834f267a46d61b4891b4 Mon Sep 17 00:00:00 2001 From: Victor Rusakovich Date: Wed, 18 Dec 2024 15:07:01 +0100 Subject: [PATCH 03/17] fix(docs): link to react-router upgrade url --- .../integrations/react-router/migration-guide-v6-to-v7.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md b/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md index 62deabc7db39..eb019c232020 100644 --- a/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md +++ b/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md @@ -5,7 +5,7 @@ sidebar_label: v6 to v7 In this guide, we will cover the breaking changes of `@refinedev/react-router-v6` and how to migrate your project to `@refinedev/react-router` with `react-router` v7. -> 🚨 Refine doesn't introduce any breaking changes besides the package name changes. However, we recommend you to read the [React Router v7 migration guide](https://reactrouter.com/en/main/upgrading/v6) for more detailed information about React Router v7 changes. +> 🚨 Refine doesn't introduce any breaking changes besides the package name changes. However, we recommend you to read the [React Router v7 migration guide](https://reactrouter.com/upgrading/v6) for more detailed information about React Router v7 changes. ## Package Changes From 0e7fec0d081146b6b067c4bd1e4356bef00d503f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Necati=20=C3=96zmen?= Date: Tue, 24 Dec 2024 09:46:03 +0300 Subject: [PATCH 04/17] docs(blog): update antd dynamic form (#6598) --- ...orm.md => 2024-12-20-antd-dynamic-form.md} | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) rename documentation/blog/{2022-11-17-antd-dynamic-form.md => 2024-12-20-antd-dynamic-form.md} (96%) diff --git a/documentation/blog/2022-11-17-antd-dynamic-form.md b/documentation/blog/2024-12-20-antd-dynamic-form.md similarity index 96% rename from documentation/blog/2022-11-17-antd-dynamic-form.md rename to documentation/blog/2024-12-20-antd-dynamic-form.md index 93c30c85201b..e9ac6ef02797 100644 --- a/documentation/blog/2022-11-17-antd-dynamic-form.md +++ b/documentation/blog/2024-12-20-antd-dynamic-form.md @@ -4,12 +4,17 @@ description: Easy way to creating dynamic forms in React CRUD apps with Ant Desi slug: react-crud-app-with-dynamic-form-ant-design authors: david_omotayo tags: [react, Refine, tutorial, ant-design] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-17-antd-dynamic-form/social.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-17-antd-dynamic-form/social-2.png hide_table_of_contents: false --- +**This article was last updated on December 20, 2024, to include advanced styling techniques for Ant Design dynamic forms and integration with form libraries like Formik and React Hook Form. Additionally, the introduction has been updated for clarity.** + ## Introduction +**TL;DR:** What is Ant Design Dynamic Form? +Ant Design provides a dynamic form that enables the developer to create flexible and interactive forms, where users can dynamically add or remove fields if needed, making it quite suitable for complex data collection. + Forms are one of the most adaptable elements in web development. They come in distinct structures for various use cases. However, due to the sporadic complexity of the information they collect, they tend to grow larger with several fields, which can be a big turnoff for most users. @@ -31,7 +36,8 @@ Steps we'll cover: - [Adding icons](#adding-icons) - [Validation](#validation) - [Building the edit page](#building-the-edit-page) -- [Live StackBlitz Example](#example) +- [FAQ's](#faqs) +- [Why Use AntD Dynamic Forms?](#why-use-antd-dynamic-forms) **Prerequisite** @@ -1174,7 +1180,26 @@ This is a duplicate of the form component we created inside the `UserCreate` pag That's it. We've successfully built an application that uses an API to post and edit response records using a **dynamic form**. -As a challenge, visit Refine's [documentation](https://refine.dev/docs/) to learn how you can add a `delete` button to the fields on the table and make your application a full-fledged CRUD application. Cheers! +As a challenge, visit Refine's [documentation](https://refine.dev/docs/) to learn how you can add a `delete` button to the fields on the table and make your application a full-fledged CRUD application. + +## FAQ's + +- What is a dynamic form? + A dynamic form is one that automatically changes its structure depending on what the user enters, often allowing users to add or remove fields dynamically. + +- How do I start using dynamic fields from Ant Design? + To manage dynamic fields, use the component and methods provided by ``: add() and remove(). + +- Is it possible to add validation to dynamic form fields? + Yes, you can utilize the rules prop on `` to extend your own validate logic. + +## Why Use AntD Dynamic Forms? + +Dynamic forms improve user satisfaction by: + +- Simplifying User Input: Users only see fields they need, reducing form clutter. +- Flexibility: Provide the user with the facility to add or remove fields as required. +- Streamlining Complex Data: Collect additional details without overwhelming users with lengthy forms upfront. • Saving Time: Automate repetitive input scenarios with less manual work. ## Conclusion From 2a614f082dc56ffa8a022bb19255545361df895a Mon Sep 17 00:00:00 2001 From: Edward Fitz Abucay Date: Tue, 24 Dec 2024 14:47:57 +0800 Subject: [PATCH 05/17] docs(chakra-ui-v3): Add integration package for Chakra UI v3 [:sparkle:] (#6599) Signed-off-by: Edward Fitz Abucay --- .../docs/packages/list-of-packages/index.md | 1 + .../assets/integration-icons/chakra-v3.tsx | 44 +++++++++++++++++++ .../src/assets/integration-icons/index.ts | 1 + documentation/src/assets/integrations.ts | 17 +++++++ .../src/pages/integrations/index.tsx | 6 +++ 5 files changed, 69 insertions(+) create mode 100644 documentation/src/assets/integration-icons/chakra-v3.tsx diff --git a/documentation/docs/packages/list-of-packages/index.md b/documentation/docs/packages/list-of-packages/index.md index 2078bb10c5cd..0bc9c8dd0b04 100644 --- a/documentation/docs/packages/list-of-packages/index.md +++ b/documentation/docs/packages/list-of-packages/index.md @@ -79,3 +79,4 @@ To learn more about Live Providers, check out [Realtime](/docs/guides-concepts/r - [`@refine-auth/kinde-react`](https://github.com/hirenf14/refine-auth-kinde-react) - Support for [Kinde](https://kinde.com) authentication. - [`refine-pocketbase`](https://github.com/kruschid/refine-pocketbase) - Connector for backends created with [PocketBase](https://pocketbase.io/). Also has auth provider and live provider supports. - [`refine-postgrest-ts`](https://github.com/ffimnsr/refine-postgrest-ts) - Connector for [PostgREST](https://postgrest.org) backends. +- [`refine-chakra-ui-v3-ts`](https://github.com/ffimnsr/refine-chakra-ui-v3-ts) - Integration for [Chakra UI v3](https://www.chakra-ui.com). diff --git a/documentation/src/assets/integration-icons/chakra-v3.tsx b/documentation/src/assets/integration-icons/chakra-v3.tsx new file mode 100644 index 000000000000..94edf21ddba2 --- /dev/null +++ b/documentation/src/assets/integration-icons/chakra-v3.tsx @@ -0,0 +1,44 @@ +import * as React from "react"; +import type { SVGProps } from "react"; + +const SvgChakrav3 = ({ + withBrandColor = true, + ...props +}: SVGProps & { withBrandColor?: boolean }) => ( + + + + + + + + + + + + + + +); + +export default SvgChakrav3; diff --git a/documentation/src/assets/integration-icons/index.ts b/documentation/src/assets/integration-icons/index.ts index 67226bf9345c..2f32ef0cdacd 100644 --- a/documentation/src/assets/integration-icons/index.ts +++ b/documentation/src/assets/integration-icons/index.ts @@ -3,6 +3,7 @@ export { default as Airtable } from "./airtable"; export { default as Antd } from "./antd"; export { default as Appwrite } from "./appwrite"; export { default as Chakra } from "./chakra"; +export { default as Chakrav3 } from "./chakra-v3"; export { default as Directus } from "./directus"; export { default as Dp } from "./dp"; export { default as Elide } from "./elide"; diff --git a/documentation/src/assets/integrations.ts b/documentation/src/assets/integrations.ts index b2d00e49b4c1..41119b6852ce 100644 --- a/documentation/src/assets/integrations.ts +++ b/documentation/src/assets/integrations.ts @@ -35,6 +35,7 @@ import { PocketBase, ShadCnUI, PostgREST, + Chakrav3, } from "./integration-icons"; export const integrations: IntegrationsType = { @@ -151,6 +152,22 @@ export const integrations: IntegrationsType = { status: "stable", }, ], + "community-ui-framework-packages": [ + { + name: "Chakra UI v3", + icon: Chakrav3, + description: + " Chakra UI v3 Framework support. 20+ framework-specific components incl. Layout, Feedback, and CRUD components.", + url: "https://www.npmjs.com/package/@ffimnsr/refine-chakra-ui-v3", + status: "stable", + contributors: [ + { + name: "ffimnsr", + url: "https://github.com/ffimnsr", + }, + ], + }, + ], "community-data-provider-packages": [ { name: "Directus Data Provider", diff --git a/documentation/src/pages/integrations/index.tsx b/documentation/src/pages/integrations/index.tsx index 7c5771b565db..55f97e9fe396 100644 --- a/documentation/src/pages/integrations/index.tsx +++ b/documentation/src/pages/integrations/index.tsx @@ -47,6 +47,7 @@ const Integrations: React.FC = () => { const { communityPackages, dataProviderPackages, + communityUiFrameworkPackages, communityDataProviderPackages, frameworks, integrations, @@ -56,6 +57,8 @@ const Integrations: React.FC = () => { return { uiPackages: integrationsData["ui-framework-packages"], dataProviderPackages: integrationsData["data-provider-packages"], + communityUiFrameworkPackages: + integrationsData["community-ui-framework-packages"], communityDataProviderPackages: integrationsData["community-data-provider-packages"], frameworks: integrationsData["frameworks"], @@ -103,6 +106,9 @@ const Integrations: React.FC = () => { Data Provider Packages + UI Framework Packages by the Community ❤️ + + Data Provider Packages by the Community ❤️ From 1e263d938c75b4a293ab343f3db2eb94976b0955 Mon Sep 17 00:00:00 2001 From: phwt <28344318+phwt@users.noreply.github.com> Date: Tue, 24 Dec 2024 13:48:26 +0700 Subject: [PATCH 06/17] docs(react-router-upgrade): remove extra double quote and correct version (#6602) --- .../integrations/react-router/migration-guide-v6-to-v7.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md b/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md index eb019c232020..cd1c820b2569 100644 --- a/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md +++ b/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md @@ -28,7 +28,7 @@ npm install @refinedev/react-router react-router ```diff - "@refinedev/react-router-v6": "^4.6.0" -+ "@refinedev/react-router": "^5.0.0" ++ "@refinedev/react-router": "^1.0.1" - "react-router-dom": "^6.8.1" - "react-router": "^6.8.1" @@ -64,5 +64,5 @@ npx @refinedev/codemod@latest refine-react-router-v6-to-refine-react-router For `react-router-dom` to `react-router`: ```bash -npx @refinedev/codemod@latest react-router-dom-to-react-router" +npx @refinedev/codemod@latest react-router-dom-to-react-router ``` From 159aa535dc3e10c698870d91f2e83787a1a82164 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Necati=20=C3=96zmen?= Date: Tue, 24 Dec 2024 09:59:03 +0300 Subject: [PATCH 07/17] docs(blog): update for snippets (#6597) Co-authored-by: Batuhan Wilhelm --- ...mui-select.md => 2024-12-20-mui-select.md} | 91 ++++++++++++++++++- 1 file changed, 87 insertions(+), 4 deletions(-) rename documentation/blog/{2022-10-30-mui-select.md => 2024-12-20-mui-select.md} (86%) diff --git a/documentation/blog/2022-10-30-mui-select.md b/documentation/blog/2024-12-20-mui-select.md similarity index 86% rename from documentation/blog/2022-10-30-mui-select.md rename to documentation/blog/2024-12-20-mui-select.md index a84f4cc98786..313468bc5d86 100644 --- a/documentation/blog/2022-10-30-mui-select.md +++ b/documentation/blog/2024-12-20-mui-select.md @@ -4,12 +4,30 @@ description: We'll discover the Material UI select component with examples slug: material-ui-select-component authors: doro_onome tags: [material-ui, react] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-30-mui-select/social.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-30-mui-select/social-2.png hide_table_of_contents: false --- +**This article was last updated on December 20, 2024, to include advanced styling techniques for Material UI Select and integration with form libraries like Formik and React Hook Form. Also the introduction is updated for clarity.** + ## Introduction +**TL;DR:** + +Material UI Select is a component to create dropdowns in React that provides native customization options for styles, indicators, decorators, and grouped options. + +**How to use Material UI Select?** + +- Import the required components, Select and Option, from @mui/joy:. +- Customize with props like placeholder, defaultValue, and indicator. +- Sx to style for responsive and dynamic designs. + +**Key Features of Material-UI Select:** + +- Custom Indicators: Replaces the default dropdown arrow for your icon. +- Decorators: Appending icons or elements before or after the select field. +- Options Grouped Together: A categorization of options contributes towards better usability. 4. Clearable Select: Add a clear button for resetting the selection. 5. - - - Accessibility: Native support for ARIA attributes. + Material UI provides a plethora of available styled components that assist developers in creating responsive and aesthetically pleasing web designs. One of these components is Material UI's Select, which is an input field that showcases a list of customizable options. In this tutorial, we will deeply dive into **Material UI Select**, look at its prop possibilities, and highlight its features. We will also investigate a potential use case in a real-world application. Steps we'll cover: @@ -18,12 +36,11 @@ Steps we'll cover: - [Getting Started with Material UI Select](#getting-started-with-material-ui-select) - [The Option component](#the-option-component) - [Other Material UI Select features](#other-material-ui-select-features) - - [Indicator](#indicator) - - [Decorator](#decorator) - - [Grouped Options](#grouped-options) - [Clearing the Select field](#clearing-the-select-field) - [Accessibility](#accessibility) - [Building a Sign-up Form UI with React and Material UI Select](#building-a-sign-up-form-ui-with-react-and-material-ui-select) +- [Advanced Styling with Material UI Select](#advanced-styling-with-material-ui-select) +- [Integration with Form Libraries (Formik and React Hook Form)](#integration-with-form-libraries-formik-and-react-hook-form) ## What is Material UI @@ -527,6 +544,72 @@ And the result: Material UI select option +## Advanced Styling with Material UI Select + +Material UI Select has more detailed customization with the sx prop and themes. On this page you can show how to: + +- Override default styles for hover, focus, and selected states. +- Integrate custom themes to maintain consistent styling throughout the application. +- Add animations for dropdown behavior or transitions. + +```tsx + +``` + +## Integration with Form Libraries (Formik and React Hook Form) + +This section would appeal to developers building forms with validation. + +Example with React Hook Form: + +```tsx +import { useForm, Controller } from "react-hook-form"; +import Select from "@mui/joy/Select"; +import Option from "@mui/joy/Option"; + +export default function FormWithSelect() { + const { control, handleSubmit } = useForm(); + + const onSubmit = (data) => { + console.log(data); + }; + + return ( +
+ ( + + )} + /> + + + ); +} +``` + ## Conclusion This article covered the **Material UI Select** component, navigated its features, and highlighted its functionalities in a React application. We also investigated a use case by developing a Sign-up form UI in React with **Material UI Select**. I hope you find this post helpful. From 60622decf68290df1603dabe425d259e34925374 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Necati=20=C3=96zmen?= Date: Wed, 25 Dec 2024 09:40:53 +0300 Subject: [PATCH 08/17] =?UTF-8?q?docs(blog):=20update=20React-DND=20articl?= =?UTF-8?q?e=20with=20performance=20optimization=20te=E2=80=A6=20(#6603)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...7-react-dnd.md => 2024-12-24-react-dnd.md} | 123 ++++++++++++++++-- 1 file changed, 112 insertions(+), 11 deletions(-) rename documentation/blog/{2023-03-07-react-dnd.md => 2024-12-24-react-dnd.md} (89%) diff --git a/documentation/blog/2023-03-07-react-dnd.md b/documentation/blog/2024-12-24-react-dnd.md similarity index 89% rename from documentation/blog/2023-03-07-react-dnd.md rename to documentation/blog/2024-12-24-react-dnd.md index f8d48d5c7237..7d44b07c1ab7 100644 --- a/documentation/blog/2023-03-07-react-dnd.md +++ b/documentation/blog/2024-12-24-react-dnd.md @@ -4,17 +4,19 @@ description: We'll be using the react-dnd library to create draggable components slug: react-draggable-components-with-react-dnd authors: david_omotayo tags: [react, Refine, tutorial] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/social.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/social-2.png hide_table_of_contents: false --- +**This article was last updated on December 24, 2024, to include advanced techniques for optimizing React-DND performance, such as avoiding unnecessary re-renders, virtualizing large lists, and supporting mobile devices with the Touch Backend, along with simplified explanations for better clarity.** +
react draggable
-# Introduction +## Introduction The HTML Drag-and-Drop API is a pioneering feature of the web, whose introduction has inspired developers to find innovative ways of using it to enhance the user experience on their websites. @@ -688,15 +690,6 @@ Now, if you save your project go back to the browser, you should see the cards r react draggable -
- -
-
- - discord banner - -
- ## Using the useDrag hook To make our cards draggable, we'll declare the `useDrag` hook inside the `cards` component, give it a `type` and item `value`, and then pass the `dragRef` variable to the card component using the `ref` attribute. @@ -901,6 +894,114 @@ If you save your progress and revisit the browser, you should now be able to dra That's all. We have successfully created a kanban board with draggable cards and columns with drop zones. You can enhance the appearance by adding designs based on the state of each card and column. +## Optimizing Performance with React-DND + +Performance can become an issue when working with React-DND, especially with a large number of draggable items. Below are some tips to keep things running efficiently: + +**Avoid Unnecessary Re-Renders** + +Utilize `React.memo` or `useMemo` to avoid unnecessary re-renders. For instance, if your draggable items remain unchanged, memoizing them can save a lot of processing time. + +**Batch State Updates** + +When updating multiple items after a drop, batch those updates instead of triggering multiple state changes. This minimizes React’s render cycles. + +**Minimize the `collect` Function’s Scope** + +The `collect` function in `useDrag` and `useDrop` is powerful, but adding excessive logic can degrade performance. Only gather data that’s absolutely necessary. + +**Virtualize Large Lists** + +For hundreds of draggable items, consider using libraries like `react-window` or `react-virtualized`. These libraries render only the visible items, reducing React’s workload. + +By applying these strategies, you’ll achieve a drag-and-drop experience that is both fast and functional. + +## Error Handling and Debugging + +React-DND is a robust library, but you might encounter some common issues. Here’s how to resolve them: + +**Missing `DndProvider`** + +If you forget to wrap your app with `DndProvider`, nothing will work. Ensure your root component includes it: + +```jsx +import { DndProvider } from "react-dnd"; +import { HTML5Backend } from "react-dnd-html5-backend"; + +function App() { + return ( + + + + ); +} +``` + +**Type Mismatches Between useDrag and useDrop** + +The type property in useDrag must match the accept property in useDrop. Otherwise, the drop zone won’t recognize the dragged item: + +```tsx +const [{ isDragging }, dragRef] = useDrag({ type: "item" }); +const [{ isOver }, dropRef] = useDrop({ accept: "item" }); +``` + +**Monitor Data Not Updating** + +If collect isn’t providing accurate data, ensure you’re returning the correct values from the monitor: + +```tsx +collect: (monitor) => ({ isDragging: monitor.isDragging() }); +``` + +Debugging these small issues can save significant time. Always refer to the documentation and browser console for detailed error messages. + +**Mobile Device Support** + +React-DND’s default backend (HTML5Backend) works well on desktop browsers but struggles on mobile devices. Here’s how to enable drag-and-drop for touchscreens: + +**Use the Touch Backend** + +Install the react-dnd-touch-backend package designed for touch devices: + +``` +npm install react-dnd-touch-backend +``` + +**Set Up the Touch Backend** + +Replace HTML5Backend with TouchBackend in your app’s DndProvider: + +```tsx +import { DndProvider } from "react-dnd"; +import { TouchBackend } from "react-dnd-touch-backend"; + +function App() { + return ( + + + + ); +} +``` + +**Customize Touch Behavior** + +You can tweak the touch backend’s settings for better performance, such as adjusting the drag delay: + +```tsx +const backendOptions = { + enableMouseEvents: true, + delay: 100, +}; + + + +; +``` + +With these adjustments, your drag-and-drop features will work seamlessly across both desktop and mobile devices. + ## Conclusion This article introduced Refine and React-DND, detailing the process of setting up a Refine project with predefined CRUD pages via the Superplate CLI and integrating React-DND. It also covered the creation of a dashboard page featuring a kanban board that utilizes the useDrag and useDrop hooks from React-DND for its drag-and-drop functionality. From c9ba13912c57b75cf9633df73fa820220134463c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Wed, 25 Dec 2024 10:51:01 +0300 Subject: [PATCH 09/17] docs(sandpack): update code file snapshots (#6605) --- documentation/src/components/sandpack/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/documentation/src/components/sandpack/index.tsx b/documentation/src/components/sandpack/index.tsx index 8f2a8497d4cd..31a13c9b1602 100644 --- a/documentation/src/components/sandpack/index.tsx +++ b/documentation/src/components/sandpack/index.tsx @@ -391,13 +391,13 @@ const SandpackBase = ({

{`Dependencies: ${Object.keys(dependencies ?? {}).map( (k) => `${k}@${dependencies[k]}`, )}`}

-

{"Code Files"}

+
{"Code Files"}
{Object.keys(files ?? {}).map((f) => (
{`File: ${f}`}
-
+ 
               {`Content: ${"code" in files[f] ? files[f].code : files[f]}`}
-
+
))} From 6ef16801de36611194b92558eb980e4e68f62552 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Wed, 25 Dec 2024 11:55:03 +0300 Subject: [PATCH 10/17] docs: fix heading orders (#6606) --- documentation/docs/data/packages/strapi-v4/index.md | 2 +- documentation/docs/guides-concepts/forms/index.md | 2 +- documentation/src/components/sandpack/index.tsx | 1 + documentation/src/refine-theme/common-admonition.tsx | 4 ++-- documentation/src/refine-theme/common-tab-item.tsx | 12 +++++++++++- 5 files changed, 16 insertions(+), 5 deletions(-) diff --git a/documentation/docs/data/packages/strapi-v4/index.md b/documentation/docs/data/packages/strapi-v4/index.md index fad5c22e349b..0edafc913770 100644 --- a/documentation/docs/data/packages/strapi-v4/index.md +++ b/documentation/docs/data/packages/strapi-v4/index.md @@ -409,7 +409,7 @@ const App: React.FC = () => { render(); ``` -##### Relations Population for `/me` request +#### Relations Population for `/me` request If you need to the population for the `/me` request you can use it like this in your `authProvider`. diff --git a/documentation/docs/guides-concepts/forms/index.md b/documentation/docs/guides-concepts/forms/index.md index 001d10354bb6..41e28237e133 100644 --- a/documentation/docs/guides-concepts/forms/index.md +++ b/documentation/docs/guides-concepts/forms/index.md @@ -332,7 +332,7 @@ useForm({ }); ``` -##### **Usage of ``** +#### **Usage of ``** diff --git a/documentation/src/components/sandpack/index.tsx b/documentation/src/components/sandpack/index.tsx index 31a13c9b1602..1d9225e160b5 100644 --- a/documentation/src/components/sandpack/index.tsx +++ b/documentation/src/components/sandpack/index.tsx @@ -388,6 +388,7 @@ const SandpackBase = ({
+
Code Example

{`Dependencies: ${Object.keys(dependencies ?? {}).map( (k) => `${k}@${dependencies[k]}`, )}`}

diff --git a/documentation/src/refine-theme/common-admonition.tsx b/documentation/src/refine-theme/common-admonition.tsx index bd9849b114e8..8bb1c51bfa18 100644 --- a/documentation/src/refine-theme/common-admonition.tsx +++ b/documentation/src/refine-theme/common-admonition.tsx @@ -115,7 +115,7 @@ export const Admonition = ({ type, title, children }: Props) => { )} > {(title || titles[type]) && ( -
{ > {title ?? titles[type] ?? ""} -
+ )}
{children} diff --git a/documentation/src/refine-theme/common-tab-item.tsx b/documentation/src/refine-theme/common-tab-item.tsx index cf62eaf4fed3..b5dae2b7bcf4 100644 --- a/documentation/src/refine-theme/common-tab-item.tsx +++ b/documentation/src/refine-theme/common-tab-item.tsx @@ -1,9 +1,19 @@ import React from "react"; import clsx from "clsx"; -export default function CommonTabItem({ children, hidden, className }) { +export default function CommonTabItem({ + children, + hidden, + className, + label, + value, + ...props +}) { + const tabHeading = label || value; + return ( ); From 0fc8382fcdb0d0ccf03fb02155c4ff5bae771694 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Necati=20=C3=96zmen?= Date: Fri, 27 Dec 2024 09:34:46 +0300 Subject: [PATCH 11/17] docs(blog): update mui snippets (#6607) --- ...checkbox.md => 2024-12-25-mui-checkbox.md} | 142 +++++++++++++++--- 1 file changed, 124 insertions(+), 18 deletions(-) rename documentation/blog/{2022-12-15-mui-checkbox.md => 2024-12-25-mui-checkbox.md} (82%) diff --git a/documentation/blog/2022-12-15-mui-checkbox.md b/documentation/blog/2024-12-25-mui-checkbox.md similarity index 82% rename from documentation/blog/2022-12-15-mui-checkbox.md rename to documentation/blog/2024-12-25-mui-checkbox.md index c7f12043b17f..73afb06610b5 100644 --- a/documentation/blog/2022-12-15-mui-checkbox.md +++ b/documentation/blog/2024-12-25-mui-checkbox.md @@ -4,30 +4,40 @@ description: We'll discover the Material UI Checkbox component with examples slug: material-ui-checkbox-component authors: doro_onome tags: [material-ui, react] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-15-mui-checkbox/social.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-15-mui-checkbox/social-2.png hide_table_of_contents: false --- +**This article was last updated on December 25, 2024, to include advanced Material UI Checkbox customization techniques, improved form validation patterns, and accessibility best practices.** + ## Introduction -Material UI offers a wide range of component and utilities that empowers developers with the appropriate tools to create more responsive web designs and bolster the UX of their apps. A checkbox is a small box that, when selected by the user, indicates that a specific feature or option has been enabled. Material UI provides this valuable component on a platter and makes them customizable to apply to your project fittingly. This article will deeply traverse the Material UI Checkbox component, investigate its processes and highlight its syntax application. We will also explore a potential use case in a real-world application. +### What is Material UI Checkbox? + +Material UI Checkbox is a form input component that allows users to select one or more options out of a given set of choices. It is part of the Material UI library, which provides an up-to-date, accessible, and customizable implementation of the checkbox for React applications. + +Key Features and Benefits + +- **Easy Integration**: Easy to implement with just a single import +- **Accessibility**: ARIA support included; keyboard navigation +- **Customization**: Rich styling with props and themes +- **Form Support**: Seamless integrations with form libraries +- **State Management**: controlled and uncontrolled component options +- **Responsive**: Works on all sizes of devices - **TypeScript Support**: Full type definitions included + +Material UI offers a wide range of component and utilities that empowers developers with the appropriate tools to create more responsive web designs and bolster the UX of their apps. A checkbox is a small box that, when selected by the user, indicates that a specific feature or option has been enabled. Material UI provides this valuable component on a platter and makes them customizable to apply to your project fittingly. + +This article will deeply traverse the Material UI Checkbox component, investigate its processes and highlight its syntax application. We will also explore a potential use case in a real-world application. Steps we'll cover: - [What is Material UI?](#what-is-material-ui) - [Getting started with Material UI Checkbox](#getting-started-with-material-ui-checkbox) - [Customizing your Material UI Checkbox](#customizing-your-material-ui-checkbox) - - [Adding Labels](#adding-labels) - - [Controlling the Checkbox Size](#controlling-the-checkbox-size) - - [Controlling the Checkbox Color](#controlling-the-checkbox-color) - - [Label Placement](#label-placement) - - [Checkbox Icons](#checkbox-icons) - [Other handy features](#other-handy-features) - - [FormGroup](#formgroup) - - [Indeterminate](#indeterminate) -- [When to use the Material UI Checkbox](#when-to-use-the-mui-checkbox) - - [Checkboxes vs Radio buttons](#checkboxes-vs-radio-buttons) - - [Checkboxes vs Switches](#checkboxes-vs-switches) +- [Error Handling \& Validation](#error-handling--validation) +- [Advanced Customization](#advanced-customization) +- [When to use the Material UI Checkbox](#when-to-use-the-material-ui-checkbox) - [Material UI Checkbox Accessibility](#material-ui-checkbox-accessibility) ## What is Material UI? @@ -460,12 +470,108 @@ export default function IndeterminateCheckbox() {
-
-
- - discord banner - -
+## Error Handling & Validation + +When working with checkboxes in forms, proper error handling is essential. Here's a simple example of form validation with Material UI Checkbox: + +```tsx +import * as React from "react"; +import { + Checkbox, + FormControlLabel, + FormHelperText, + FormControl, +} from "@mui/material"; + +export default function ValidationExample() { + const [checked, setChecked] = React.useState(false); + const [error, setError] = React.useState(false); + + const handleSubmit = (event) => { + event.preventDefault(); + if (!checked) { + setError(true); + return; + } + setError(false); + // Handle form submission + }; + + return ( +
+ + setChecked(e.target.checked)} + /> + } + label="I accept the terms and conditions" + /> + {error && ( + You must accept the terms to continue + )} + +
+ ); +} +``` + +Common validation scenarios include: + +- Required field validation +- Minimum selection requirements +- Group validation rules + +## Advanced Customization + +### Custom Styling + +You can create your own styled checkbox using the `styled` API: + +```tsx +import { styled } from "@mui/material/styles"; +import Checkbox from "@mui/material/Checkbox"; + +const CustomCheckbox = styled(Checkbox)` + &.MuiCheckbox-root { + color: #666; + } + &.Mui-checked { + color: #2196f3; + } +`; + +export default function StyledExample() { + return ; +} +``` + +### Custom Icons + +You can also use custom icons for your checkboxes: + +```tsx +import FavoriteIcon from "@mui/icons-material/Favorite"; +import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder"; + +export default function CustomIconExample() { + return ( + } + checkedIcon={} + sx={{ color: "pink" }} + /> + ); +} +``` + +These customizations allow you to: + +- Match your application's design system +- Create unique visual elements +- Improve user experience with custom interactions ## When to use the Material UI Checkbox From f3ba4080c8fcbd7fa4cf3c64af982f61a2a7c43b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Necati=20=C3=96zmen?= Date: Fri, 27 Dec 2024 09:35:02 +0300 Subject: [PATCH 12/17] docs(blog): update mui snippets (#6608) --- ...-04-mui-card.md => 2024-12-26-mui-card.md} | 67 ++++++++++++++----- 1 file changed, 52 insertions(+), 15 deletions(-) rename documentation/blog/{2023-01-04-mui-card.md => 2024-12-26-mui-card.md} (91%) diff --git a/documentation/blog/2023-01-04-mui-card.md b/documentation/blog/2024-12-26-mui-card.md similarity index 91% rename from documentation/blog/2023-01-04-mui-card.md rename to documentation/blog/2024-12-26-mui-card.md index 156e594051dc..b97478d7c055 100644 --- a/documentation/blog/2023-01-04-mui-card.md +++ b/documentation/blog/2024-12-26-mui-card.md @@ -4,36 +4,51 @@ description: We'll discover the Material UI Card component with examples slug: material-ui-card authors: doro_onome tags: [material-ui, react] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-01-04-mui-card/social.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-01-04-mui-card/social-2.png hide_table_of_contents: false --- ## Introduction +### Quick Summary: What is Material UI Card? + +Think of a Material UI Card as a digital container - like a paper card in real life, but for your website. It's a neat way to show related information in one place. You can put all sorts of things in it: text, pictures, buttons, and more. + +Here's what makes Material UI Cards so useful: + +- They keep information organized and tidy +- You can easily add images and other media +- They're interactive - users can click, expand, or interact with them +- They look great on both desktop and mobile screens +- You can style them however you want to match your website + +The best part? They're super easy to use, even if you're just starting with React! + Material UI cards are an important part of modern web design. They make it simple for users to access and interact with important information, whether text, images, or a combination of the two. Developers can use Material UI to easily create powerful and interactive cards that integrate seamlessly into their website design. This article will go over the various features, benefits, and applications of Material UI cards to give web developers a thorough understanding of how the component can help them create beautiful and engaging user experiences. Steps we'll cover: +- [Quick Summary: What is Material UI Card?](#quick-summary-what-is-material-ui-card) - [What is Material UI?](#what-is-material-ui) - [Getting started with Material UI Card](#getting-started-with-material-ui-card) - [Other Material UI Card Variants](#other-material-ui-card-variants) - - [Image Cards](#image-cards) - - [Outlined Cards](#outlined-cards) - [Material UI Card Component Classes](#material-ui-card-component-classes) - [Material UI Card Interactions](#material-ui-card-interactions) - [Building a simple Blog Layout with React and Material UI Cards](#building-a-simple-blog-layout-with-react-and-material-ui-cards) +- [Frequently Asked Questions (FAQ)](#frequently-asked-questions-faq) ## What is Material UI? Material UI is a React-based UI framework designed to aid in the creation of consistent user interfaces across web and mobile applications. It includes a large library of components and tools to help developers easily create modern user interfaces. It provides a comprehensive library of components and tools to help developers create modern user interfaces with ease. Some of which include: -Input components -Surface components -Data Display components -Navigation components -Feedback components -Layout components + +- Input components +- Surface components +- Data Display components +- Navigation components +- Feedback components +- Layout components The Material UI Card is an example of the Material UI Surfaces. @@ -545,12 +560,34 @@ Here’s the result:
-
-
- - discord banner - -
+## Frequently Asked Questions (FAQ) + +### Can I customize the look of Material UI Cards? + +Absolutely! You can change pretty much everything about how a card looks. Colors, shadows, borders, spacing - it's all customizable using the `sx` prop or custom styles. + +### Do Material UI Cards work well on mobile devices? + +Yes! Cards are responsive by default and will adjust their size based on the screen. Just make sure to set appropriate width values (like maxWidth) to control how they display. + +### What can I put inside a Material UI Card? + +Almost anything! Common elements include: + +- Text content +- Images and videos +- Buttons and links +- Icons +- Action areas +- Expandable sections + +### Are Material UI Cards accessible? + +Yes, they're built with accessibility in mind. They work well with screen readers and can be navigated using a keyboard. Just remember to add proper ARIA labels when needed! + +### How do I handle card interactions like clicking or expanding? + +It's pretty straightforward! You can add onClick handlers to the Card or CardActionArea components, and use the Collapse component for expandable content. Check out our examples above to see how it works. ## Conclusion From d037bd2719bc41d3fca08988da039e19cb6dcdc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Necati=20=C3=96zmen?= Date: Mon, 30 Dec 2024 10:02:24 +0300 Subject: [PATCH 13/17] docs(blog): snippets for templates post (#6611) --- ...md => 2024-12-27-react-admin-templates.md} | 120 +++++++++++++++++- 1 file changed, 117 insertions(+), 3 deletions(-) rename documentation/blog/{2023-03-22-react-admin-templates.md => 2024-12-27-react-admin-templates.md} (69%) diff --git a/documentation/blog/2023-03-22-react-admin-templates.md b/documentation/blog/2024-12-27-react-admin-templates.md similarity index 69% rename from documentation/blog/2023-03-22-react-admin-templates.md rename to documentation/blog/2024-12-27-react-admin-templates.md index 47b030965828..6e2646e7b319 100644 --- a/documentation/blog/2023-03-22-react-admin-templates.md +++ b/documentation/blog/2024-12-27-react-admin-templates.md @@ -1,13 +1,15 @@ --- -title: Top React Admin Templates 2023 +title: Top React Admin Templates 2025 description: We have compiled a list of the top 5 React admin templates that are currently available on the market. slug: react-admin-template authors: chidume_nnamdi tags: [comparison] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog%2F2023-03-22-react-admin-templates%2Fsocial.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-22-react-admin-templates/social-2.png hide_table_of_contents: false --- +**This article was last updated on December 27, 2024, to include practical strategies for choosing React admin templates, such as avoiding overly complex templates, ensuring scalability, and verifying licenses. Simplified explanations and real-world examples have been added for improved clarity and usability.** + ## Introduction Templates are blueprints or models or guides used to make something. We can have a house template, that is used as a sample to build a house. Also in the world of software development, we have website design templates that present ideas on how to create a specific website for specific industries. @@ -18,7 +20,7 @@ As React continues to gain popularity in web development, it is becoming increas ## 1. Refine CRM admin template -[Refine CRM admin](https://example.crm.refine.dev/) is a open source React admin template powered by [Refine](https://github.com/refinedev/refine). +[Refine CRM admin](https://example.crm.refine.dev/) is an enterprise-grade React admin template powered by [Refine](https://github.com/refinedev/refine).
@@ -124,6 +126,118 @@ Another key feature of the Wieldy template is its real-time chat integration. It Finally, the Wieldy react admin template is highly customizable. It comes with a range of theme options and customization tools, allowing businesses to tailor the design to their specific needs. It also has a range of customization options for the pre-built components, making it easy to create a unique and user-friendly admin interface that meets the specific needs of the business. +## Top 10 Mistakes to Avoid When Choosing Admin Templates + +1. Picking looks over features. +2. Choosing a template that doesn't match your tech stack. +3. Choosing too complicated templates. +4. Neglecting scalability. +5. Skipping documentation review. +6. Forgetting to test responsiveness. +7. Overlooking performance. +8. Using templates that have unclear licenses. +9. Blind reliance on free templates without scrutiny. 10. Ignoring accessibility requirements. + +## Common Mistakes While Choosing an Admin Template (And How I Avoid Them) + +During all these years, I have tried lots of admin templates. Sometimes, they worked just fine, but other times I ran into big problems because I didn't think things through. + +Let me share with you some of the mistakes I've made and seen others make, and how you can avoid them. + +### Picking Looks Over Features + +**What I Did Wrong:** +I used to select templates based on how good they look. Later on, I felt some of them lacked charts or good form handling that I needed. + +**What I Do Now:** +First, I make sure that the template will have all the tools that I need for my project. Although the design is important, features like authentication, dashboards, and responsive layouts concern me more. + +### Not Matching It to My Tech Stack + +**What I Did Wrong:** + +It once happened that I accidentally chose a Vue template for a React project. Suffice it to say that didn't go well, and I had to build much of it from scratch. + +**What I Do Now:** + +I will only use templates that are made specifically for the framework I am working in. For instance, if I were working in React, then I would find templates using either Material UI or Tailwind CSS. + +### Choosing Over-Complicated Templates + +**What I Did Wrong:** +I made a very bad choice with a template, which had too many features for what I needed, such as multi-language support and drag-and-drop tools, that made everything harder to customize. + +**What I Do Now:** +Me, I keep it simple: I don't need all advanced features; if so, I use a basic template. Easier to work with, faster to set up. + +### Forgetting About Scalability + +**What I Did Wrong:** + +I once chose a template, which was fine for small projects, but became a nightmare when my app grew. It didn't handle large amounts of data well. + +**What I Do Now:** + +I check whether the template is well-structured. Are the components reusable? Can I scale it up if the project grows? Templates with clear folder structures are way easier to maintain. + +### Ignoring Documentation + +**What I Did Wrong:** + +Once, I selected a free template with zero documentation. I had to spend hours trying to figure out how things worked. + +**What I Do Now:** + +I always check the documentation first. A well-documented template saves a lot of time. If it is a paid template, I make sure it comes with support. + +### Not Testing on Different Devices + +**What I Did Wrong:** + +I once completed an administrative panel and realized it looked terrible on a mobile device. It just wasn't responsive at all. + +**What I Do Now:** + +Before I start building, I am testing the demo on both mobile and desktop; a good template should look great everywhere. + +### Forgetting About Performance + +**What I Did Wrong:** + +I used a template with so many animations and libraries not really needed. It made my app really slow. + +**What I Do Now:** + +I run a quick performance test using Lighthouse on the demo. Looking for templates featuring lazy loading with minimal dependencies. + +### Not Verifying the License + +**What I Did Wrong:** + +Once, I did not know that the license for using the template in one of my client projects prohibited commercial use. I had to redo everything. + +**What I Do Now:** + +I always check out the license, whether I use a template or not. In case there's a commercial project in line, then I really see to it that this covers under its license. + +### Free Templates Not Vetted + +**What I Did Wrong:** +I used a free template without reviewing the code. It was badly written and full of bugs. + +**What I Do Now:** +If it's free, I check out the GitHub repo for how often it is updated and how many issues it has. Sometimes, it's worth paying for a high-quality template. + +### Ignoring Accessibility + +**What I Did Wrong:** + +Early on, I never thought about accessibility. Then, I realized that some users couldn't navigate my admin panel properly. + +**What I Do Now:** + +I look for templates with keyboard navigation, screen reader, and high-contrast mode support. Accessibility is more important than you think. + ## Conclusion We have gone through all the most popular React admin templates. We have seen their features and uniqueness. Also, we have learned what each template is capable of doing and on what occasions each of them is best suitable. From 61d0bcf4b879268a531065f556996ac604e1cfeb Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Mon, 30 Dec 2024 10:27:52 +0300 Subject: [PATCH 14/17] feat: upgrade all live-preview examples to react router v7 (#6609) --- .../components/basic-views/create/index.md | 771 ++++++--- .../components/basic-views/edit/index.md | 1515 +++++++++-------- .../components/basic-views/list/index.md | 400 +++-- .../components/basic-views/show/index.md | 915 ++++++---- .../components/buttons/clone-button/index.md | 185 +- .../components/buttons/create-button/index.md | 147 +- .../components/buttons/delete-button/index.md | 278 +-- .../components/buttons/edit-button/index.md | 198 ++- .../components/buttons/export-button/index.md | 71 +- .../components/buttons/import-button/index.md | 72 +- .../components/buttons/list-button/index.md | 147 +- .../buttons/refresh-button/index.md | 162 +- .../components/buttons/save-button/index.md | 79 +- .../components/buttons/show-button/index.md | 204 ++- .../components/fields/boolean-field/index.md | 40 +- .../components/fields/date-field/index.md | 51 +- .../components/fields/email-field/index.md | 34 +- .../components/fields/file-field/index.md | 36 +- .../components/fields/image-field/index.md | 36 +- .../components/fields/markdown-field/index.md | 58 +- .../components/fields/number-field/index.md | 36 +- .../components/fields/tag-field/index.md | 44 +- .../components/fields/text-field/index.md | 42 +- .../components/fields/url-field/index.md | 47 +- .../components/basic-views/create/index.md | 685 ++++---- .../components/basic-views/edit/index.md | 1217 +++++-------- .../components/basic-views/list/index.md | 361 ++-- .../components/basic-views/show/index.md | 1029 +++++------ .../components/buttons/clone-button/index.md | 287 ++-- .../components/buttons/create-button/index.md | 248 +-- .../components/buttons/delete-button/index.md | 435 ++--- .../components/buttons/edit-button/index.md | 317 ++-- .../components/buttons/export-button/index.md | 242 ++- .../components/buttons/import-button/index.md | 254 ++- .../components/buttons/list-button/index.md | 218 +-- .../buttons/refresh-button/index.md | 208 ++- .../components/buttons/save-button/index.md | 141 +- .../components/buttons/show-button/index.md | 271 ++- .../components/fields/boolean-field/index.md | 49 +- .../components/fields/date-field/index.md | 49 +- .../components/fields/email-field/index.md | 43 +- .../components/fields/file-field/index.md | 45 +- .../components/fields/markdown-field/index.md | 78 +- .../components/fields/number-field/index.md | 57 +- .../components/fields/tag-field/index.md | 57 +- .../components/fields/text-field/index.md | 78 +- .../components/fields/url-field/index.md | 57 +- .../components/basic-views/create/index.md | 844 ++++----- .../components/basic-views/edit/index.md | 1233 +++++++------- .../components/basic-views/list/index.md | 334 ++-- .../components/basic-views/show/index.md | 1021 ++++++----- .../components/buttons/clone-button/index.md | 182 +- .../components/buttons/create-button/index.md | 152 +- .../components/buttons/delete-button/index.md | 459 ++--- .../components/buttons/edit-button/index.md | 206 +-- .../components/buttons/export-button/index.md | 128 +- .../components/buttons/import-button/index.md | 130 +- .../components/buttons/list-button/index.md | 196 +-- .../buttons/refresh-button/index.md | 230 +-- .../components/buttons/save-button/index.md | 149 +- .../components/buttons/show-button/index.md | 201 ++- .../components/fields/boolean-field/index.md | 60 +- .../components/fields/date-field/index.md | 60 +- .../components/fields/email-field/index.md | 58 +- .../components/fields/file-field/index.md | 60 +- .../components/fields/markdown-field/index.md | 83 +- .../components/fields/number-field/index.md | 60 +- .../components/fields/tag-field/index.md | 60 +- .../components/fields/text-field/index.md | 81 +- .../components/fields/url-field/index.md | 60 +- .../components/basic-views/create/index.md | 957 +++++++---- .../components/basic-views/edit/index.md | 1282 ++++++++------ .../components/basic-views/list/index.md | 420 +++-- .../components/basic-views/show/index.md | 495 +++--- .../components/breadcrumb/index.md | 74 +- .../components/buttons/clone-button/index.md | 170 +- .../components/buttons/create-button/index.md | 121 +- .../components/buttons/delete-button/index.md | 269 ++- .../components/buttons/edit-button/index.md | 159 +- .../components/buttons/export-button/index.md | 55 +- .../components/buttons/import-button/index.md | 70 +- .../components/buttons/list-button/index.md | 160 +- .../buttons/refresh-button/index.md | 170 +- .../components/buttons/save-button/index.md | 67 +- .../components/buttons/show-button/index.md | 152 +- .../components/fields/boolean-field/index.md | 33 +- .../components/fields/date-field/index.md | 33 +- .../components/fields/email-field/index.md | 35 +- .../components/fields/file-field/index.md | 33 +- .../components/fields/markdown-field/index.md | 58 +- .../components/fields/number-field/index.md | 33 +- .../components/fields/tag-field/index.md | 33 +- .../components/fields/text-field/index.md | 33 +- .../components/fields/url-field/index.md | 33 +- packages/live-previews/next.config.js | 2 +- packages/live-previews/package.json | 4 +- packages/live-previews/src/scope/antd.tsx | 59 +- packages/live-previews/src/scope/chakra.tsx | 103 +- packages/live-previews/src/scope/common.tsx | 53 +- packages/live-previews/src/scope/mantine.tsx | 77 +- packages/live-previews/src/scope/map.tsx | 7 +- packages/live-previews/src/scope/mui.tsx | 4 +- pnpm-lock.yaml | 12 +- 103 files changed, 12549 insertions(+), 10758 deletions(-) diff --git a/documentation/docs/ui-integrations/ant-design/components/basic-views/create/index.md b/documentation/docs/ui-integrations/ant-design/components/basic-views/create/index.md index ea1760cf28b4..df87f5f8f870 100644 --- a/documentation/docs/ui-integrations/ant-design/components/basic-views/create/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/basic-views/create/index.md @@ -8,6 +8,8 @@ swizzle: true We will show what `` does using properties with examples. ```tsx live hideCode url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + interface ICategory { id: number; title: string; @@ -90,21 +92,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + +
+ } + > + +

This page is empty.

+ +
+ } + /> + } /> + + + + , ); ``` @@ -121,7 +141,7 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p `title` allows you to add a title inside the `` component. If you don't pass the title props, it uses the "Create" prefix and the singular resource name by default. For example, for the `/posts/create` resource, it would be "Create post". ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { Form, Input, Select, useForm, useSelect, CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -137,21 +157,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -160,7 +198,7 @@ render( The `` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { Form, Input, Select, useForm, useSelect, CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -176,21 +214,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -200,18 +256,16 @@ render( The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom -// handle initial routes in new way -setInitialRoutes(["/custom"]); +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; import { Refine } from "@refinedev/core"; +import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Create } from "@refinedev/antd"; -const MyComponent: React.FC = () => { +const CustomPage: React.FC = () => { return ( /* highlight-next-line */ @@ -221,27 +275,41 @@ const MyComponent: React.FC = () => { }; // visible-block-end -const App: React.FC = () => { - return ( +render( + , - path: "/custom", - }, - ], - // highlight-end - }} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - -render(); + resources={[ + { + name: "posts", + list: "/posts", + create: "/posts/create", + }, + ]} + > + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , +); ``` If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. @@ -253,7 +321,7 @@ If you have multiple resources with the same name, you can pass the `identifier` To customize the back button or to disable it, you can use the `goBack` property: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -271,21 +339,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -316,7 +402,7 @@ const PostCreate: React.FC = () => { To toggle the loading state of the `` component, you can use the `isLoading` property: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -332,21 +418,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -355,7 +459,7 @@ render( To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default the `Breadcrumb` component from the `@refinedev/antd` package is used for breadcrumbs. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create, Breadcrumb } from "@refinedev/antd"; @@ -383,21 +487,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -408,7 +530,7 @@ render( You can use the `wrapperProps` property if you want to customize the wrapper of the `` component. The `@refinedev/antd` wrapper elements are simply `
`s and `wrapperProps` and can get every attribute that `
` can get. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -432,21 +554,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + +
+ } + > + +

This page is empty.

+ +
+ } + /> + } /> + + + + , ); ``` @@ -455,7 +595,7 @@ render( You can use the `headerProps` property to customize the header of the `` component: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -480,21 +620,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -505,7 +663,7 @@ render( You can use the `contentProps` property to customize the content of the `` component: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -529,21 +687,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -554,7 +730,7 @@ render( You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -579,21 +755,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -602,7 +796,7 @@ render( You can use the `headerButtonProps` property to customize the wrapper element of the buttons at the header: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -614,6 +808,10 @@ const PostCreate: React.FC = () => { // highlight-start headerButtonProps={{ style: { + // hide-start + float: "right", + marginRight: 24, + // hide-end backgroundColor: "cornflowerblue", padding: "16px", }, @@ -628,21 +826,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -655,7 +871,7 @@ By default, the `` component has a [``][save-button] at the You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -680,27 +896,47 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` to utilize the default values of the [``][save-button] component. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create, SaveButton } from "@refinedev/antd"; import { Button } from "antd"; @@ -727,25 +963,42 @@ const PostCreate: React.FC = () => { ); }; - // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -754,7 +1007,7 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create -const { CreateButton } = RefineAntd; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/antd"; @@ -783,21 +1036,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -810,3 +1081,5 @@ render( [save-button]: /docs/ui-integrations/ant-design/components/buttons/save-button + + diff --git a/documentation/docs/ui-integrations/ant-design/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/ant-design/components/basic-views/edit/index.md index 4c2cd1eec84c..f91de2e237f8 100644 --- a/documentation/docs/ui-integrations/ant-design/components/basic-views/edit/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/basic-views/edit/index.md @@ -7,114 +7,56 @@ swizzle: true We will show what `` does using properties with examples. -```tsx live hideCode url=http://localhost:3000/posts/edit/123 -const { EditButton } = RefineAntd; - -interface ICategory { - id: number; - title: string; -} +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/123 +setInitialRoutes(["/custom/123"]); // visible-block-start +import { Edit } from "@refinedev/antd"; -interface IPost { - id: number; - title: string; - content: string; - status: "published" | "draft" | "rejected"; - category: { id: number }; -} - -import { Edit, useForm, useSelect } from "@refinedev/antd"; -import { Form, Input, Select } from "antd"; - -const PostEdit: React.FC = () => { - const { formProps, saveButtonProps, query } = useForm({ - warnWhenUnsavedChanges: true, - }); - - const postData = query?.data?.data; - const { selectProps: categorySelectProps } = useSelect({ - resource: "categories", - defaultValue: postData?.category.id, - }); - +const CustomPage: React.FC = () => { return ( - -
- - - - - - -
+ /* highlight-next-line */ + +

Rest of your page here

 ); }; // visible-block-end render( - ( -
-

This page is empty.

- Edit Item 123 -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + /> + + + , ); ``` +:::tip +The example above shows how to use the `resource` prop when the component is rendered on a custom page with a different route than the resource route. +::: + +If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. + +> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/core/refine-component#identifier) + :::simple Good to know You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages) @@ -127,20 +69,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p `title` allows you to add a title inside the `` component. If you don't pass title props, it uses the "Edit" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Edit post". -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; -const { default: simpleRest } = RefineSimpleRest; - -const dataProvider = simpleRest("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...dataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, -}; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); // visible-block-start import { Edit } from "@refinedev/antd"; @@ -156,21 +86,41 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Edit Item 2 -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -178,8 +128,8 @@ render( The `` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); // visible-block-start import { Edit } from "@refinedev/antd"; @@ -195,21 +145,41 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -222,60 +192,25 @@ render( If you want to customize this button you can use the `deleteButtonProps` property like the code below. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 -const { EditButton } = RefineAntd; -const { default: simpleRest } = RefineSimpleRest; - -const dataProvider = simpleRest("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...dataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, -}; +setInitialRoutes(["/posts/edit/123"]); -const authProvider = { - login: () => { - return { - success: true, - redirectTo: "/", - }; - }, - register: () => { - return { - success: true, - }; - }, - forgotPassword: () => { - return { - success: true, - }; - }, - updatePassword: () => { - return { - success: true, - }; - }, - logout: () => { - return { - success: true, - redirectTo: "/", - }; - }, - check: () => ({ - authenticated: true, - }), - onError: () => ({}), - getPermissions: () => null, - getIdentity: () => null, -}; +interface ICategory { + id: number; + title: string; +} + +interface IPost { + id: number; + title: string; + content: string; + status: "published" | "draft" | "rejected"; + category: { id: number }; +} -// visible-block-start import { Edit } from "@refinedev/antd"; import { usePermissions } from "@refinedev/core"; +// visible-block-start const PostEdit: React.FC = () => { const { data: permissionsData } = usePermissions(); return ( @@ -293,23 +228,41 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Edit Item 123 -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -321,12 +274,9 @@ render( The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/2 -setInitialRoutes(["/custom/2"]); +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/123 +setInitialRoutes(["/custom/123"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/antd"; @@ -340,29 +290,36 @@ const CustomPage: React.FC = () => { }; // visible-block-end -const App: React.FC = () => { - return ( +render( + , - path: "/custom/:id", - }, - ], - // highlight-end - }} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - -render(); + resources={[ + { + name: "posts", + list: "/posts", + edit: "/posts/edit/:id", + }, + ]} + > + + + + + } + /> + + + , +); ``` +:::tip +The example above shows how to use the `resource` prop when the component is rendered on a custom page with a different route than the resource route. +::: + If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. > For more information, refer to the [`identifier` section of the `` component documentation →](/docs/core/refine-component#identifier) @@ -371,13 +328,13 @@ If you have multiple resources with the same name, you can pass the `identifier` The `` component reads the `id` information from the route by default. When it cannot be read from the URL, which happens when it's used on a custom page, modal or drawer, `recordItemId` is used. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit, useModalForm } from "@refinedev/antd"; import { Modal, Button } from "antd"; +// visible-block-start const PostEdit: React.FC = () => { const { modalProps, id, show } = useModalForm({ action: "edit", @@ -398,21 +355,41 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Edit Item 2 -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -422,116 +399,57 @@ The `` component needs the `id` information for the `` to w Determines which mode mutation will have while executing `` . -```tsx live hideCode url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -interface ICategory { - id: number; - title: string; -} +import { Edit } from "@refinedev/antd"; // visible-block-start - -interface IPost { - id: number; - title: string; - content: string; - status: "published" | "draft" | "rejected"; - category: { id: number }; -} - -import { Edit, useForm, useSelect } from "@refinedev/antd"; -import { Form, Input, Select } from "antd"; - const PostEdit: React.FC = () => { - const { formProps, saveButtonProps, query } = useForm({ - warnWhenUnsavedChanges: true, - }); - - const postData = query?.data?.data; - const { selectProps: categorySelectProps } = useSelect({ - resource: "categories", - defaultValue: postData?.category.id, - }); - return ( - -
- - - - - - -
+ +

Rest of your page here

 ); }; // visible-block-end render( - ( -
-

This page is empty.

- Edit Item 2 -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -574,12 +492,12 @@ export const App: React.FC = () => { To customize the back button or to disable it, you can use the `goBack` property: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 -const { EditButton } = RefineAntd; +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; import { Button } from "antd"; +// visible-block-start const PostEdit: React.FC = () => { const BackButton = () => ; return ( @@ -592,39 +510,56 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Edit Item 123 -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` If your route has no `:action` parameter or your action is `list`, the back button will not be shown even if you pass a `goBack` property. You can override this behavior by using the `headerProps` property: ```tsx -/* highlight-next-line */ import { useBack } from "@refinedev/core"; import { Edit } from "@refinedev/antd"; import { Button } from "antd"; const PostEdit: React.FC = () => { - /* highlight-next-line */ const back = useBack(); const BackButton = () => ; return ( - /* highlight-next-line */ } headerProps={{ onBack: back }}>

Rest of your page here

 @@ -636,12 +571,12 @@ const PostEdit: React.FC = () => { To toggle the loading state of the `` component, you can use the `isLoading` property: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( /* highlight-next-line */ @@ -653,21 +588,41 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -675,12 +630,12 @@ render( To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default the `Breadcrumb` component from the `@refinedev/antd` package is used for breadcrumbs. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit, Breadcrumb } from "@refinedev/antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -728,12 +703,12 @@ render( You can use the `wrapperProps` property if you want to customize the wrapper of the `` component. The `@refinedev/antd` wrapper elements are simply `
`s and `wrapperProps` and can get every attribute that `
` can get. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + +
+ } + > + +

This page is empty.

+ + Edit Item 123 + +
+ } + /> + } /> + + + + , ); ``` @@ -775,12 +770,12 @@ render( You can use the `headerProps` property to customize the header of the `` component: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -825,12 +840,12 @@ render( You can use the `contentProps` property to customize the content of the `` component: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -878,13 +913,13 @@ You can customize the buttons at the header by using the `headerButtons` propert If the "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; import { Button } from "antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `refreshButtonProps` and `listButtonProps` to utilize the default values of the ``[list-button] and ``[refresh-button] components. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit, ListButton, RefreshButton } from "@refinedev/antd"; import { Button } from "antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -975,13 +1050,13 @@ render( You can use the `headerButtonProps` property to customize the wrapper element of the buttons at the header: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; import { Button } from "antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`Space` documentation →](https://ant.design/components/space/) - ### footerButtons By default, the `` component has a [``][save-button] and a [``][delete-button] at the footer. @@ -1030,13 +1123,13 @@ You can customize the buttons at the footer by using the `footerButtons` propert If [`canDelete`](#candelete-and-deletebuttonprops) is `false`, the [``][delete-button] will not render and `deleteButtonProps` will be `undefined`. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; import { Button } from "antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` and `deleteButtonProps` to utilize the default values of the [``][save-button] and [``][delete-button] components. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit, SaveButton, DeleteButton } from "@refinedev/antd"; -import { Button } from "antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( ( <> - {deleteButtonProps && ( @@ -1105,21 +1216,41 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1127,22 +1258,20 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { EditButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -// visible-block-start import { Edit } from "@refinedev/antd"; +// visible-block-start const PostEdit: React.FC = () => { return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`Space` documentation →](https://ant.design/components/space/) - ### autoSaveProps You can use the auto save feature of the `` component by using the `autoSaveProps` property. ```tsx live url=http://localhost:3000/posts/edit/123 -const { EditButton } = RefineAntd; +setInitialRoutes(["/posts/edit/123"]); interface ICategory { id: number; @@ -1201,82 +1348,50 @@ import { Form, Input, Select } from "antd"; // visible-block-start const PostEdit: React.FC = () => { - const { - formProps, - saveButtonProps, - query, - // highlight-next-line - autoSaveProps, - } = useForm({ - warnWhenUnsavedChanges: true, - // highlight-start - autoSave: { - enabled: true, - }, - // highlight-end - }); - - const postData = query?.data?.data; - const { selectProps: categorySelectProps } = useSelect({ - resource: "categories", - defaultValue: postData?.category.id, - }); + const { current, gotoStep, stepsProps, formProps, saveButtonProps, query } = + useStepsForm({ + stepsProps: { + items: [ + { + title: "First Step", + }, + { + title: "Second Step", + }, + ], + }, + }); return ( - + +
- - - - - + + + )} + {current === 1 && ( + - + > + + + )}
); @@ -1284,43 +1399,95 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Edit Item 123 -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` +:::tip +The `query` object from the `useForm` hook contains the query result from the data provider. You can use it to access the data returned from the API. + +```tsx +const { query } = useForm(); +const record = query?.data?.data; +``` + +The `data.data` structure shown above is the default for the `@refinedev/simple-rest` data provider. This structure may be different for other data providers. +::: + ## API Reference ### Properties - - -> `*`: These properties have default values in `RefineContext` and can also be set on the **<[Refine](/docs/core/refine-component)>** component. + + +:::tip External Props +It also accepts all props of Ant Design [Form](https://ant.design/components/form/#API). +::: + +### Type Parameters + +| Property | Extends | Default | Description | +| ------------ | ------- | ------- | -------------------------------------------------------------- | +| TQueryFnData | unknown | unknown | Result data returned by the query function. Extends unknown | +| TError | unknown | unknown | Custom error object that extends unknown | +| TVariables | object | object | Values for params. default `object` | +| TData | unknown | unknown | Result data returned by the `select` function. Extends unknown | +| TResponse | unknown | unknown | Result data returned by the mutation function. Extends unknown | + +### Return values + +| Property | Description | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------- | +| `queryResult` | If the `queryResult` prop is given, it will be returned. Otherwise, it will return `undefined`. | +| `mutationResult` | Mutation result from `react-query`. [Check here →](https://tanstack.com/query/latest/docs/react/reference/useMutation) | +| `saveButtonProps` | Props for a save button. | +| `cancelButtonProps` | Props for a cancel button. | +| `deleteButtonProps` | Props for a delete button. | +| `formProps` | Props for the `
` component. | +| `formLoading` | Loading state of form. | +| `setId` | `id` setter. | +| `id` | Record id for edit action. The record to edit. | +| `defaultValues` | Default form values. | +| `formValues` | Form values. | +| `submit` | Submit method, the parameter is the values to update a record. | +| `reset` | Reset method, reset the form values to initial values. | +| `redirect` | Redirect function, will be called after form is submitted successfully. | +| `goBack` | Go back function, will be called when the cancel button is clicked. | +| `query` | Query result from `react-query`. [Check here →](https://tanstack.com/query/latest/docs/react/reference/useQuery) | [list-button]: /docs/ui-integrations/ant-design/components/buttons/list-button [refresh-button]: /docs/ui-integrations/ant-design/components/buttons/refresh-button diff --git a/documentation/docs/ui-integrations/ant-design/components/basic-views/list/index.md b/documentation/docs/ui-integrations/ant-design/components/basic-views/list/index.md index 01064a8290ea..e7f8a58631ff 100644 --- a/documentation/docs/ui-integrations/ant-design/components/basic-views/list/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/basic-views/list/index.md @@ -8,6 +8,8 @@ swizzle: true We will show what `` does using properties with examples. ```tsx live hideCode url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + interface ICategory { id: number; title: string; @@ -74,15 +76,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -99,6 +115,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p `title` allows you to add a title to the `` component. If you don't pass the title props, it uses plural form of resource name by default. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/antd"; @@ -113,15 +131,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -129,12 +161,12 @@ render( The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom -setInitialRoutes(["/custom"]); +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; import dataProvider from "@refinedev/simple-rest"; + // visible-block-start import { List } from "@refinedev/antd"; @@ -148,27 +180,31 @@ const CustomPage: React.FC = () => { }; // visible-block-end -const App: React.FC = () => { - return ( +render( + , - path: "/custom", - }, - ], - // highlight-end - }} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - -render(); + resources={[ + { + name: "posts", + list: "/posts", + }, + ]} + > + + + + + } + > + } /> + + + + , +); ``` If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. @@ -177,9 +213,10 @@ If you have multiple resources with the same name, you can pass the `identifier` ### canCreate and createButtonProps -`canCreate` allows us to add the create button inside the `` component. If you want to customize this button you can use `createButtonProps` property like the code below: +`canCreate` allows us to add the create button inside the `` component. If you want to customize this button you can use `createButtonProps` property like the code below: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); const { Create } = RefineAntd; const { default: simpleRest } = RefineSimpleRest; @@ -253,20 +290,36 @@ const PostList: React.FC = () => { // visible-block-end render( - { - return Create Page; + + , + ]} + > + + + + + } + > + } /> + Create Page} + /> + + + + , ); ``` @@ -281,6 +334,7 @@ To customize or disable the breadcrumb, you can use the `breadcrumb` property. B [Refer to the `Breadcrumb` documentation for detailed usage. →](/docs/ui-integrations/ant-design/components/breadcrumb) ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); // visible-block-start import { List } from "@refinedev/antd"; @@ -311,15 +365,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -328,6 +396,8 @@ render( You can use the `wrapperProps` property if you want to customize the wrapper of the `` component. The `@refinedev/antd` wrapper elements are simply `
`s and `wrapperProps` and can get every attribute that `
` can get. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/antd"; @@ -350,15 +420,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + +
+ } + > + } /> + + + + , ); ``` @@ -367,6 +451,8 @@ render( You can use the `headerProps` property to customize the header of the `` component: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/antd"; @@ -390,15 +476,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + +
+ } + > + } /> + + + + , ); ``` @@ -409,6 +509,8 @@ render( You can use the `contentProps` property to customize the content of the `` component. The `` components content is wrapped with a `
` and `contentProps` can get every attribute that `
` can get. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/antd"; @@ -431,15 +533,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + +
+ } + > + } /> + + + + , ); ``` @@ -452,6 +568,8 @@ You can customize the buttons at the header by using the `headerButtons` propert If the "create" resource is not defined or if [`canCreate`](#cancreate-and-createbuttonprops) is false, the [``][create-button] will not render and `createButtonProps`will be `undefined`. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/antd"; import { Button } from "antd"; @@ -475,21 +593,37 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + +
+ } + > + } /> + + + + , ); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [``][create-button] component. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List, CreateButton } from "@refinedev/antd"; import { Button } from "antd"; @@ -515,15 +649,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -532,6 +680,8 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/antd"; import { Button } from "antd"; @@ -556,15 +706,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md b/documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md index 3a114bea8eb6..8f905ad164a5 100644 --- a/documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md @@ -7,7 +7,22 @@ swizzle: true We will show what `` does using properties with examples. -```tsx live hideCode url=http://localhost:3000/posts/show/2 +```tsx live hideCode url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + +interface ICategory { + id: number; + title: string; +} + +interface IPost { + id: number; + title: string; + content: string; + status: "published" | "draft" | "rejected"; + category: { id: number }; +} + // visible-block-start import { Show, MarkdownField } from "@refinedev/antd"; import { Typography } from "antd"; @@ -48,21 +63,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Edit Item 2 -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -78,20 +113,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p `title` allows you to add a title inside the `` component. If you don't pass title props, it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post". -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; -const { default: simpleRest } = RefineSimpleRest; - -const dataProvider = simpleRest("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...dataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, -}; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -107,21 +130,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Show Item 2 -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -129,12 +172,12 @@ render( The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/2 -setInitialRoutes(["/custom/2"]); +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; import dataProvider from "@refinedev/simple-rest"; + // visible-block-start import { Show } from "@refinedev/antd"; @@ -147,27 +190,44 @@ const CustomPage: React.FC = () => { ); }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom/:id", - }, - ], - // highlight-end - }} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; -render(); +render( + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , +); ``` If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. @@ -180,8 +240,8 @@ If you have multiple resources with the same name, you can pass the `identifier` When clicked on, the delete button executes the `useDelete` method provided by the [`dataProvider`](/docs/data/data-provider) and the edit button redirects the user to the record edit page. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton, Edit } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); const { default: simpleRest } = RefineSimpleRest; @@ -255,39 +315,56 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Show Item 2 -
- ), - show: PostShow, - edit: () => { - return Edit Page; + + , + ]} + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + Edit Page} /> + + + + , ); ``` -> For more information, refer to the [`usePermission` documentation →](/docs/authentication/hooks/use-permissions) - -> For more information, refer to the [``](/docs/ui-integrations/ant-design/components/buttons/delete-button) and the [``](/docs/ui-integrations/ant-design/components/buttons/edit-button) documentations. +[Refer to the `usePermissions` documentation for detailed usage. →](/docs/api-reference/core/hooks/authentication/usePermissions/) ### recordItemId -The`` 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). +The `` 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). -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show, useModalForm } from "@refinedev/antd"; @@ -313,21 +390,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Show Item 2 -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -369,8 +466,8 @@ export const App: React.FC = () => { To customize the back button or to disable it, you can use the `goBack` property: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -380,7 +477,7 @@ const PostShow: React.FC = () => { const BackButton = () => ; return ( /* highlight-next-line */ - back}> + }>

Rest of your page here

 ); @@ -388,21 +485,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- Show Item 2 -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -432,8 +549,8 @@ const PostShow: React.FC = () => { Since `` uses the Ant Design [``](https://ant.design/components/card/) component, the `isLoading` property can be set like the below: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -449,21 +566,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -471,8 +608,8 @@ render( To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default the `Breadcrumb` component from the `@refinedev/antd` package is used for breadcrumbs. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show, Breadcrumb } from "@refinedev/antd"; @@ -500,21 +637,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -524,8 +681,8 @@ render( You can use the `wrapperProps` property if you want to customize the wrapper of the `` component. The `@refinedev/antd` wrapper elements are simply `
`s and `wrapperProps` and can get every attribute that `
` can get. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -549,21 +706,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + +
+ } + > + +

This page is empty.

+ + Show Item 123 + +
+ } + /> + } /> + + + + , ); ``` @@ -571,8 +748,8 @@ render( You can use the `headerProps` property to customize the header of the `` component: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -597,21 +774,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -621,8 +818,8 @@ render( You can use the `contentProps` property to customize the content of the `` component: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -646,21 +843,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -678,8 +895,8 @@ If [`canDelete`](#candelete-and-canedit) is `false`, the [``][dele If [`canEdit`](#candelete-and-canedit) is `false`, [``][edit-button] will not render and `editButtonProps` will be `undefined`. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -704,28 +921,48 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [``][list-button], [``][edit-button], [``][delete-button], and [``][refresh-button] components. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { @@ -770,21 +1007,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -792,8 +1049,8 @@ render( You can use the `headerButtonProps` property to customize the wrapper element of the buttons at the header: -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -819,21 +1076,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -843,8 +1120,8 @@ render( You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -869,21 +1146,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -891,8 +1188,8 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2 -const { ShowButton } = RefineAntd; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/antd"; @@ -910,10 +1207,8 @@ const PostShow: React.FC = () => { // highlight-start footerButtonProps={{ style: { - // hide-start float: "right", marginRight: 24, - // hide-end backgroundColor: "cornflowerblue", padding: "16px", }, @@ -927,21 +1222,41 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/clone-button/index.md index 20478c621b18..f965e758cfbe 100644 --- a/documentation/docs/ui-integrations/ant-design/components/buttons/clone-button/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/buttons/clone-button/index.md @@ -15,8 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p ## Usage -```tsx live previewHeight=300px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=360px +setInitialRoutes(["/posts"]); + // visible-block-start import { List, @@ -54,21 +55,37 @@ interface IPost { } // visible-block-end -const PostCreate = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const PostClone = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -78,33 +95,49 @@ render( `recordItemId` is used to append the record id to the end of the route path. By default, the `recordItemId` is inferred from the route params. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/posts"]); + // visible-block-start import { CloneButton } from "@refinedev/antd"; const MyCloneComponent = () => { - return ; + return ; }; // visible-block-end const ClonedPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -114,37 +147,48 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/docs/r `resource` is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/categories"]); // visible-block-start import { CloneButton } from "@refinedev/antd"; const MyCloneComponent = () => { - return ; + return ; }; // visible-block-end -const ClonedPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const CategoryClone = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + } /> + } + /> + + + , ); ``` @@ -170,15 +214,15 @@ const MyComponent = () => { It is used to show and not show the text of the button. When `true`, only the button icon is visible. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; - +```tsx live previewHeight=120px +setInitialRoutes(["/posts"]); // visible-block-start import { CloneButton } from "@refinedev/antd"; const MyCloneComponent = () => { return ( @@ -188,21 +232,36 @@ const MyCloneComponent = () => { // visible-block-end const ClonedPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + + + + } + > + } /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/create-button/index.md index 2ee69a995303..b59595f9e5fd 100644 --- a/documentation/docs/ui-integrations/ant-design/components/buttons/create-button/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/buttons/create-button/index.md @@ -15,8 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p ## Usage -```tsx live previewHeight=300px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=360px +setInitialRoutes(["/posts"]); + // visible-block-start import { List, @@ -49,20 +50,36 @@ interface IPost { // visible-block-end const CreatePage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -72,42 +89,48 @@ render( `resource` is used to redirect the app to the `create` action path of the given resource name. By default, the app redirects to the inferred resource's `create` action path. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/categories"]); // visible-block-start import { CreateButton } from "@refinedev/antd"; const MyCreateComponent = () => { - return ( - - ); + return ; }; // visible-block-end -const CreatePage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const CategoryCreate = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + } /> + } + /> + + + , ); ``` @@ -133,8 +156,8 @@ const MyComponent = () => { It is used to show and not show the text of the button. When `true`, only the button icon is visible. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/posts"]); // visible-block-start import { CreateButton } from "@refinedev/antd"; @@ -151,21 +174,36 @@ const MyCreateComponent = () => { // visible-block-end const CreatePage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -178,7 +216,12 @@ import { CreateButton } from "@refinedev/antd"; export const MyListComponent = () => { return ( - + ); }; ``` diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/delete-button/index.md index dec9b7086f6e..f3a131a1642c 100644 --- a/documentation/docs/ui-integrations/ant-design/components/buttons/delete-button/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/buttons/delete-button/index.md @@ -15,7 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p ## Usage -```tsx live +```tsx live previewHeight=360px +setInitialRoutes(["/posts"]); + // visible-block-start import { List, @@ -25,7 +27,7 @@ import { } from "@refinedev/antd"; import { Table } from "antd"; -const PostList: React.FC = () => { +const PostList = () => { const { tableProps } = useTable(); return ( @@ -55,14 +57,29 @@ interface IPost { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -72,12 +89,13 @@ render( `recordItemId` allows us to manage which record will be deleted. By default, the `recordItemId` is inferred from the route params. -```tsx live disableScroll previewHeight=150px disableScroll -const { useRouterContext } = RefineCore; +```tsx live disableScroll previewHeight=120px +setInitialRoutes(["/posts"]); + // visible-block-start import { DeleteButton } from "@refinedev/antd"; -const MyEditComponent = () => { +const MyDeleteComponent = () => { return ( { // visible-block-end render( - { - return List page here...; + + , + ]} + > + + + + + } + > + } /> + + + + , ); ``` @@ -111,8 +140,8 @@ Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) `resource` allows us to manage which resource's record is going to be deleted. By default, the `resource` is inferred from the route params. -```tsx live disableScroll previewHeight=150px disableScroll -const { useRouterContext } = RefineCore; +```tsx live disableScroll previewHeight=120px +setInitialRoutes(["/categories"]); // visible-block-start import { DeleteButton } from "@refinedev/antd"; @@ -124,28 +153,28 @@ const MyDeleteComponent = () => { // visible-block-end render( - { - return List page here...; + + { - return List page here...; + { + name: "categories", + list: "/categories", }, - }, - ]} - DashboardPage={MyDeleteComponent} - />, + ]} + > + + } /> + + + , ); ``` -Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "2" will be deleted. +Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "123" will be deleted. If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. @@ -157,10 +186,8 @@ If you have multiple resources with the same name, you can pass the `identifier` For example, let's `console.log` after deletion: -```tsx live url=http://localhost:3000 previewHeight=150px disableScroll -setInitialRoutes(["/"]); -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; +```tsx live disableScroll previewHeight=120px +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/antd"; @@ -168,7 +195,7 @@ import { DeleteButton } from "@refinedev/antd"; const MyDeleteComponent = () => { return ( { console.log(value); @@ -195,15 +222,30 @@ const App = () => { }; return ( - + + + + + + + } + > + } /> + + + + ); }; @@ -216,11 +258,14 @@ Determines which mode mutation will have while executing ``. > For more information, refer to the [mutation mode documentation →](/advanced-tutorials/mutation-mode.md) -```tsx +```tsx live disableScroll previewHeight=360px +setInitialRoutes(["/posts"]); + +// visible-block-start import { List, DeleteButton, useTable } from "@refinedev/antd"; import { Table } from "antd"; -export const PostList: React.FC = () => { +const PostList = () => { const { tableProps } = useTable(); return ( @@ -244,14 +289,46 @@ export const PostList: React.FC = () => { ); }; + +interface IPost { + id: number; + title: string; +} +// visible-block-end + +render( + + + + + + + } + > + } /> + + + + , +); ``` ### hideText It is used to show and not show the text of the button. When `true`, only the button icon is visible. -```tsx live disableScroll previewHeight=150px disableScroll -const { useRouterContext } = RefineCore; +```tsx live disableScroll previewHeight=120px +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/antd"; @@ -259,9 +336,9 @@ import { DeleteButton } from "@refinedev/antd"; const MyDeleteComponent = () => { return ( ); }; @@ -269,15 +346,29 @@ const MyDeleteComponent = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -290,7 +381,12 @@ import { DeleteButton } from "@refinedev/antd"; export const MyListComponent = () => { return ( - + ); }; ``` @@ -299,44 +395,6 @@ export const MyListComponent = () => { Use `resource` prop instead. -## How to override confirm texts? - -You can change the text that appears when you confirm a transaction with the `confirmTitle` prop, as well as what the 'ok' and 'cancel' buttons' text look like with the `confirmOkText` and `confirmCancelText` props. - -```tsx live disableScroll previewHeight=150px disableScroll -const { useRouterContext } = RefineCore; - -// visible-block-start -import { DeleteButton } from "@refinedev/antd"; - -const MyDeleteComponent = () => { - return ( - - ); -}; - -// visible-block-end - -render( - , -); -``` - ## API Reference ### Properties diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/edit-button/index.md index 281e66e712f8..8827747cbc11 100644 --- a/documentation/docs/ui-integrations/ant-design/components/buttons/edit-button/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/buttons/edit-button/index.md @@ -15,8 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p ## Usage -```tsx live previewHeight=300px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=360px +setInitialRoutes(["/posts"]); + // visible-block-start import { List, @@ -55,20 +56,36 @@ interface IPost { // visible-block-end const PostEdit = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -78,8 +95,9 @@ render( `recordItemId` is used to append the record id to the end of the route path. By default, the `recordItemId` is inferred from the route params. -```tsx live disableScroll previewHeight=150px disableScroll -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/posts"]); + // visible-block-start import { EditButton } from "@refinedev/antd"; @@ -95,22 +113,37 @@ const MyEditComponent = () => { // visible-block-end +const PostEdit = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; +}; + render( - { - return List page here...; + + { - return Edit page here...; - }, - }, - ]} - DashboardPage={MyEditComponent} - />, + ]} + > + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -120,8 +153,8 @@ Clicking the button will trigger the `edit` method of [`useNavigation`](/docs/ro The redirection endpoint is defined by the `resource` property and its `edit` action path. By default, `` uses the inferred resource from the route. -```tsx live disableScroll previewHeight=150px disableScroll -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/categories"]); // visible-block-start import { EditButton } from "@refinedev/antd"; @@ -138,31 +171,42 @@ const MyEditComponent = () => { // visible-block-end +const CategoryEdit = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; +}; + render( - { - return List page here...; - }, - edit: () => { - return Edit page here...; + + { - return List page here...; + { + name: "categories", + list: "/categories", + edit: "/categories/:id/edit", }, - edit: () => { - return Edit page here...; - }, - }, - ]} - DashboardPage={MyEditComponent} - />, + ]} + > + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -188,8 +232,8 @@ const MyComponent = () => { It is used to show and not show the text of the button. When `true`, only the button icon is visible. -```tsx live disableScroll previewHeight=150px disableScroll -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/posts"]); // visible-block-start import { EditButton } from "@refinedev/antd"; @@ -197,28 +241,46 @@ import { EditButton } from "@refinedev/antd"; const MyEditComponent = () => { return ( ); }; // visible-block-end +const PostEdit = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; +}; + render( - { - return Edit page here...; + + , + ]} + > + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -232,12 +294,10 @@ import { EditButton } from "@refinedev/antd"; export const MyListComponent = () => { return ( ); }; diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/export-button/index.md index e43eacec8978..7ebe37ccaf2c 100644 --- a/documentation/docs/ui-integrations/ant-design/components/buttons/export-button/index.md +++ b/documentation/docs/ui-integrations/ant-design/components/buttons/export-button/index.md @@ -19,7 +19,9 @@ You can use it like any other Ant Design [` - + + )} // highlight-end > @@ -616,23 +551,31 @@ const PostCreate: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ Create Post + + } + /> + } /> + + + , ); ``` @@ -640,10 +583,8 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. -```tsx live url=http://localhost:3000/posts/create previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create setInitialRoutes(["/posts/create"]); -import { Refine } from "@refinedev/core"; -import { CreateButton } from "@refinedev/chakra-ui"; // visible-block-start import { Create } from "@refinedev/chakra-ui"; @@ -657,9 +598,14 @@ const PostCreate: React.FC = () => { borderColor: "blue", borderStyle: "dashed", borderWidth: "2px", + p: "2", }} // highlight-end - headerButtons={} + headerButtons={ + + } >

Rest of your page here

@@ -667,38 +613,42 @@ const PostCreate: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ Create Post + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ### footerButtons -By default, the `` component has a [``][save-button] at the header. +By default, the `` component has a [``][save-button] at the footer. You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. -```tsx live url=http://localhost:3000/posts/create previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create setInitialRoutes(["/posts/create"]); -import { Refine } from "@refinedev/core"; -import { CreateButton } from "@refinedev/chakra-ui"; // visible-block-start import { Create } from "@refinedev/chakra-ui"; @@ -724,74 +674,31 @@ const PostCreate: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - - ); -}; render( - - - , -); -``` - -Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` to utilize the default values of the [``][save-button] component. - -```tsx live url=http://localhost:3000/posts/create previewHeight=280px -setInitialRoutes(["/posts/create"]); -import { Refine } from "@refinedev/core"; -import { CreateButton, SaveButton } from "@refinedev/chakra-ui"; - -// visible-block-start -import { Create } from "@refinedev/chakra-ui"; -import { Button, HStack } from "@chakra-ui/react"; - -const PostCreate: React.FC = () => { - return ( - ( - - - - - )} - // highlight-end - > -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ Create Post + + } + /> + } /> + + + , ); ``` @@ -799,10 +706,8 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -```tsx live url=http://localhost:3000/posts/create previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create setInitialRoutes(["/posts/create"]); -import { Refine } from "@refinedev/core"; -import { CreateButton } from "@refinedev/chakra-ui"; // visible-block-start import { Create } from "@refinedev/chakra-ui"; @@ -826,32 +731,38 @@ const PostCreate: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ Create Post + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ## API Reference -### Props +### Properties - + [save-button]: /docs/ui-integrations/chakra-ui/components/buttons/save-button diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md index e6b5e573aaa0..07f1b6b5760e 100644 --- a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md +++ b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md @@ -3,174 +3,149 @@ title: Edit swizzle: true --- -```tsx live shared -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - Layout: RefineChakra.Layout, - Sider: () => null, -}); - -const Wrapper = ({ children }) => { - return ( - - {children} - - ); -}; - -const DummyListPage = () => ( - - This page is empty. - - Edit Item 123 - - -); - -interface ICategory { - id: number; - title: string; -} - -interface IPost { - id: number; - title: string; - content: string; - status: "published" | "draft" | "rejected"; - category: { id: number }; -} -``` - -`` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button. +`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button. We will show what `` does using properties with examples. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px hideCode +```tsx live previewHeight=480px hideCode url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start +import React from "react"; import { Edit } from "@refinedev/chakra-ui"; import { FormControl, - FormErrorMessage, FormLabel, + FormErrorMessage, Input, + Box, Select, } from "@chakra-ui/react"; -import { useSelect } from "@refinedev/core"; import { useForm } from "@refinedev/react-hook-form"; +import { useSelect } from "@refinedev/core"; +import { Controller } from "react-hook-form"; const PostEdit: React.FC = () => { const { - refineCore: { formLoading, query }, saveButtonProps, + refineCore: { query }, register, + control, formState: { errors }, - resetField, - } = useForm(); + } = useForm(); const { options } = useSelect({ resource: "categories", - - defaultValue: query?.data?.data.category.id, - queryOptions: { enabled: !!query?.data?.data.category.id }, + defaultValue: query?.data?.category?.id, }); - useEffect(() => { - resetField("category.id"); - }, [options]); - return ( - - - Title - - {`${errors.title?.message}`} - - - Status - - {`${errors.status?.message}`} - - - Category - - {`${errors.categoryId?.message}`} - + + + + Id + + {`${errors?.id?.message}`} + + + + Title + + {`${errors?.title?.message}`} + + + Status + + {`${errors.status?.message}`} + + + + Category + ( + + )} + /> + {`${errors?.category?.message}`} + + ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` :::simple Good to know - -You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages) - +You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it. ::: ## Properties ### title -`title` allows the addition of titles inside the `` component. if you don't pass title props it uses the "Edit" prefix and singular resource name by default. For example, for the "posts" resource, it would be "Edit post". +`title` allows you to add a title inside the `` component. If you don't pass title props, it uses the "Edit" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Edit post". -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; @@ -186,257 +161,218 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` -### saveButtonProps +### resource -`saveButtonProps` can be used to customize the default button of the `` component that submits the form: +The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px -setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/123 +setInitialRoutes(["/custom/123"]); // visible-block-start import { Edit } from "@refinedev/chakra-ui"; -const PostEdit: React.FC = () => { +const CustomPage: React.FC = () => { return ( /* highlight-next-line */ - +

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`` documentation →](/docs/ui-integrations/chakra-ui/components/buttons/save-button) +If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. -### canDelete and deleteButtonProps +> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/core/refine-component#identifier) -`canDelete` allows us to add the delete button inside the `` component that executes the `useDelete` method provided by the `dataProvider` when clicked on. +### saveButtonProps -If the resource has the `canDelete` property, Refine adds the delete button by default. If you want to customize this button, you can use the `deleteButtonProps` property like the code below. +The `` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property: -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; -import { usePermissions } from "@refinedev/core"; const PostEdit: React.FC = () => { - const { data: permissionsData } = usePermissions(); return ( - + /* highlight-next-line */ +

Rest of your page here

 ); }; // visible-block-end -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, - }; - - const authProvider = { - login: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - register: async () => { - return { - success: true, - }; - }, - forgotPassword: async () => { - return { - success: true, - }; - }, - updatePassword: async () => { - return { - success: true, - }; - }, - logout: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - check: async () => ({ - authenticated: true, - }), - onError: async (error) => { - console.error(error); - return { error }; - }, - getPermissions: async () => ["admin"], - getIdentity: async () => null, - }; - - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`` →](/docs/ui-integrations/chakra-ui/components/buttons/delete-button) and [`usePermission` →](/docs/authentication/hooks/use-permissions) documentations +> For more information, refer to the [`` documentation →](/docs/ui-integrations/chakra-ui/components/buttons/save-button) -### resource +### canDelete and deleteButtonProps -`` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop. +`canDelete` allows you to add a delete button inside the `` component. If the resource has the `canDelete` property, Refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property like the code below. -```tsx live url=http://localhost:3000/custom/23 previewHeight=280px -setInitialRoutes(["/custom/23"]); +When clicked on, the delete button executes the `useDelete` method provided by the `dataProvider`. + +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -import routerProvider from "@refinedev/react-router-v6/legacy"; -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; -import { Layout } from "@refinedev/chakra-ui"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; +import { usePermissions } from "@refinedev/core"; + +const PostEdit: React.FC = () => { + const { data: permissionsData } = usePermissions(); -const CustomPage: React.FC = () => { return ( - /* highlight-next-line */ - +

Rest of your page here

 ); }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom/:id", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - render( - - - , + + Promise.resolve(["admin"]), + }, + }} + > + + } /> + + + , ); ``` -If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. - -> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/core/refine-component#identifier) - ### recordItemId -The `` 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). +The `` 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). -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=350px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start -import { useModalForm } from "@refinedev/react-hook-form"; import { Edit } from "@refinedev/chakra-ui"; +import { useModalForm } from "@refinedev/react-hook-form"; import { Modal, - Button, ModalOverlay, ModalContent, ModalCloseButton, ModalHeader, ModalBody, + Button, } from "@chakra-ui/react"; const PostEdit: React.FC = () => { @@ -454,8 +390,7 @@ const PostEdit: React.FC = () => { - Edit - + Edit Post {/* highlight-next-line */} @@ -469,56 +404,39 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 23 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + } /> + + + , ); ``` -:::simple Implementation Tips - -The `` component needs the `id` information for the `` to work properly. - -::: - ### mutationMode -`mutationMode` determines which mode the mutation will have while executing ``. +Determines which mode mutation will have while executing `useDelete`. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; import { - Input, FormControl, FormLabel, FormErrorMessage, + Input, } from "@chakra-ui/react"; import { useForm } from "@refinedev/react-hook-form"; @@ -527,7 +445,7 @@ const PostEdit: React.FC = () => { saveButtonProps, register, formState: { errors }, - } = useForm(); + } = useForm(); return ( { type="text" {...register("title", { required: "Title is required" })} /> - {`${errors.title?.message}`} + {`${errors?.title?.message}`} ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` @@ -579,9 +504,10 @@ If not specified, Refine will use the default data provider. If you have multipl ```tsx import { Refine } from "@refinedev/core"; -import { Edit } from "@refinedev/chakra-ui"; import dataProvider from "@refinedev/simple-rest"; +import { Edit } from "@refinedev/chakra-ui"; + // highlight-start const PostEdit = () => { return ...; @@ -608,46 +534,50 @@ export const App: React.FC = () => { To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px -setInitialRoutes(["/posts", "/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); // visible-block-start import { Edit } from "@refinedev/chakra-ui"; -/* highlight-next-line */ import { IconMoodSmile } from "@tabler/icons-react"; const PostEdit: React.FC = () => { return ( /* highlight-next-line */ }> -

Rest of your page here 2

+

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` @@ -655,12 +585,8 @@ render( To toggle the loading state of the `` component, you can use the `isLoading` property. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; @@ -675,37 +601,31 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + } /> + + + , ); ``` -### breadcrumb +### breadcrumb To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit, Breadcrumb } from "@refinedev/chakra-ui"; @@ -728,94 +648,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - - ); -}; render( - - - , -); -``` - -> For more information, refer to the [`Breadcrumb` documentation →](/docs/ui-integrations/chakra-ui/components/breadcrumb) - -### wrapperProps - -If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is ``s and `wrapperProps` can get every attribute that `` can get. - -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px -setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { Edit } from "@refinedev/chakra-ui"; - -const PostEdit: React.FC = () => { - return ( - -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ### headerProps If you want to customize the header of the `` component, you can use the `headerProps` property. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; @@ -837,84 +705,25 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - - ); -}; render( - - - , -); -``` - -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - -### contentProps - -If you want to customize the content of the `` component, you can use the `contentProps` property. - -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px -setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { Edit } from "@refinedev/chakra-ui"; - -const PostEdit: React.FC = () => { - return ( - -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ### headerButtons By default, the `` component has a [``][list-button] and a [``][refresh-button] at the header. @@ -922,21 +731,15 @@ By default, the `` component has a [``][list-button] and a [` You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, refreshButtonProps, listButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. :::simple Implementation Tips - -If the "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. - +If "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. ::: -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; -import { Button, HStack, Box } from "@chakra-ui/react"; +import { Button, HStack } from "@chakra-ui/react"; const PostEdit: React.FC = () => { return ( @@ -956,79 +759,33 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - - ); -}; render( - - - , -); -``` - -Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `refreshButtonProps` and `listButtonProps` to utilize the default values of the [``][list-button] and [``][refresh-button] components. - -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px -setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton, RefreshButton, ListButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { Edit } from "@refinedev/chakra-ui"; -import { Button, HStack, Box } from "@chakra-ui/react"; - -const PostEdit: React.FC = () => { - return ( - ( - - - {listButtonProps && ( - - )} - - - )} - // highlight-end - > -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` @@ -1036,12 +793,8 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; @@ -1059,7 +812,7 @@ const PostEdit: React.FC = () => { }} // highlight-end headerButtons={ - } @@ -1070,29 +823,36 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ### footerButtons By default, the `` component has a [``][save-button] and a [``][delete-button] at the footer. @@ -1100,17 +860,11 @@ By default, the `` component has a [``][save-button] and a [` You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps, deleteButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. :::simple Implementation Tips - If [`canDelete`](#candelete-and-deletebuttonprops) is `false`, the [``][delete-button] will not render and `deleteButtonProps` will be `undefined`. - ::: -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; @@ -1136,81 +890,33 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - - ); -}; render( - - - , -); -``` - -Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` and `deleteButtonProps` to utilize the default values of the [``][save-button] and [``][delete-button] components. - -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px -setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton, SaveButton, DeleteButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { Edit } from "@refinedev/chakra-ui"; -import { Button, HStack } from "@chakra-ui/react"; - -const PostEdit: React.FC = () => { - return ( - ( - - - {deleteButtonProps && ( - - )} - - - )} - // highlight-end - > -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` @@ -1218,12 +924,8 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/chakra-ui"; @@ -1247,51 +949,55 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ### autoSaveProps You can use the auto save feature of the `` component by using the `autoSaveProps` property. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px +```tsx live disableScroll previewHeight=420px url=http://localhost:3000/posts/edit/123 setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; +// visible-block-start import { Edit } from "@refinedev/chakra-ui"; import { FormControl, - FormErrorMessage, FormLabel, + FormErrorMessage, Input, Select, } from "@chakra-ui/react"; -import { useSelect } from "@refinedev/core"; import { useForm } from "@refinedev/react-hook-form"; +import { useSelect } from "@refinedev/core"; -// visible-block-start const PostEdit: React.FC = () => { const { refineCore: { @@ -1316,9 +1022,7 @@ const PostEdit: React.FC = () => { const { options } = useSelect({ resource: "categories", - - defaultValue: query?.data?.data.category.id, - queryOptions: { enabled: !!query?.data?.data.category.id }, + defaultValue: query?.data?.category?.id, }); useEffect(() => { @@ -1339,7 +1043,7 @@ const PostEdit: React.FC = () => { type="text" {...register("title", { required: "Title is required" })} /> - {`${errors.title?.message}`} + {`${errors?.title?.message}`} Status @@ -1354,57 +1058,48 @@ const PostEdit: React.FC = () => { - {`${errors.status?.message}`} - - - Category - - {`${errors.categoryId?.message}`} + {`${errors?.status?.message}`} ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + , ); ``` ## API Reference -### Props +### Properties - + [list-button]: /docs/ui-integrations/chakra-ui/components/buttons/list-button [refresh-button]: /docs/ui-integrations/chakra-ui/components/buttons/refresh-button diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/list/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/list/index.md index 1f67446d7345..446f2b9398b9 100644 --- a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/list/index.md +++ b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/list/index.md @@ -3,44 +3,12 @@ title: List swizzle: true --- -```tsx live shared -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - Layout: RefineChakra.Layout, - Sider: () => null, -}); - -const Wrapper = ({ children }) => { - return ( - - {children} - - ); -}; - -interface ICategory { - id: number; - title: string; -} - -interface IPost { - id: number; - title: string; - content: string; - status: "published" | "draft" | "rejected"; - category: { id: number }; -} -``` - `` provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like a create button or giving the page titles. We will show what `` does using properties with examples. ```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List, DateField } from "@refinedev/chakra-ui"; @@ -140,24 +108,21 @@ const PostList: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + } /> + + + , ); ``` @@ -192,23 +157,22 @@ const PostList: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + } /> + + + , ); ``` @@ -219,16 +183,11 @@ render( ```tsx live url=http://localhost:3000/custom previewHeight=280px setInitialRoutes(["/custom"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/chakra-ui"; const CustomPage: React.FC = () => { return ( - /* highlight-next-line */

Rest of your page here

 @@ -236,30 +195,21 @@ const CustomPage: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - , - path: "/custom", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; render( - - - , + + + + } /> + + + , ); ``` @@ -351,23 +301,26 @@ const App = () => { }; return ( - + + + + } /> + + + ); }; -render( - - - , -); +render(); ``` ### breadcrumb @@ -406,22 +359,24 @@ const PostList: React.FC = () => { const App = () => { return ( - + + + + } /> + + + ); }; -render( - - - , -); +render(); ``` > For more information, refer to the [`Breadcrumb` documentation →](/docs/ui-integrations/chakra-ui/components/breadcrumb) @@ -458,22 +413,24 @@ const PostList: React.FC = () => { const App = () => { return ( - + + + + } /> + + + ); }; -render( - - - , -); +render(); ``` > For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) @@ -510,22 +467,24 @@ const PostList: React.FC = () => { const App = () => { return ( - + + + + } /> + + + ); }; -render( - - - , -); +render(); ``` > For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) @@ -562,22 +521,24 @@ const PostList: React.FC = () => { const App = () => { return ( - + + + + } /> + + + ); }; -render( - - - , -); +render(); ``` > For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) @@ -625,22 +586,24 @@ const PostList: React.FC = () => { const App = () => { return ( - + + + + } /> + + + ); }; -render( - - - , -); +render(); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [``][create-button] component. @@ -678,22 +641,24 @@ const PostList: React.FC = () => { const App = () => { return ( - + + + + } /> + + + ); }; -render( - - - , -); +render(); ``` ### headerButtonProps @@ -734,22 +699,24 @@ const PostList: React.FC = () => { const App = () => { return ( - + + + + } /> + + + ); }; -render( - - - , -); +render(); ``` > For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md index 1ae8b54fc603..81de6ea46a41 100644 --- a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md +++ b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md @@ -3,60 +3,17 @@ title: Show swizzle: true --- -```tsx live shared -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - Layout: RefineChakra.Layout, - Sider: () => null, -}); - -const Wrapper = ({ children }) => { - return ( - - {children} - - ); -}; - -const DummyListPage = () => ( - - This page is empty. - - Show Item 123 - - -); - -interface ICategory { - id: number; - title: string; -} - -interface IPost { - id: number; - title: string; - content: string; - status: "published" | "draft" | "rejected"; - category: { id: number }; -} -``` - -`` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button or giving title to the page. +`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button. We will show what `` does using properties with examples. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode +```tsx live previewHeight=420px hideCode url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { useShow, useOne } from "@refinedev/core"; import { Show, MarkdownField } from "@refinedev/chakra-ui"; -import { Heading, Text, Spacer } from "@chakra-ui/react"; +import { Heading, Text } from "@chakra-ui/react"; const PostShow: React.FC = () => { const { queryResult } = useShow(); @@ -65,9 +22,9 @@ const PostShow: React.FC = () => { const { data: categoryData } = useOne({ resource: "categories", - id: record?.category.id || "", + id: record?.category?.id || "", queryOptions: { - enabled: !!record?.category.id, + enabled: !!record?.category?.id, }, }); @@ -83,11 +40,6 @@ const PostShow: React.FC = () => { {record?.title} - - Status - - {record?.status} - Category @@ -96,53 +48,48 @@ const PostShow: React.FC = () => { Content - ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -:::simple Good to know - -You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it. - -::: - -## Properties - ### title -`title` allows the addition of titles inside the `` component. If you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post". +`title` allows you to add a title inside the `` component. If you don't pass title props, it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post". -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; @@ -158,24 +105,33 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` @@ -183,504 +139,340 @@ render( The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop. -```tsx live url=http://localhost:3000/custom/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/123 setInitialRoutes(["/custom/123"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; -import routerProvider from "@refinedev/react-router-v6/legacy"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; const CustomPage: React.FC = () => { return ( /* highlight-next-line */ - +

Rest of your page here

 ); }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom/:id", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - render( - - - , -); -``` - -If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. - -> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/core/refine-component#identifier) - -### canDelete and canEdit - -`canDelete` and `canEdit` allows us to add the delete and edit buttons inside the `` component. If the resource has `canDelete` or `canEdit` property Refine adds the buttons by default. - -When clicked on, delete button executes the `useDelete` method provided by the [`dataProvider`](/docs/data/data-provider) and the edit button redirects the user to the record edit page. - -Refer to the [``](/docs/ui-integrations/chakra-ui/components/buttons/delete-button) and the [``](/docs/ui-integrations/chakra-ui/components/buttons/edit-button) documentation for detailed usage. - -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode -setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { Show } from "@refinedev/chakra-ui"; -import { usePermissions } from "@refinedev/core"; - -const PostShow: React.FC = () => { - const { data: permissionsData } = usePermissions(); - - return ( - -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, - }; - - const authProvider = { - login: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - register: async () => { - return { - success: true, - }; - }, - forgotPassword: async () => { - return { - success: true, - }; - }, - updatePassword: async () => { - return { - success: true, - }; - }, - logout: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - check: async () => ({ - authenticated: true, - }), - onError: async (error) => { - console.error(error); - return { error }; - }, - getPermissions: async () => ["admin"], - getIdentity: async () => null, - }; - - return ( - + - ); -}; -render( - - - , + > + + } /> + + + , ); ``` -> For more information, refer to the [`usePermission` documentation →](/docs/authentication/hooks/use-permissions) - ### recordItemId -`` 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). +The `` component reads the `id` information from the route by default. If you want to use a custom `id` value, you can use the `recordItemId` prop. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=350px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start -import { useModalForm } from "@refinedev/react-hook-form"; import { Show } from "@refinedev/chakra-ui"; -import { - Modal, - Button, - ModalOverlay, - ModalContent, - ModalCloseButton, - ModalHeader, - ModalBody, -} from "@chakra-ui/react"; const PostShow: React.FC = () => { - const { - modal: { visible, close, show }, - id, - } = useModalForm({ - refineCoreProps: { action: "show" }, - }); - return ( -
- - - - - - Show - - - {/* highlight-next-line */} - -

Rest of your page here

- - - - -
+ /* highlight-next-line */ + +

Rest of your page here

+ ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , -); -``` - -:::simple Implementation Tips - -The `` component needs the `id` information for the `` to work properly. - -::: - -### dataProviderName - -If not specified, Refine will use the default data provider. If you have multiple data providers and want to use a different one, you can use the `dataProviderName` property. - -```tsx -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; - -import { Show } from "@refinedev/chakra-ui"; - -// highlight-start -const PostShow = () => { - return ...; -}; -// highlight-end - -export const App: React.FC = () => { - return ( - - {/* ... */} - - ); -}; + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , +); ``` -### goBack +### canEdit and editButtonProps -To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button. +`canEdit` allows you to add an edit button inside the `` 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. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px -setInitialRoutes(["/posts", "/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/chakra-ui"; -/* highlight-next-line */ -import { IconMoodSmile } from "@tabler/icons-react"; +import { usePermissions } from "@refinedev/core"; const PostShow: React.FC = () => { + const { data: permissionsData } = usePermissions(); return ( - /* highlight-next-line */ - }> +

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + options={{ + auth: { + getPermissions: () => Promise.resolve(["admin"]), + }, + }} + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -### isLoading +### canDelete and deleteButtonProps -To toggle the loading state of the `` component, you can use the `isLoading` property. +`canDelete` allows you to add a delete button inside the `` component. If the resource has the `canDelete` property, Refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; +import { usePermissions } from "@refinedev/core"; const PostShow: React.FC = () => { + const { data: permissionsData } = usePermissions(); return ( - /* highlight-next-line */ - +

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + options={{ + auth: { + getPermissions: () => Promise.resolve(["admin"]), + }, + }} + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -### breadcrumb +### goBack -To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package. +To customize the back button or to disable it, you can use the `goBack` property. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start -import { Show, Breadcrumb } from "@refinedev/chakra-ui"; -import { Box } from "@chakra-ui/react"; - -const CustomBreadcrumb: React.FC = () => { - return ( - - - - ); -}; +import { Show } from "@refinedev/chakra-ui"; +import { IconMoodSmile } from "@tabler/icons-react"; const PostShow: React.FC = () => { return ( - } - // highlight-end - > + /* highlight-next-line */ + }>

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Breadcrumb` documentation →](/docs/ui-integrations/chakra-ui/components/breadcrumb) - -### wrapperProps +### isLoading -If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is ``s and `wrapperProps` can get every attribute that `` can get. +To toggle the loading state of the `` component, you can use the `isLoading` property. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; const PostShow: React.FC = () => { return ( - + /* highlight-next-line */ +

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI #8594](https://www.chakra-ui.com/docs/components/box#usage) +### breadcrumb -### headerProps - -If you want to customize the header of the `` component, you can use the `headerProps` property. +To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start -import { Show } from "@refinedev/chakra-ui"; +import { Show, Breadcrumb } from "@refinedev/chakra-ui"; +import { Box } from "@chakra-ui/react"; const PostShow: React.FC = () => { return ( + + + } // highlight-end >

Rest of your page here

@@ -689,38 +481,42 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - -### contentProps +### headerProps -If you want to customize the content of the `` component, you can use the `contentProps` property. +If you want to customize the header of the `` component, you can use the `headerProps` property. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; @@ -729,11 +525,10 @@ const PostShow: React.FC = () => { return ( @@ -743,54 +538,46 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ### headerButtons -By default, the `` component has a [``][list-button], [``][edit-button], [``][delete-button], and a[``][refresh-button] at the header. - -You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, deleteButtonProps, editButtonProps, listButtonProps, refreshButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. - -:::simple Implementation Tips +You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, editButtonProps, deleteButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. -- If the "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. - -- If [`canDelete`](#candelete-and-canedit) is `false`, the [``][delete-button] will not render and `deleteButtonProps` will be `undefined`. - -- If [`canEdit`](#candelete-and-canedit) is `false`, [``][edit-button] will not render and `editButtonProps` will be `undefined`. - -::: - -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; -import { Button, HStack, Box } from "@chakra-ui/react"; +import { Button, HStack } from "@chakra-ui/react"; const PostShow: React.FC = () => { return ( @@ -810,95 +597,33 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - - ); -}; render( - - - , -); -``` - -Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [``][list-button], [``][edit-button], [``][delete-button], and, [``][refresh-button] components. - -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px -setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { - Show, - ListButton, - EditButton, - DeleteButton, - RefreshButton, -} from "@refinedev/chakra-ui"; -import { Button, HStack, Box } from "@chakra-ui/react"; - -const PostShow: React.FC = () => { - return ( - ( - - {listButtonProps && ( - - )} - {editButtonProps && ( - - )} - {deleteButtonProps && ( - - )} - - - - )} - // highlight-end - > -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` @@ -906,11 +631,8 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; @@ -928,7 +650,7 @@ const PostShow: React.FC = () => { }} // highlight-end headerButtons={ - } @@ -939,38 +661,42 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ### footerButtons You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; @@ -996,24 +722,33 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` @@ -1021,11 +756,8 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/chakra-ui"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/chakra-ui"; @@ -1053,34 +785,41 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + +

This page is empty.

+ + Show Post 123 + + + } + /> + } /> + + + , ); ``` -> For more information, refer to the [`Box` documentation from Chakra UI →](https://www.chakra-ui.com/docs/components/box#usage) - ## API Reference -### Props +### Properties - + [list-button]: /docs/ui-integrations/chakra-ui/components/buttons/list-button [refresh-button]: /docs/ui-integrations/chakra-ui/components/buttons/refresh-button diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/clone-button/index.md index 4e349fde50ae..4eaf7ff58cf8 100644 --- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/clone-button/index.md +++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/clone-button/index.md @@ -3,35 +3,25 @@ title: Clone swizzle: true --- -```tsx live shared -const { default: sharedRouterProvider } = LegacyRefineReactRouterV6; -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - legacyRouterProvider: sharedRouterProvider, - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - Layout: RefineChakra.Layout, - Sider: () => null, - catchAll: , -}); - -const Wrapper = ({ children }) => { - return ( - - {children} - - ); -}; +`` uses Chakra UI's [`} + // highlight-end >

Rest of your page here

 @@ -730,45 +792,47 @@ const PostCreate: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- -
- ), + list: "/posts", + create: "/posts/create", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`Box` documentation from Mantine →](https://mantine.dev/core/group/) - ### footerButtons -By default, the `` component has a [``][save-button] at the header. - -You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. - ```tsx live url=http://localhost:3000/posts/create previewHeight=280px setInitialRoutes(["/posts/create"]); -import { Refine } from "@refinedev/core"; -import { CreateButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; // visible-block-start import { Create } from "@refinedev/mantine"; @@ -792,100 +856,55 @@ const PostCreate: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- -
- ), + list: "/posts", + create: "/posts/create", }, ]} - /> - ); -}; -render( - - - , -); -``` - -Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` to utilize the default values of the [``][save-button] component. - -```tsx live url=http://localhost:3000/posts/create previewHeight=280px -setInitialRoutes(["/posts/create"]); -import { Refine } from "@refinedev/core"; -import { CreateButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; - -// visible-block-start -import { Create, SaveButton } from "@refinedev/mantine"; -import { Button } from "@mantine/core"; - -const PostCreate: React.FC = () => { - return ( - ( - <> - - - - )} - // highlight-end > -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - return ( - ( -
-

This page is empty.

- + + +
- ), - }, - ]} - /> - ); -}; -render( - - - , + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` +> For more information, refer to the [`Group` documentation from Mantine →](https://mantine.dev/core/group/) + ### footerButtonProps You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. ```tsx live url=http://localhost:3000/posts/create previewHeight=280px setInitialRoutes(["/posts/create"]); -import { Refine } from "@refinedev/core"; -import { CreateButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; // visible-block-start import { Create } from "@refinedev/mantine"; +import { Button } from "@mantine/core"; const PostCreate: React.FC = () => { return ( @@ -909,33 +928,44 @@ const PostCreate: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- -
- ), + list: "/posts", + create: "/posts/create", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`Box` documentation from Mantine →](https://mantine.dev/core/group/) +> For more information, refer to the [`Group` documentation from Mantine →](https://mantine.dev/core/group/) ## API Reference @@ -943,4 +973,4 @@ render( -[save-button]: /docs/ui-integrations/chakra-ui/components/buttons/save-button +[save-button]: /docs/ui-integrations/mantine/components/buttons/save-button diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md index d45b87f95064..b9dc5b265da4 100644 --- a/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md +++ b/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md @@ -3,55 +3,12 @@ title: Edit swizzle: true --- -```tsx live shared -window.__refineAuthStatus = false; - -setRefineProps({ - notificationProvider: RefineMantine.useNotificationProvider, - Layout: RefineMantine.Layout, - Sider: () => null, -}); - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - - ); -}; - -interface ICategory { - id: number; - title: string; -} - -interface IPost { - id: number; - title: string; - content: string; - status: "published" | "draft" | "rejected"; - category: { id: number }; -} -``` - `` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button. We will show what `` does using properties with examples. ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px hideCode setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; - // visible-block-start import { Edit, useForm, useSelect } from "@refinedev/mantine"; import { Select, TextInput } from "@mantine/core"; @@ -78,10 +35,9 @@ const PostEdit: React.FC = () => { }, }); - const postData = query?.data?.data; const { selectProps } = useSelect({ resource: "categories", - defaultValue: postData?.category.id, + defaultValue: query?.data?.data?.category?.id, }); return ( @@ -115,39 +71,50 @@ const PostEdit: React.FC = () => { ); }; + // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` :::simple Good to know - You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it. - ::: ## Properties @@ -158,10 +125,6 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -169,38 +132,52 @@ import { Title } from "@mantine/core"; const PostEdit: React.FC = () => { return ( - /* highlight-next-line */ - Custom Title}> + Custom Title} + >

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -210,10 +187,6 @@ render( ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -228,47 +201,55 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`` documentation →](/docs/ui-integrations/mantine/components/buttons/save-button) +For more information, refer to the `` documentation → ### canDelete and deleteButtonProps -`canDelete` allows us to add the delete button inside the `` component. If the resource has the `canDelete` property,Refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property like the code below. +`canDelete` allows us to add the delete button inside the `` component. If the resource has the `canDelete` property, Refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property like the code below. -When clicked on, the delete button executes the `useDelete` method provided by the `dataProvider`. +When clicked on, the delete button executes the `useDelete` method provided by the dataProvider. ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -290,87 +271,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, - }; - - window.__refineAuthStatus = true; - - const authProvider = { - login: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - register: async () => { - return { - success: true, - }; - }, - forgotPassword: async () => { - return { - success: true, - }; - }, - updatePassword: async () => { - return { - success: true, - }; - }, - logout: async () => { - window.__refineAuthStatus = false; - return { - success: true, - redirectTo: "/", - }; - }, - check: async () => ({ - authenticated: window.__refineAuthStatus ? true : false, - redirectTo: window.__refineAuthStatus ? undefined : "/login", - }), - onError: async (error) => { - console.error(error); - return { error }; - }, - getPermissions: async () => ["admin"], - getIdentity: async () => null, - }; - - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -383,10 +319,6 @@ render( ```tsx live url=http://localhost:3000/custom/23 previewHeight=280px setInitialRoutes(["/custom/23"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -400,31 +332,22 @@ const CustomPage: React.FC = () => { }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom/:id", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - render( - - - , + + + + } /> + + + , ); ``` @@ -438,10 +361,6 @@ The `` component reads the `id` information from the route by default. `re ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=350px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit, useModalForm } from "@refinedev/mantine"; @@ -476,30 +395,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 23 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 23 + + + } + /> + } /> + + + + , ); ``` @@ -509,10 +440,6 @@ Determines which mode mutation will have while executing ``. ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit, useForm } from "@refinedev/mantine"; @@ -548,31 +475,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; - -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -588,21 +526,25 @@ import dataProvider from "@refinedev/simple-rest"; import { Edit } from "@refinedev/mantine"; -// highlight-start const PostEdit = () => { - return ...; + return ( + + {/* ... */} + + ); }; -// highlight-end export const App: React.FC = () => { return ( {/* ... */} @@ -615,11 +557,7 @@ export const App: React.FC = () => { To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button. ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px -setInitialRoutes(["/posts", "/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts/edit/123"]); // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -628,36 +566,48 @@ const PostEdit: React.FC = () => { return ( /* highlight-next-line */ -

Rest of your page here 2

+

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -667,10 +617,6 @@ To toggle the loading state of the `` component, you can use the `isLoadi ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -685,43 +631,51 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -### breadcrumb +### breadcrumb To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mantine` package. ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit, Breadcrumb } from "@refinedev/mantine"; @@ -729,7 +683,6 @@ import { Edit, Breadcrumb } from "@refinedev/mantine"; const PostEdit: React.FC = () => { return ( { } - // highlight-end >

Rest of your page here

 @@ -748,30 +700,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -783,10 +747,6 @@ If you want to customize the wrapper of the `` component, you can use the ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -809,30 +769,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -844,10 +816,6 @@ If you want to customize the header of the `` component, you can use the ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -855,14 +823,12 @@ import { Edit } from "@refinedev/mantine"; const PostEdit: React.FC = () => { return (

Rest of your page here

 @@ -870,30 +836,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -905,10 +883,6 @@ If you want to customize the content of the `` component, you can use the ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -916,14 +890,12 @@ import { Edit } from "@refinedev/mantine"; const PostEdit: React.FC = () => { return (

Rest of your page here

 @@ -931,30 +903,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -970,10 +954,6 @@ If "list" resource is not defined, the [``][list-button] will not re ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -999,30 +979,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1030,10 +1022,6 @@ Or, instead of using the `defaultButtons`, you can create your own buttons. If y ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit, RefreshButton, ListButton } from "@refinedev/mantine"; @@ -1062,30 +1050,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1095,10 +1095,6 @@ You can customize the wrapper element of the buttons at the header by using the ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -1107,14 +1103,12 @@ import { Modal, Button } from "@mantine/core"; const PostEdit: React.FC = () => { return ( Custom Button @@ -1127,30 +1121,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1166,10 +1172,6 @@ If [`canDelete`](#candelete-and-deletebuttonprops) is `false`, the [` { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1224,10 +1238,6 @@ Or, instead of using the `defaultButtons`, you can create your own buttons. If y ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit, SaveButton, DeleteButton } from "@refinedev/mantine"; @@ -1236,7 +1246,6 @@ import { Button } from "@mantine/core"; const PostEdit: React.FC = () => { return ( ( <> @@ -1246,7 +1255,6 @@ const PostEdit: React.FC = () => { )} - // highlight-end >

Rest of your page here

 @@ -1254,30 +1262,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1287,10 +1307,6 @@ You can customize the wrapper element of the buttons at the footer by using the ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mantine"; @@ -1317,30 +1333,42 @@ const PostEdit: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1350,26 +1378,18 @@ render( You can use the auto save feature of the `` component by using the `autoSaveProps` property. -```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px +```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; +// visible-block-start import { Edit, useForm, useSelect } from "@refinedev/mantine"; import { Select, TextInput } from "@mantine/core"; -// visible-block-start const PostEdit: React.FC = () => { const { saveButtonProps, getInputProps, - refineCore: { - query, - // highlight-next-line - autoSaveProps, - }, + refineCore: { query, autoSaveProps }, } = useForm({ initialValues: { title: "", @@ -1394,18 +1414,13 @@ const PostEdit: React.FC = () => { // highlight-end }); - const postData = query?.data?.data; const { selectProps } = useSelect({ resource: "categories", - defaultValue: postData?.category.id, + defaultValue: query?.data?.data?.category?.id, }); return ( - + { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Edit Item 123 -
- ), + list: "/posts", + edit: "/posts/edit/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md index a378d02bb2cb..4ca4b31ec172 100644 --- a/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md +++ b/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md @@ -3,51 +3,12 @@ title: List swizzle: true --- -```tsx live shared -setRefineProps({ - notificationProvider: RefineMantine.useNotificationProvider, - Layout: RefineMantine.Layout, - Sider: () => null, -}); - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - - ); -}; - -interface ICategory { - id: number; - title: string; -} - -interface IPost { - id: number; - title: string; - content: string; - status: "published" | "draft" | "rejected"; - category: { id: number }; -} -``` - `` provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like a create button and being able to give titles to the page. We will show what `` does using properties with examples. ```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List, DateField } from "@refinedev/mantine"; @@ -136,24 +97,21 @@ const PostList: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + } /> + + + , ); ``` @@ -171,9 +129,6 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; @@ -181,7 +136,7 @@ import { Title } from "@mantine/core"; const PostList: React.FC = () => { return ( - /* highlight-next-line */ + // highlight-next-line Custom Title}>

Rest of your page here

 @@ -189,24 +144,21 @@ const PostList: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + } /> + + + , ); ``` @@ -217,16 +169,11 @@ render( ```tsx live url=http://localhost:3000/custom previewHeight=280px setInitialRoutes(["/custom"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; const CustomPage: React.FC = () => { return ( - /* highlight-next-line */

Rest of your page here

 @@ -236,28 +183,25 @@ const CustomPage: React.FC = () => { const App = () => { return ( - , - path: "/custom", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> + + + } /> + + ); }; + render( - + - , + , ); ``` @@ -273,9 +217,6 @@ Create button redirects to the create page of the resource according to the valu ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; @@ -287,8 +228,8 @@ const PostList: React.FC = () => {

Rest of your page here

 @@ -297,19 +238,6 @@ const PostList: React.FC = () => { // visible-block-end const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, - }; - const authProvider = { login: async () => { return { @@ -350,23 +278,26 @@ const App = () => { }; return ( - + authProvider={authProvider} + > + + } /> + + ); }; + render( - + - , + , ); ``` @@ -376,9 +307,6 @@ To customize or disable the breadcrumb, you can use the `breadcrumb` property. B ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; @@ -399,34 +327,38 @@ const CustomBreadcrumb: React.FC = () => { const PostList: React.FC = () => { return ( } - // highlight-end + /* highlight-end */ >

Rest of your page here

 ); }; + // visible-block-end const App = () => { return ( - + > + + } /> + + ); }; + render( - + - , + , ); ``` @@ -438,9 +370,6 @@ If you want to customize the wrapper of the `` component, you can use the ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; @@ -448,14 +377,14 @@ import { List } from "@refinedev/mantine"; const PostList: React.FC = () => { return (

Rest of your page here

 @@ -465,22 +394,25 @@ const PostList: React.FC = () => { const App = () => { return ( - + > + + } /> + + ); }; + render( - + - , + , ); ``` @@ -492,9 +424,6 @@ If you want to customize the header of the `` component, you can use the ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; @@ -502,14 +431,14 @@ import { List } from "@refinedev/mantine"; const PostList: React.FC = () => { return (

Rest of your page here

 @@ -519,22 +448,25 @@ const PostList: React.FC = () => { const App = () => { return ( - + > + + } /> + + ); }; + render( - + - , + , ); ``` @@ -546,9 +478,6 @@ If you want to customize the content of the `` component, you can use the ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; @@ -556,14 +485,14 @@ import { List } from "@refinedev/mantine"; const PostList: React.FC = () => { return (

Rest of your page here

 @@ -573,22 +502,25 @@ const PostList: React.FC = () => { const App = () => { return ( - + > + + } /> + + ); }; + render( - + - , + , ); ``` @@ -604,9 +536,6 @@ If "create" resource is not defined or [`canCreate`](#cancreate-and-createbutton ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; @@ -615,7 +544,7 @@ import { Button } from "@mantine/core"; const PostList: React.FC = () => { return ( ( <> {defaultButtons} @@ -624,7 +553,7 @@ const PostList: React.FC = () => { )} - // highlight-end + /* highlight-end */ >

Rest of your page here

 @@ -634,22 +563,25 @@ const PostList: React.FC = () => { const App = () => { return ( - + > + + } /> + + ); }; + render( - + - , + , ); ``` @@ -657,9 +589,6 @@ Or, instead of using the `defaultButtons`, you can create your own buttons. If y ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List, CreateButton } from "@refinedev/mantine"; @@ -668,7 +597,7 @@ import { Button } from "@mantine/core"; const PostList: React.FC = () => { return ( ( <> {createButtonProps && ( @@ -679,7 +608,7 @@ const PostList: React.FC = () => { )} - // highlight-end + /* highlight-end */ >

Rest of your page here

 @@ -689,22 +618,25 @@ const PostList: React.FC = () => { const App = () => { return ( - + > + + } /> + + ); }; + render( - + - , + , ); ``` @@ -714,9 +646,6 @@ You can customize the wrapper element of the buttons at the header by using the ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mantine"; @@ -725,14 +654,14 @@ import { Button } from "@mantine/core"; const PostList: React.FC = () => { return ( Custom Button @@ -747,22 +676,25 @@ const PostList: React.FC = () => { const App = () => { return ( - + > + + } /> + + ); }; + render( - + - , + , ); ``` diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md index 5375f1f89645..ce96f55a272c 100644 --- a/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md +++ b/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md @@ -3,52 +3,12 @@ title: Show swizzle: true --- -```tsx live shared -setRefineProps({ - Layout: RefineMantine.Layout, - Sider: () => null, - notificationProvider: RefineMantine.useNotificationProvider, -}); - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - - ); -}; - -interface ICategory { - id: number; - title: string; -} - -interface IPost { - id: number; - title: string; - content: string; - status: "published" | "draft" | "rejected"; - category: { id: number }; -} -``` - `` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button and being able to give titles to the page. We will show what `` does using properties with examples. ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { useShow } from "@refinedev/core"; @@ -56,8 +16,8 @@ import { Show, MarkdownField } from "@refinedev/mantine"; import { Title, Text } from "@mantine/core"; const PostShow: React.FC = () => { - const { queryResult } = useShow(); - const { data, isLoading } = queryResult; + const { query } = useShow(); + const { data, isLoading } = query; const record = data?.data; return ( @@ -79,37 +39,47 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` :::simple Good to know - You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it. - ::: ## Properties @@ -118,12 +88,8 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- `title` allows the addition of titles inside the `` component. if you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it would be "Show post". -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode +```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; @@ -131,59 +97,68 @@ import { Title } from "@mantine/core"; const PostShow: React.FC = () => { return ( - /* highlight-next-line */ - Custom Title}> + Custom Title} + >

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` ### resource -The `` component reads the `resource` information from the route by default. TIf you want to use a custom resource for the `` component, you can use the `resource` prop. +The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop. ```tsx live url=http://localhost:3000/custom/123 previewHeight=280px setInitialRoutes(["/custom/123"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; - // visible-block-start import { Show } from "@refinedev/mantine"; const CustomPage: React.FC = () => { return ( - /* highlight-next-line */ + // highlight-next-line

Rest of your page here

 @@ -191,31 +166,22 @@ const CustomPage: React.FC = () => { }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom/:id", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - render( - - - , + + + + } /> + + + , ); ``` @@ -231,111 +197,69 @@ When clicked on, delete button executes the `useDelete` method provided by the [ > For more information, refer to the [``](/docs/ui-integrations/ant-design/components/buttons/delete-button) and the [``](/docs/ui-integrations/ant-design/components/buttons/edit-button) documentation. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode +```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; import { usePermissions } from "@refinedev/core"; -import { Title } from "@mantine/core"; const PostShow: React.FC = () => { const { data: permissionsData } = usePermissions(); return (

Rest of your page here

 ); }; -// visible-block-end - -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, - }; - - const authProvider = { - login: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - register: async () => { - return { - success: true, - }; - }, - forgotPassword: async () => { - return { - success: true, - }; - }, - updatePassword: async () => { - return { - success: true, - }; - }, - logout: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - check: async () => ({ - authenticated: true, - }), - onError: async (error) => { - console.error(error); - return { error }; - }, - getPermissions: async () => ["admin"], - getIdentity: async () => null, - }; +// visible-block-end - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + authProvider={{ + getPermissions: async () => ["admin"], + }} + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -347,10 +271,6 @@ The `` component reads the `id` information from the route by default. `re ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=350px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { EditButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show, useModalForm } from "@refinedev/mantine"; @@ -370,13 +290,12 @@ const PostShow: React.FC = () => { - {/* highlight-next-line */} + {/* highlight-start */} + {/* highlight-end */}

Rest of your page here

 @@ -385,30 +304,42 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -421,11 +352,16 @@ import { Refine } from "@refinedev/core"; import { Show } from "@refinedev/mantine"; import dataProvider from "@refinedev/simple-rest"; -// highlight-start const PostShow = () => { - return ...; + return ( + +

Rest of your page here

+ + ); }; -// highlight-end export const App: React.FC = () => { return ( @@ -448,100 +384,119 @@ export const App: React.FC = () => { To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button. ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px -setInitialRoutes(["/posts", "/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/mantine"; const PostShow: React.FC = () => { return ( - /* highlight-next-line */ - +

Rest of your page here

 ); }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` ### isLoading -To toggle the loading state of the `` component, you can use the `isLoading` property. +To toggle the loading state of the `` component, you can use the `isLoading` property. ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; +// highlight-start const PostShow: React.FC = () => { return ( - /* highlight-next-line */

Rest of your page here

 ); }; +// highlight-end // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -551,10 +506,6 @@ To customize or disable the breadcrumb, you can use the `breadcrumb` property. B ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; @@ -575,9 +526,8 @@ const CustomBreadcrumb: React.FC = () => { const PostShow: React.FC = () => { return ( } - // highlight-end >

Rest of your page here

 @@ -585,30 +535,42 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -620,10 +582,6 @@ If you want to customize the wrapper of the `` component, you can use the ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; @@ -632,6 +590,7 @@ const PostShow: React.FC = () => { return ( { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , -); -``` - -> For more information, refer to the [`Card` documentation from Mantine →](https://mantine.dev/core/card/) - -### headerProps - -If you want to customize the header of the `` component, you can use the `headerProps` property. - -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px -setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { Show } from "@refinedev/mantine"; - -const PostShow: React.FC = () => { - return ( - -

Rest of your page here

- - ); -}; -// visible-block-end - -const App = () => { - return ( - ( -
-

This page is empty.

- Show Item 123 + + +
- ), - }, - ]} - /> - ); -}; -render( - - - , + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`Group` documentation from Mantine →](https://mantine.dev/core/group/) +> For more information, refer to the [`Card` documentation from Mantine →](https://mantine.dev/core/card/) ### contentProps @@ -742,10 +652,6 @@ If you want to customize the content of the `` component, you can use the ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; @@ -768,30 +674,43 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + + } /> + + + + , ); ``` @@ -803,18 +722,8 @@ By default, the `` component has a [``][list-button], [` React.ReactNode` which you can use to keep the existing buttons and add your own. -If the "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. - -If [`canDelete`](#candelete-and-canedit) is `false`, the [``][delete-button] will not render and `deleteButtonProps` will be `undefined`. - -If [`canEdit`](#candelete-and-canedit) is `false`, [``][edit-button] will not render and `editButtonProps` will be `undefined`. - ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; @@ -838,32 +747,45 @@ const PostShow: React.FC = () => { ); }; + // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -871,10 +793,6 @@ Or, instead of using the `defaultButtons`, you can create your own buttons. If y ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { @@ -920,30 +838,42 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -953,10 +883,6 @@ You can customize the wrapper element of the buttons at the header by using the ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; @@ -983,32 +909,45 @@ const PostShow: React.FC = () => { ); }; + // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1020,10 +959,6 @@ You can customize the buttons at the footer by using the `footerButtons` propert ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; @@ -1047,30 +982,42 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1080,10 +1027,6 @@ You can customize the wrapper element of the buttons at the footer by using the ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); -import { Refine } from "@refinedev/core"; -import { ShowButton } from "@refinedev/mantine"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mantine"; @@ -1095,10 +1038,8 @@ const PostShow: React.FC = () => { // highlight-start footerButtonProps={{ style: { - // hide-start float: "right", marginRight: 24, - // hide-end border: "2px dashed cornflowerblue", padding: "16px", }, @@ -1116,30 +1057,42 @@ const PostShow: React.FC = () => { }; // visible-block-end -const App = () => { - return ( - + ( -
-

This page is empty.

- Show Item 123 -
- ), + list: "/posts", + show: "/posts/show/:id", }, ]} - /> - ); -}; -render( - - - , + > + + + + + } + > + +

This page is empty.

+ + Show Item 123 + + + } + /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md index 1ad754c45230..7d4a28336d60 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md @@ -4,42 +4,16 @@ swizzle: true --- ```tsx live shared -const { default: routerProvider } = LegacyRefineReactRouterV6; -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - legacyRouterProvider: routerProvider, - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - notificationProvider: RefineMantine.useNotificationProvider, - Layout: RefineMantine.Layout, - Sider: () => null, - catchAll: , -}); - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - - ); -}; - const ClonePage = () => { const { list } = RefineCore.useNavigation(); - const params = RefineCore.useRouterContext().useParams(); + const params = RefineCore.useParsed(); return (
URL Parameters: - {JSON.stringify(params)} + {JSON.stringify(params, null, 2)} { - return ( - + - ); -}; -render( - - - , + > + + + +
+ } + > + } /> + } /> + + + + , ); ``` @@ -193,8 +174,7 @@ render( `recordItemId` is used to append the record id to the end of the route path. By default `id` will be read from the route parameters. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); -import { Refine } from "@refinedev/core"; +setInitialRoutes(["/posts"]); // visible-block-start import { CloneButton } from "@refinedev/mantine"; @@ -204,24 +184,32 @@ const MyCloneComponent = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -232,9 +220,7 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/docs/r It is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); - -import { Refine } from "@refinedev/core"; +setInitialRoutes(["/posts"]); // visible-block-start import { CloneButton } from "@refinedev/mantine"; @@ -244,27 +230,40 @@ const MyCloneComponent = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + } + /> + + + , ); ``` @@ -288,13 +287,11 @@ If you have multiple resources with the same name, you can pass the `identifier` ### hideText -`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible. +It is used to show and not show the text of the button. When `true`, only the button icon is visible. ```tsx live url=http://localhost:3000 previewHeight=200px setInitialRoutes(["/"]); -import { Refine } from "@refinedev/core"; - // visible-block-start import { CloneButton } from "@refinedev/mantine"; @@ -303,24 +300,31 @@ const MyCloneComponent = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md index 61a522b57d87..9b5abc279aae 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md @@ -4,42 +4,16 @@ swizzle: true --- ```tsx live shared -const { default: routerProvider } = LegacyRefineReactRouterV6; -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - legacyRouterProvider: routerProvider, - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - notificationProvider: RefineMantine.useNotificationProvider, - Layout: RefineMantine.Layout, - Sider: () => null, - catchAll: , -}); - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - - ); -}; - const CreatePage = () => { const { list } = RefineCore.useNavigation(); - const params = RefineCore.useRouterContext().useParams(); + const params = RefineCore.useParsed(); return (
URL Parameters: - {JSON.stringify(params)} + {JSON.stringify(params, null, 2)} { - return ( - + - ); -}; -render( - - - , + > + + + +
+ } + > + } /> + } /> + + + + , ); ``` @@ -174,9 +157,7 @@ render( It is used to redirect the app to the `create` action path of the given resource name. By default, the app redirects to the inferred resource's `create` action path. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); - -import { Refine } from "@refinedev/core"; +setInitialRoutes(["/posts"]); // visible-block-start import { CreateButton } from "@refinedev/mantine"; @@ -186,28 +167,44 @@ const MyCreateComponent = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + + } + /> + + + , ); ``` @@ -231,12 +228,10 @@ const MyComponent = () => { ### hideText -`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible. +It is used to show and not show the text of the button. When `true`, only the button icon is visible. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); - -import { Refine } from "@refinedev/core"; +setInitialRoutes(["/posts"]); // visible-block-start import { CreateButton } from "@refinedev/mantine"; @@ -246,25 +241,32 @@ const MyCreateComponent = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md index 664b0cc0aa76..a7fc03c7b1b1 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md @@ -4,27 +4,25 @@ swizzle: true --- ```tsx live shared -const { default: routerProvider } = LegacyRefineReactRouterV6; -setRefineProps({ - legacyRouterProvider: routerProvider, - notificationProvider: RefineMantine.useNotificationProvider, - Layout: RefineMantine.Layout, - Sider: () => null, - catchAll: , -}); - -const Wrapper = ({ children }) => { +const DeletePage = () => { + const { list } = RefineCore.useNavigation(); + const params = RefineCore.useParsed(); + return ( - - - - {children} - - +
+ + URL Parameters: + + {JSON.stringify(params, null, 2)} + + list("posts")} + > + Go back + +
); }; ``` @@ -42,8 +40,6 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- ```tsx live url=http://localhost:3000 previewHeight=420px hideCode setInitialRoutes(["/posts"]); -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List, DeleteButton } from "@refinedev/mantine"; @@ -136,23 +132,30 @@ interface IPost { } // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + + + + } + > + } /> + + + + , ); ``` @@ -163,9 +166,7 @@ render( `recordItemId` allows us to manage which record will be deleted. By default, `recordItemId` is read from the route parameters. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/mantine"; @@ -175,39 +176,41 @@ const MyDeleteComponent = () => { }; // visible-block-end -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - data: {}, - }; - }, - }; - - return ( - + { + await new Promise((resolve) => setTimeout(resolve, 500)); + return { data: {} }; + }, + }, + }, + )} resources={[ { name: "posts", - list: MyDeleteComponent, + list: "/posts", }, ]} - /> - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + , ); ``` @@ -218,59 +221,59 @@ Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) `resource` allows us to manage which resource's record is going to be deleted. By default, `resource` is read from the current route. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); - -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/mantine"; const MyDeleteComponent = () => { - return ; + return ; }; // visible-block-end -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - data: {}, - }; - }, - }; - - return ( - + { + await new Promise((resolve) => setTimeout(resolve, 500)); + return { data: {} }; + }, + }, + }, + )} resources={[ { name: "posts", - list: MyDeleteComponent, + list: "/posts", }, { name: "categories", + list: "/categories", }, ]} - /> - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + , ); ``` -Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "2" gets deleted. +Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "123" gets deleted. If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. @@ -283,9 +286,7 @@ If you have multiple resources with the same name, you can pass the `identifier` For example, let's `console.log` after deletion: ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/mantine"; @@ -293,8 +294,7 @@ import { DeleteButton } from "@refinedev/mantine"; const MyDeleteComponent = () => { return ( { console.log(value); }} @@ -303,227 +303,94 @@ const MyDeleteComponent = () => { }; // visible-block-end -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - message: "You have successfully deleted the record", - }; - }, - }; - - return ( - + { + await new Promise((resolve) => setTimeout(resolve, 500)); + return { data: {} }; + }, + }, }, - ]} - /> - ); -}; - -render( - - - , -); -``` - -### mutationMode - -Determines which mode mutation will have while executing ``. - -> For more information, refer to the [mutation mode documentation →](/advanced-tutorials/mutation-mode.md) - -```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { DeleteButton } from "@refinedev/mantine"; - -const MyDeleteComponent = () => { - return ; -}; -// visible-block-end - -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - data: {}, - }; - }, - }; - - return ( - - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + , ); ``` ### hideText -`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible. +It is used to show and not show the text of the button. When `true`, only the button icon is visible. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/mantine"; const MyDeleteComponent = () => { - return ; + return ; }; // visible-block-end -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - data: {}, - }; - }, - }; - - return ( - + { + await new Promise((resolve) => setTimeout(resolve, 500)); + return { data: {} }; + }, + }, }, - ]} - /> - ); -}; - -render( - - - , -); -``` - -### accessControl - -`accessControl` prop can be used to skip the access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/docs/authorization/access-control-provider) is provided to [``](/docs/core/refine-component) - -```tsx -import { DeleteButton } from "@refinedev/mantine"; - -export const MyListComponent = () => { - return ( - - ); -}; -``` - -### ~~resourceNameOrRouteName~~ - -Use `resource` prop instead. - -## How to override confirm texts? - -You can change the text that appears when you confirm a transaction with `confirmTitle` prop, as well as what 'ok' and 'cancel' buttons text look like with the `confirmOkText` and `confirmCancelText` props. - -```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); -import { Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; - -// visible-block-start -import { DeleteButton } from "@refinedev/mantine"; - -const MyDeleteComponent = () => { - return ( - - ); -}; -// visible-block-end - -const App = () => { - const simpleRestDataProvider = dataProvider( - "https://api.fake-rest.refine.dev", - ); - - const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - data: {}, - }; - }, - }; - - return ( - - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md index fe42e1db48da..0a5e74881536 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md @@ -4,50 +4,26 @@ swizzle: true --- ```tsx live shared -const { default: routerProvider } = LegacyRefineReactRouterV6; -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - legacyRouterProvider: routerProvider, - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - notificationProvider: RefineMantine.useNotificationProvider, - Layout: RefineMantine.Layout, - Sider: () => null, - catchAll: , -}); - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - - ); -}; +import * as React from "react"; const EditPage = () => { const { list } = RefineCore.useNavigation(); - const params = RefineCore.useRouterContext().useParams(); + const params = RefineCore.useParsed(); return (
- + URL Parameters: - - {JSON.stringify(params)} - - + {JSON.stringify(params, null, 2)} + + list("posts")} > Go back - +
); }; @@ -65,7 +41,7 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p ```tsx live url=http://localhost:3000 previewHeight=420px hideCode setInitialRoutes(["/posts"]); -import { Refine, useNavigation, useRouterContext } from "@refinedev/core"; +import * as React from "react"; // visible-block-start import { List, EditButton } from "@refinedev/mantine"; @@ -158,23 +134,32 @@ interface IPost { } // visible-block-end -const App = () => { - return ( - + - ); -}; -render( - - - , + > + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -185,9 +170,8 @@ render( `recordItemId` is used to append the record id to the end of the route path. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); - -import { Refine } from "@refinedev/core"; +setInitialRoutes(["/posts"]); +import * as React from "react"; // visible-block-start import { EditButton } from "@refinedev/mantine"; @@ -197,24 +181,32 @@ const MyEditComponent = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + } /> + + + + , ); ``` @@ -223,9 +215,8 @@ render( Redirection endpoint is defined by the `resource` property and its `edit` action path. By default, `` uses the inferred resource from the route. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); - -import { Refine } from "@refinedev/core"; +setInitialRoutes(["/posts"]); +import * as React from "react"; // visible-block-start import { EditButton } from "@refinedev/mantine"; @@ -235,34 +226,50 @@ const MyEditComponent = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + + } + /> + + + , ); ``` Clicking the button will trigger the `edit` method of [`useNavigation`](/docs/routing/hooks/use-navigation) and then redirect the app to the `edit` action path of the resource, filling the necessary parameters in the route. -If you have multiple resources with the same name, you can -pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. +If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. > For more information, refer to the [`identifier` section of the `` component documentation →](/docs/core/refine-component#identifier) @@ -283,36 +290,43 @@ const MyComponent = () => { `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); - -import { Refine } from "@refinedev/core"; +setInitialRoutes(["/posts"]); +import * as React from "react"; // visible-block-start import { EditButton } from "@refinedev/mantine"; const MyEditComponent = () => { - return ; + return ; }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md index aefdaefc7a65..9d4e7decef45 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md @@ -4,38 +4,44 @@ swizzle: true --- ```tsx live shared -const { default: routerProvider } = LegacyRefineReactRouterV6; -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - legacyRouterProvider: routerProvider, - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - notificationProvider: RefineMantine.useNotificationProvider, - Layout: RefineMantine.Layout, - Sider: () => null, - catchAll: , -}); - -const Wrapper = ({ children }) => { +import * as React from "react"; + +const ListPage = () => { + const { list } = RefineCore.useNavigation(); + const params = RefineCore.useParsed(); + return ( - - - - {children} - - +
+ + URL Parameters: + + {JSON.stringify(params, null, 2)} + + list("posts")} + > + Go back + +
); }; ``` -`` is an Mantine [` - - ); -}; - -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + + } + /> + + + , ); ``` @@ -181,9 +181,8 @@ If you have multiple resources with the same name, you can pass the `identifier` `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible. ```tsx live url=http://localhost:3000 previewHeight=200px -setInitialRoutes(["/"]); - -import { Refine } from "@refinedev/core"; +setInitialRoutes(["/posts"]); +import * as React from "react"; // visible-block-start import { ListButton } from "@refinedev/mantine"; @@ -193,23 +192,30 @@ const MyListComponent = () => { }; // visible-block-end -const App = () => { - return ( - + - ); -}; - -render( - - - , + > + + + + + } + > + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md index 56f30686f67f..6501aaac2af1 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md @@ -4,34 +4,32 @@ swizzle: true --- ```tsx live shared -const { default: routerProvider } = LegacyRefineReactRouterV6; -const { default: simpleRest } = RefineSimpleRest; -setRefineProps({ - legacyRouterProvider: routerProvider, - dataProvider: simpleRest("https://api.fake-rest.refine.dev"), - notificationProvider: RefineMantine.useNotificationProvider, - Layout: RefineMantine.Layout, - Sider: () => null, - catchAll: , -}); - -const Wrapper = ({ children }) => { +import * as React from "react"; + +const ShowPage = () => { + const { list } = RefineCore.useNavigation(); + const params = RefineCore.useParsed(); + return ( - - - - {children} - - +
+ + URL Parameters: + + {JSON.stringify(params, null, 2)} + + list("posts")} + > + Go back + +
); }; ``` -`` uses Mantine [`; -}; - -const RealPostCreate: React.FC = () => { - return ( - } - > - Rest of your page here - - ); -}; +setInitialRoutes(["/posts/create"]); // visible-block-start import { Create } from "@refinedev/mui"; -import { Button } from "@mui/material"; -import { useBack } from "@refinedev/core"; - -const BackButton = () => { - const goBack = useBack(); - - return ; -}; const PostCreate: React.FC = () => { return ( } + goBack={false} > Rest of your page here @@ -309,34 +376,55 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: RealPostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` ### isLoading -To toggle the loading state of the `` component, you can use the `isLoading` property. +To show a loading state, you can use the `isLoading` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create } from "@refinedev/mui"; +import { useState } from "react"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); + const [loading, setLoading] = useState(true); return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` -### breadcrumb +### breadcrumb -To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mui` package. +To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default, it uses the `Breadcrumb` component from `@refinedev/mui` package. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start -import { Create, Breadcrumb } from "@refinedev/mui"; +import { Create } from "@refinedev/mui"; +import { Breadcrumb } from "@refinedev/mui"; const PostCreate: React.FC = () => { return ( @@ -384,7 +493,7 @@ const PostCreate: React.FC = () => {
@@ -399,21 +508,39 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + +
+ } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -424,12 +551,12 @@ render( If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create } from "@refinedev/mui"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -472,12 +617,12 @@ render( If you want to customize the header of the `` component, you can use the `headerProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create } from "@refinedev/mui"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -520,12 +683,12 @@ render( If you want to customize the content of the `` component, you can use the `contentProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create } from "@refinedev/mui"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` @@ -565,23 +746,32 @@ render( ### headerButtons -You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own. +You can customize the buttons at the header by using the `headerButtons` property. It accepts `false` or a function that returns `ReactNode`. + +By default, the `` component has a `list` button in the header. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create } from "@refinedev/mui"; import { Button } from "@mui/material"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( ( <> {defaultButtons} - + )} // highlight-end @@ -593,51 +783,64 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` ### headerButtonProps -You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. +You can customize the list button at the header by using the `headerButtonProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create } from "@refinedev/mui"; -import { Button } from "@mui/material"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( ( - <> - {defaultButtons} - - - )} > Rest of your page here @@ -646,47 +849,70 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`Box` documentation from Material UI →](https://mui.com/material-ui/api/box/) - ### footerButtons -By default, the `` component has a [``][save-button] at the header. +You can customize the buttons at the footer by using the `footerButtons` property. It accepts `false` or a function that returns `ReactNode`. -You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. +By default, the `` component has a `save` button at the footer. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create } from "@refinedev/mui"; import { Button } from "@mui/material"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( ( <> {defaultButtons} - + )} // highlight-end @@ -698,49 +924,63 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` -Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` to utilize the default values of the [``][save-button] component. +### footerButtonProps + +You can customize the save button at the footer by using the `footerButtonProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start -import { Create, SaveButton } from "@refinedev/mui"; -import { Button } from "@mui/material"; +import { Create } from "@refinedev/mui"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( ( - <> - - Save - - - - )} + footerButtonProps={{ + saveButtonProps: { + size: "large", + variant: "contained", + color: "secondary", + }, + }} // highlight-end > Rest of your page here @@ -750,51 +990,62 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` -### footerButtonProps +### footerProps -You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. +If you want to customize the footer of the `` component, you can use the `footerProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +setInitialRoutes(["/posts/create"]); + // visible-block-start import { Create } from "@refinedev/mui"; -import { Button } from "@mui/material"; const PostCreate: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( ( - <> - {defaultButtons} - - - )} > Rest of your page here @@ -803,26 +1054,42 @@ const PostCreate: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - create: PostCreate, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`CardActions` documentation from Material UI →](https://mui.com/material-ui/api/card-actions/) - ## API Reference ### Properties @@ -892,18 +1159,6 @@ const SampleList = () => { ); }; - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - ); -}; ``` [save-button]: /docs/ui-integrations/material-ui/components/buttons/save-button diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md index 65e6b74745ff..6991cea44d9e 100644 --- a/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md @@ -8,6 +8,8 @@ swizzle: true We will show what `` does using properties with examples. ```tsx live hideCode url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import React from "react"; import { Edit, useAutocomplete } from "@refinedev/mui"; @@ -114,17 +116,46 @@ const SampleEdit = () => { // visible-block-end render( - , + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` :::simple Good to know - You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it. - ::: ## Properties @@ -133,39 +164,59 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- `title` allows the addition of titles inside the `` component. If you don't pass title props it uses "Edit" prefix and singular resource name by default. For example, for the `/posts/edit` resource, it will be "Edit post". -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; import { Typography } from "@mui/material"; -const EditPage: React.FC = () => { +const PostEdit: React.FC = () => { return ( - Custom Title} - > - Rest of your page here + /* highlight-next-line */ + Custom Title}> +

Rest of your page here

 ); }; // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: EditPage, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -173,14 +224,9 @@ render( The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom -// handle initial routes in new way -setInitialRoutes(["/custom"]); +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/mui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Edit } from "@refinedev/mui"; @@ -188,38 +234,48 @@ const CustomPage: React.FC = () => { return ( /* highlight-next-line */ - Rest of your page here +

Rest of your page here

 ); }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; -// visible-block-end - render( - - - , + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -229,9 +285,11 @@ If you have multiple resources with the same name, you can pass the `identifier` ### saveButtonProps -The `` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property like the code below: +The `` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property: + +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 // visible-block-start import { Edit } from "@refinedev/mui"; @@ -239,28 +297,48 @@ const PostEdit: React.FC = () => { return ( /* highlight-next-line */ - Rest of your page here +

Rest of your page here

 ); }; // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -272,58 +350,8 @@ render( When clicked on, the delete button executes the [`useDelete`](/docs/data/hooks/use-delete) method provided by the [`dataProvider`](/docs/data/data-provider). -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 -const { default: simpleRest } = RefineSimpleRest; - -const dataProvider = simpleRest("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...dataProvider, - deleteOne: async ({ resource, id, variables }) => { - return { - data: {}, - }; - }, -}; - -const authProvider = { - login: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - register: async () => { - return { - success: true, - }; - }, - forgotPassword: async () => { - return { - success: true, - }; - }, - updatePassword: async () => { - return { - success: true, - }; - }, - logout: async () => { - return { - success: true, - redirectTo: "/", - }; - }, - check: async () => ({ - authenticated: true, - }), - onError: async (error) => { - console.error(error); - return { error }; - }, - getPermissions: async () => ["admin"], - getIdentity: async () => null, -}; +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); // visible-block-start import { Edit } from "@refinedev/mui"; @@ -346,43 +374,51 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- - Edit Item 123 - -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`` →](/docs/ui-integrations/material-ui/components/buttons/delete-button) and [`usePermission` →](/docs/authentication/hooks/use-permissions) documentations - ### recordItemId The `` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL, like when its used on a custom page, modal or drawer. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom -// handle initial routes in new way -setInitialRoutes(["/custom"]); +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); -import { Refine } from "@refinedev/core"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; -import { Layout } from "@refinedev/mui"; // visible-block-start import { Edit } from "@refinedev/mui"; @@ -395,44 +431,57 @@ const CustomPage: React.FC = () => { ); }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom", - }, - ], - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; render( - - - , + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -The `` component needs the `id` information for the [``](/docs/ui-integrations/material-ui/components/buttons/refresh-button) to work properly. - ### mutationMode Determines which mode mutation will have while executing [``](/docs/ui-integrations/material-ui/components/buttons/delete-button). ```tsx live hideCode url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import React from "react"; import { Edit, useAutocomplete } from "@refinedev/mui"; import { TextField, Autocomplete, Box } from "@mui/material"; - import { useForm } from "@refinedev/react-hook-form"; import { Controller } from "react-hook-form"; @@ -540,15 +589,44 @@ const SampleEdit = () => { // visible-block-end render( - , + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [mutation mode documentation →](/advanced-tutorials/mutation-mode.md) - ### dataProviderName If not specified, Refine will use the default data provider. If you have multiple data providers and want to use a different one, you can use the `dataProviderName` property. @@ -585,25 +663,8 @@ export const App: React.FC = () => { To customize the back button or to disable it, you can use the `goBack` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 -import { useNavigation } from "@refinedev/core"; - -const RealBackButton = () => { - const { goBack } = useNavigation(); - - return ; -}; - -const RealPostEdit: React.FC = () => { - return ( - } - > - Rest of your page here - - ); -}; +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); // visible-block-start import { Edit } from "@refinedev/mui"; @@ -629,21 +690,41 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: RealPostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -651,7 +732,9 @@ render( To toggle the loading state of the `` component, you can use the `isLoading` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; @@ -670,29 +753,51 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -### breadcrumb +### breadcrumb To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mui` package. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit, Breadcrumb } from "@refinedev/mui"; @@ -719,37 +824,55 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`Breadcrumb` documentation →](/docs/ui-integrations/material-ui/components/breadcrumb) - ### wrapperProps If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; const PostEdit: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`Card` documentation from Material UI →](https://mui.com/material-ui/api/card/) - ### headerProps If you want to customize the header of the `` component, you can use the `headerProps` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; const PostEdit: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`CardHeader` documentation from Material UI →](https://mui.com/material-ui/api/card-header/) - ### contentProps If you want to customize the content of the `` component, you can use the `contentProps` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; const PostEdit: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + {" "} + + + , ); ``` -> For more information, refer to the [`CardContent` documentation from Material UI →](https://mui.com/material-ui/api/card-content/) - ### headerButtons By default, the `` component has a [``][list-button] and a [``][refresh-button] at the header. @@ -891,21 +1068,21 @@ You can customize the buttons at the header by using the `headerButtons` propert If "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; import { Button } from "@mui/material"; const PostEdit: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( ( <> {defaultButtons} - + )} // highlight-end @@ -917,34 +1094,54 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `refreshButtonProps` and `listButtonProps` to utilize the default values of the [``][list-button] and [``][refresh-button] components. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit, ListButton, RefreshButton } from "@refinedev/mui"; import { Button } from "@mui/material"; const PostEdit: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { {listButtonProps && ( )} - + )} // highlight-end @@ -966,21 +1163,30 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + } /> + + + + , ); ``` @@ -988,14 +1194,14 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; import { Button } from "@mui/material"; const PostEdit: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1047,21 +1273,21 @@ You can customize the buttons at the footer by using the `footerButtons` propert If [`canDelete`](#candelete-and-deletebuttonprops) is `false`, the [``][delete-button] will not render and `deleteButtonProps` will be `undefined`. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; import { Button } from "@mui/material"; const PostEdit: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( ( <> {defaultButtons} - + )} // highlight-end @@ -1073,27 +1299,49 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` and `deleteButtonProps` to utilize the default values of the [``][save-button] and [``][delete-button] components. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit, SaveButton, DeleteButton } from "@refinedev/mui"; import { Button } from "@mui/material"; @@ -1122,21 +1370,42 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1144,14 +1413,14 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123 +```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + // visible-block-start import { Edit } from "@refinedev/mui"; import { Button } from "@mui/material"; const PostEdit: React.FC = () => { - const [loading, setLoading] = React.useState(true); - return ( { footerButtons={({ defaultButtons }) => ( <> {defaultButtons} - + )} > @@ -1175,38 +1444,58 @@ const PostEdit: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - edit: PostEdit, - }, - ]} - />, + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` -> For more information, refer to the [`CardActions` documentation from Material UI →](https://mui.com/material-ui/api/card-actions/) - ### autoSaveProps You can use the auto save feature of the `` component by using the `autoSaveProps` property. ```tsx live url=http://localhost:3000/posts/edit/123 +setInitialRoutes(["/posts/edit/123"]); + +// visible-block-start import React from "react"; import { Edit, useAutocomplete } from "@refinedev/mui"; import { TextField, Autocomplete, Box } from "@mui/material"; import { useForm } from "@refinedev/react-hook-form"; import { Controller } from "react-hook-form"; -// visible-block-start const SampleEdit = () => { const { saveButtonProps, @@ -1322,10 +1611,41 @@ const SampleEdit = () => { // visible-block-end render( - , + + + + + + + } + > + +

This page is empty.

+ + Edit Item 123 + + + } + /> + } /> + + + + , ); ``` @@ -1348,98 +1668,6 @@ goBack-default="``" goBack-type="`ReactNode`" /> -```tsx live shared -const SampleList = () => { - const { dataGridProps } = RefineMui.useDataGrid(); - - const { data: categoryData, isLoading: categoryIsLoading } = - RefineCore.useMany({ - resource: "categories", - ids: dataGridProps?.rows?.map((item: any) => item?.category?.id) ?? [], - queryOptions: { - enabled: !!dataGridProps?.rows, - }, - }); - - const columns = React.useMemo[]>( - () => [ - { - field: "id", - headerName: "Id", - type: "number", - minWidth: 50, - }, - { - field: "title", - headerName: "Title", - minWidth: 200, - }, - { - field: "category", - headerName: "Category", - valueGetter: ({ row }) => { - const value = row?.category?.id; - - return value; - }, - minWidth: 300, - display: "flex", - renderCell: function render({ value }) { - return categoryIsLoading ? ( - <>Loading... - ) : ( - categoryData?.data?.find((item) => item.id === value)?.title - ); - }, - }, - { - field: "createdAt", - headerName: "Created At", - minWidth: 250, - display: "flex", - renderCell: function render({ value }) { - return ; - }, - }, - { - field: "actions", - headerName: "Actions", - display: "flex", - renderCell: function render({ row }) { - return ( - <> - - - ); - }, - align: "center", - headerAlign: "center", - minWidth: 80, - }, - ], - [categoryData?.data], - ); - - return ( - - - - ); -}; - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - ); -}; -``` - [list-button]: /docs/ui-integrations/material-ui/components/buttons/list-button [refresh-button]: /docs/ui-integrations/material-ui/components/buttons/refresh-button [save-button]: /docs/ui-integrations/material-ui/components/buttons/save-button diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md index 66852db1fa22..83e159cfa3a9 100644 --- a/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md @@ -8,11 +8,14 @@ swizzle: true We will show what `` does using properties with examples. ```tsx live hideCode url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import React from "react"; import { useMany } from "@refinedev/core"; import { List, useDataGrid, DateField } from "@refinedev/mui"; import { DataGrid, GridColDef } from "@mui/x-data-grid"; +import { Button } from "@mui/material"; const SampleList = () => { const { dataGridProps } = useDataGrid(); @@ -48,7 +51,8 @@ const SampleList = () => { }, minWidth: 300, display: "flex", - renderCell: function render({ value }) { + renderCell: function render({ row }) { + const value = row?.category?.id; return categoryIsLoading ? ( <>Loading... ) : ( @@ -78,10 +82,29 @@ const SampleList = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -97,7 +120,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- `title` allows the addition of titles inside the `` component. If you don't pass title props it uses the plural resource name by default. For example, for the `/posts` resource, it will be "Posts". -```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts/create +```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/mui"; import { Typography } from "@mui/material"; @@ -115,15 +140,29 @@ const ListPage: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -132,13 +171,8 @@ render( The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/custom -// handle initial routes in new way setInitialRoutes(["/custom"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/mui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { List } from "@refinedev/mui"; @@ -152,31 +186,28 @@ const CustomPage: React.FC = () => { }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - render( - - - , + + + + + + + } + /> + + + , ); ``` @@ -191,6 +222,7 @@ If you have multiple resources with the same name, you can pass the `identifier` Create button redirects to the create page of the resource according to the value it reads from the URL. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); const { default: simpleRest } = RefineSimpleRest; const dataProvider = simpleRest("https://api.fake-rest.refine.dev"); @@ -254,18 +286,31 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -276,6 +321,8 @@ render( To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mui` package. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List, Breadcrumb } from "@refinedev/mui"; @@ -290,7 +337,7 @@ const PostList: React.FC = () => { border: "2px dashed cornflowerblue", }} > - + } // highlight-end @@ -302,23 +349,30 @@ const PostList: React.FC = () => { // visible-block-end render( - { - return ( -
-

This page is empty.

- -
- ); - }} - />, + + + + + + + } + > + } /> + + + + , ); ``` @@ -329,6 +383,8 @@ render( If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/mui"; @@ -352,15 +408,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -371,6 +441,8 @@ render( If you want to customize the header of the `` component, you can use the `headerProps` property. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/mui"; @@ -394,15 +466,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -413,6 +499,8 @@ render( If you want to customize the content of the `` component, you can use the `contentProps` property. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/mui"; @@ -436,15 +524,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -459,6 +561,8 @@ You can customize the buttons at the header by using the `headerButtons` propert If "create" resource is not defined or [`canCreate`](#cancreate-and-createbuttonprops) is `false`, the [``][create-button] will not render and `createButtonProps` will be `undefined`. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/mui"; import { Button } from "@mui/material"; @@ -484,21 +588,37 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [``][create-button] component. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List, CreateButton } from "@refinedev/mui"; import { Button } from "@mui/material"; @@ -526,15 +646,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -543,6 +677,8 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts +setInitialRoutes(["/posts"]); + // visible-block-start import { List } from "@refinedev/mui"; import { Button } from "@mui/material"; @@ -573,15 +709,29 @@ const PostList: React.FC = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + , ); ``` @@ -601,18 +751,4 @@ breadcrumb-default="[``](/docs/ui-integrations/material-ui/componen createButtonProps-type="[`CreateButtonProps`](/docs/ui-integrations/material-ui/components/buttons/create-button/)" /> -```tsx live shared -const Wrapper = ({ children }) => { - return ( - - - - {children} - - ); -}; -``` - [create-button]: /docs/ui-integrations/material-ui/components/buttons/create-button diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md index 30cbc10d32be..1335c4704894 100644 --- a/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md @@ -8,6 +8,8 @@ swizzle: true We will show what `` does using properties with examples. ```tsx live hideCode url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + // visible-block-start import React from "react"; import { useShow, useOne } from "@refinedev/core"; @@ -64,10 +66,41 @@ const SampleShow = () => { // visible-block-end render( - , + + + + + + + } + > + } /> + + + + + } + > + } /> + + + + , ); ``` @@ -83,7 +116,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- `title` allows the addition of titles inside the `` component. if you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it would be "Show post". -```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + // visible-block-start import { Show } from "@refinedev/mui"; import { Typography } from "@mui/material"; @@ -101,21 +136,30 @@ const ShowPage: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: ShowPage, - }, - ]} - />, + + + + + + + } + > + } /> + + + + , ); ``` @@ -124,13 +168,8 @@ render( The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom -// handle initial routes in new way setInitialRoutes(["/custom"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/mui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mui"; @@ -143,31 +182,30 @@ const CustomPage: React.FC = () => { ); }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom", - }, - ], - // highlight-end - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; render( - - - , + + + + + + + } + /> + + + , ); ``` @@ -182,6 +220,8 @@ If you have multiple resources with the same name, you can pass the `identifier` When clicked on, delete button executes the [`useDelete`](/docs/data/hooks/use-delete) method provided by the [`dataProvider`](/docs/data/data-provider) and the edit button redirects the user to the record edit page. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + const { default: simpleRest } = RefineSimpleRest; const dataProvider = simpleRest("https://api.fake-rest.refine.dev"); @@ -257,24 +297,32 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + + + + + + } + > + } /> + + + + , ); ``` @@ -285,13 +333,8 @@ render( `` 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). ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom -// handle initial routes in new way setInitialRoutes(["/custom"]); -import { Refine } from "@refinedev/core"; -import { Layout } from "@refinedev/mui"; -import routerProvider from "@refinedev/react-router-v6/legacy"; -import dataProvider from "@refinedev/simple-rest"; // visible-block-start import { Show } from "@refinedev/mui"; @@ -305,29 +348,29 @@ const CustomPage: React.FC = () => { }; // visible-block-end -const App: React.FC = () => { - return ( - , - path: "/custom", - }, - ], - }} - Layout={Layout} - dataProvider={dataProvider("https://api.fake-rest.refine.dev")} - resources={[{ name: "posts" }]} - /> - ); -}; - render( - - - , + + + + + + + } + /> + + + , ); ``` @@ -370,24 +413,7 @@ export const App: React.FC = () => { To customize the back button or to disable it, you can use the `goBack` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 -import { useNavigation } from "@refinedev/core"; - -const RealBackButton = () => { - const { goBack } = useNavigation(); - - return ; -}; - -const RealPostShow: React.FC = () => { - return ( - } - > - Rest of your page here - - ); -}; +setInitialRoutes(["/posts/show/123"]); // visible-block-start import { Show } from "@refinedev/mui"; @@ -413,21 +439,35 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: RealPostShow, - }, - ]} - />, + + ( +
+

This page is empty.

+ +
+ ), + show: PostShow, + }, + ]} + > + + + + + } + > + } /> + + + + , ); ``` @@ -705,27 +745,43 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + ( +
+

This page is empty.

+ +
+ ), + show: PostShow, + }, + ]} + > + + + + + } + > + } /> + + + + , ); ``` -Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [``][list-button], [``][edit-button], [``][delete-button], and, [``][refresh-button] components. +Or, instead of using the `defaultButtons`, you can create your own buttons: ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + // visible-block-start import { Show, @@ -772,14 +828,13 @@ const PostShow: React.FC = () => { render( (

This page is empty.

- +
), show: PostShow, @@ -794,6 +849,8 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + // visible-block-start import { Show } from "@refinedev/mui"; import { Button } from "@mui/material"; @@ -824,31 +881,45 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + ( +
+

This page is empty.

+ +
+ ), + show: PostShow, + }, + ]} + > + + + + + } + > + } /> + + + + , ); ``` -> For more information, refer to the [`Box` documentation from Material UI →](https://mui.com/material-ui/api/box/) - ### footerButtons You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + // visible-block-start import { Show } from "@refinedev/mui"; import { Button } from "@mui/material"; @@ -874,21 +945,35 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + ( +
+

This page is empty.

+ +
+ ), + show: PostShow, + }, + ]} + > + + + + + } + > + } /> + + + + , ); ``` @@ -897,6 +982,8 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + // visible-block-start import { Show } from "@refinedev/mui"; import { Button } from "@mui/material"; @@ -927,21 +1014,35 @@ const PostShow: React.FC = () => { // visible-block-end render( - ( -
-

This page is empty.

- -
- ), - show: PostShow, - }, - ]} - />, + + ( +
+

This page is empty.

+ +
+ ), + show: PostShow, + }, + ]} + > + + + + + } + > + } /> + + + + , ); ``` @@ -1041,18 +1142,6 @@ const SampleList = () => { ); }; - -const Wrapper = ({ children }) => { - return ( - - - - {children} - - ); -}; ``` [list-button]: /docs/ui-integrations/material-ui/components/buttons/list-button diff --git a/documentation/docs/ui-integrations/material-ui/components/breadcrumb/index.md b/documentation/docs/ui-integrations/material-ui/components/breadcrumb/index.md index cffcf08306fd..a2c7ca1670eb 100644 --- a/documentation/docs/ui-integrations/material-ui/components/breadcrumb/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/breadcrumb/index.md @@ -5,7 +5,9 @@ swizzle: true A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy. `` component built with Material UI [Breadcrumb][mui-breadcrumb] components using the [`useBreadcrumb`](/docs/core/hooks/utilities/use-breadcrumb) hook. -```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px disableScroll +```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123 +setInitialRoutes(["/posts/show/123"]); + // visible-block-start import { Show, Breadcrumb } from "@refinedev/mui"; @@ -13,7 +15,7 @@ const PostShow: React.FC = () => { return ( } + breadcrumb={} >

Content of your show page...

 @@ -29,41 +31,41 @@ const PostList = () => { ); }; -const PostIcon = ( - - - - - - - - - -); - render( - , + + + + + + + } + > + } /> + + + + + } + > + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md index cd06101f2eff..16b69bdacfe9 100644 --- a/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md @@ -15,7 +15,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- ## Usage -```tsx live url=http://localhost:3000/posts previewHeight=340px +```tsx live previewHeight=340px +setInitialRoutes(["/posts"]); + // visible-block-start import { useDataGrid, @@ -58,18 +60,30 @@ interface IPost { } // visible-block-end +const PostClone = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; +}; + render( - ( - Rest of the page here... - ), - }, - ]} - />, + + + + }> + } /> + } /> + + + + , ); ``` @@ -79,33 +93,42 @@ render( `recordItemId` is used to append the record id to the end of the route path. By default, the `recordItemId` is inferred from the route params. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/posts"]); + // visible-block-start import { CloneButton } from "@refinedev/mui"; const MyCloneComponent = () => { - return ; + return ; }; // visible-block-end -const ClonedPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const PostClone = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + }> + } /> + } /> + + + + , ); ``` @@ -115,37 +138,47 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/docs/r It is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/categories"]); // visible-block-start import { CloneButton } from "@refinedev/mui"; const MyCloneComponent = () => { - return ; + return ; }; // visible-block-end -const ClonedPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const CategoryClone = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + }> + } /> + } /> + + + + , ); ``` @@ -172,38 +205,41 @@ const MyCloneComponent = () => { `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible. ```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +setInitialRoutes(["/posts"]); // visible-block-start import { CloneButton } from "@refinedev/mui"; const MyCloneComponent = () => { - return ( - - ); + return ; }; // visible-block-end -const ClonedPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const PostClone = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + }> + } /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md index 812db2a03364..efc5b190a274 100644 --- a/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md @@ -13,8 +13,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- ## Usage -```tsx live url=http://localhost:3000/posts previewHeight=340px -const { Create } = RefineMui; +```tsx live previewHeight=340px +setInitialRoutes(["/posts"]); + // visible-block-start import { useDataGrid, @@ -46,16 +47,30 @@ interface IPost { } // visible-block-end +const PostCreate = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; +}; + render( - Rest of the page here..., - }, - ]} - />, + + + + }> + } /> + } /> + + + + , ); ``` @@ -65,8 +80,8 @@ render( It is used to redirect the app to the `create` action path of the given resource name. By default, the app redirects to the inferred resource's `create` action path. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/posts"]); // visible-block-start import { CreateButton } from "@refinedev/mui"; @@ -82,25 +97,35 @@ const MyCreateComponent = () => { // visible-block-end -const CreatePage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const CategoriesCreate = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + } /> + + } + /> + + + , ); ``` @@ -126,8 +151,8 @@ const MyComponent = () => { `hideText` is used to show or hide the text of the button. When `true`, only the button icon is visible. -```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +```tsx live previewHeight=120px +setInitialRoutes(["/posts"]); // visible-block-start import { CreateButton } from "@refinedev/mui"; @@ -143,22 +168,30 @@ const MyCreateComponent = () => { // visible-block-end -const CreatePage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const PostCreate = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + }> + } /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md index 0277d338eafc..b9dfd047a48a 100644 --- a/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md @@ -15,9 +15,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- ## Usage -```tsx live url=http://localhost:3000/posts previewHeight=340px -const { Create } = RefineMui; -import dataProvider from "@refinedev/simple-rest"; +```tsx live previewHeight=340px +setInitialRoutes(["/posts"]); + // visible-block-start import { useDataGrid, @@ -60,29 +60,23 @@ interface IPost { } // visible-block-end -const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - message: "You have successfully deleted the record", - }; - }, -}; - render( - , + + + + }> + } /> + + + + , ); ``` @@ -93,7 +87,7 @@ render( `recordItemId` allows us to manage which record will be deleted. By default, the `recordItemId` is inferred from the route params. ```tsx live disableScroll previewHeight=200px -const { useRouterContext } = RefineCore; +setInitialRoutes(["/posts"]); import dataProvider from "@refinedev/simple-rest"; @@ -101,35 +95,26 @@ import dataProvider from "@refinedev/simple-rest"; import { DeleteButton } from "@refinedev/mui"; const MyDeleteComponent = () => { - return ; + return ; }; // visible-block-end -const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - message: "You have successfully deleted the record", - }; - }, -}; - render( - , + + + + } /> + + + , ); ``` @@ -140,43 +125,38 @@ Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) `resource` allows us to manage which resource's record is going to be deleted. ```tsx live disableScroll previewHeight=200px -const { useRouterContext } = RefineCore; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/categories"]); // visible-block-start import { DeleteButton } from "@refinedev/mui"; const MyDeleteComponent = () => { - return ; + return ; }; -// visible-block-end -const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - return { - message: "You have successfully deleted the record", - }; - }, -}; +// visible-block-end render( - , + + + + }> + } /> + + + + , ); ``` @@ -191,8 +171,7 @@ If you have multiple resources with the same name, you can pass the `identifier` For example, let's `console.log` after deletion: ```tsx live disableScroll previewHeight=200px -const { useRouterContext } = RefineCore; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/mui"; @@ -201,38 +180,33 @@ const MyDeleteComponent = () => { return ( { console.log(value); }} /> ); }; -// visible-block-end -const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - return { - message: "You have successfully deleted the record", - }; - }, -}; +// visible-block-end render( - , + + + + }> + } /> + + + + , ); ``` @@ -306,8 +280,7 @@ interface IPost { `hideText` is used to show or hide the text of the button. When `true`, only the button icon is visible. ```tsx live disableScroll previewHeight=200px -const { useRouterContext } = RefineCore; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/mui"; @@ -320,31 +293,22 @@ const MyDeleteComponent = () => { /> ); }; -// visible-block-end -const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev"); - -const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - return { - message: "You have successfully deleted the record", - }; - }, -}; +// visible-block-end render( - , + + + + + , ); ``` @@ -371,8 +335,7 @@ Use `resource` prop instead. You can change the text that appears when you confirm a transaction with `confirmTitle` prop, as well as what 'ok' and 'cancel' buttons text look like with `confirmOkText` and `confirmCancelText` props. ```tsx live disableScroll previewHeight=200px -const { useRouterContext } = RefineCore; -import dataProvider from "@refinedev/simple-rest"; +setInitialRoutes(["/posts"]); // visible-block-start import { DeleteButton } from "@refinedev/mui"; @@ -380,40 +343,32 @@ import { DeleteButton } from "@refinedev/mui"; const MyDeleteComponent = () => { return ( ); }; -// visible-block-end - -const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev"); -const customDataProvider = { - ...simpleRestDataProvider, - deleteOne: async ({ resource, id, variables }) => { - await new Promise((resolve) => setTimeout(resolve, 500)); - - return { - message: "You have successfully deleted the record", - }; - }, -}; +// visible-block-end render( - , + + + + } /> + + + , ); ``` diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md index 95a98b9e3c21..9cbff2ba2b32 100644 --- a/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md @@ -13,7 +13,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- ## Usage -```tsx live url=http://localhost:3000/posts previewHeight=340px +```tsx live previewHeight=340px +setInitialRoutes(["/posts"]); + // visible-block-start import { useDataGrid, @@ -56,16 +58,30 @@ interface IPost { } // visible-block-end +const PostEdit = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; +}; + render( - Rest of the page here..., - }, - ]} - />, + + + + }> + } /> + } /> + + + + , ); ``` @@ -76,7 +92,8 @@ render( `recordItemId` is used to append the record id to the end of the route path for the edit route. By default, the `recordItemId` is inferred from the route params. ```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +setInitialRoutes(["/posts"]); + // visible-block-start import { EditButton } from "@refinedev/mui"; @@ -85,29 +102,37 @@ const MyEditComponent = () => { ); }; // visible-block-end -const EditPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const PostEdit = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + }> + } /> + } /> + + + + , ); ``` @@ -118,8 +143,6 @@ Clicking the button will trigger the `edit` method of [`useNavigation`](/docs/ro Redirection endpoint is defined by the `resource` property and its `edit` action path. By default, `` uses the inferred resource from the route. ```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; - // visible-block-start import { EditButton } from "@refinedev/mui"; @@ -128,32 +151,42 @@ const MyEditComponent = () => { ); }; // visible-block-end -const EditPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const CategoryEdit = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + }> + } /> + } /> + + + + , ); ``` @@ -180,7 +213,7 @@ const MyComponent = () => { It is used to show and not show the text of the button. When `true`, only the button icon is visible. ```tsx live disableScroll previewHeight=120px -const { useRouterContext } = RefineCore; +setInitialRoutes(["/posts"]); // visible-block-start import { EditButton } from "@refinedev/mui"; @@ -188,6 +221,8 @@ import { EditButton } from "@refinedev/mui"; const MyEditComponent = () => { return ( @@ -196,22 +231,30 @@ const MyEditComponent = () => { // visible-block-end -const EditPage = () => { - const params = useRouterContext().useParams(); - return
{JSON.stringify(params)}
; +const PostEdit = () => { + const parsed = RefineCore.useParsed(); + return 
{JSON.stringify(parsed, null, 2)}
; }; render( - , + + + + }> + } /> + } /> + + + + , ); ``` diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md index 304aa438d1b1..4b2df65972a8 100644 --- a/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md +++ b/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md @@ -17,7 +17,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of- Use it like any other Ant Design [`