Merge pull request #8116 from oguhpereira/feat/add-custom-filter-in-useList

Add a custom filter property in useList

Author: fzaninotto

docs/useList.md

@@ -242,3 +242,21 @@ const {
     refetch, // a function that throws an error, as refetch doesn't make sense for local data
 } = getGetList({ data });
 ```
+## `filterCallback`
+
+Property for custom filter definition. Being able to apply more complex filters using operators
+
+```jsx
+const { data } = useList({
+    data: [
+        { id: 1, name: 'Arnold' },
+        { id: 2, name: 'Sylvester' },
+        { id: 3, name: 'Jean-Claude' },
+    ],
+    sort: { field: 'name', order: 'ASC' },
+    filterCallback: (record) => record.id > 1 && record.name !== 'Jean-Claude'
+});
+// data will be
+// [
+//    { id: 2, name: 'Sylvester' }, 
+// ]

packages/ra-core/src/controller/list/useList.spec.tsx

@@ -228,4 +228,39 @@ describe('<useList />', () => {
             })
         );
     });
+
+    it('should filter array data based on the custom filter', async () => {
+        const callback = jest.fn();
+        const data = [
+            { id: 1, items: ['one', 'two'] },
+            { id: 2, items: ['three'] },
+            { id: 3, items: 'four' },
+            { id: 4, items: ['five'] },
+        ];
+
+        render(
+            <UseList
+                data={data}
+                sort={{ field: 'id', order: 'ASC' }}
+                filterCallback={record => record.id > 2}
+                callback={callback}
+            />
+        );
+
+        await waitFor(() => {
+            expect(callback).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sort: { field: 'id', order: 'ASC' },
+                    isFetching: false,
+                    isLoading: false,
+                    data: [
+                        { id: 3, items: 'four' },
+                        { id: 4, items: ['five'] },
+                    ],
+                    error: undefined,
+                    total: 2,
+                })
+            );
+        });
+    });
 });

packages/ra-core/src/controller/list/useList.ts

@@ -48,6 +48,7 @@ const refetch = () => {
  * @param {Number} props.page: Optional. The initial page index
  * @param {Number} props.perPage: Optional. The initial page size
  * @param {SortPayload} props.sort: Optional. The initial sort (field and order)
+ * @param {filterCallback} prop.filterCallback Optional. A function that allows you to make a custom filter
  */
 export const useList = <RecordType extends RaRecord = any>(
     props: UseListOptions<RecordType>
@@ -61,6 +62,7 @@ export const useList = <RecordType extends RaRecord = any>(
         page: initialPage = 1,
         perPage: initialPerPage = 1000,
         sort: initialSort,
+        filterCallback = (record: RecordType) => Boolean(record),
     } = props;
     const resource = useResourceContext(props);
 
@@ -161,23 +163,25 @@ export const useList = <RecordType extends RaRecord = any>(
 
             // 1. filter
             if (filterValues) {
-                tempData = data.filter(record =>
-                    Object.entries(filterValues).every(
-                        ([filterName, filterValue]) => {
-                            const recordValue = get(record, filterName);
-                            const result = Array.isArray(recordValue)
-                                ? Array.isArray(filterValue)
-                                    ? recordValue.some(item =>
-                                          filterValue.includes(item)
-                                      )
-                                    : recordValue.includes(filterValue)
-                                : Array.isArray(filterValue)
-                                ? filterValue.includes(recordValue)
-                                : filterValue == recordValue; // eslint-disable-line eqeqeq
-                            return result;
-                        }
+                tempData = data
+                    .filter(record =>
+                        Object.entries(filterValues).every(
+                            ([filterName, filterValue]) => {
+                                const recordValue = get(record, filterName);
+                                const result = Array.isArray(recordValue)
+                                    ? Array.isArray(filterValue)
+                                        ? recordValue.some(item =>
+                                              filterValue.includes(item)
+                                          )
+                                        : recordValue.includes(filterValue)
+                                    : Array.isArray(filterValue)
+                                    ? filterValue.includes(recordValue)
+                                    : filterValue == recordValue; // eslint-disable-line eqeqeq
+                                return result;
+                            }
+                        )
                     )
-                );
+                    .filter(filterCallback);
             }
             const filteredLength = tempData.length;
 
@@ -269,6 +273,7 @@ export interface UseListOptions<RecordType extends RaRecord = any> {
     perPage?: number;
     sort?: SortPayload;
     resource?: string;
+    filterCallback?: (record: RecordType) => boolean;
 }
 
 export type UseListValue<