diff --git a/docs/Tutorial.md b/docs/Tutorial.md index bd1b037768d..fe51be2784e 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -225,18 +225,23 @@ export const UserList = props => ( ![Url Field](./img/tutorial_url_field.png) -In react-admin, fields are simple React components. At runtime, they receive the `record` fetched from the API (e.g. `{ "id": 2, "name": "Ervin Howell", "website": "anastasia.net", ... }`), and the `source` field they should display (e.g. `website`). +In react-admin, fields are simple React components. At runtime, they grab the `record` fetched from the API (e.g. `{ "id": 2, "name": "Ervin Howell", "website": "anastasia.net", ... }`) with a custom hook, and use the `source` field (e.g. `website`) to get the value they should display (e.g. "anastasia.net"). That means that writing a custom Field component is really straightforward. For instance, here is a simplified version of the `UrlField`: ```jsx // in src/MyUrlField.js import * as React from "react"; +import { useRecordContext } from 'react-admin'; -const MyUrlField = ({ record = {}, source }) => - - {record[source]} - ; +const MyUrlField = ({ source }) => { + const record = useRecordContext(); + return record ? ( + + {record[source]} + + ) : null; +} export default MyUrlField; ``` @@ -274,6 +279,7 @@ The `MyUrlField` component is a perfect opportunity to illustrate how to customi ```jsx // in src/MyUrlField.js import * as React from "react"; +import { useRecordContext } from 'react-admin'; import { makeStyles } from '@material-ui/core/styles'; import LaunchIcon from '@material-ui/icons/Launch'; @@ -283,18 +289,20 @@ const useStyles = makeStyles({ }, icon: { width: '0.5em', + height: '0.5em', paddingLeft: 2, }, }); -const MyUrlField = ({ record = {}, source }) => { +const MyUrlField = ({ source }) => { + const record = useRecordContext(); const classes = useStyles(); - return ( + return record ? ( {record[source]} - ); + ) : null; } export default MyUrlField; diff --git a/docs/img/tutorial_custom_styles.png b/docs/img/tutorial_custom_styles.png index a1dbbc4e803..cc4863fecdd 100644 Binary files a/docs/img/tutorial_custom_styles.png and b/docs/img/tutorial_custom_styles.png differ diff --git a/docs/img/tutorial_edit_guesser.gif b/docs/img/tutorial_edit_guesser.gif index 8f6d9b6cc07..f7b19e94565 100644 Binary files a/docs/img/tutorial_edit_guesser.gif and b/docs/img/tutorial_edit_guesser.gif differ diff --git a/docs/img/tutorial_guessed_list.png b/docs/img/tutorial_guessed_list.png index 7ae0f537075..af9ffabecec 100644 Binary files a/docs/img/tutorial_guessed_list.png and b/docs/img/tutorial_guessed_list.png differ diff --git a/docs/img/tutorial_guessed_post_list.png b/docs/img/tutorial_guessed_post_list.png index f2051c680be..453e82e0404 100644 Binary files a/docs/img/tutorial_guessed_post_list.png and b/docs/img/tutorial_guessed_post_list.png differ diff --git a/docs/img/tutorial_list_user_name.png b/docs/img/tutorial_list_user_name.png index bb8c381310d..3826b0dff95 100644 Binary files a/docs/img/tutorial_list_user_name.png and b/docs/img/tutorial_list_user_name.png differ diff --git a/docs/img/tutorial_post_list_less_columns.png b/docs/img/tutorial_post_list_less_columns.png index b996096e94c..5b0408d435a 100644 Binary files a/docs/img/tutorial_post_list_less_columns.png and b/docs/img/tutorial_post_list_less_columns.png differ diff --git a/docs/img/tutorial_url_field.png b/docs/img/tutorial_url_field.png index 46f7b04d015..48ff7680301 100644 Binary files a/docs/img/tutorial_url_field.png and b/docs/img/tutorial_url_field.png differ diff --git a/docs/img/tutorial_users_list.png b/docs/img/tutorial_users_list.png index 6c84686f854..6f52b6ac4f9 100644 Binary files a/docs/img/tutorial_users_list.png and b/docs/img/tutorial_users_list.png differ diff --git a/docs/img/tutorial_users_list_selected_columns.png b/docs/img/tutorial_users_list_selected_columns.png index 1eefb698e5d..7bb7363fb84 100644 Binary files a/docs/img/tutorial_users_list_selected_columns.png and b/docs/img/tutorial_users_list_selected_columns.png differ diff --git a/examples/tutorial/.env b/examples/tutorial/.env new file mode 100644 index 00000000000..6f809cc2540 --- /dev/null +++ b/examples/tutorial/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true diff --git a/examples/tutorial/.gitignore b/examples/tutorial/.gitignore index d30f40ef442..23b2bb76657 100644 --- a/examples/tutorial/.gitignore +++ b/examples/tutorial/.gitignore @@ -15,6 +15,7 @@ .env.development.local .env.test.local .env.production.local +.eslintcache npm-debug.log* yarn-debug.log* diff --git a/package.json b/package.json index e6865354fd6..080eb268d45 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "lint": "eslint --ext .js,.ts,.tsx \"./packages/**/src/**/*.{js,ts,tsx}\" \"./examples/**/src/**/*.{js,ts,tsx}\" \"./cypress/**/*.{js,ts,tsx}\"", "prettier": "prettier --config ./.prettierrc.js --write --list-different \"packages/*/src/**/*.{js,json,ts,tsx,css,md}\" \"examples/*/src/**/*.{js,ts,json,tsx,css,md}\" \"cypress/**/*.{js,ts,json,tsx,css,md}\"", "run-simple": "cd examples/simple && yarn -s start", - "run-tutorial": "yarn run -s build && cd examples/tutorial && yarn -s start", + "run-tutorial": "cd examples/tutorial && yarn -s start", "run-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn -s start", "run-graphql-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=graphql yarn -s start", "run-demo-watch": "concurrently \"yarn run watch\" \"yarn run run-demo\"",