From 7333e2052be16308eafad65d590518ef5d41fe50 Mon Sep 17 00:00:00 2001 From: asvarcas Date: Sat, 9 Nov 2019 12:27:07 -0300 Subject: [PATCH 1/2] Fix docs styling and typos. --- CHANGELOG.md | 6 +++--- docs/Actions.md | 8 ++++---- docs/CustomApp.md | 4 ++-- docs/DataProviders.md | 12 ++++++------ docs/Fields.md | 14 +++++++------- docs/Inputs.md | 20 ++++++++++---------- docs/List.md | 10 +++++++--- docs/Theming.md | 2 +- docs/Translation.md | 4 ++-- 9 files changed, 42 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f507ee4f89c..65060e9d2ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,8 +2,8 @@ ## v3.0.0-beta.6 -* Fix `AutocompleteInput>` suggestion list placement ([3951](https://github.com/marmelab/react-admin/pull/3951)) ([fzaninotto](https://github.com/fzaninotto)) +* Fix ` allowEmpty` position ([3953](https://github.com/marmelab/react-admin/pull/3953)) ([fzaninotto](https://github.com/fzaninotto)) +* Fix `` suggestion list placement ([3951](https://github.com/marmelab/react-admin/pull/3951)) ([fzaninotto](https://github.com/fzaninotto)) * Fix delete wrong item in `` ([3950](https://github.com/marmelab/react-admin/pull/3950)) ([fzaninotto](https://github.com/fzaninotto)) * Fix click in `` does not show options ([3949](https://github.com/marmelab/react-admin/pull/3949)) ([fzaninotto](https://github.com/fzaninotto)) * Fix `` does not allow style override via classes prop ([3948](https://github.com/marmelab/react-admin/pull/3948)) ([MiMo42](https://github.com/MiMo42)) @@ -91,7 +91,7 @@ * Fix react-admin dependency in secondary packages ([3791](https://github.com/marmelab/react-admin/pull/3791)) ([manelpb](https://github.com/manelpb)) * Fix trailing slash in url breaks routing ([3788](https://github.com/marmelab/react-admin/pull/3788)) ([djhi](https://github.com/djhi)) * Fix jsDoc in `refresh` side effect ([3780](https://github.com/marmelab/react-admin/pull/3780)) ([gillesdemey](https://github.com/gillesdemey)) -* Fix autocomplete of Password field on `LoginForm` ([3666](https://github.com/marmelab/react-admin/pull/3666)) ([UltimateForm](https://github.com/UltimateForm)) +* Fix autocomplete of `Password` field on `LoginForm` ([3666](https://github.com/marmelab/react-admin/pull/3666)) ([UltimateForm](https://github.com/UltimateForm)) ## v2.9.7 diff --git a/docs/Actions.md b/docs/Actions.md index 72d40282f11..cdc0febb718 100644 --- a/docs/Actions.md +++ b/docs/Actions.md @@ -173,10 +173,10 @@ The return value of `useQuery` is an array with the following items: This object updates according to the request state: -- mount: { loading: false, loaded: false } -- mutate called: { loading: true, loaded: false } -- success: { data: [data from response], total: [total from response], loading: false, loaded: true } -- error: { error: [error from response], loading: false, loaded: true } +- mount: `{ loading: false, loaded: false }` +- mutate called: `{ loading: true, loaded: false }` +- success: `{ data: [data from response], total: [total from response], loading: false, loaded: true }` +- error: `{ error: [error from response], loading: false, loaded: true }` You can destructure the return value of the `useMutation` hook as `[mutate, { data, total, error, loading, loaded }]`. diff --git a/docs/CustomApp.md b/docs/CustomApp.md index af92e96c145..733333d8ec0 100644 --- a/docs/CustomApp.md +++ b/docs/CustomApp.md @@ -92,7 +92,7 @@ import { createHashHistory } from 'history'; import { Admin, Resource } from 'react-admin'; import restProvider from 'ra-data-simple-rest'; import defaultMessages from 'ra-language-english'; -import polyglotI18nProvider from 'ra_i18n_polyglot'; +import polyglotI18nProvider from 'ra-i18n-polyglot'; import createAdminStore from './createAdminStore'; import messages from './i18n'; @@ -158,7 +158,7 @@ import { createHashHistory } from 'history'; +import { AuthContext, DataProviderContext, TranslationProvider, Resource } from 'react-admin'; import restProvider from 'ra-data-simple-rest'; import defaultMessages from 'ra-language-english'; -import polyglotI18nProvider from 'ra_i18n_polyglot'; +import polyglotI18nProvider from 'ra-i18n-polyglot'; +import { ThemeProvider } from '@material-ui/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; diff --git a/docs/DataProviders.md b/docs/DataProviders.md index 071b2144bad..cd24f96564f 100644 --- a/docs/DataProviders.md +++ b/docs/DataProviders.md @@ -184,14 +184,14 @@ Now all the requests to the REST API will contain the `X-Custom-Header: foobar` **Tip**: The most common usage of custom headers is for authentication. `fetchJson` has built-on support for the `Authorization` token header: -```jsx +```js const fetchJson = (url, options = {}) => { options.user = { authenticated: true, token: 'SRTRDFVESGNJYTUKTYTHRG' - } + }; return fetchUtils.fetchJson(url, options); -} +}; const dataProvider = simpleRestProvider('http://path.to.my.api/', fetchJson); ``` @@ -203,7 +203,7 @@ As Data Providers are just objects, you can extend them with custom logic for a For instance, the following Data Provider extends the `ra-data-simple-rest` provider, and adds image upload support for the `update('posts')` call (react-admin offers an `` component that allows image upload). -```jsx +```js import dataProvider from 'ra-data-simple-rest'; const myDataProvider = { @@ -295,7 +295,7 @@ Method | Usage | Parameter Here are several examples of how react-admin can call the Data Provider: -```jsx +```js dataProvider.getList('posts', { pagination: { page: 1, perPage: 5 }, sort: { field: 'title', order: 'ASC' }, @@ -347,7 +347,7 @@ A `{Record}` is an object literal with at least an `id` property, e.g. `{ id: 12 Building up on the previous example, here are example responses matching the format expected by react-admin: -```jsx +```js dataProvider.getList('posts', { pagination: { page: 1, perPage: 5 }, sort: { field: 'title', order: 'ASC' }, diff --git a/docs/Fields.md b/docs/Fields.md index ff7c10e2a81..195961b5631 100644 --- a/docs/Fields.md +++ b/docs/Fields.md @@ -195,7 +195,7 @@ import { DateField } from 'react-admin'; ``` -This component accepts a `showTime` attribute (false by default) to force the display of time in addition to date. It uses `Intl.DateTimeFormat()` if available, passing the `locales` and `options` props as arguments. If Intl is not available, it ignores the `locales` and `options` props. +This component accepts a `showTime` attribute (`false` by default) to force the display of time in addition to date. It uses `Intl.DateTimeFormat()` if available, passing the `locales` and `options` props as arguments. If Intl is not available, it ignores the `locales` and `options` props. {% raw %} ```jsx @@ -454,7 +454,7 @@ However, in some cases (e.g. inside a ``), you may not want the ``` -**Tip**: sets `translateChoice` to false by default. +**Tip**: `` sets `translateChoice` to `false` by default. ## `` @@ -935,11 +935,11 @@ export const UserList = (props) => ( ## Adding Label To Custom Field Components In The Show View -React-admin lets you use the same Field components in the List view and in the Show view. But if you use the `` custom field component defined earlier in a Show view, something is missing: the Field label. Why do other fields have a label and not this custom Field? And how can you create a Field component that has a label in the Show view, but not in the List view? +React-admin lets you use the same `Field` components in the `List` view and in the `Show` view. But if you use the `` custom field component defined earlier in a `Show` view, something is missing: the `Field` label. Why do other fields have a label and not this custom `Field`? And how can you create a `Field` component that has a label in the `Show` view, but not in the `List` view? -React-admin uses a trick: the Show view layouts (`` and ``) inspect their Field children, and whenever one has the `addLabel` prop set to `true`, the layout adds a label. +React-admin uses a trick: the `Show` view layouts (`` and ``) inspect their `Field` children, and whenever one has the `addLabel` prop set to `true`, the layout adds a label. -That means that the only thing you need to add to a custom component to make it usable in a Show view is a `addLabel: true` default prop. +That means that the only thing you need to add to a custom component to make it usable in a `Show` view is a `addLabel: true` default prop. ```js FullNameField.defaultProps = { @@ -965,9 +965,9 @@ const ConditionalEmailField = ({ record, ...rest }) => export default ConditionalEmailField; ``` -**Tip**: Always check that the `record` is defined before inspecting its properties, as react-admin displays the Show view *before* fetching the record from the data provider. So the first time it renders the show view for a resource, the `record` is `undefined`. +**Tip**: Always check that the `record` is defined before inspecting its properties, as react-admin displays the `Show` view *before* fetching the record from the data provider. So the first time it renders the show view for a resource, the `record` is `undefined`. -This `ConditionalEmailField` is properly hidden when `hasEmail` is false. But when `hasEmail` is true, the Show layout renders it... without label. And if you add a `addLabel` default prop, the Show layout will render the label regardless of the `hasEmail` value... +This `ConditionalEmailField` is properly hidden when `hasEmail` is `false`. But when `hasEmail` is `true`, the Show layout renders it... without label. And if you add a `addLabel` default prop, the `Show` layout will render the label regardless of the `hasEmail` value... One solution is to add the label manually in the custom component: diff --git a/docs/Inputs.md b/docs/Inputs.md index a8a3cbdfbf6..79e9912b969 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -159,7 +159,7 @@ const choices = [ ``` However, in some cases (e.g. inside a ``), you may not want the choice to be translated. -In that case, set the `translateChoice` prop to false. +In that case, set the `translateChoice` prop to `false`. ```jsx @@ -265,7 +265,7 @@ const choices = [ ]; ``` -However, in some cases (e.g. inside a ``), you may not want the choice to be translated. In that case, set the `translateChoice` prop to false. +However, in some cases (e.g. inside a ``), you may not want the choice to be translated. In that case, set the `translateChoice` prop to `false`. ```jsx @@ -315,15 +315,15 @@ If you need to override the props of the suggestions container (a `Popper` eleme | Prop | Required | Type | Default | Description | | ---|---|---|---|--- | | `choices` | Required | `Object[]` | - | List of items to autosuggest | -| `fullWith` | Optional | Boolean | If `true`, the input will take all the form width +| `fullWith` | Optional | `Boolean` | If `true`, the input will take all the form width | `matchSuggestion` | Optional | `Function` | - | Required if `optionText` is a React element. Function returning a boolean indicating whether a choice matches the filter. `(filter, choice) => boolean` | `optionValue` | Optional | `string` | `id` | Fieldname of record containing the value to use as input value | | `optionText` | Optional | string | Function | `name` | Fieldname of record to display in the suggestion item or function which accepts the current record as argument (`(record)=> {string}`) | | `resource` | Required | `string` | - | The resource working on. This field is passed down by wrapped components like `Create` and `Edit`. | | `setFilter` | Optional | `Function` | `null` | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically setup when using `ReferenceInput`. | | `source` | Required | `string` | - | Name of field to edit, its type should match the type retrieved from `optionValue` | -| `suggestionLimit` | Optional | Number | `null` | Limits the numbers of suggestions that are shown in the dropdown list | -| `shouldRenderSuggestions` | Optional | Function | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. Use this when working with large collections of data to improve performance and user experience. This function is passed into the underlying react-autosuggest component. Ex.`(value) => value.trim() > 2` | +| `suggestionLimit` | Optional | `Number` | `null` | Limits the numbers of suggestions that are shown in the dropdown list | +| `shouldRenderSuggestions` | Optional | `Function` | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. Use this when working with large collections of data to improve performance and user experience. This function is passed into the underlying react-autosuggest component. Ex.`(value) => value.trim() > 2` | ## `` and `` @@ -429,7 +429,7 @@ const choices = [ ]; ``` -However, in some cases (e.g. inside a ``), you may not want the choice to be translated. In that case, set the `translateChoice` prop to false. +However, in some cases (e.g. inside a ``), you may not want the choice to be translated. In that case, set the `translateChoice` prop to `false`. ```jsx @@ -452,7 +452,7 @@ import { FavoriteBorder, Favorite } from '@material-ui/icons'; | Prop | Type | Default | Description | | ---|---|---|--- | -| `row` | `boolean` | true | Display group of elements in a compact row. | +| `row` | `boolean` | `true` | Display group of elements in a compact row. | Refer to [Material UI Checkbox documentation](https://material-ui.com/api/checkbox/) for more details. @@ -615,7 +615,7 @@ const choices = [ ]; ``` -However, in some cases (e.g. inside a ``), you may not want the choice to be translated. In that case, set the `translateChoice` prop to false. +However, in some cases (e.g. inside a ``), you may not want the choice to be translated. In that case, set the `translateChoice` prop to `false`. ```jsx @@ -951,13 +951,13 @@ const choices = [ ]; ``` -However, in some cases, you may not want the choice to be translated. In that case, set the `translateChoice` prop to false. +However, in some cases, you may not want the choice to be translated. In that case, set the `translateChoice` prop to `false`. ```jsx ``` -Note that `translateChoice` is set to false when `` is a child of ``. +Note that `translateChoice` is set to `false` when `` is a child of ``. Lastly, use the `options` attribute if you want to override any of Material UI's `` attributes: diff --git a/docs/List.md b/docs/List.md index 2e16ac0f75f..9f25cf918a4 100644 --- a/docs/List.md +++ b/docs/List.md @@ -775,10 +775,11 @@ The `Datagrid` is an *iterator* component: it receives an array of ids, and a da By default, `` renders its body using ``, an internal react-admin component. You can pass a custom component as the `row` prop to override that default. And by the way, `` has a `row` property set to `` by default for the same purpose. `` receives the row `record`, the `resource`, and a copy of the `` children. That means you can create custom datagrid logic without copying several components from the react-admin source. -For instance, to show the selection checkbox only for records that have a `selectable` field set to true, you can override `` and `` as follows: +For instance, to show the selection checkbox only for records that have a `selectable` field set to `true`, you can override `` and `` as follows: ```jsx // in src/PostList.js +import React from 'react'; import { Datagrid, DatagridBody, List, TextField } from 'react-admin'; import TableCell from '@material-ui/core/TableCell'; import TableRow from '@material-ui/core/TableRow'; @@ -804,7 +805,7 @@ const MyDatagridRow = ({ record, resource, id, onToggleItem, children, selected, ))} -) +); const MyDatagridBody = props => } />; const MyDatagrid = props => } />; @@ -812,7 +813,7 @@ const MyDatagrid = props => } />; const PostList = props => ( - + ... @@ -983,6 +984,7 @@ You can customize the `` styles by passing a `classes` object as prop, {% raw %} ```jsx +import React from 'react'; import { makeStyles } from '@material-ui/core'; const useStyles = makeStyles({ @@ -1009,6 +1011,7 @@ export PostList; **Tip**: If you want to override the `header` and `cell` styles independently for each column, use the `headerClassName` and `cellClassName` props in `` components. For instance, to hide a certain column on small screens: ```jsx +import React from 'react'; import { makeStyles } from '@material-ui/core'; const useStyles = makeStyles(theme => ({ @@ -1183,6 +1186,7 @@ You'll need to create your own iterator component as follows: {% raw %} ```jsx // in src/comments.js +import React from 'react'; import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; diff --git a/docs/Theming.md b/docs/Theming.md index 10b0a39a570..2c344b29112 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -92,7 +92,7 @@ const VisitorFilter = props => { ); }; -// The List component supports the `root`, `header`, `actions` and `noResults` CSS classes. Here we override the `header` and `actions` classes +// The `List` component supports the `root`, `header`, `actions` and `noResults` CSS classes. Here we override the `header` and `actions` classes const useListStyles = makeStyles({ actions: { backgroundColor: 'Lavender', diff --git a/docs/Translation.md b/docs/Translation.md index 8bc7c596013..75789d38f34 100644 --- a/docs/Translation.md +++ b/docs/Translation.md @@ -49,9 +49,9 @@ React-admin components use translation keys for their labels, and rely on the `i const SaveButton = ({ doSave }) => { const translate = useTranslate(); // returns the i18nProvider.translate() method return ( - ; + ); }; ``` From 498640b9cbbb9a515159e18fa8981ea1e6992d00 Mon Sep 17 00:00:00 2001 From: asvarcas Date: Sat, 9 Nov 2019 12:30:09 -0300 Subject: [PATCH 2/2] Fix typo. --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65060e9d2ba..f513f46fc25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## v3.0.0-beta.6 -* Fix ` allowEmpty` position ([3953](https://github.com/marmelab/react-admin/pull/3953)) ([fzaninotto](https://github.com/fzaninotto)) +* Fix `` `allowEmpty` position ([3953](https://github.com/marmelab/react-admin/pull/3953)) ([fzaninotto](https://github.com/fzaninotto)) * Fix `` suggestion list placement ([3951](https://github.com/marmelab/react-admin/pull/3951)) ([fzaninotto](https://github.com/fzaninotto)) * Fix delete wrong item in `` ([3950](https://github.com/marmelab/react-admin/pull/3950)) ([fzaninotto](https://github.com/fzaninotto)) * Fix click in `` does not show options ([3949](https://github.com/marmelab/react-admin/pull/3949)) ([fzaninotto](https://github.com/fzaninotto))