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

[Doc] Update <StackedFilters> documentation for defaultValue #10319

Merged
merged 2 commits into from
Oct 31, 2024
Merged
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
26 changes: 21 additions & 5 deletions docs/StackedFilters.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,15 @@ It looks like this:

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

const postListFilters: FiltersConfig = {
title: textFilter(),
views: {
operators: [
{ value: 'eq', label: 'Equals', type: 'single' },
{ value: 'neq', label: 'Not Equals', type: 'single' },
{ value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 0 },
{
value: 'between',
label: 'Between',
Expand All @@ -93,6 +93,14 @@ const postListFilters: FiltersConfig = {
],
input: ({ source }) => <NumberInput source={source} />,
},
description: {
operators: [
{ value: 'eq', label: 'Equals', type: 'single' },
{ value: 'neq', label: 'Not Equals', type: 'single' },
],
input: ({ source }) => <TextInput source={source} />,
defaultValue: 'Lorem Ipsum',
}
};

export const PostListToolbar = () => (
Expand All @@ -105,10 +113,11 @@ export const PostListToolbar = () => (

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.

An operator is an object that has a `label`, a `value` and a `type`.
An **operator** is an object that has a `label`, a `value`, a `defaultValue` and a `type`.

- The `label` is a string, and can be a translation key.
- The `value` is used as a suffix to the `source` and passed to the list filters.
- The `defaultValue` is used as the default filter value.
- 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`).

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:
Expand All @@ -117,6 +126,11 @@ For instance, if the user adds the `views` filter with the `eq` operator and a v
{ views_eq: 0 }
```

In your filter declaration, you can provide an `operator`, an `input` and a `defaultValue`.
The **input** is a react object taking `source` as prop and rendering the input you will need to fill for your filter.

**Tip:** The **defaultValue** of a filter is not the same as the `defaultValue` of an `operator`.

## Filter Configuration Builders

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.
Expand Down Expand Up @@ -268,7 +282,7 @@ const postListFilters: FiltersConfig = {
views: {
operators: [
{ value: 'eq', label: 'Equals', type: 'single' },
{ value: 'neq', label: 'Not Equals', type: 'single' },
{ value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 1 },
{
value: 'between',
label: 'Between',
Expand All @@ -277,6 +291,7 @@ const postListFilters: FiltersConfig = {
},
],
input: ({ source }) => <NumberInput source={source} />,
defaultValue: 0
},
};

Expand Down Expand Up @@ -477,7 +492,7 @@ const postListFilters: FiltersConfig = {
views: {
operators: [
{ value: 'eq', label: 'Equals', type: 'single' },
{ value: 'neq', label: 'Not Equals', type: 'single' },
{ value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 1 },
{
value: 'between',
label: 'Between',
Expand All @@ -486,6 +501,7 @@ const postListFilters: FiltersConfig = {
},
],
input: ({ source }) => <NumberInput source={source} />,
defaultValue: 0,
},
};

Expand Down