Skip to content

Commit

Permalink
feat(antd): search form in useTable should work with syncWithLocation (
Browse files Browse the repository at this point in the history
  • Loading branch information
aliemir authored and BatuhanW committed Jun 4, 2024
1 parent 4cc7447 commit fc1f7d9
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 10 deletions.
7 changes: 7 additions & 0 deletions .changeset/curly-files-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@refinedev/antd": patch
---

feat(antd): search form in useTable should work with syncWithLocation

Even though the form is managed by `useTable` hook from `@refinedev/antd`. It wasn't respecting the `syncWithLocation` prop to set values accordingly at initial render when registered fields are matching with the query params. Now it will look for matching fields and set values accordingly from synced filters.
10 changes: 2 additions & 8 deletions examples/app-crm/src/routes/companies/list.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FC, PropsWithChildren, useState } from "react";

import { List, useTable } from "@refinedev/antd";
import { getDefaultFilter, HttpError } from "@refinedev/core";
import { HttpError } from "@refinedev/core";
import { GetFieldsFromList } from "@refinedev/nestjs-query";

import {
Expand Down Expand Up @@ -103,13 +103,7 @@ export const CompanyListPage: FC<PropsWithChildren> = ({ children }) => {
marginTop: screens.xs ? "1.6rem" : undefined,
}}
>
<Form
{...searchFormProps}
initialValues={{
name: getDefaultFilter("name", filters, "contains"),
}}
layout="inline"
>
<Form {...searchFormProps} layout="inline">
<Form.Item name="name" noStyle>
<Input
size="large"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from "react";
import { CrudFilters } from "@refinedev/core";
import isEqual from "lodash/isEqual";
import { renderHook, waitFor } from "@testing-library/react";

import { act, TestWrapper } from "@test";
import { Form, Input } from "antd";
import { act, TestWrapper, render } from "@test";

import { useTable } from "./useTable";

Expand Down Expand Up @@ -290,4 +291,52 @@ describe("useTable Hook", () => {

expect(result.current.tableProps.pagination).toBeFalsy();
});

it("should pass form values to search form from params (syncWithLocation)", async () => {
const Component = () => {
const { searchFormProps } = useTable({
resource: "categories",
syncWithLocation: true,
});

return (
<Form {...searchFormProps}>
<Form.Item name="name" noStyle>
<Input
data-test-id="search-name"
size="large"
placeholder="Search by name"
/>
</Form.Item>
</Form>
);
};

const { getByDisplayValue } = render(<Component />, {
wrapper: TestWrapper({
routerProvider: {
parse: () => {
return () => ({
resource: {
name: "posts",
},
params: {
filters: [
{
field: "name",
operator: "contains",
value: "Some Name To Look For",
},
],
},
});
},
},
}),
});

await waitFor(() => {
expect(getByDisplayValue("Some Name To Look For")).toBeInTheDocument();
});
});
});
30 changes: 30 additions & 0 deletions packages/antd/src/hooks/table/useTable/useTable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
useTableProps as useTablePropsCore,
useTableReturnType as useTableCoreReturnType,
pickNotDeprecated,
useSyncWithLocation,
} from "@refinedev/core";

import {
Expand Down Expand Up @@ -122,6 +123,8 @@ export const useTable = <
metaData: pickNotDeprecated(meta, metaData),
dataProviderName,
});
const { syncWithLocation: defaultSyncWithLocation } = useSyncWithLocation();
const shouldSyncWithLocation = syncWithLocation ?? defaultSyncWithLocation;
const breakpoint = Grid.useBreakpoint();
const [form] = Form.useForm<TSearchVariables>();
const formSF = useFormSF<any, TSearchVariables>({
Expand All @@ -140,6 +143,33 @@ export const useTable = <

const { data, isFetched, isLoading } = tableQueryResult;

React.useEffect(() => {
if (shouldSyncWithLocation) {
// get registered fields of form
const registeredFields = formSF.form.getFieldsValue() as Record<
string,
any
>;
// map `filters` for registered fields
const filterFilterMap = Object.keys(registeredFields).reduce(
(acc, curr) => {
// find filter for current field
const filter = filters.find(
(filter) => "field" in filter && filter.field === curr,
);
// if filter exists, set value to filter value
if (filter) {
acc[curr] = filter?.value;
}
return acc;
},
{} as Record<string, any>,
);
// set values to form
formSF.form.setFieldsValue(filterFilterMap as any);
}
}, [shouldSyncWithLocation]);

const onChange = (
paginationState: TablePaginationConfig,
tableFilters: Record<string, FilterValue | null>,
Expand Down

0 comments on commit fc1f7d9

Please sign in to comment.