From 8aee9fe4cf75f1e001173706b69d59bd3bab0b51 Mon Sep 17 00:00:00 2001 From: asvarcas Date: Mon, 12 Oct 2020 08:49:22 -0300 Subject: [PATCH] Fix ts code to js code in examples --- docs/Caching.md | 4 ++-- docs/CreateEdit.md | 8 ++++---- docs/Fields.md | 2 +- docs/Inputs.md | 9 +++------ docs/List.md | 23 ++++++++++++----------- docs/Theming.md | 6 +++--- docs/Translation.md | 2 +- 7 files changed, 26 insertions(+), 28 deletions(-) diff --git a/docs/Caching.md b/docs/Caching.md index 1d9db3e8096..789e9c133bf 100644 --- a/docs/Caching.md +++ b/docs/Caching.md @@ -121,7 +121,7 @@ It's your responsibility to determine the validity date based on the API respons For instance, to have a `dataProvider` declare responses for `getOne`, `getMany`, and `getList` valid for 5 minutes, you can wrap it in the following proxy: -```ts +```js // in src/dataProvider.js import simpleRestProvider from 'ra-data-simple-rest'; @@ -129,7 +129,7 @@ const dataProvider = simpleRestProvider('http://path.to.my.api/'); const cacheDataProviderProxy = (dataProvider, duration = 5 * 60 * 1000) => new Proxy(dataProvider, { - get: (target, name: string) => (resource, params) => { + get: (target, name) => (resource, params) => { if (name === 'getOne' || name === 'getMany' || name === 'getList') { return dataProvider[name](resource, params).then(response => { const validUntil = new Date(); diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md index 13f645d8ee6..395e7664211 100644 --- a/docs/CreateEdit.md +++ b/docs/CreateEdit.md @@ -898,7 +898,7 @@ import { import { AccordionForm, AccordionFormPanel } from '@react-admin/ra-form-layout'; // don't forget the component="div" prop on the main component to disable the main Card -const CustomerEdit: FC = props => ( +const CustomerEdit = props => ( @@ -944,11 +944,11 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise) ( +const PostCreate = props => ( @@ -974,7 +974,7 @@ These [Enterprise Edition](https://marmelab.com/ra-enterprise): ```jsx -import React from 'react'; +import * as React from 'react'; import { Show, SimpleShowLayout, diff --git a/docs/Inputs.md b/docs/Inputs.md index 8a80e9a4318..2247209fde9 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -1205,19 +1205,16 @@ In this example, `artists.id` matches `performances.artist_id`, and `performance The form displays the events name in a ``: ```jsx -import React, { FC, ComponentProps } from 'react'; +import * as React from 'react'; import { Edit, SelectArrayInput, SimpleForm, TextInput } from 'react-admin'; - import { ReferenceManyToManyInput, useReferenceManyToManyUpdate } from '@react-admin/ra-many-to-many'; -type Props = ComponentProps; - /** * Decorate to override the default save function. * This is necessary to save changes in the associative table * only on submission. */ -const ArtistEditForm: FC = props => { +const ArtistEditForm = props => { const save = useReferenceManyToManyUpdate({ basePath: props.basePath, record: props.record, @@ -1233,7 +1230,7 @@ const ArtistEditForm: FC = props => { return ; }; -const ArtistEdit: FC = props => ( +const ArtistEdit = props => ( diff --git a/docs/List.md b/docs/List.md index b90796f3e41..a404d5252ae 100644 --- a/docs/List.md +++ b/docs/List.md @@ -1456,10 +1456,11 @@ Some List views don't have a natural UI for sorting - e.g. the ``, o `` expects one prop: `fields`, the list of fields it should allows to sort on. For instance, here is how to offer a button to sort on the `reference`, `sales`, and `stock` fields: -```tsx +```jsx +import * as React from 'react'; import { TopToolbar, SortButton, CreateButton, ExportButton } from 'react-admin'; -const ListActions: FC = () => ( +const ListActions = () => ( @@ -1472,7 +1473,7 @@ const ListActions: FC = () => ( When neither the `` or the `` fit your UI needs, you have to write a custom sort control. As with custom filters, this boils down to grabbing the required data and callbacks from the `ListContext`. Let's use the `` source as an example usage of `currentSort` and `setSort`: -```tsx +```jsx import * as React from 'react'; import { Button, Menu, MenuItem, Tooltip, IconButton } from '@material-ui/core'; import SortIcon from '@material-ui/icons/Sort'; @@ -1552,7 +1553,7 @@ const SortButton = ({ fields }) => { ); }; -const inverseOrder = (sort: string) => (sort === 'ASC' ? 'DESC' : 'ASC'); +const inverseOrder = sort => (sort === 'ASC' ? 'DESC' : 'ASC'); export default SortButton; ``` @@ -2349,7 +2350,7 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise) ( +const ArtistList = props => ( ( ); -const ArtistForm: FC = props => ( +const ArtistForm = props => ( @@ -2405,7 +2406,7 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise) instead of the standard -const CategoriesCreate: FC = props => ( +const CategoriesCreate = props => ( @@ -2425,7 +2426,7 @@ const CategoriesCreate: FC = props => ( ); // an Edit view for a tree uses instead of the standard -const CategoriesEdit = (props) => ( +const CategoriesEdit = props => ( @@ -2434,7 +2435,7 @@ const CategoriesEdit = (props) => ( ) // a List view for a tree uses -export const CategoriesList = (props) => ( +export const CategoriesList = props => ( ` component is part of `ra-preferences`, an [Enterprise You can add the `` to a custom App Bar: ```jsx -import React from 'react'; +import * as React from 'react'; import { Layout, AppBar } from 'react-admin'; import { Box, Typography } from '@material-ui/core'; import { ToggleThemeButton } from '@react-admin/ra-preferences'; -const MyAppBar: FC = props => ( +const MyAppBar = props => ( @@ -778,7 +778,7 @@ const MyAppBar: FC = props => ( ); -const MyLayout: FC = props => ; +const MyLayout = props => ; ``` Check [the `ra-preferences` documentation](https://marmelab.com/ra-enterprise/modules/ra-preferences#togglethemebutton-store-the-theme-in-the-preferences) for more details. diff --git a/docs/Translation.md b/docs/Translation.md index f4f916b8b31..1d3c50d7fcf 100644 --- a/docs/Translation.md +++ b/docs/Translation.md @@ -357,7 +357,7 @@ Beware that users from all around the world may use your application, so make su The `` component is part of `ra-preferences`, an [Enterprise Edition](https://marmelab.com/ra-enterprise) module. It displays a button in the App Bar letting users choose their preferred language, and **persists that choice in localStorage**. Users only have to set their preferred locale once per browser. ```jsx -import React from 'react'; +import * as React from 'react'; import { LanguageSwitcher } from '@react-admin/ra-preferences'; import polyglotI18nProvider from 'ra-i18n-polyglot'; import englishMessages from 'ra-language-english';