From b8c280430719913aca698a3e3c2d0573ce0bfc09 Mon Sep 17 00:00:00 2001 From: erwanMarmelab Date: Wed, 30 Oct 2024 16:41:13 +0100 Subject: [PATCH 1/2] [Doc] Update `` documentation for `defaultValue` --- docs/StackedFilters.md | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/docs/StackedFilters.md b/docs/StackedFilters.md index 139ec8db18..e2d3edc6d5 100644 --- a/docs/StackedFilters.md +++ b/docs/StackedFilters.md @@ -75,7 +75,7 @@ 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 = { @@ -83,7 +83,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: 0 }, { value: 'between', label: 'Between', @@ -93,6 +93,14 @@ const postListFilters: FiltersConfig = { ], input: ({ source }) => , }, + description: { + operators: [ + { value: 'eq', label: 'Equals', type: 'single' }, + { value: 'neq', label: 'Not Equals', type: 'single' }, + ], + input: ({ source }) => , + defaultValue: 'Lorem Ipsum', + } }; export const PostListToolbar = () => ( @@ -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 `value` of the `source`. - 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: @@ -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. @@ -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', @@ -277,6 +291,7 @@ const postListFilters: FiltersConfig = { }, ], input: ({ source }) => , + defaultValue: 0 }, }; @@ -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', @@ -486,6 +501,7 @@ const postListFilters: FiltersConfig = { }, ], input: ({ source }) => , + defaultValue: 0, }, }; From f7b3c47f4c88a67985d26343f681ecd545c7ee10 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Kaiser Date: Thu, 31 Oct 2024 11:28:01 +0100 Subject: [PATCH 2/2] [no ci] Update docs/StackedFilters.md --- docs/StackedFilters.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/StackedFilters.md b/docs/StackedFilters.md index e2d3edc6d5..e182f33657 100644 --- a/docs/StackedFilters.md +++ b/docs/StackedFilters.md @@ -117,7 +117,7 @@ An **operator** is an object that has a `label`, a `value`, a `defaultValue` and - 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 `value` of the `source`. +- 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: