Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve some docs anchors visibility #5515

Merged
merged 5 commits into from
Nov 12, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion UPGRADE.md
Original file line number Diff line number Diff line change
Expand Up @@ -1159,7 +1159,7 @@ export const CloneButton = ({

## The `<AutocompleteInput>` And `<AutocompleteArrayInput>` Components No Longer Support Certain Props

We rewrote the `<AutocompleteInput>` and `<AutocompleteArrayInput>` components from scratch using [`downshift`](https://github.com/downshift-js/downshift), while the previous version was based on [react-autosuggest](https://react-autosuggest.js.org/). The new components are more robust and more future-proof, and their API didn't change.
We rewrote the `<AutocompleteInput>` and `<AutocompleteArrayInput>` components from scratch using [downshift](https://github.com/downshift-js/downshift), while the previous version was based on [react-autosuggest](https://react-autosuggest.js.org/). The new components are more robust and more future-proof, and their API didn't change.

There are three breaking changes in the new `<AutocompleteInput>` and `<AutocompleteArrayInput>` components:

Expand Down
2 changes: 1 addition & 1 deletion docs/CreateEdit.md
Original file line number Diff line number Diff line change
Expand Up @@ -1407,7 +1407,7 @@ export const PostEdit = (props) => (
Here are the props received by the `Toolbar` component when passed as the `toolbar` prop of the `SimpleForm` or `TabbedForm` components:

* `handleSubmitWithRedirect`: The function to call in order to submit the form. It accepts a single parameter overriding the form's default redirect.
* `handleSubmit` which is the same prop as in [`react-final-form`](https://final-form.org/docs/react-final-form/types/FormRenderProps#handlesubmit)
* `handleSubmit` which is the same prop as in [react-final-form](https://final-form.org/docs/react-final-form/types/FormRenderProps#handlesubmit)
* `invalid`: A boolean indicating whether the form is invalid
* `pristine`: A boolean indicating whether the form is pristine (eg: no inputs have been changed yet)
* `redirect`: The default form's redirect
Expand Down
2 changes: 1 addition & 1 deletion docs/Fields.md
Original file line number Diff line number Diff line change
Expand Up @@ -1354,7 +1354,7 @@ export default TextField;

**Tip**: The `label` attribute isn't used in the `render()` method, but react-admin uses it to display the table header.

**Tip**: If you want to support deep field sources (e.g. source values like `author.name`), use [`lodash/get`](https://www.npmjs.com/package/lodash.get) to replace the simple object lookup:
**Tip**: If you want to support deep field sources (e.g. source values like `author.name`), use [lodash/get](https://www.npmjs.com/package/lodash.get) to replace the simple object lookup:

```jsx
import get from 'lodash/get';
Expand Down
12 changes: 6 additions & 6 deletions docs/Inputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ All input components accept the following props:
<TextInput source="zb_title" label="Title" initialValue="Foo" />
```

React-admin uses [react-final-form](https://final-form.org/docs/react-final-form/getting-started) to control form inputs. Each input component also accepts all react-final-form [`FieldProps`](https://final-form.org/docs/react-final-form/types/FieldProps), including:
React-admin uses [react-final-form](https://final-form.org/docs/react-final-form/getting-started) to control form inputs. Each input component also accepts all react-final-form [FieldProps](https://final-form.org/docs/react-final-form/types/FieldProps), including:

| Prop | Required | Type | Default | Description |
| -------------- | -------- | ---------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down Expand Up @@ -1673,7 +1673,7 @@ Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/

### Transforming Input Value to/from Record

The data format returned by the input component may not be what your API desires. Since React-admin uses react-final-form, we can use its [`parse`](https://final-form.org/docs/react-final-form/types/FieldProps#parse) and [`format`](https://final-form.org/docs/react-final-form/types/FieldProps#format) functions to transform the input value when saving to and loading from the record.
The data format returned by the input component may not be what your API desires. Since React-admin uses react-final-form, we can use its [parse](https://final-form.org/docs/react-final-form/types/FieldProps#parse) and [format](https://final-form.org/docs/react-final-form/types/FieldProps#format) functions to transform the input value when saving to and loading from the record.

Mnemonic for the two functions:

Expand Down Expand Up @@ -1842,7 +1842,7 @@ import { FormDataConsumer } from 'react-admin';
);
```

**Tip**: When using a `FormDataConsumer` you can define [`subscription`](https://final-form.org/docs/react-final-form/types/FormProps#subscription) prop to pass to the `react-final-form`
**Tip**: When using a `FormDataConsumer` you can define [subscription](https://final-form.org/docs/react-final-form/types/FormProps#subscription) prop to pass to the `react-final-form`

{% raw %}
```jsx
Expand All @@ -1865,7 +1865,7 @@ import { FormDataConsumer } from 'react-admin';

## Writing Your Own Input Component

If you need a more specific input type, you can write it directly in React. You'll have to rely on react-final-form's [`<Field>`](https://final-form.org/docs/react-final-form/api/Field) component, or its [`useField`](https://final-form.org/docs/react-final-form/api/useField) hook, to handle the value update cycle.
If you need a more specific input type, you can write it directly in React. You'll have to rely on react-final-form's [<Field>](https://final-form.org/docs/react-final-form/api/Field) component, or its [useField](https://final-form.org/docs/react-final-form/api/useField) hook, to handle the value update cycle.

### Using `<Field>`

Expand Down Expand Up @@ -1980,7 +1980,7 @@ const LatLngInput = () => (

**Tip**: Material-ui's `<TextField>` component already includes a label, so you don't need to use `<Labeled>` in this case.

`useField()` returns two values: `input` and `meta`. To learn more about these props, please refer to the [`useField`](https://final-form.org/docs/react-final-form/api/useField) hook documentation in the react-final-form website.
`useField()` returns two values: `input` and `meta`. To learn more about these props, please refer to the [useField](https://final-form.org/docs/react-final-form/api/useField) hook documentation in the react-final-form website.

Instead of HTML `input` elements or material-ui components, you can use react-admin input components, like `<NumberInput>` for instance. React-admin components already use `useField()`, and already include a label, so you don't need either `useField()` or `<Labeled>` when using them:

Expand Down Expand Up @@ -2071,7 +2071,7 @@ const SexInput = props => {
export default SexInput;
```

**Tip**: `useInput` accepts all arguments that you can pass to `useField`. That means that components using `useInput` accept props like [`format`](https://final-form.org/docs/react-final-form/types/FieldProps#format) and [`parse`](https://final-form.org/docs/react-final-form/types/FieldProps#parse), to convert values from the form to the input, and vice-versa:
**Tip**: `useInput` accepts all arguments that you can pass to `useField`. That means that components using `useInput` accept props like [format](https://final-form.org/docs/react-final-form/types/FieldProps#format) and [parse](https://final-form.org/docs/react-final-form/types/FieldProps#parse), to convert values from the form to the input, and vice-versa:

```jsx
const parse = value => {/* ... */};
Expand Down
4 changes: 2 additions & 2 deletions docs/Resource.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: "The Resource Component"

# The `<Resource>` component

A `<Resource>` component maps one API endpoint to a CRUD interface. For instance, the following admin app offers a read-only interface to the resources exposed by the JSONPlaceholder API at [`https://jsonplaceholder.typicode.com/posts`](https://jsonplaceholder.typicode.com/posts) and [`https://jsonplaceholder.typicode.com/users`](https://jsonplaceholder.typicode.com/users):
A `<Resource>` component maps one API endpoint to a CRUD interface. For instance, the following admin app offers a read-only interface to the resources exposed by the JSONPlaceholder API at [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts) and [https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users):

```jsx
// in src/App.js
Expand Down Expand Up @@ -52,7 +52,7 @@ const App = () => (
);
```

**Tip**: Under the hood, the `<Resource>` component uses [`react-router`](https://reactrouter.com/web/guides/quick-start) to create several routes:
**Tip**: Under the hood, the `<Resource>` component uses [react-router](https://reactrouter.com/web/guides/quick-start) to create several routes:

* `/` maps to the `list` component
* `/create` maps to the `create` component
Expand Down
4 changes: 2 additions & 2 deletions docs/Theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ If you want to read more about higher-order components, check out this SitePoint

## useMediaQuery Hook

To provide an optimized experience on mobile, tablet, and desktop devices, you often need to display different components depending on the screen size. Material-ui provides a hook dedicated to help such responsive layouts: [`useMediaQuery`](https://material-ui.com/components/use-media-query/#usemediaquery).
To provide an optimized experience on mobile, tablet, and desktop devices, you often need to display different components depending on the screen size. Material-ui provides a hook dedicated to help such responsive layouts: [useMediaQuery](https://material-ui.com/components/use-media-query/#usemediaquery).

It expects a function receiving the material-ui theme as a parameter, and returning a media query. Use the theme breakpoints to check for common screen sizes. The hook returns a boolean indicating if the current screen matches the media query or not.

Expand Down Expand Up @@ -888,7 +888,7 @@ const App = () => (

**Tip**: If you use authentication, don't forget to render the `logout` prop in your custom menu component. Also, the `onMenuClick` function passed as prop is used to close the sidebar on mobile.

The `MenuItemLink` component make use of the React Router [`NavLink`](https://reacttraining.com/react-router/web/api/NavLink) component, hence allowing to customize its style when it targets the current page.
The `MenuItemLink` component make use of the React Router [NavLink](https://reacttraining.com/react-router/web/api/NavLink) component, hence allowing to customize its style when it targets the current page.

If the default active style does not suit your tastes, you can override it by passing your own `classes`:

Expand Down
2 changes: 1 addition & 1 deletion examples/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Contributing

If you'd like to contribute example applications, you'll likely use [`create-react-app`](https://github.com/facebookincubator/create-react-app). Unfortunately, you won't be able to initialize your example by running `create-react-app myexample` directly in this directory. This is because `create-react-app` does not work yet with yarn workspaces and lerna. There is a workaround though:
If you'd like to contribute example applications, you'll likely use [create-react-app](https://github.com/facebookincubator/create-react-app). Unfortunately, you won't be able to initialize your example by running `create-react-app myexample` directly in this directory. This is because `create-react-app` does not work yet with yarn workspaces and lerna. There is a workaround though:

Initialize your new example application outside of react-admin folder then simply move the newly created folder inside the `examples` folder. Finally, run `yarn` at the react-admin root folder.

Expand Down
2 changes: 1 addition & 1 deletion packages/ra-data-graphql/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ buildGraphQLProvider({
});
```

The `./schema` file is a `schema.json` in `./src` retrieved with [`get-graphql-schema --json <graphql_endpoint>`](https://github.com/graphcool/get-graphql-schema).
The `./schema` file is a `schema.json` in `./src` retrieved with [get-graphql-schema --json <graphql_endpoint>](https://github.com/graphcool/get-graphql-schema).

> Note: Importing the `schema.json` file will significantly increase the bundle size.

Expand Down