diff --git a/docs/AppBar.md b/docs/AppBar.md index 2608eb8596a..f31030dfeb0 100644 --- a/docs/AppBar.md +++ b/docs/AppBar.md @@ -228,7 +228,7 @@ export const MyAppBar = () => ( If your app uses [authentication](./Authentication.md), the `` component displays a button to display the user menu on the right side. By default, the user menu only contains a logout button. @@ -440,7 +440,7 @@ export const MyLayout = (props) => ( By default, users can override the page title [in configurable mode](./Features.md#configurable-ui). diff --git a/docs/Architecture.md b/docs/Architecture.md index cef497fdc4b..930528276c7 100644 --- a/docs/Architecture.md +++ b/docs/Architecture.md @@ -105,7 +105,11 @@ We spend a great deal of time refining the UI to make it as intuitive as possibl React-admin produces a user interface that is voluntarily bland by default because we want to emphasize content rather than chrome. -![Sort Button](./img/sort-button.gif) + + As for the developer experience, react-admin is constantly evolving to find the sweet spot between an intuitive API, power user features, not too much magic, and just enough documentation. The core team are the first testers of react-admin, and pay attention to the productivity, debuggability, discoverability, performance, and robustness of all the hooks and components. diff --git a/docs/ArrayInput.md b/docs/ArrayInput.md index 7f1d5c49999..807762afc33 100644 --- a/docs/ArrayInput.md +++ b/docs/ArrayInput.md @@ -7,7 +7,11 @@ title: "The ArrayInput Component" To edit arrays of data embedded inside a record, `` creates a list of sub-forms. -![ArrayInput](./img/array-input.gif) + + `` allows editing of embedded arrays, like the `items` field in the following `order` record: diff --git a/docs/AuthProviderWriting.md b/docs/AuthProviderWriting.md index d6580d75c1d..9770b45b3ef 100644 --- a/docs/AuthProviderWriting.md +++ b/docs/AuthProviderWriting.md @@ -320,7 +320,11 @@ export default { }; ``` -![Logout button](./img/logout.gif) + + The `authProvider.logout()` method is also a good place to notify the authentication backend that the user credentials are no longer valid after logout. diff --git a/docs/Authentication.md b/docs/Authentication.md index 03629d469d7..71f120c71ed 100644 --- a/docs/Authentication.md +++ b/docs/Authentication.md @@ -5,7 +5,11 @@ title: "security" # Security -![Login](./img/login.gif) + + React-admin lets you secure your admin app with the authentication strategy of your choice. Since there are many possible strategies (Basic Auth, JWT, OAuth, etc.), react-admin delegates authentication logic to an `authProvider`. diff --git a/docs/AutocompleteArrayInput.md b/docs/AutocompleteArrayInput.md index 332da8c3b05..556235dc4f6 100644 --- a/docs/AutocompleteArrayInput.md +++ b/docs/AutocompleteArrayInput.md @@ -8,7 +8,11 @@ title: "The AutocompleteArrayInput Component" To let users choose multiple values in a list using a dropdown with autocompletion, use ``. It renders using Material UI [Autocomplete](https://mui.com/material-ui/react-autocomplete/). -![AutocompleteArrayInput](./img/autocomplete-array-input.gif) + + This input allows editing values that are arrays of scalar values, e.g. `[123, 456]`. @@ -133,7 +137,11 @@ const choices = possibleValues.map(value => ({ id: value, name: ucfirst(value) } To allow users to add new options, pass a React element as the `create` prop. `` will then render a "Create" option at the bottom of the choices list. When clicked, it will render the create element. -![create option](./img/autocomplete-array-input-create.gif) + + {% raw %} ```jsx diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md index 64cad6d5106..34d56dd3d30 100644 --- a/docs/AutocompleteInput.md +++ b/docs/AutocompleteInput.md @@ -8,7 +8,11 @@ title: "The AutocompleteInput Component" To let users choose a value in a list using a dropdown with autocompletion, use ``. It renders using [Material UI's ``](https://mui.com/material-ui/react-autocomplete/). -![AutocompleteInput](./img/autocomplete-input.gif) + + This input allows editing record fields that are scalar values, e.g. `123`, `'admin'`, etc. diff --git a/docs/BooleanInput.md b/docs/BooleanInput.md index c77ee192b40..560c6d2ccef 100644 --- a/docs/BooleanInput.md +++ b/docs/BooleanInput.md @@ -7,7 +7,11 @@ title: "The BooleanInput Component" `` renders a switch allowing users to set the value `true` or `false` to a record field. -![BooleanInput](./img/boolean-input.gif) + + **Tip**: This input doesn't let users set a `null` value - only `true` or `false`. Use the [``](./NullableBooleanInput.md) component if you have to handle non-required booleans. diff --git a/docs/Buttons.md b/docs/Buttons.md index 03b27ae7178..6da2fbb9038 100644 --- a/docs/Buttons.md +++ b/docs/Buttons.md @@ -256,7 +256,11 @@ export const PostList = () => ( This button is an internal component used by react-admin in [the Filter button/form combo](./FilteringTutorial.md#the-filter-buttonform-combo). -![List Filters](./img/list_filter.gif) + + #### `sx`: CSS API @@ -365,7 +369,11 @@ To override the style of all instances of `` using the [Ma The `` component displays a menu item with a label and an icon - or only the icon with a tooltip when the sidebar is minimized. It also handles the automatic closing of the menu on tap on mobile. -![custom menu icons](./img/custom-menu.gif) + + | Prop | Required | Type | Default | Description | | ------------- | -------- | -------------------- | ------- | ---------------------------------------- | diff --git a/docs/CheckboxGroupInput.md b/docs/CheckboxGroupInput.md index 2cb45fcd7cd..3d1bf9eb59c 100644 --- a/docs/CheckboxGroupInput.md +++ b/docs/CheckboxGroupInput.md @@ -7,7 +7,11 @@ title: "The CheckboxGroupInput Component" If you want to let the user choose multiple values among a list of possible values by showing them all, `` is the right component. -![CheckboxGroupInput](./img/checkbox-group-input.gif) + + This input allows editing values that are arrays of scalar values, e.g. `[123, 456]`. diff --git a/docs/Configurable.md b/docs/Configurable.md index 9c1716f706f..83b02834a6f 100644 --- a/docs/Configurable.md +++ b/docs/Configurable.md @@ -7,7 +7,11 @@ title: "The Configurable Component" This component makes another component configurable by the end user. When users enter the configuration mode, they can customize the component's settings via the inspector. -![SimpleListConfigurable](./img/SimpleListConfigurable.gif) + + Some react-admin components are already configurable - or rather they have a configurable counterpart: diff --git a/docs/Datagrid.md b/docs/Datagrid.md index 9934395eabe..18fb859dac9 100644 --- a/docs/Datagrid.md +++ b/docs/Datagrid.md @@ -140,7 +140,11 @@ Finally, `` inspects children for props that indicate how it should be ## `bulkActionButtons` -![Bulk Action Buttons](./img/bulk-actions-toolbar.gif) + + Bulk action buttons are buttons that affect several records at once, like mass deletion for instance. In the `` component, the bulk actions toolbar appears when a user ticks the checkboxes in the first column of the table. The user can then choose a button from the bulk actions toolbar. By default, all Datagrids have a single bulk action button, the bulk delete button. You can add other bulk action buttons by passing a custom element as the `bulkActionButtons` prop of the `` component: @@ -388,7 +392,11 @@ const PostList = () => ( ## `expand` -![expandable panel](./img/datagrid_expand.gif) + + To show more data from the resource without adding too many columns, you can show data in an expandable panel below the row on demand, using the `expand` prop. @@ -804,7 +812,11 @@ const PostList = () => ( The [``](./SelectColumnsButton.md) component lets users hide, show, and reorder datagrid columns. -![SelectColumnsButton](./img/SelectColumnsButton.gif) + + ```jsx import { @@ -845,7 +857,11 @@ const PostList = () => ( You can let end users customize the fields displayed in the `` by using the `` component instead. -![DatagridConfigurable](./img/DatagridConfigurable.gif) + + ```diff import { @@ -972,7 +988,11 @@ Check [the `ra-editable-datagrid` documentation](https://marmelab.com/ra-enterpr ## Customizing Column Sort -![Sort Column Header](./img/sort-column-header.gif) + + The column headers are buttons allowing users to change the list sort field and order. This feature requires no configuration and works out fo the box. The next sections explain how you can disable or modify the field used for sorting on a particular column. diff --git a/docs/DateInput.md b/docs/DateInput.md index 42db07f17f3..2a0300fdf2a 100644 --- a/docs/DateInput.md +++ b/docs/DateInput.md @@ -7,7 +7,11 @@ title: "The DateInput Component" Ideal for editing dates, `` renders an HTML `` element, that most browsers display as a [date picker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date). -![DateInput](./img/date-input.gif) + + The appearance of `` depends on the browser, and falls back to a text input on Safari. The date formatting in this input depends on the user's locale. @@ -42,4 +46,8 @@ It is not possible to customize the date format. Browsers use the user locale to If you need to render a UI despite the browser locale, MUI also proposes a [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component, which is more customizable than the native date picker, but requires additional packages. -![MUI X Date picker](./img/date-picker.gif) + + diff --git a/docs/DateTimeInput.md b/docs/DateTimeInput.md index b66bc15b7ef..94016645401 100644 --- a/docs/DateTimeInput.md +++ b/docs/DateTimeInput.md @@ -7,7 +7,11 @@ title: "The DateTimeInput Component" An input for editing dates with time. `` renders an `` element, that most browsers display as [date and time picker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local). -![DateTimeInput](./img/date-time-input.gif) + + The appearance depends on the browser, and falls back to a text input on safari. The date formatting in this input depends on the user's locale. diff --git a/docs/EditTutorial.md b/docs/EditTutorial.md index a0177361502..88e057cd66c 100644 --- a/docs/EditTutorial.md +++ b/docs/EditTutorial.md @@ -895,4 +895,8 @@ Users often need to edit data from several resources in the same form. React-adm ![EditInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.gif) -![ReferenceManyInput](./img/reference-many-input.gif) + + diff --git a/docs/Features.md b/docs/Features.md index 7b4dab71475..84e1dc56e8e 100644 --- a/docs/Features.md +++ b/docs/Features.md @@ -197,7 +197,11 @@ const ProductEdit = () => ( ); ``` -![ReferenceManyInput](./img/reference-many-input.gif) + + Reference Input components are also very useful to filter a view by a related record. For instance, to display the list of books of a given author: @@ -297,11 +301,21 @@ In most admin and B2B apps, the most common task is to look for a record. React- @@ -348,7 +362,11 @@ Check the following chapters to learn more about each search and filtering compo Users often apply the same filters over and over again. Saved Queries **let users save a combination of filters** and sort parameters into a new, personal filter, that persists between sessions. -[![Saved Queries in FilterList](./img/SavedQueriesList.gif)](./img/SavedQueriesList.gif) + + Here is an example `` sidebar with saved queries: @@ -449,7 +467,11 @@ export const PostEdit = () => ( ); ``` -![Tabbed Form](./img/tabbed-form.gif) + + React-admin offers, out of the box, several **form layouts**: @@ -627,7 +649,11 @@ When a user edits a record and hits the "Save" button, the UI shows a confirmati But there is an additional benefit: it also allows the "Undo" feature. Undo is already functional in the admin at that point. Try editing a record, then hit the "Undo" link in the black confirmation box before it slides out. You'll see that the app does not send the `UPDATE` query to the API, and displays the non-modified data. -[![Undo Post Editing](./img/tutorial_post_edit_undo.gif)](./img/tutorial_post_edit_undo.gif) + + Even though updates appear immediately due to Optimistic Updates, React-admin only sends them to the server after a short delay (about 5 seconds). During this delay, **the user can undo the action**, and react-admin will never send the update. @@ -792,7 +818,11 @@ Check the following components for more details: To manage directories, categories, and any other **hierarchical data**, admins often rely on tree structures. Navigating and editing tree structures can be tricky, but React-admin provides a set of components to make it easy. -![TreeWithDetails](./img/treewithdetails.gif) + + ```jsx import { Create, Edit, SimpleForm, TextInput } from 'react-admin'; @@ -910,7 +940,11 @@ const PostList = () => ( ); ``` -![useSubscribeToRecordList](./img/useSubscribeToRecordList.gif) + + This feature leverages the following hooks: @@ -954,7 +988,11 @@ This feature leverages the following components: And last but not least, react-admin provides a **lock mechanism** to prevent two users from editing the same resource at the same time. -![Edit With Locks](./img/locks-demo.gif) + + A user can lock a resource, either by voluntarily asking for a lock or by editing a resource. When a resource is locked, other users can't edit it. When the lock is released, other users can edit the resource again. @@ -1012,7 +1050,11 @@ End-users tweak the UI to their liking, and **they expect these preferences to b For instance, the Saved Queries feature lets users **save a combination of filters** and sort parameters into a new, personal filter. -[![Saved Queries in FilterList](./img/SavedQueriesList.gif)](./img/SavedQueriesList.gif) + + Saved queries persist between sessions, so users can find their custom queries even after closing and reopening the admin. Saved queries are available both for the Filter Button/Form combo and for the `` Sidebar. It's enabled by default for the Filter Button/Form combo but you have to add it yourself in the `` Sidebar. @@ -1047,7 +1089,11 @@ const SongList = () => ( React-admin also **persists the light/dark mode and the language choice** of end-users. -![Dark Mode support](./img/ToggleThemeButton.gif) + + To learn more about the `Store` and how to use it, check the following sections: @@ -1063,7 +1109,11 @@ To learn more about the `Store` and how to use it, check the following sections: An extension of preferences is Configurable components. Because no matter how polished your UI is, it will never fit all use cases. That's why react-admin provides a way to let end users **customize the features of many components visually**, via the inspector. -![DatagridConfigurable](./img/DatagridConfigurable.gif) + + To enable this feature, replace a component (in that example, ``) with its configurable counterpart: @@ -1213,7 +1263,11 @@ To learn more about theming in react-admin, check the following sections: React-admin is **fully internationalized**. -![LocalesMenuButton](./img/LocalesMenuButton.gif) + + The default interface messages (for buttons, tooltips, input labels, etc) are in English. You can translate them to any of [the 30+ languages supported by react-admin](./TranslationLocales.md) by importing the appropriate translation package. For instance, to translate to French: diff --git a/docs/FilterButton.md b/docs/FilterButton.md index 5b778795f22..da69cc06923 100644 --- a/docs/FilterButton.md +++ b/docs/FilterButton.md @@ -7,7 +7,11 @@ title: "The FilterButton Component" Part of the filter button/form combo, `` renders whenever you use the `` prop. When clicked, it reveals a dropdown of filter names, allowing users to add a new filter input to the filter form. -![filter button/from combo](./img/list_filter.gif) + + It's an internal component that you should only need if you build a custom List layout. diff --git a/docs/FilterForm.md b/docs/FilterForm.md index 15cfc5ebb3b..904acf9c10b 100644 --- a/docs/FilterForm.md +++ b/docs/FilterForm.md @@ -7,7 +7,11 @@ title: "The FilterForm Component" Part of the filter button/form combo, `` renders whenever you use the `` prop. It renders the filter inputs that are `alwaysOn`, and the ones that were enabled by the user by using the ``. The `` has no submit button: it modifies the list filters as the user types in the form (with a debounce to avoid too many requests). -![filter button/from combo](./img/list_filter.gif) + + It's an internal component that you should only need if you build a custom List layout. diff --git a/docs/FilterList.md b/docs/FilterList.md index 19bad312058..f0e5a41f8ef 100644 --- a/docs/FilterList.md +++ b/docs/FilterList.md @@ -7,7 +7,11 @@ title: "The FilterList Component" An alternative UI to the Filter Button/Form Combo is the FilterList Sidebar. Similar to what users usually see on e-commerce websites, it's a panel with many simple filters that can be enabled and combined using the mouse. -![Filter Sidebar](./img/filter-sidebar.gif) + + The user experience is better than the Button/Form Combo, because the filter values are explicit, and it doesn't require typing anything in a form. But it's a bit less powerful, as only filters with a finite set of values (or intervals) can be used in the ``. @@ -250,4 +254,8 @@ export const CategoriesFilter = () => { ``` {% endraw %} -![Cumulative filter list items](./img/filter-list-cumulative.gif) + + diff --git a/docs/FilterLiveSearch.md b/docs/FilterLiveSearch.md index f3b44368520..5cf5bfe0f5c 100644 --- a/docs/FilterLiveSearch.md +++ b/docs/FilterLiveSearch.md @@ -5,7 +5,11 @@ title: "The FilterLiveSearch Component" # `` -![Filter Live Search](./img/filter-live-search.gif) + + The filter sidebar is not a form. Therefore, if your users need to enter complex filters, you'll have to recreate a filter form using react-hook-form (see the [Building a custom filter](./FilteringTutorial.md#building-a-custom-filter) section below for an example). However, if you only need one text input with a filter-as-you-type behavior, you'll find the `` component convenient. diff --git a/docs/FilteringTutorial.md b/docs/FilteringTutorial.md index 9bfeb75aad4..c7022e850f0 100644 --- a/docs/FilteringTutorial.md +++ b/docs/FilteringTutorial.md @@ -12,11 +12,21 @@ One of the most important features of the List page is the ability to filter the
- + + + Filter Button/Form Combo - + + + <FilterList> Sidebar
@@ -41,7 +51,11 @@ React-admin offers 4 different ways to filter the list. Depending on the type of ## The Filter Button/Form Combo -![List Filters](./img/list_filter.gif) + + The default appearance for filters is an inline form displayed on top of the list. Users also see a dropdown button allowing to add more inputs to that form. This functionality relies on the `` prop: @@ -71,7 +85,11 @@ Elements passed as `filters` are regular inputs. That means you can build sophis ### `` -![``](./img/search_input.gif) + + In addition to [the usual input types](./Inputs.md) (``, ``, ``, etc.), you can use the `` in the `filters` array. This input is designed especially for the [`Filter Form`](./FilterForm.md). It's like a `` with a magnifier glass icon - exactly the type of input users look for when they want to do a full-text search. @@ -87,7 +105,11 @@ In the example given above, the `q` filter triggers a full-text search on all fi ### Quick Filters -![``](./img/quick_filters.gif) + + Users usually dislike using their keyboard to filter a list (especially on mobile). A good way to satisfy this user requirement is to turn filters into *quick filter*. A Quick filter is a filter with a non-editable `defaultValue`. Users can only enable or disable them. @@ -116,7 +138,11 @@ const postFilters = [ ## The `` Sidebar -![Filter Sidebar](./img/filter-sidebar.gif) + + An alternative UI to the Filter Button/Form Combo is the FilterList Sidebar. Similar to what users usually see on e-commerce websites, it's a panel with many simple filters that can be enabled and combined using the mouse. The user experience is better than the Button/Form Combo, because the filter values are explicit, and it doesn't require typing anything in a form. But it's a bit less powerful, as only filters with a finite set of values (or intervals) can be used in the ``. @@ -168,11 +194,19 @@ Check [the `` documentation](./FilterList.md) for more information. If you use the FilterList, you'll probably need a search input. As the FilterList sidebar is not a form, this requires a bit of extra work. Fortunately, react-admin provides a specialized search input component for that purpose: check [the `` documentation](./FilterLiveSearch.md) for details. -![Filter Live Search](./img/filter-live-search.gif) + + Finally, a filter sidebar is the ideal place to display the user's favorite filters. Check [the `` documentation](./SavedQueriesList.md) for more information. -![Filter Sidebar With SavedQueriesList](./img/SavedQueriesList.gif) + + ## The `` Component @@ -359,7 +393,11 @@ export default { ## Saved Queries: Let Users Save Filter And Sort -[![Saved Queries in FilterList](./img/SavedQueriesList.gif)](./img/SavedQueriesList.gif) + + Saved Queries let users save a combination of filters and sort parameters into a new, personal filter. Saved queries persist between sessions, so users can find their custom queries even after closing and reopening the admin. Saved queries are available both for the Filter Button/Form combo and for the `` Sidebar. It's enabled by default for the Filter Button/Form combo but you have to add it yourself in the `` Sidebar. @@ -396,7 +434,11 @@ const SongList = () => ( ## Building a Custom Filter -![Filters with submit button](./img/filter_with_submit.gif) + + If neither the Filter button/form combo nor the `` sidebar match your need, you can always build your own. React-admin provides shortcuts to facilitate the development of custom filters. diff --git a/docs/Layout.md b/docs/Layout.md index f2807fcfe17..a203290a1f1 100644 --- a/docs/Layout.md +++ b/docs/Layout.md @@ -7,11 +7,19 @@ title: "The Layout Component" The default react-admin layout renders a horizontal app bar at the top, a navigation menu on the side, and the main content in the center. -![standard layout](./img/layout-component.gif) + + In addition, the layout renders the menu as a dropdown on mobile. -![layout responsive](./img/layout-responsive.gif) + + React-admin lets you override the app layout using [the `` prop](./Admin.md#layout). You can use any component you want as layout ; but if you just need to tweak the default layout, you can use the `` component. diff --git a/docs/List.md b/docs/List.md index b687f5e0a0d..b6cb3b5f7ce 100644 --- a/docs/List.md +++ b/docs/List.md @@ -437,7 +437,11 @@ const BookList = () => ( ## `exporter` -![Export Button](./img/export-button.gif) + + Among the default list actions, react-admin includes an ``. This button is disabled when there is no record in the current ``. @@ -523,7 +527,11 @@ const CommentList = () => ( ## `filters`: Filter Inputs -![List Filters](./img/list_filter.gif) + + You can add an array of filter Inputs to the List using the `filters` prop: @@ -548,7 +556,11 @@ Filter Inputs are regular inputs. `` hides them all by default, except tho You can also display filters as a sidebar: -![`` sidebar](./img/filter-sidebar.gif) + + For more details about customizing filters, see the [Filtering the List](./FilteringTutorial.md#filtering-the-list) section. diff --git a/docs/ListTutorial.md b/docs/ListTutorial.md index ce9716b8c9c..fcf50cd395a 100644 --- a/docs/ListTutorial.md +++ b/docs/ListTutorial.md @@ -503,7 +503,10 @@ If that's not enough, [building a custom iterator](#building-a-custom-iterator) On Mobile, `` doesn't work well - the screen is too narrow. You should use [the `` component](./SimpleList.md) instead - it's another built-in List Iterator. -The `<SimpleList>` component + To use `` on desktop and `` on mobile, use the `useMediaQuery` hook: @@ -583,11 +586,19 @@ React-admin provides 2 possible UIs for filters, and lets your own if they're no The first filter UI is called "the Filer/Form Combo". -![Filter Button/Form Combo](./img/list_filter.gif) + + The second filter UI is called "the Filter List Sidebar". -![Filter Button/Form Combo](./img/filter-sidebar.gif) + + Check [the dedicated Filter tutorial chapter](./FilteringTutorial.md) for more information on filtering. @@ -608,11 +619,19 @@ order=DESC If you're using a `` inside the List view, then the column headers are buttons allowing users to change the list sort field and order. This feature requires no configuration and works out fo the box. Check [the `` documentation](./Datagrid.md#customizing-column-sort) to see how to disable or modify the field used for sorting on a particular column. -![Sort Column Header](./img/sort-column-header.gif) + + If you're using another List layout, check [the `` component](./SortButton.md): It's a standalone button that allows users to change the list sort field and order. -![Sort Button](./img/sort-button.gif) + + ## Linking to a Pre-Sorted List diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index 6f3bfa50a48..bb9f24d381e 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -7,7 +7,11 @@ title: "LocalesMenuButton" The `` component, also known as the "language switcher", displays a menu allowing users to select the language of the interface. It leverages the [store](./Store.md) so that their selection is persisted. -![LocalesMenuButton](./img/LocalesMenuButton.gif) + + ## Usage diff --git a/docs/LongForm.md b/docs/LongForm.md index a6af286531e..d650ecff4ea 100644 --- a/docs/LongForm.md +++ b/docs/LongForm.md @@ -7,7 +7,11 @@ title: "LongForm" This [Enterprise Edition](https://marmelab.com/ra-enterprise) component offers an alternative form layout, to be used as child of `` or ``. Expects `` elements as children. -![LongForm](./img/ra-longform-overview.gif) + + Test it live on [the Enterprise Edition Storybook](https://storybook.ra-enterprise.marmelab.com/?path=/story/ra-form-layout-longform--basic). diff --git a/docs/MarkdownInput.md b/docs/MarkdownInput.md index 864d02499d7..f2f3e051682 100644 --- a/docs/MarkdownInput.md +++ b/docs/MarkdownInput.md @@ -7,7 +7,11 @@ title: "The MarkdownInput Component" This [Enterprise Edition](https://marmelab.com/ra-enterprise) component allows to edit and preview Markdown data, based on [the Toast UI editor](https://nhn.github.io/tui.editor/latest/ToastUIEditor). -![MarkdownInput](./img/markdown-input.gif) + + ## Usage diff --git a/docs/NullableBooleanInput.md b/docs/NullableBooleanInput.md index 5d6ad1a9fb6..5b2e0cb30ef 100644 --- a/docs/NullableBooleanInput.md +++ b/docs/NullableBooleanInput.md @@ -7,7 +7,11 @@ title: "The NullableBooleanInput Component" `` renders as a dropdown list, allowing choosing between `true`, `false`, and `null` values. -![NullableBooleanInput](./img/nullable-boolean-input.gif) + + ## Usage diff --git a/docs/NumberInput.md b/docs/NumberInput.md index 77f32f882b3..f328b475a8b 100644 --- a/docs/NumberInput.md +++ b/docs/NumberInput.md @@ -7,7 +7,11 @@ title: "The NumberInput Component" `` translates to an HTML ``, and converts the user input to a number. -![NumberInput](./img/number-input.gif) + + ## Usage diff --git a/docs/Pagination.md b/docs/Pagination.md index 0b6ed13cce8..cb7a25425bd 100644 --- a/docs/Pagination.md +++ b/docs/Pagination.md @@ -7,7 +7,11 @@ title: "The Pagination Component" By default, the `` uses the `` component for pagination. This component displays buttons to navigate between pages, including buttons for the surrounding pages. -![Pagination buttons](./img/pagination-buttons.gif) + + ## Usage diff --git a/docs/RadioButtonGroupInput.md b/docs/RadioButtonGroupInput.md index 329cd0538b6..814bcb4bbf6 100644 --- a/docs/RadioButtonGroupInput.md +++ b/docs/RadioButtonGroupInput.md @@ -7,7 +7,11 @@ title: "The RadioButtonGroupInput Component" If you want to let the user choose a value among a list of possible values that are always shown, `` is the right component. It renders using [Material UI's ``](https://mui.com/material-ui/react-radio-button/). -![RadioButtonGroupInput](./img/radio-button-group-input.gif) + + This input allows editing record fields that are scalar values, e.g. `123`, `'admin'`, etc. @@ -239,7 +243,11 @@ By default, the radio buttons are displayed in a row. You can change that and le ``` -![RadioButtonGroupInput row false](./img/radio-button-group-input-row.gif) + + ## `sx`: CSS API diff --git a/docs/Realtime.md b/docs/Realtime.md index a40c805f582..22ed800ac9d 100644 --- a/docs/Realtime.md +++ b/docs/Realtime.md @@ -79,7 +79,11 @@ const PostList = () => ( ); ``` -![useSubscribeToRecordList](./img/useSubscribeToRecordList.gif) + + This feature leverages the following hooks: @@ -127,7 +131,11 @@ This feature leverages the following components: And last but not least, ra-realtime provides a **lock mechanism** to prevent two users from editing the same resource at the same time. -![Edit With Locks](./img/locks-demo.gif) + + A user can lock a resource, either by voluntarily asking for a lock or by editing a resource. When a resource is locked, other users can't edit it. When the lock is released, other users can edit the resource again. diff --git a/docs/ReferenceArrayInput.md b/docs/ReferenceArrayInput.md index 4553004fc82..b59fd300c2e 100644 --- a/docs/ReferenceArrayInput.md +++ b/docs/ReferenceArrayInput.md @@ -7,7 +7,11 @@ title: "The ReferenceArrayInput Component" Use `` to edit an array of reference values, i.e. to let users choose a list of values (usually foreign keys) from another REST endpoint. -![ReferenceArrayInput](./img/reference-array-input.gif) + + ## Usage diff --git a/docs/ReferenceInput.md b/docs/ReferenceInput.md index cec4ddcc2e1..a6c388b27fb 100644 --- a/docs/ReferenceInput.md +++ b/docs/ReferenceInput.md @@ -7,7 +7,11 @@ title: "The ReferenceInput Component" Use `` for foreign-key values, for instance, to edit the `company_id` of a `contact` resource. -![ReferenceInput](./img/reference-input.gif) + + ## Usage diff --git a/docs/ReferenceManyInput.md b/docs/ReferenceManyInput.md index 668b9b43d1c..adaaabe02e1 100644 --- a/docs/ReferenceManyInput.md +++ b/docs/ReferenceManyInput.md @@ -7,7 +7,11 @@ title: "The ReferenceManyInput Component" Use `` in an `` or `` view to edit one-to-many relationships, e.g. to edit the variants of a product in the product edition view. It's an [Enterprise Edition](https://marmelab.com/ra-enterprise) component, part of the `@react-admin/ra-relationships` package. -![ReferenceManyInput](./img/reference-many-input.gif) + + `` fetches the related records, and renders them in a sub-form. When users add, remove or update related records, the `` component stores these changes locally. When the users actually submit the form, `` computes a diff with the existing relationship, and sends the related changes (additions, deletions, and updates) to the server. diff --git a/docs/RichTextInput.md b/docs/RichTextInput.md index 23905203e6d..dcdfc827b7a 100644 --- a/docs/RichTextInput.md +++ b/docs/RichTextInput.md @@ -7,7 +7,11 @@ title: "The RichTextInput Component" `` is the ideal component to let users edit HTML content. It is powered by [TipTap](https://www.tiptap.dev/). -![RichTextInput](./img/rich-text-input.gif) + + ## Usage diff --git a/docs/SavedQueriesList.md b/docs/SavedQueriesList.md index 696a13374e7..35a7c616ba0 100644 --- a/docs/SavedQueriesList.md +++ b/docs/SavedQueriesList.md @@ -5,7 +5,11 @@ title: "The SavedQueriesList Component" # `` -![Filter Sidebar With SavedQueriesList](./img/SavedQueriesList.gif) + + `` renders a list of filters saved by the end user (and kept in [the Store](./Store.md)). It is a complement to `` sections for [the filter sidebar](./FilteringTutorial.md#the-filterlist-sidebar). diff --git a/docs/SelectArrayInput.md b/docs/SelectArrayInput.md index ada4fba7665..bc1ae0138f7 100644 --- a/docs/SelectArrayInput.md +++ b/docs/SelectArrayInput.md @@ -7,7 +7,11 @@ title: "The SelectArrayInput Component" To let users choose several values in a list using a dropdown, use ``. It renders using [Material UI's ``](https://mui.com/api/select). -![SelectInput](./img/select-input.gif) + + This input allows editing record fields that are scalar values, e.g. `123`, `'admin'`, etc. diff --git a/docs/SimpleForm.md b/docs/SimpleForm.md index 98ec6f3e32f..763e37a665f 100644 --- a/docs/SimpleForm.md +++ b/docs/SimpleForm.md @@ -504,7 +504,11 @@ export const UserCreate = () => { You can let end users customize the fields displayed in the `` by using the `` component instead. -![SimpleFormConfigurable](./img/SimpleFormConfigurable.gif) + + ```diff import { diff --git a/docs/SimpleFormIterator.md b/docs/SimpleFormIterator.md index 3c8630431e5..fcfbd2b278d 100644 --- a/docs/SimpleFormIterator.md +++ b/docs/SimpleFormIterator.md @@ -7,7 +7,11 @@ title: "SimpleFormIterator" This component provides a UI for editing arrays of objects, one row per object. -![ArrayInput](./img/array-input.gif) + + `` lets users edit, add, remove and reorder sub-records. It is designed to be used as a child of [``](./ArrayInput.md) or [``](./ReferenceManyInput.md). You can also use it within an `ArrayInputContext` containing a *field array*, i.e. the value returned by [react-hook-form's `useFieldArray` hook](https://react-hook-form.com/api/usefieldarray). diff --git a/docs/SimpleList.md b/docs/SimpleList.md index 0f6c02f6e5f..c7bfd566700 100644 --- a/docs/SimpleList.md +++ b/docs/SimpleList.md @@ -5,7 +5,10 @@ title: "The SimpleList Component" # `` -The `<SimpleList>` component + For mobile devices, a `` is often unusable - there is simply not enough space to display several columns. The convention in that case is to use a simple list, with only one column per row. The `` component serves that purpose, leveraging [Material UI's `` and `` components](https://mui.com/components/lists/). @@ -232,7 +235,11 @@ export const PostList = () => { You can let end users customize the fields displayed in the `` by using the `` component instead. -![SimpleListConfigurable](./img/SimpleListConfigurable.gif) + + ```diff import { diff --git a/docs/SortButton.md b/docs/SortButton.md index 7693731c6d6..36f2bb12c6e 100644 --- a/docs/SortButton.md +++ b/docs/SortButton.md @@ -7,7 +7,11 @@ title: "The SortButton Component" Some List views don't have a natural UI for sorting - e.g. the ``, or a list of images, don't have column headers like the ``. For these cases, react-admin offers the ``, which displays a dropdown list of fields that the user can choose to sort on. -![Sort Button](./img/sort-button.gif) + + ## Usage diff --git a/docs/TabbedForm.md b/docs/TabbedForm.md index 1d75eb859bb..ea8dc324800 100644 --- a/docs/TabbedForm.md +++ b/docs/TabbedForm.md @@ -7,7 +7,11 @@ title: "TabbedForm" `` creates a `
` to edit a record, and renders inputs grouped by tab. The tabs are set by using `` components. It is useful for forms with a lot of inputs, to reduce the time taken to change a subset of the fields. -![tabbed form](./img/tabbed-form.gif) + + ## Usage diff --git a/docs/TabbedShowLayout.md b/docs/TabbedShowLayout.md index 2a1357118ae..e9df4cfcaba 100644 --- a/docs/TabbedShowLayout.md +++ b/docs/TabbedShowLayout.md @@ -9,7 +9,11 @@ The `` pulls the `record` from the `RecordContext`. It renders Switching tabs will update the current url. By default, it uses the tabs indexes and the first tab will be displayed at the root url. You can customize the path by providing a `path` prop to each `` component. If you'd like the first one to act as an index page, just omit the `path` prop. -![tabbed show](./img/tabbed-show.gif) + + ## Usage diff --git a/docs/TextInput.md b/docs/TextInput.md index 2c19c62b7dd..d5ae0f38406 100644 --- a/docs/TextInput.md +++ b/docs/TextInput.md @@ -7,7 +7,11 @@ title: "The TextInput Component" `` is the most common input. It is used for texts, emails, URL or passwords. In translates into [an Material UI ``](https://mui.com/material-ui/react-text-field/), and renders as `` in HTML. -![TextInput](./img/text-input.gif) + + ## Usage @@ -54,7 +58,11 @@ import { TextInput } from 'react-admin'; ``` -![resettable TextInput](./img/resettable-text-input.gif) + + ## `type` diff --git a/docs/Theming.md b/docs/Theming.md index 13bad93dec8..85560938482 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -369,7 +369,11 @@ const App = () => ( The `` component lets users switch from light to dark mode, and persists that choice by leveraging the [store](./Store.md). -![Dark Mode support](./img/ToggleThemeButton.gif) + + You can add the `` to a custom App Bar: diff --git a/docs/TimeInput.md b/docs/TimeInput.md index 694e9743237..53ca029169c 100644 --- a/docs/TimeInput.md +++ b/docs/TimeInput.md @@ -7,9 +7,30 @@ title: "The TimeInput Component" An input for editing time. `` renders a standard browser [Time Picker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time), so the appearance depends on the browser. -| Firefox | Edge | -| ------- | ---- | -| ![TimeInput Firefox](./img/time-input-firefox.gif) | ![TimeInput Edge](./img/time-input-edge.gif) | +
- + + + The Filter Button/Form Combo - + + + The <FilterList> Sidebar
+ + + + + + + + + + + + +
FirefoxEdge
+ + + +
This component works with Date objects to handle the timezone using the browser locale. You can still pass string values as long as those can be converted to a JavaScript Date object. diff --git a/docs/ToggleThemeButton.md b/docs/ToggleThemeButton.md index c36241c0d10..e0e698fa609 100644 --- a/docs/ToggleThemeButton.md +++ b/docs/ToggleThemeButton.md @@ -7,7 +7,11 @@ title: "ToggleThemeButton" The `` component lets users switch from light to dark mode, and persists that choice by leveraging the [store](./Store.md). -![Dark Mode support](./img/ToggleThemeButton.gif) + + ## Usage diff --git a/docs/TranslatableInputs.md b/docs/TranslatableInputs.md index d796cb08f66..1391250c392 100644 --- a/docs/TranslatableInputs.md +++ b/docs/TranslatableInputs.md @@ -7,7 +7,11 @@ title: "The TranslatableInputs Component" You may have inputs which are translated in multiple languages and want users to edit translations for each language separately. To display them, you can use the `` component. -![TranslatableInputs](./img/translatable-input.gif) + + ## Usage diff --git a/docs/Translation.md b/docs/Translation.md index 9bef665b39b..93096f8fc0f 100644 --- a/docs/Translation.md +++ b/docs/Translation.md @@ -5,7 +5,11 @@ title: "Translation" # Internationalization -![Switching interface language](./img/translation.gif) + + The react-admin user interface uses English as the default language. But you can also display the UI and content in other languages, allow changing language at runtime, and even lazy-loading optional languages to avoid increasing the bundle size with all translations. diff --git a/docs/TreeWithDetails.md b/docs/TreeWithDetails.md index 45799a2f654..31697089115 100644 --- a/docs/TreeWithDetails.md +++ b/docs/TreeWithDetails.md @@ -7,7 +7,11 @@ title: "The TreeWithDetails Component" This [Enterprise Edition](https://marmelab.com/ra-enterprise) component offers a replacement for the `` component when the records form **tree structures** like directories, categories, etc. `` renders a tree structure and the show view/edition form in the same page. -![TreeWithDetails](./img/treewithdetails.gif) + + This component allows users to browse, edit, and rearrange trees. diff --git a/docs/Tutorial.md b/docs/Tutorial.md index f68ccacacb4..75183e1394f 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -9,7 +9,11 @@ This 30 minutes tutorial will expose how to create a new admin app based on an e Here is an overview of the result: -[![React-Admin tutorial overview](./img/tutorial_overview.gif)](./img/tutorial_overview.gif) + + ## Setting Up @@ -266,7 +270,11 @@ React-admin offers a large library of components you can pick from to build the The react-admin layout is already responsive. Try to resize your browser to see how the sidebar switches to a drawer on smaller screens. Besides, the `` component is a really good fit for mobile devices. -[![Mobile user list](./img/tutorial_mobile_user_list.gif)](./img/tutorial_mobile_user_list.gif) + + But on desktop, `` takes too much space for a low information density. So let's modify the `` component to use the `` component on desktop, and the `` component on mobile. @@ -306,7 +314,11 @@ export const UserList = () => { This works exactly the way you expect. -[![Responsive List](./img/tutorial_user_list_responsive.gif)](./img/tutorial_user_list_responsive.gif) + + This shows that the `` child can be anything you want - even a custom React component with its own logic. It also shows that react-admin is a good fit for responsive applications - but it's your job to use `useMediaQuery()` in pages. @@ -570,7 +582,11 @@ const App = () => ( ); ``` -[![Post Edit Guesser](./img/tutorial_edit_guesser.gif)](./img/tutorial_edit_guesser.gif) + + Users can display the edit page just by clicking on the Edit button. The form is already functional; it issues `PUT` requests to the REST API upon submission. And thanks to the `recordRepresentation` of the "users" Resource, the user name is displayed for the post author. @@ -708,7 +724,11 @@ const App = () => ( ); ``` -[![Post Creation](./img/tutorial_post_create.gif)](./img/tutorial_post_create.gif) + + React-admin automatically adds a "create" button on top of the posts list to give access to the `create` component. And the creation form works ; it issues a `POST` request to the REST API upon submission. @@ -722,7 +742,11 @@ That's because react-admin uses *optimistic updates*. When a user edits a record But there is an additional benefit: it also allows the "Undo" feature. Undo is already functional in the admin at that point. Try editing a record, then hit the "Undo" link in the black confirmation box before it slides out. You'll see that the app does not send the `UPDATE` query to the API, and displays the non-modified data. -[![Undo Post Editing](./img/tutorial_post_edit_undo.gif)](./img/tutorial_post_edit_undo.gif) + + Even though updates appear immediately due to Optimistic Rendering, React-admin only sends them to the server after a short delay (about 5 seconds). During this delay, the user can undo the action, and react-admin will never send the update. @@ -783,7 +807,11 @@ export const PostList = () => ( The first filter, 'q', takes advantage of a full-text functionality offered by JSONPlaceholder. It is `alwaysOn`, so it always appears on the screen. Users can add the second filter, `userId`, thanks to the "add filter" button, located on the top of the list. As it's a ``, it's already populated with possible users. -[![posts search engine](./img/filters.gif)](./img/filters.gif) + + Filters are "search-as-you-type", meaning that when the user enters new values in the filter form, the list refreshes (via an API request) immediately. @@ -806,7 +834,11 @@ const App = () => ( ); ``` -[![custom menu icons](./img/custom-menu.gif)](./img/custom-menu.gif) + + ## Using a Custom Home Page @@ -900,7 +932,11 @@ const App = () => ( Once the app reloads, it's now behind a login form that accepts everyone: -[![Login form](./img/login.gif)](./img/login.gif) + + ## Connecting To A Real API diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 5d26f398ff1..d147d10e41e 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -20,7 +20,7 @@ /> diff --git a/docs/css/style-v14.css b/docs/css/style-v15.css similarity index 99% rename from docs/css/style-v14.css rename to docs/css/style-v15.css index 778cac8c3b4..d13d324e2b8 100644 --- a/docs/css/style-v14.css +++ b/docs/css/style-v15.css @@ -270,7 +270,7 @@ ul.sidenav code { } @media only screen and (min-width: 601px) { - .markdown-section img { + .markdown-section img, .markdown-section video { max-width: 90%; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.24); border-radius: 2px; diff --git a/docs/documentation.html b/docs/documentation.html index 2d1c18385d5..8222cdc2fe1 100644 --- a/docs/documentation.html +++ b/docs/documentation.html @@ -19,7 +19,7 @@ /> diff --git a/docs/img/DatagridConfigurable.gif b/docs/img/DatagridConfigurable.gif deleted file mode 100644 index ca1f3dfd87b..00000000000 Binary files a/docs/img/DatagridConfigurable.gif and /dev/null differ diff --git a/docs/img/DatagridConfigurable.webm b/docs/img/DatagridConfigurable.webm new file mode 100644 index 00000000000..0fa5a40fa6a Binary files /dev/null and b/docs/img/DatagridConfigurable.webm differ diff --git a/docs/img/LocalesMenuButton.gif b/docs/img/LocalesMenuButton.gif deleted file mode 100644 index 93b239321cc..00000000000 Binary files a/docs/img/LocalesMenuButton.gif and /dev/null differ diff --git a/docs/img/LocalesMenuButton.webm b/docs/img/LocalesMenuButton.webm new file mode 100644 index 00000000000..e2a53a23fd1 Binary files /dev/null and b/docs/img/LocalesMenuButton.webm differ diff --git a/docs/img/SavedQueriesList.gif b/docs/img/SavedQueriesList.gif deleted file mode 100644 index d6cc13bb9bf..00000000000 Binary files a/docs/img/SavedQueriesList.gif and /dev/null differ diff --git a/docs/img/SavedQueriesList.webm b/docs/img/SavedQueriesList.webm new file mode 100644 index 00000000000..8bd40207734 Binary files /dev/null and b/docs/img/SavedQueriesList.webm differ diff --git a/docs/img/SelectColumnsButton.gif b/docs/img/SelectColumnsButton.gif deleted file mode 100644 index 31e54589a10..00000000000 Binary files a/docs/img/SelectColumnsButton.gif and /dev/null differ diff --git a/docs/img/SelectColumnsButton.webm b/docs/img/SelectColumnsButton.webm new file mode 100644 index 00000000000..9e6d6c39997 Binary files /dev/null and b/docs/img/SelectColumnsButton.webm differ diff --git a/docs/img/SimpleFormConfigurable.gif b/docs/img/SimpleFormConfigurable.gif deleted file mode 100644 index 46192fe033e..00000000000 Binary files a/docs/img/SimpleFormConfigurable.gif and /dev/null differ diff --git a/docs/img/SimpleFormConfigurable.webm b/docs/img/SimpleFormConfigurable.webm new file mode 100644 index 00000000000..6d1b9effa5f Binary files /dev/null and b/docs/img/SimpleFormConfigurable.webm differ diff --git a/docs/img/SimpleListConfigurable.gif b/docs/img/SimpleListConfigurable.gif deleted file mode 100644 index d78b57243ad..00000000000 Binary files a/docs/img/SimpleListConfigurable.gif and /dev/null differ diff --git a/docs/img/SimpleListConfigurable.webm b/docs/img/SimpleListConfigurable.webm new file mode 100644 index 00000000000..e29abfca9fd Binary files /dev/null and b/docs/img/SimpleListConfigurable.webm differ diff --git a/docs/img/ToggleThemeButton.gif b/docs/img/ToggleThemeButton.gif deleted file mode 100644 index d92c528d790..00000000000 Binary files a/docs/img/ToggleThemeButton.gif and /dev/null differ diff --git a/docs/img/ToggleThemeButton.webm b/docs/img/ToggleThemeButton.webm new file mode 100644 index 00000000000..21faafe1ae6 Binary files /dev/null and b/docs/img/ToggleThemeButton.webm differ diff --git a/docs/img/array-input.gif b/docs/img/array-input.gif deleted file mode 100644 index b5ed047c6cf..00000000000 Binary files a/docs/img/array-input.gif and /dev/null differ diff --git a/docs/img/array-input.webm b/docs/img/array-input.webm new file mode 100644 index 00000000000..c384080e702 Binary files /dev/null and b/docs/img/array-input.webm differ diff --git a/docs/img/autocomplete-array-input-create.gif b/docs/img/autocomplete-array-input-create.gif deleted file mode 100644 index 8a5061f9c16..00000000000 Binary files a/docs/img/autocomplete-array-input-create.gif and /dev/null differ diff --git a/docs/img/autocomplete-array-input-create.webm b/docs/img/autocomplete-array-input-create.webm new file mode 100644 index 00000000000..ff1d9e19752 Binary files /dev/null and b/docs/img/autocomplete-array-input-create.webm differ diff --git a/docs/img/autocomplete-array-input.gif b/docs/img/autocomplete-array-input.gif deleted file mode 100644 index 8cf8d5e0173..00000000000 Binary files a/docs/img/autocomplete-array-input.gif and /dev/null differ diff --git a/docs/img/autocomplete-array-input.webm b/docs/img/autocomplete-array-input.webm new file mode 100644 index 00000000000..a14a8af8973 Binary files /dev/null and b/docs/img/autocomplete-array-input.webm differ diff --git a/docs/img/autocomplete-input.gif b/docs/img/autocomplete-input.gif deleted file mode 100644 index d193a1b6866..00000000000 Binary files a/docs/img/autocomplete-input.gif and /dev/null differ diff --git a/docs/img/autocomplete-input.webm b/docs/img/autocomplete-input.webm new file mode 100644 index 00000000000..bd28e01c03c Binary files /dev/null and b/docs/img/autocomplete-input.webm differ diff --git a/docs/img/boolean-input.gif b/docs/img/boolean-input.gif deleted file mode 100644 index 53407a99c35..00000000000 Binary files a/docs/img/boolean-input.gif and /dev/null differ diff --git a/docs/img/boolean-input.webm b/docs/img/boolean-input.webm new file mode 100644 index 00000000000..64e2bc05fc9 Binary files /dev/null and b/docs/img/boolean-input.webm differ diff --git a/docs/img/bulk-actions-toolbar.gif b/docs/img/bulk-actions-toolbar.gif deleted file mode 100644 index 4bac3567737..00000000000 Binary files a/docs/img/bulk-actions-toolbar.gif and /dev/null differ diff --git a/docs/img/bulk-actions-toolbar.webm b/docs/img/bulk-actions-toolbar.webm new file mode 100644 index 00000000000..e8f34e22c10 Binary files /dev/null and b/docs/img/bulk-actions-toolbar.webm differ diff --git a/docs/img/checkbox-group-input.gif b/docs/img/checkbox-group-input.gif deleted file mode 100644 index a1f2e262d9d..00000000000 Binary files a/docs/img/checkbox-group-input.gif and /dev/null differ diff --git a/docs/img/checkbox-group-input.webm b/docs/img/checkbox-group-input.webm new file mode 100644 index 00000000000..58e4004f104 Binary files /dev/null and b/docs/img/checkbox-group-input.webm differ diff --git a/docs/img/custom-menu.gif b/docs/img/custom-menu.gif deleted file mode 100644 index de5ad9706c0..00000000000 Binary files a/docs/img/custom-menu.gif and /dev/null differ diff --git a/docs/img/custom-menu.webm b/docs/img/custom-menu.webm new file mode 100644 index 00000000000..17e4751c062 Binary files /dev/null and b/docs/img/custom-menu.webm differ diff --git a/docs/img/datagrid_expand.gif b/docs/img/datagrid_expand.gif deleted file mode 100644 index 108ff7e0347..00000000000 Binary files a/docs/img/datagrid_expand.gif and /dev/null differ diff --git a/docs/img/datagrid_expand.webm b/docs/img/datagrid_expand.webm new file mode 100644 index 00000000000..99d6a81406b Binary files /dev/null and b/docs/img/datagrid_expand.webm differ diff --git a/docs/img/date-input.gif b/docs/img/date-input.gif deleted file mode 100644 index a94d478f148..00000000000 Binary files a/docs/img/date-input.gif and /dev/null differ diff --git a/docs/img/date-input.webm b/docs/img/date-input.webm new file mode 100644 index 00000000000..122980444f4 Binary files /dev/null and b/docs/img/date-input.webm differ diff --git a/docs/img/date-picker.gif b/docs/img/date-picker.gif deleted file mode 100644 index d75abb1ac44..00000000000 Binary files a/docs/img/date-picker.gif and /dev/null differ diff --git a/docs/img/date-picker.webm b/docs/img/date-picker.webm new file mode 100644 index 00000000000..920c89339f9 Binary files /dev/null and b/docs/img/date-picker.webm differ diff --git a/docs/img/date-time-input.gif b/docs/img/date-time-input.gif deleted file mode 100644 index f023fcd234f..00000000000 Binary files a/docs/img/date-time-input.gif and /dev/null differ diff --git a/docs/img/date-time-input.webm b/docs/img/date-time-input.webm new file mode 100644 index 00000000000..11841293571 Binary files /dev/null and b/docs/img/date-time-input.webm differ diff --git a/docs/img/export-button.gif b/docs/img/export-button.gif deleted file mode 100644 index fd92e66a09f..00000000000 Binary files a/docs/img/export-button.gif and /dev/null differ diff --git a/docs/img/export-button.webm b/docs/img/export-button.webm new file mode 100644 index 00000000000..aaa2ee61325 Binary files /dev/null and b/docs/img/export-button.webm differ diff --git a/docs/img/filter-list-cumulative.gif b/docs/img/filter-list-cumulative.gif deleted file mode 100644 index 16494f1b34f..00000000000 Binary files a/docs/img/filter-list-cumulative.gif and /dev/null differ diff --git a/docs/img/filter-list-cumulative.webm b/docs/img/filter-list-cumulative.webm new file mode 100644 index 00000000000..4d216b66ae5 Binary files /dev/null and b/docs/img/filter-list-cumulative.webm differ diff --git a/docs/img/filter-live-search.gif b/docs/img/filter-live-search.gif deleted file mode 100644 index 3b4bc56c695..00000000000 Binary files a/docs/img/filter-live-search.gif and /dev/null differ diff --git a/docs/img/filter-live-search.webm b/docs/img/filter-live-search.webm new file mode 100644 index 00000000000..a69971258bd Binary files /dev/null and b/docs/img/filter-live-search.webm differ diff --git a/docs/img/filter-sidebar.gif b/docs/img/filter-sidebar.gif deleted file mode 100644 index 4c497327457..00000000000 Binary files a/docs/img/filter-sidebar.gif and /dev/null differ diff --git a/docs/img/filter-sidebar.webm b/docs/img/filter-sidebar.webm new file mode 100644 index 00000000000..7507ab1ace1 Binary files /dev/null and b/docs/img/filter-sidebar.webm differ diff --git a/docs/img/filter_with_submit.gif b/docs/img/filter_with_submit.gif deleted file mode 100644 index 80754eda0af..00000000000 Binary files a/docs/img/filter_with_submit.gif and /dev/null differ diff --git a/docs/img/filter_with_submit.webm b/docs/img/filter_with_submit.webm new file mode 100644 index 00000000000..900397ff0f2 Binary files /dev/null and b/docs/img/filter_with_submit.webm differ diff --git a/docs/img/filters.gif b/docs/img/filters.gif deleted file mode 100644 index 495e35a5b27..00000000000 Binary files a/docs/img/filters.gif and /dev/null differ diff --git a/docs/img/filters.webm b/docs/img/filters.webm new file mode 100644 index 00000000000..79f2ffe144e Binary files /dev/null and b/docs/img/filters.webm differ diff --git a/docs/img/layout-component.gif b/docs/img/layout-component.gif deleted file mode 100644 index 53c50460c6b..00000000000 Binary files a/docs/img/layout-component.gif and /dev/null differ diff --git a/docs/img/layout-component.webm b/docs/img/layout-component.webm new file mode 100644 index 00000000000..25db0238b30 Binary files /dev/null and b/docs/img/layout-component.webm differ diff --git a/docs/img/layout-responsive.gif b/docs/img/layout-responsive.gif deleted file mode 100644 index 913dbd8b774..00000000000 Binary files a/docs/img/layout-responsive.gif and /dev/null differ diff --git a/docs/img/layout-responsive.webm b/docs/img/layout-responsive.webm new file mode 100644 index 00000000000..b9efbaf68e9 Binary files /dev/null and b/docs/img/layout-responsive.webm differ diff --git a/docs/img/list_filter.gif b/docs/img/list_filter.gif deleted file mode 100644 index e37a3470d7d..00000000000 Binary files a/docs/img/list_filter.gif and /dev/null differ diff --git a/docs/img/list_filter.webm b/docs/img/list_filter.webm new file mode 100644 index 00000000000..38008ecdc66 Binary files /dev/null and b/docs/img/list_filter.webm differ diff --git a/docs/img/locks-demo.gif b/docs/img/locks-demo.gif deleted file mode 100644 index 33e69d774f4..00000000000 Binary files a/docs/img/locks-demo.gif and /dev/null differ diff --git a/docs/img/locks-demo.webm b/docs/img/locks-demo.webm new file mode 100644 index 00000000000..3250160e834 Binary files /dev/null and b/docs/img/locks-demo.webm differ diff --git a/docs/img/login.gif b/docs/img/login.gif deleted file mode 100644 index f617184502b..00000000000 Binary files a/docs/img/login.gif and /dev/null differ diff --git a/docs/img/login.webm b/docs/img/login.webm new file mode 100644 index 00000000000..0f19fe582d9 Binary files /dev/null and b/docs/img/login.webm differ diff --git a/docs/img/logout.gif b/docs/img/logout.gif deleted file mode 100644 index 8e7339b4878..00000000000 Binary files a/docs/img/logout.gif and /dev/null differ diff --git a/docs/img/logout.webm b/docs/img/logout.webm new file mode 100644 index 00000000000..94c67fe40e9 Binary files /dev/null and b/docs/img/logout.webm differ diff --git a/docs/img/markdown-input.gif b/docs/img/markdown-input.gif deleted file mode 100644 index 059c4c3e748..00000000000 Binary files a/docs/img/markdown-input.gif and /dev/null differ diff --git a/docs/img/markdown-input.webm b/docs/img/markdown-input.webm new file mode 100644 index 00000000000..5cc17bcc7b9 Binary files /dev/null and b/docs/img/markdown-input.webm differ diff --git a/docs/img/nullable-boolean-input.gif b/docs/img/nullable-boolean-input.gif deleted file mode 100644 index af0f4367073..00000000000 Binary files a/docs/img/nullable-boolean-input.gif and /dev/null differ diff --git a/docs/img/nullable-boolean-input.webm b/docs/img/nullable-boolean-input.webm new file mode 100644 index 00000000000..632f9f1ae21 Binary files /dev/null and b/docs/img/nullable-boolean-input.webm differ diff --git a/docs/img/number-input.gif b/docs/img/number-input.gif deleted file mode 100644 index 156d86fc6a9..00000000000 Binary files a/docs/img/number-input.gif and /dev/null differ diff --git a/docs/img/number-input.webm b/docs/img/number-input.webm new file mode 100644 index 00000000000..edeab96fa2d Binary files /dev/null and b/docs/img/number-input.webm differ diff --git a/docs/img/pagination-buttons.gif b/docs/img/pagination-buttons.gif deleted file mode 100644 index 5cfe139bc9e..00000000000 Binary files a/docs/img/pagination-buttons.gif and /dev/null differ diff --git a/docs/img/pagination-buttons.webm b/docs/img/pagination-buttons.webm new file mode 100644 index 00000000000..1a0f1898e97 Binary files /dev/null and b/docs/img/pagination-buttons.webm differ diff --git a/docs/img/quick_filters.gif b/docs/img/quick_filters.gif deleted file mode 100644 index 7276a41ed88..00000000000 Binary files a/docs/img/quick_filters.gif and /dev/null differ diff --git a/docs/img/quick_filters.webm b/docs/img/quick_filters.webm new file mode 100644 index 00000000000..bb7a4298841 Binary files /dev/null and b/docs/img/quick_filters.webm differ diff --git a/docs/img/ra-longform-overview.gif b/docs/img/ra-longform-overview.gif deleted file mode 100644 index 44287270d68..00000000000 Binary files a/docs/img/ra-longform-overview.gif and /dev/null differ diff --git a/docs/img/ra-longform-overview.webm b/docs/img/ra-longform-overview.webm new file mode 100644 index 00000000000..306800146c2 Binary files /dev/null and b/docs/img/ra-longform-overview.webm differ diff --git a/docs/img/ra-tree.gif b/docs/img/ra-tree.gif deleted file mode 100644 index 1bcbc78d39a..00000000000 Binary files a/docs/img/ra-tree.gif and /dev/null differ diff --git a/docs/img/ra-tree.webm b/docs/img/ra-tree.webm new file mode 100644 index 00000000000..c88e3652a69 Binary files /dev/null and b/docs/img/ra-tree.webm differ diff --git a/docs/img/radio-button-group-input-row.gif b/docs/img/radio-button-group-input-row.gif deleted file mode 100644 index 3a00fa7df9f..00000000000 Binary files a/docs/img/radio-button-group-input-row.gif and /dev/null differ diff --git a/docs/img/radio-button-group-input-row.webm b/docs/img/radio-button-group-input-row.webm new file mode 100644 index 00000000000..ac0e9a439b9 Binary files /dev/null and b/docs/img/radio-button-group-input-row.webm differ diff --git a/docs/img/radio-button-group-input.gif b/docs/img/radio-button-group-input.gif deleted file mode 100644 index 6235e064e7e..00000000000 Binary files a/docs/img/radio-button-group-input.gif and /dev/null differ diff --git a/docs/img/radio-button-group-input.webm b/docs/img/radio-button-group-input.webm new file mode 100644 index 00000000000..0d715eaad43 Binary files /dev/null and b/docs/img/radio-button-group-input.webm differ diff --git a/docs/img/reference-array-input.gif b/docs/img/reference-array-input.gif deleted file mode 100644 index 6ff2d9c35bc..00000000000 Binary files a/docs/img/reference-array-input.gif and /dev/null differ diff --git a/docs/img/reference-array-input.webm b/docs/img/reference-array-input.webm new file mode 100644 index 00000000000..e0c3d68d995 Binary files /dev/null and b/docs/img/reference-array-input.webm differ diff --git a/docs/img/reference-input.gif b/docs/img/reference-input.gif deleted file mode 100644 index d4843e4b7bb..00000000000 Binary files a/docs/img/reference-input.gif and /dev/null differ diff --git a/docs/img/reference-input.webm b/docs/img/reference-input.webm new file mode 100644 index 00000000000..27a1db3a25c Binary files /dev/null and b/docs/img/reference-input.webm differ diff --git a/docs/img/reference-many-input.gif b/docs/img/reference-many-input.gif deleted file mode 100644 index dca0ce15716..00000000000 Binary files a/docs/img/reference-many-input.gif and /dev/null differ diff --git a/docs/img/reference-many-input.webm b/docs/img/reference-many-input.webm new file mode 100644 index 00000000000..5dd77bb23cf Binary files /dev/null and b/docs/img/reference-many-input.webm differ diff --git a/docs/img/resettable-text-input.gif b/docs/img/resettable-text-input.gif deleted file mode 100644 index 0112726104d..00000000000 Binary files a/docs/img/resettable-text-input.gif and /dev/null differ diff --git a/docs/img/resettable-text-input.webm b/docs/img/resettable-text-input.webm new file mode 100644 index 00000000000..5818e58f799 Binary files /dev/null and b/docs/img/resettable-text-input.webm differ diff --git a/docs/img/responsive-list.gif b/docs/img/responsive-list.gif deleted file mode 100644 index ee0d6b8391c..00000000000 Binary files a/docs/img/responsive-list.gif and /dev/null differ diff --git a/docs/img/responsive-list.webm b/docs/img/responsive-list.webm new file mode 100644 index 00000000000..db863c0ad4a Binary files /dev/null and b/docs/img/responsive-list.webm differ diff --git a/docs/img/rich-text-input.gif b/docs/img/rich-text-input.gif deleted file mode 100644 index 13d2a776eef..00000000000 Binary files a/docs/img/rich-text-input.gif and /dev/null differ diff --git a/docs/img/rich-text-input.webm b/docs/img/rich-text-input.webm new file mode 100644 index 00000000000..5dec893fef7 Binary files /dev/null and b/docs/img/rich-text-input.webm differ diff --git a/docs/img/search_input.gif b/docs/img/search_input.gif deleted file mode 100644 index 26568e3fd61..00000000000 Binary files a/docs/img/search_input.gif and /dev/null differ diff --git a/docs/img/search_input.webm b/docs/img/search_input.webm new file mode 100644 index 00000000000..a08d7cc3a0f Binary files /dev/null and b/docs/img/search_input.webm differ diff --git a/docs/img/select-array-input-create.gif b/docs/img/select-array-input-create.gif deleted file mode 100644 index 786496057d4..00000000000 Binary files a/docs/img/select-array-input-create.gif and /dev/null differ diff --git a/docs/img/select-array-input-create.webm b/docs/img/select-array-input-create.webm new file mode 100644 index 00000000000..1ae9d4ef62c Binary files /dev/null and b/docs/img/select-array-input-create.webm differ diff --git a/docs/img/select-array-input.gif b/docs/img/select-array-input.gif deleted file mode 100644 index f71fbc005c2..00000000000 Binary files a/docs/img/select-array-input.gif and /dev/null differ diff --git a/docs/img/select-array-input.webm b/docs/img/select-array-input.webm new file mode 100644 index 00000000000..3f7225cc6d0 Binary files /dev/null and b/docs/img/select-array-input.webm differ diff --git a/docs/img/select-input.gif b/docs/img/select-input.gif deleted file mode 100644 index cc1397e138b..00000000000 Binary files a/docs/img/select-input.gif and /dev/null differ diff --git a/docs/img/select-input.webm b/docs/img/select-input.webm new file mode 100644 index 00000000000..7e8073eb749 Binary files /dev/null and b/docs/img/select-input.webm differ diff --git a/docs/img/simple-list.gif b/docs/img/simple-list.gif deleted file mode 100644 index b78a5d38efe..00000000000 Binary files a/docs/img/simple-list.gif and /dev/null differ diff --git a/docs/img/simple-list.webm b/docs/img/simple-list.webm new file mode 100644 index 00000000000..ebb3a127e24 Binary files /dev/null and b/docs/img/simple-list.webm differ diff --git a/docs/img/sort-button.gif b/docs/img/sort-button.gif deleted file mode 100644 index 52df8c1ce30..00000000000 Binary files a/docs/img/sort-button.gif and /dev/null differ diff --git a/docs/img/sort-button.webm b/docs/img/sort-button.webm new file mode 100644 index 00000000000..775562565d5 Binary files /dev/null and b/docs/img/sort-button.webm differ diff --git a/docs/img/sort-column-header.gif b/docs/img/sort-column-header.gif deleted file mode 100644 index 3c199c766aa..00000000000 Binary files a/docs/img/sort-column-header.gif and /dev/null differ diff --git a/docs/img/sort-column-header.webm b/docs/img/sort-column-header.webm new file mode 100644 index 00000000000..5b361a6fc9c Binary files /dev/null and b/docs/img/sort-column-header.webm differ diff --git a/docs/img/tabbed-form.gif b/docs/img/tabbed-form.gif deleted file mode 100644 index e2dd1ec5bd9..00000000000 Binary files a/docs/img/tabbed-form.gif and /dev/null differ diff --git a/docs/img/tabbed-form.webm b/docs/img/tabbed-form.webm new file mode 100644 index 00000000000..5588a24efba Binary files /dev/null and b/docs/img/tabbed-form.webm differ diff --git a/docs/img/tabbed-show.gif b/docs/img/tabbed-show.gif deleted file mode 100644 index 8d3427da908..00000000000 Binary files a/docs/img/tabbed-show.gif and /dev/null differ diff --git a/docs/img/tabbed-show.webm b/docs/img/tabbed-show.webm new file mode 100644 index 00000000000..b81f56d3133 Binary files /dev/null and b/docs/img/tabbed-show.webm differ diff --git a/docs/img/text-input.gif b/docs/img/text-input.gif deleted file mode 100644 index 112d4ee875a..00000000000 Binary files a/docs/img/text-input.gif and /dev/null differ diff --git a/docs/img/text-input.webm b/docs/img/text-input.webm new file mode 100644 index 00000000000..fb03b97ac88 Binary files /dev/null and b/docs/img/text-input.webm differ diff --git a/docs/img/time-input-edge.gif b/docs/img/time-input-edge.gif deleted file mode 100644 index 2f2ad58f0e6..00000000000 Binary files a/docs/img/time-input-edge.gif and /dev/null differ diff --git a/docs/img/time-input-edge.webm b/docs/img/time-input-edge.webm new file mode 100644 index 00000000000..c9caf05654a Binary files /dev/null and b/docs/img/time-input-edge.webm differ diff --git a/docs/img/time-input-firefox.gif b/docs/img/time-input-firefox.gif deleted file mode 100644 index 24d9c8bfbb5..00000000000 Binary files a/docs/img/time-input-firefox.gif and /dev/null differ diff --git a/docs/img/time-input-firefox.webm b/docs/img/time-input-firefox.webm new file mode 100644 index 00000000000..1745fec8028 Binary files /dev/null and b/docs/img/time-input-firefox.webm differ diff --git a/docs/img/translatable-input.gif b/docs/img/translatable-input.gif deleted file mode 100644 index 11589d10431..00000000000 Binary files a/docs/img/translatable-input.gif and /dev/null differ diff --git a/docs/img/translatable-input.webm b/docs/img/translatable-input.webm new file mode 100644 index 00000000000..5ca01b05e51 Binary files /dev/null and b/docs/img/translatable-input.webm differ diff --git a/docs/img/translation.gif b/docs/img/translation.gif deleted file mode 100644 index 7531704408d..00000000000 Binary files a/docs/img/translation.gif and /dev/null differ diff --git a/docs/img/translation.webm b/docs/img/translation.webm new file mode 100644 index 00000000000..fe8d975ad99 Binary files /dev/null and b/docs/img/translation.webm differ diff --git a/docs/img/treewithdetails.gif b/docs/img/treewithdetails.gif deleted file mode 100644 index dafd4da39a0..00000000000 Binary files a/docs/img/treewithdetails.gif and /dev/null differ diff --git a/docs/img/treewithdetails.webm b/docs/img/treewithdetails.webm new file mode 100644 index 00000000000..d71132698ff Binary files /dev/null and b/docs/img/treewithdetails.webm differ diff --git a/docs/img/tutorial_edit_guesser.gif b/docs/img/tutorial_edit_guesser.gif deleted file mode 100644 index dfc89dcf10e..00000000000 Binary files a/docs/img/tutorial_edit_guesser.gif and /dev/null differ diff --git a/docs/img/tutorial_edit_guesser.webm b/docs/img/tutorial_edit_guesser.webm new file mode 100644 index 00000000000..b5935371d49 Binary files /dev/null and b/docs/img/tutorial_edit_guesser.webm differ diff --git a/docs/img/tutorial_mobile_post_list.gif b/docs/img/tutorial_mobile_post_list.gif deleted file mode 100644 index a8ddc59d6bd..00000000000 Binary files a/docs/img/tutorial_mobile_post_list.gif and /dev/null differ diff --git a/docs/img/tutorial_mobile_post_list.webm b/docs/img/tutorial_mobile_post_list.webm new file mode 100644 index 00000000000..5087339199a Binary files /dev/null and b/docs/img/tutorial_mobile_post_list.webm differ diff --git a/docs/img/tutorial_mobile_user_list.gif b/docs/img/tutorial_mobile_user_list.gif deleted file mode 100644 index be309fa6848..00000000000 Binary files a/docs/img/tutorial_mobile_user_list.gif and /dev/null differ diff --git a/docs/img/tutorial_mobile_user_list.webm b/docs/img/tutorial_mobile_user_list.webm new file mode 100644 index 00000000000..d1d4f734aad Binary files /dev/null and b/docs/img/tutorial_mobile_user_list.webm differ diff --git a/docs/img/tutorial_overview.gif b/docs/img/tutorial_overview.gif deleted file mode 100644 index 772b76fdd5e..00000000000 Binary files a/docs/img/tutorial_overview.gif and /dev/null differ diff --git a/docs/img/tutorial_overview.webm b/docs/img/tutorial_overview.webm new file mode 100644 index 00000000000..dcf67c97765 Binary files /dev/null and b/docs/img/tutorial_overview.webm differ diff --git a/docs/img/tutorial_post_create.gif b/docs/img/tutorial_post_create.gif deleted file mode 100644 index 63d50b959a3..00000000000 Binary files a/docs/img/tutorial_post_create.gif and /dev/null differ diff --git a/docs/img/tutorial_post_create.webm b/docs/img/tutorial_post_create.webm new file mode 100644 index 00000000000..a2d262e55be Binary files /dev/null and b/docs/img/tutorial_post_create.webm differ diff --git a/docs/img/tutorial_post_edit_undo.gif b/docs/img/tutorial_post_edit_undo.gif deleted file mode 100644 index d23223c47d7..00000000000 Binary files a/docs/img/tutorial_post_edit_undo.gif and /dev/null differ diff --git a/docs/img/tutorial_post_edit_undo.webm b/docs/img/tutorial_post_edit_undo.webm new file mode 100644 index 00000000000..b38540c83a7 Binary files /dev/null and b/docs/img/tutorial_post_edit_undo.webm differ diff --git a/docs/img/tutorial_user_list_responsive.gif b/docs/img/tutorial_user_list_responsive.gif deleted file mode 100644 index fd4cbf09cc1..00000000000 Binary files a/docs/img/tutorial_user_list_responsive.gif and /dev/null differ diff --git a/docs/img/tutorial_user_list_responsive.webm b/docs/img/tutorial_user_list_responsive.webm new file mode 100644 index 00000000000..bf2168edfef Binary files /dev/null and b/docs/img/tutorial_user_list_responsive.webm differ diff --git a/docs/img/useInfiniteGetList.gif b/docs/img/useInfiniteGetList.gif deleted file mode 100644 index 6a009471f5e..00000000000 Binary files a/docs/img/useInfiniteGetList.gif and /dev/null differ diff --git a/docs/img/useInfiniteGetList.webm b/docs/img/useInfiniteGetList.webm new file mode 100644 index 00000000000..29e5534f4e4 Binary files /dev/null and b/docs/img/useInfiniteGetList.webm differ diff --git a/docs/img/useLockOnCall.gif b/docs/img/useLockOnCall.gif deleted file mode 100644 index 01d60b3ccbb..00000000000 Binary files a/docs/img/useLockOnCall.gif and /dev/null differ diff --git a/docs/img/useLockOnCall.webm b/docs/img/useLockOnCall.webm new file mode 100644 index 00000000000..52d629be808 Binary files /dev/null and b/docs/img/useLockOnCall.webm differ diff --git a/docs/img/useLockOnMount.gif b/docs/img/useLockOnMount.gif deleted file mode 100644 index f4831280863..00000000000 Binary files a/docs/img/useLockOnMount.gif and /dev/null differ diff --git a/docs/img/useLockOnMount.webm b/docs/img/useLockOnMount.webm new file mode 100644 index 00000000000..5604c70ce65 Binary files /dev/null and b/docs/img/useLockOnMount.webm differ diff --git a/docs/img/useSubscribe.gif b/docs/img/useSubscribe.gif deleted file mode 100644 index 50ee364a866..00000000000 Binary files a/docs/img/useSubscribe.gif and /dev/null differ diff --git a/docs/img/useSubscribe.webm b/docs/img/useSubscribe.webm new file mode 100644 index 00000000000..923318d2985 Binary files /dev/null and b/docs/img/useSubscribe.webm differ diff --git a/docs/img/useSubscribeCallback.gif b/docs/img/useSubscribeCallback.gif deleted file mode 100644 index 1b4e613b0f1..00000000000 Binary files a/docs/img/useSubscribeCallback.gif and /dev/null differ diff --git a/docs/img/useSubscribeCallback.webm b/docs/img/useSubscribeCallback.webm new file mode 100644 index 00000000000..1944ddd5f68 Binary files /dev/null and b/docs/img/useSubscribeCallback.webm differ diff --git a/docs/img/useSubscribeOnce.gif b/docs/img/useSubscribeOnce.gif deleted file mode 100644 index 1ad2159126e..00000000000 Binary files a/docs/img/useSubscribeOnce.gif and /dev/null differ diff --git a/docs/img/useSubscribeOnce.webm b/docs/img/useSubscribeOnce.webm new file mode 100644 index 00000000000..c88b5d1ec54 Binary files /dev/null and b/docs/img/useSubscribeOnce.webm differ diff --git a/docs/img/useSubscribeOnceCallback.gif b/docs/img/useSubscribeOnceCallback.gif deleted file mode 100644 index a2878a3cf28..00000000000 Binary files a/docs/img/useSubscribeOnceCallback.gif and /dev/null differ diff --git a/docs/img/useSubscribeOnceCallback.webm b/docs/img/useSubscribeOnceCallback.webm new file mode 100644 index 00000000000..56cc54ab930 Binary files /dev/null and b/docs/img/useSubscribeOnceCallback.webm differ diff --git a/docs/img/useSubscribeToRecord.gif b/docs/img/useSubscribeToRecord.gif deleted file mode 100644 index aa5f615ff5c..00000000000 Binary files a/docs/img/useSubscribeToRecord.gif and /dev/null differ diff --git a/docs/img/useSubscribeToRecord.webm b/docs/img/useSubscribeToRecord.webm new file mode 100644 index 00000000000..1ec2311e82c Binary files /dev/null and b/docs/img/useSubscribeToRecord.webm differ diff --git a/docs/img/useSubscribeToRecordList.gif b/docs/img/useSubscribeToRecordList.gif deleted file mode 100644 index 2a99d29e633..00000000000 Binary files a/docs/img/useSubscribeToRecordList.gif and /dev/null differ diff --git a/docs/img/useSubscribeToRecordList.webm b/docs/img/useSubscribeToRecordList.webm new file mode 100644 index 00000000000..190a4d8c289 Binary files /dev/null and b/docs/img/useSubscribeToRecordList.webm differ diff --git a/docs/img/useSubscribeUnsubscribe.gif b/docs/img/useSubscribeUnsubscribe.gif deleted file mode 100644 index 9565984069f..00000000000 Binary files a/docs/img/useSubscribeUnsubscribe.gif and /dev/null differ diff --git a/docs/img/useSubscribeUnsubscribe.webm b/docs/img/useSubscribeUnsubscribe.webm new file mode 100644 index 00000000000..29c7ef0e126 Binary files /dev/null and b/docs/img/useSubscribeUnsubscribe.webm differ diff --git a/docs/useInfiniteGetList.md b/docs/useInfiniteGetList.md index 9cfc68321e4..8b321c22388 100644 --- a/docs/useInfiniteGetList.md +++ b/docs/useInfiniteGetList.md @@ -7,7 +7,11 @@ title: "useInfiniteGetList" This hook calls `dataProvider.getList()` when the component mounts. It returns a list of "pages" of records, and a callback to fetch the previous or next page. It's ideal to render a feed of events or messages, where the total number of records is unknown, and the user requires the next page via a button (or a scroll listener). -![useInfiniteGetList](./img/useInfiniteGetList.gif) + + It is based on react-query's [`useInfiniteQuery`](https://react-query-v3.tanstack.com/reference/useInfiniteQuery) hook. diff --git a/docs/useLockOnCall.md b/docs/useLockOnCall.md index 7d14d17263d..882518a85fa 100644 --- a/docs/useLockOnCall.md +++ b/docs/useLockOnCall.md @@ -9,7 +9,11 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise) + + Your browser does not support the video tag. + + ## Usage diff --git a/docs/useLockOnMount.md b/docs/useLockOnMount.md index efd99d6edd1..e5893d86a74 100644 --- a/docs/useLockOnMount.md +++ b/docs/useLockOnMount.md @@ -9,7 +9,11 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise) + + Your browser does not support the video tag. + + ## Usage diff --git a/docs/useSubscribe.md b/docs/useSubscribe.md index 979cae4ad21..4bb15da9b31 100644 --- a/docs/useSubscribe.md +++ b/docs/useSubscribe.md @@ -7,7 +7,11 @@ title: "useSubscribe" This [Enterprise Edition](https://marmelab.com/ra-enterprise) hook subscribes to the events from a topic on mount (and unsubscribe on unmount). -![useSubscribe](./img/useSubscribe.gif) + + ## Usage @@ -105,7 +109,11 @@ const JobProgress = ({ jobId }) => { }; ``` -![Using unsubscribe](./img/useSubscribeUnsubscribe.gif) + + ## `options` @@ -138,7 +146,11 @@ const OfficeClosed = () => { }; ``` -![useSubscribeOnce](./img/useSubscribeOnce.gif) + + ## `topic` diff --git a/docs/useSubscribeCallback.md b/docs/useSubscribeCallback.md index 65cf075d387..14c72ae72ac 100644 --- a/docs/useSubscribeCallback.md +++ b/docs/useSubscribeCallback.md @@ -9,7 +9,11 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise) + + Your browser does not support the video tag. + + ## Usage @@ -164,7 +168,11 @@ const LaunchBackgroundJob = () => { }; ``` -![useSubscribeOnceCallback](./img/useSubscribeOnceCallback.gif) + + You can use the `unsubscribeOnUnmount` option to keep the subscription alive after the component unmounts. diff --git a/docs/useSubscribeToRecord.md b/docs/useSubscribeToRecord.md index 1083175c602..8ed7822f7aa 100644 --- a/docs/useSubscribeToRecord.md +++ b/docs/useSubscribeToRecord.md @@ -7,7 +7,11 @@ title: "useSubscribeToRecord" This [Enterprise Edition](https://marmelab.com/ra-enterprise) hook is a specialized version of [`useSubscribe`](./useSubscribe.md) that subscribes to events concerning a single record. -![useSubscribeToRecord](./img/useSubscribeToRecord.gif) + + ## Usage diff --git a/docs/useSubscribeToRecordList.md b/docs/useSubscribeToRecordList.md index 4e2e4c0a06e..4ef70198baf 100644 --- a/docs/useSubscribeToRecordList.md +++ b/docs/useSubscribeToRecordList.md @@ -7,7 +7,11 @@ title: "useSubscribeToRecordList" This [Enterprise Edition](https://marmelab.com/ra-enterprise) hook is a specialized version of [`useSubscribe`](./useSubscribe.md) that subscribes to events concerning a list of records. -![useSubscribeToRecordList](./img/useSubscribeToRecordList.gif) + + ## Usage