Skip to content

Commit 6b48c32

Browse files
authored
Merge pull request marmelab#10319 from marmelab/documentation/stackedFilters-defaultValue
[Doc] Update `<StackedFilters>` documentation for `defaultValue`
2 parents 57cbd0e + f7b3c47 commit 6b48c32

File tree

1 file changed

+21
-5
lines changed

1 file changed

+21
-5
lines changed

docs/StackedFilters.md

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,15 @@ It looks like this:
7575

7676
```tsx
7777
import { FiltersConfig, StackedFilters, textFilter } from '@react-admin/ra-form-layout';
78-
import { NumberInput } from 'react-admin';
78+
import { NumberInput, TextInput } from 'react-admin';
7979
import { MyNumberRangeInput } from './MyNumberRangeInput';
8080

8181
const postListFilters: FiltersConfig = {
8282
title: textFilter(),
8383
views: {
8484
operators: [
8585
{ value: 'eq', label: 'Equals', type: 'single' },
86-
{ value: 'neq', label: 'Not Equals', type: 'single' },
86+
{ value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 0 },
8787
{
8888
value: 'between',
8989
label: 'Between',
@@ -93,6 +93,14 @@ const postListFilters: FiltersConfig = {
9393
],
9494
input: ({ source }) => <NumberInput source={source} />,
9595
},
96+
description: {
97+
operators: [
98+
{ value: 'eq', label: 'Equals', type: 'single' },
99+
{ value: 'neq', label: 'Not Equals', type: 'single' },
100+
],
101+
input: ({ source }) => <TextInput source={source} />,
102+
defaultValue: 'Lorem Ipsum',
103+
}
96104
};
97105

98106
export const PostListToolbar = () => (
@@ -105,10 +113,11 @@ export const PostListToolbar = () => (
105113

106114
For a given field, the filter configuration should be an object containing an array of `operators` and a default `input`, used for operators that don't define their own. You can use the [filter configuration builders](#filter-configuration-builders) (like `textFilter`) to build filter configuration objects.
107115

108-
An operator is an object that has a `label`, a `value` and a `type`.
116+
An **operator** is an object that has a `label`, a `value`, a `defaultValue` and a `type`.
109117

110118
- The `label` is a string, and can be a translation key.
111119
- The `value` is used as a suffix to the `source` and passed to the list filters.
120+
- The `defaultValue` is used as the default filter value.
112121
- The `type` ensures that when selecting an operator with a different type than the previous one, React-admin resets the filter value. Its value should be either `single` for filters that accepts a single value (for instance a `string`) or `multiple` for filters that accepts multiple values (for instance an `Array` of `string`). Should you need to differentiate a custom input from those two types, you may provide any type you want to the `type` option (for instance, `map`).
113122

114123
For instance, if the user adds the `views` filter with the `eq` operator and a value of `0`, the `dataProvider.getList()` will receive the following `filter` parameter:
@@ -117,6 +126,11 @@ For instance, if the user adds the `views` filter with the `eq` operator and a v
117126
{ views_eq: 0 }
118127
```
119128

129+
In your filter declaration, you can provide an `operator`, an `input` and a `defaultValue`.
130+
The **input** is a react object taking `source` as prop and rendering the input you will need to fill for your filter.
131+
132+
**Tip:** The **defaultValue** of a filter is not the same as the `defaultValue` of an `operator`.
133+
120134
## Filter Configuration Builders
121135

122136
To make it easier to create a filter configuration, `ra-form-layout` provides some helper functions. Each of them has predefined operators and inputs. They accept an array of operators if you want to remove some of them.
@@ -268,7 +282,7 @@ const postListFilters: FiltersConfig = {
268282
views: {
269283
operators: [
270284
{ value: 'eq', label: 'Equals', type: 'single' },
271-
{ value: 'neq', label: 'Not Equals', type: 'single' },
285+
{ value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 1 },
272286
{
273287
value: 'between',
274288
label: 'Between',
@@ -277,6 +291,7 @@ const postListFilters: FiltersConfig = {
277291
},
278292
],
279293
input: ({ source }) => <NumberInput source={source} />,
294+
defaultValue: 0
280295
},
281296
};
282297

@@ -477,7 +492,7 @@ const postListFilters: FiltersConfig = {
477492
views: {
478493
operators: [
479494
{ value: 'eq', label: 'Equals', type: 'single' },
480-
{ value: 'neq', label: 'Not Equals', type: 'single' },
495+
{ value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 1 },
481496
{
482497
value: 'between',
483498
label: 'Between',
@@ -486,6 +501,7 @@ const postListFilters: FiltersConfig = {
486501
},
487502
],
488503
input: ({ source }) => <NumberInput source={source} />,
504+
defaultValue: 0,
489505
},
490506
};
491507

0 commit comments

Comments
 (0)