Skip to content

Commit 5685546

Browse files
slax57slax57
committed
update list (part 2)
1 parent 9b812a8 commit 5685546

File tree

4 files changed

+763
-326
lines changed

4 files changed

+763
-326
lines changed

‎docs_headless/src/content/docs/list/FilterLiveForm.md‎

Lines changed: 85 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
---
2-
layout: default
3-
title: "FilterLiveForm"
4-
storybook_path: ra-ui-materialui-list-filter-filterliveform--with-filter-list-section
2+
title: "<FilterLiveForm>"
53
---
64

7-
# `<FilterLiveForm>`
8-
95
This component offers a convenient way to create a form that automatically updates the filters when the user changes its child input values.
106

11-
It fits nicely alongside a [`<FilterList>`](./FilterList.md) component, but you can also use it at other places to create your own filter UI.
7+
It fits nicely alongside a filter list component, but you can also use it at other places to create your own filter UI.
128

139
<video controls autoplay playsinline muted loop>
1410
<source src="../img/FilterLiveForm.mp4" type="video/mp4"/>
@@ -17,85 +13,88 @@ It fits nicely alongside a [`<FilterList>`](./FilterList.md) component, but you
1713

1814
## Usage
1915

20-
Use `<FilterLiveForm>` inside a component that provides a [`ListContext`](./useListContext.md), such as [`<List>`](./List.md). Use any React Admin [input component](./Inputs.md) as its children.
16+
Use `<FilterLiveForm>` inside a component that provides a [`ListContext`](./useListContext.md), such as [`<ListBase>`](./ListBase.md). Use any React Admin input component (i.e. leveraging [`useInput`](../inputs/useInput.md)) as its children.
2117

22-
Here is an example showing how you can use `<FilterLiveForm>` in a sidebar for the `<List>` view, alongside a [`<FilterList>`](./FilterList.md):
18+
Here is an example showing how you can use `<FilterLiveForm>` with input components:
2319

24-
{% raw %}
2520
```tsx
2621
import * as React from 'react';
27-
import CategoryIcon from '@mui/icons-material/LocalOffer';
28-
import Person2Icon from '@mui/icons-material/Person2';
29-
import TitleIcon from '@mui/icons-material/Title';
30-
import { Card, CardContent } from '@mui/material';
3122
import {
32-
AutocompleteInput,
3323
FilterLiveForm,
34-
DataTable,
35-
FilterList,
36-
FilterListItem,
37-
FilterListSection,
38-
List,
39-
ReferenceField,
40-
ReferenceInput,
41-
TextInput,
42-
} from 'react-admin';
24+
ListBase,
25+
ReferenceFieldBase,
26+
ReferenceInputBase,
27+
useListContext,
28+
} from 'ra-core';
29+
import { TextInput } from './TextInput';
30+
import { AutocompleteInput } from './AutocompleteInput';
4331

4432
const BookListAside = () => (
45-
<Card sx={{ order: -1, mr: 2, mt: 6, width: 250, height: 'fit-content' }}>
46-
<CardContent>
47-
<FilterList label="Century" icon={<CategoryIcon />}>
48-
<FilterListItem
49-
label="21st"
50-
value={{ year_gte: 2000, year_lte: undefined }}
51-
/>
52-
<FilterListItem
53-
label="20th"
54-
value={{ year_gte: 1900, year_lte: 1999 }}
55-
/>
56-
<FilterListItem
57-
label="19th"
58-
value={{ year_gte: 1800, year_lte: 1899 }}
59-
/>
60-
</FilterList>
61-
<FilterListSection label="Title" icon={<TitleIcon />}>
33+
<div style={{ marginRight: '1rem', marginTop: '3rem', width: '250px' }}>
34+
<div>
35+
<div>
36+
<h4>Title</h4>
6237
<FilterLiveForm>
63-
<TextInput source="title" resettable helperText={false} />
38+
<TextInput source="title" />
6439
</FilterLiveForm>
65-
</FilterListSection>
66-
<FilterListSection label="Author" icon={<Person2Icon />}>
40+
</div>
41+
<div>
42+
<h4>Author</h4>
6743
<FilterLiveForm>
68-
<ReferenceInput source="authorId" reference="authors">
69-
<AutocompleteInput helperText={false} />
70-
</ReferenceInput>
44+
<ReferenceInputBase source="authorId" reference="authors">
45+
<AutocompleteInput />
46+
</ReferenceInputBase>
7147
</FilterLiveForm>
72-
</FilterListSection>
73-
</CardContent>
74-
</Card>
48+
</div>
49+
</div>
50+
</div>
7551
);
7652

53+
const BookTable = () => {
54+
const { data } = useListContext();
55+
56+
return (
57+
<table>
58+
<thead>
59+
<tr>
60+
<th>Title</th>
61+
<th>Author</th>
62+
<th>Year</th>
63+
</tr>
64+
</thead>
65+
<tbody>
66+
{data.map(record => (
67+
<tr key={record.id}>
68+
<td>{record.title}</td>
69+
<td>
70+
<ReferenceFieldBase
71+
source="authorId"
72+
reference="authors"
73+
render={({ record: author }) => author?.name || record.authorId}
74+
/>
75+
</td>
76+
<td>{record.year}</td>
77+
</tr>
78+
))}
79+
</tbody>
80+
</table>
81+
);
82+
};
83+
7784
export const BookList = () => (
78-
<List aside={<BookListAside />}>
79-
<DataTable>
80-
<DataTable.Col source="title" />
81-
<DataTable.Col label="Autor" source="authorId">
82-
<ReferenceField source="authorId" reference="authors" />
83-
</DataTable.Col>
84-
<DataTable.Col source="year" />
85-
</DataTable>
86-
</List>
85+
<ListBase>
86+
<div style={{ display: 'flex' }}>
87+
<BookListAside />
88+
<BookTable />
89+
</div>
90+
</ListBase>
8791
);
8892
```
89-
{% endraw %}
90-
91-
**Tip:** This example leverages `<FilterListSection>`, the wrapper used internally by `<FilterList>`, in order to obtain a consistent look and feel for the filters.
9293

9394
![FilterLiveForm](../img/FilterLiveForm.png)
9495

9596
**Tip:** `<FilterLiveForm>` accepts multiple children, but you can also use several `<FilterLiveForm>` components in the same filter UI, just like we did above.
9697

97-
**Tip:** For simple cases where you only need a text input, you can use the [`<FilterLiveSearch>`](./FilterLiveSearch.md) component, which combines that logic in a single component.
98-
9998
## Props
10099

101100
Here are all the props you can set on the `<FilterLiveForm>` component:
@@ -114,37 +113,51 @@ Additional props are passed to `react-hook-form`'s [`useForm` hook](https://reac
114113
`<FilterLiveForm>` accepts any children. It simply provides the required contexts for the inputs to work as filters.
115114

116115
```tsx
116+
import { FilterLiveForm } from 'ra-core';
117+
import { TextInput } from './TextInput';
118+
117119
<FilterLiveForm>
118-
<TextInput source="title" resettable helperText={false} />
119-
<TextInput source="author" resettable helperText={false} />
120+
<TextInput source="title" />
121+
<TextInput source="author" />
120122
</FilterLiveForm>
121123
```
122124

125+
**Tip:** Input components must be react-admin inputs, i.e. inputs that leverage the [`useInput`](../inputs/useInput.md) hook.
126+
123127
## `debounce`
124128

125129
You can use the `debounce` prop to customize the delay before the filters are applied. The default value is `500` milliseconds.
126130

127131
```tsx
132+
import { FilterLiveForm } from 'ra-core';
133+
import { TextInput } from './TextInput';
134+
128135
<FilterLiveForm debounce={1000}>
129-
<TextInput source="title" resettable helperText={false} />
130-
<TextInput source="author" resettable helperText={false} />
136+
<TextInput source="title" />
137+
<TextInput source="author" />
131138
</FilterLiveForm>
132139
```
133140

134141
You can also disable the debounce by setting the `debounce` prop to `false`.
135142

136143
```tsx
144+
import { FilterLiveForm } from 'ra-core';
145+
import { TextInput } from './TextInput';
146+
137147
<FilterLiveForm debounce={false}>
138-
<TextInput source="title" resettable helperText={false} />
139-
<TextInput source="author" resettable helperText={false} />
148+
<TextInput source="title" />
149+
<TextInput source="author" />
140150
</FilterLiveForm>
141151
```
142152

143153
## `validate`
144154

145-
Just like for [`<Form>`](./Form.md), you can provide a `validate` function to validate the form values.
155+
Just like for [`<Form>`](../create-edit/Form.md), you can provide a `validate` function to validate the form values.
146156

147157
```tsx
158+
import { FilterLiveForm } from 'ra-core';
159+
import { TextInput } from './TextInput';
160+
148161
const validateFilters = values => {
149162
const errors: any = {};
150163
if (!values.author) {
@@ -155,8 +168,8 @@ const validateFilters = values => {
155168

156169
const GlobalValidation = () => (
157170
<FilterLiveForm validate={validateFilters}>
158-
<TextInput source="title" resettable helperText={false} />
159-
<TextInput source="author" resettable helperText={false} />
171+
<TextInput source="title" />
172+
<TextInput source="author" />
160173
</FilterLiveForm>
161174
);
162175
```

0 commit comments

Comments
 (0)