refreshDeps 触发的时候 form 要以 getState 为准

ahooksjs · Sep 30, 2021 · 2c0c191 · 2c0c191
1 parent 89baae7
commit 2c0c191
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 48 deletions.
diff --git a/packages/use-form-table/__tests__/index.test.tsx b/packages/use-form-table/__tests__/index.test.tsx
@@ -329,49 +329,4 @@ describe('useFormTable#basic', () => {
       });
     });
   });
-
-  it('transformer（格式化参数）', async () => {
-    const data = { name: 'ahooks' };
-
-    const TestComponent = () => {
-      const { formProps, tableProps, paginationProps } = useFormTable(
-        (params) => {
-          return service({ dataSource: [{ ...params, name: params.name || data.name }] });
-        },
-        {
-          transformer: (params) => {
-            return {
-              ...params,
-              test: 1,
-              name: (params.name || '').toUpperCase(),
-            };
-          },
-        }
-      );
-
-      return (
-        <Fragment>
-          <SchemaForm {...formProps}>
-            <Field name={'name'} type="string1" x-props={{ 'data-testid': 'input' }} />
-            <button type="submit">Submit</button>
-          </SchemaForm>
-
-          <div>{JSON.stringify(tableProps)}</div>
-          <Pagination {...paginationProps} />
-        </Fragment>
-      );
-    };
-
-    const { queryByTestId, queryByText } = render(<TestComponent />);
-    fireEvent.change(queryByTestId('input') as HTMLElement, { target: { value: 'foo' } });
-    fireEvent.click(queryByText('Submit') as HTMLElement);
-
-    await waitFor(() => {
-      const element = screen.getByText('foo', { exact: false });
-      expect(JSON.parse(element.innerHTML)).toEqual({
-        dataSource: [{ ...data, current: 1, pageSize: 20, name: 'FOO', test: 1 }],
-        loading: false,
-      });
-    });
-  });
 });
diff --git a/packages/use-form-table/__tests__/options.test.tsx b/packages/use-form-table/__tests__/options.test.tsx
@@ -0,0 +1,128 @@
+import React, { Fragment, useState } from 'react';
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import {
+  SchemaMarkupField as Field,
+  SchemaMarkupForm as SchemaForm,
+  registerFormField,
+  connect,
+} from '@formily/react-schema-renderer';
+import { Pagination, Button } from '@alifd/next';
+import useFormTable from '../src/index';
+import service from './fixtures/service';
+
+registerFormField(
+  'string1',
+  connect()((props) => {
+    return <input {...props} value={props.value || ''} />;
+  })
+);
+
+describe('useFormTable#options', () => {
+  it('refreshDeps', async () => {
+    const TestComponent = () => {
+      const [state, setState] = useState(true);
+      const { formProps, tableProps, paginationProps } = useFormTable(
+        (params) => {
+          return service({ dataSource: [{ ...params }] });
+        },
+        {
+          refreshDeps: [state],
+        }
+      );
+
+      return (
+        <Fragment>
+          <Button
+            data-testid={'button'}
+            onClick={() => {
+              setState(!state);
+            }}
+          >
+            点击
+          </Button>
+
+          <SchemaForm {...formProps}>
+            <Field name={'name'} type="string1" x-props={{ 'data-testid': 'input' }} />
+            <Field
+              visible={state}
+              name={'bar'}
+              type="string1"
+              x-props={{ 'data-testid': 'input1' }}
+            />
+            <button type="submit">Submit</button>
+          </SchemaForm>
+
+          <div>{JSON.stringify(tableProps)}</div>
+          <Pagination {...paginationProps} />
+        </Fragment>
+      );
+    };
+
+    const { queryByTestId, queryByText } = render(<TestComponent />);
+    fireEvent.change(queryByTestId('input') as HTMLElement, { target: { value: 'foo' } });
+    fireEvent.change(queryByTestId('input1') as HTMLElement, { target: { value: 'bar' } });
+    fireEvent.click(queryByText('Submit') as HTMLElement);
+
+    await waitFor(() => {
+      const element = screen.getByText('foo', { exact: false });
+      expect(JSON.parse(element.innerHTML)).toEqual({
+        dataSource: [{ current: 1, pageSize: 20, name: 'foo', bar: 'bar' }],
+        loading: false,
+      });
+    });
+
+    fireEvent.click(queryByTestId('button') as HTMLElement);
+    await waitFor(() => {
+      const element = screen.getByText('foo', { exact: false });
+      expect(JSON.parse(element.innerHTML)).toEqual({
+        dataSource: [{ current: 1, pageSize: 20, name: 'foo' }],
+        loading: false,
+      });
+    });
+  });
+
+  it('transformer（格式化参数）', async () => {
+    const data = { name: 'ahooks' };
+
+    const TestComponent = () => {
+      const { formProps, tableProps, paginationProps } = useFormTable(
+        (params) => {
+          return service({ dataSource: [{ ...params, name: params.name || data.name }] });
+        },
+        {
+          transformer: (params) => {
+            return {
+              ...params,
+              test: 1,
+              name: (params.name || '').toUpperCase(),
+            };
+          },
+        }
+      );
+
+      return (
+        <Fragment>
+          <SchemaForm {...formProps}>
+            <Field name={'name'} type="string1" x-props={{ 'data-testid': 'input' }} />
+            <button type="submit">Submit</button>
+          </SchemaForm>
+
+          <div>{JSON.stringify(tableProps)}</div>
+          <Pagination {...paginationProps} />
+        </Fragment>
+      );
+    };
+
+    const { queryByTestId, queryByText } = render(<TestComponent />);
+    fireEvent.change(queryByTestId('input') as HTMLElement, { target: { value: 'foo' } });
+    fireEvent.click(queryByText('Submit') as HTMLElement);
+
+    await waitFor(() => {
+      const element = screen.getByText('foo', { exact: false });
+      expect(JSON.parse(element.innerHTML)).toEqual({
+        dataSource: [{ ...data, current: 1, pageSize: 20, name: 'FOO', test: 1 }],
+        loading: false,
+      });
+    });
+  });
+});
diff --git a/packages/use-form-table/src/pipe/index.ts b/packages/use-form-table/src/pipe/index.ts
@@ -11,6 +11,7 @@ const checkIsFormPipe = (meta) => {
     methods.ON_FORM_MOUNT,
     methods.ON_FORM_SUBMIT,
     methods.TO_RESET_FORM,
+    methods.ON_REFRESH_DEPS,
   ].includes(meta.queryFrom);
 };
 

diff --git a/packages/use-form-table/src/pipe/table.ts b/packages/use-form-table/src/pipe/table.ts
@@ -3,7 +3,7 @@ import { PAYLOAD_SYMBOL, Pipe } from '@ahooksjs/use-table';
 import { IS_FORM_DATA_SUBMITTED } from '../symbol';
 
 const tablePipe: Pipe = (ctx) => {
-  const { meta, [PAYLOAD_SYMBOL]: payload, store } = ctx;
+  const { meta, store, [PAYLOAD_SYMBOL]: payload } = ctx;
   const { stateMap } = store;
   const memoState = stateMap.get();
   const { formState = {} } = memoState;

diff --git a/packages/use-table/src/pipes/index.ts b/packages/use-table/src/pipes/index.ts
@@ -7,9 +7,9 @@ import updatePipe from './update';
 import normalPipe from './normal';
 import { IS_NORMAL_SYMBOL } from '../symbol';
 
-const createNormalPipe = (pipe: Pipe, $isNormal: boolean): Pipe => (ctx) => {
+const createNormalPipe = (pipe: Pipe, isNormal: boolean): Pipe => (ctx) => {
   const { meta } = ctx;
-  return meta[IS_NORMAL_SYMBOL] === $isNormal ? pipe(ctx) : ctx;
+  return meta[IS_NORMAL_SYMBOL] === isNormal ? pipe(ctx) : ctx;
 };
 
 const pipes = [