feat: add useAntdTable

legend80s · Nov 3, 2021 · 4a6c39c · 4a6c39c
1 parent c2f5025
commit 4a6c39c
Show file tree

Hide file tree

Showing 21 changed files with 1,021 additions and 11 deletions.
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
@@ -34,6 +34,7 @@ import useMemoizedFn from './useMemoizedFn';
 import useMount from './useMount';
 import useMouse from './useMouse';
 import useNetwork from './useNetwork';
+import usePagination from './usePagination';
 import usePrevious from './usePrevious';
 import useRafState from './useRafState';
 import useReactive from './useReactive';
@@ -62,6 +63,7 @@ import useUpdateLayoutEffect from './useUpdateLayoutEffect';
 import useVirtualList from './useVirtualList';
 import useWebSocket from './useWebSocket';
 import useWhyDidYouUpdate from './useWhyDidYouUpdate';
+import useAntdTable from './useAntdTable';
 
 export {
   useRequest,
@@ -129,4 +131,6 @@ export {
   useAsyncEffect,
   useRafState,
   useTrackedEffect,
+  usePagination,
+  useAntdTable,
 };
diff --git a/packages/hooks/src/useAntdTable/demo/cache.tsx b/packages/hooks/src/useAntdTable/demo/cache.tsx
@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { Button, Col, Form, Input, Row, Table, Select } from 'antd';
+import useAntdTable from '../';
+
+const { Option } = Select;
+
+interface Item {
+  name: {
+    last: string;
+  };
+  email: string;
+  phone: string;
+  gender: 'male' | 'female';
+}
+
+interface Result {
+  total: number;
+  list: Item[];
+}
+
+const getTableData = (
+  { current, pageSize, sorter, filters },
+  formData: Object,
+): Promise<Result> => {
+  console.log(sorter, filters);
+  let query = `page=${current}&size=${pageSize}`;
+  Object.entries(formData).forEach(([key, value]) => {
+    if (value) {
+      query += `&${key}=${value}`;
+    }
+  });
+
+  return fetch(`https://randomuser.me/api?results=55&${query}`)
+    .then((res) => res.json())
+    .then((res) => ({
+      total: res.info.results,
+      list: res.results,
+    }));
+};
+
+const UserList = () => {
+  const [form] = Form.useForm();
+
+  const { tableProps, search, params } = useAntdTable(getTableData, {
+    defaultPageSize: 5,
+    form,
+    cacheKey: 'useAntdTableCache',
+  });
+
+  const { sorter = {}, filters = {} } = params?.[0] || ({} as any);
+
+  const { type, changeType, submit, reset } = search;
+
+  const columns = [
+    {
+      title: 'name',
+      dataIndex: ['name', 'last'],
+    },
+    {
+      title: 'email',
+      dataIndex: 'email',
+    },
+    {
+      title: 'phone',
+      dataIndex: 'phone',
+      sorter: true,
+      sortOrder: sorter.field === 'phone' && sorter.order,
+    },
+    {
+      title: 'gender',
+      dataIndex: 'gender',
+      filters: [
+        { text: 'male', value: 'male' },
+        { text: 'female', value: 'female' },
+      ],
+      filteredValue: filters.gender,
+    },
+  ];
+
+  const advanceSearchForm = (
+    <div>
+      <Form form={form}>
+        <Row gutter={24}>
+          <Col span={8}>
+            <Form.Item label="name" name="name">
+              <Input placeholder="name" />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="email" name="email">
+              <Input placeholder="email" />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="phone" name="phone">
+              <Input placeholder="phone" />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={24} justify="end" style={{ marginBottom: 24 }}>
+          <Button type="primary" onClick={submit}>
+            Search
+          </Button>
+          <Button onClick={reset} style={{ marginLeft: 16 }}>
+            Reset
+          </Button>
+          <Button type="link" onClick={changeType}>
+            Simple Search
+          </Button>
+        </Row>
+      </Form>
+    </div>
+  );
+
+  const searchForm = (
+    <div style={{ marginBottom: 16 }}>
+      <Form form={form} style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Form.Item name="gender" initialValue="male">
+          <Select style={{ width: 120, marginRight: 16 }} onChange={submit}>
+            <Option value="">all</Option>
+            <Option value="male">male</Option>
+            <Option value="female">female</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="name">
+          <Input.Search placeholder="enter name" style={{ width: 240 }} onSearch={submit} />
+        </Form.Item>
+        <Button type="link" onClick={changeType}>
+          Advanced Search
+        </Button>
+      </Form>
+    </div>
+  );
+
+  return (
+    <div>
+      {type === 'simple' ? searchForm : advanceSearchForm}
+      <Table columns={columns} rowKey="email" {...tableProps} />
+
+      <div style={{ background: '#f5f5f5', padding: 8 }}>
+        <p>Current Table: {JSON.stringify(params?.[0])}</p>
+        <p>Current Form: {JSON.stringify(params?.[1])}</p>
+      </div>
+    </div>
+  );
+};
+
+const Demo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <div>
+      <Button
+        danger
+        onClick={() => {
+          setShow(!show);
+        }}
+        style={{ marginBottom: 16 }}
+      >
+        {show ? 'Click to destroy' : 'Click recovery'}
+      </Button>
+      {show && <UserList />}
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/packages/hooks/src/useAntdTable/demo/form.tsx b/packages/hooks/src/useAntdTable/demo/form.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { Button, Col, Form, Input, Row, Table, Select } from 'antd';
+import useAntdTable from '../';
+
+const { Option } = Select;
+
+interface Item {
+  name: {
+    last: string;
+  };
+  email: string;
+  phone: string;
+  gender: 'male' | 'female';
+}
+
+interface Result {
+  total: number;
+  list: Item[];
+}
+
+const getTableData = ({ current, pageSize }, formData: Object): Promise<Result> => {
+  let query = `page=${current}&size=${pageSize}`;
+  Object.entries(formData).forEach(([key, value]) => {
+    if (value) {
+      query += `&${key}=${value}`;
+    }
+  });
+
+  return fetch(`https://randomuser.me/api?results=55&${query}`)
+    .then((res) => res.json())
+    .then((res) => ({
+      total: res.info.results,
+      list: res.results,
+    }));
+};
+
+export default () => {
+  const [form] = Form.useForm();
+
+  const { tableProps, search, params } = useAntdTable(getTableData, {
+    defaultPageSize: 5,
+    form,
+  });
+
+  const { type, changeType, submit, reset } = search;
+
+  const columns = [
+    {
+      title: 'name',
+      dataIndex: ['name', 'last'],
+    },
+    {
+      title: 'email',
+      dataIndex: 'email',
+    },
+    {
+      title: 'phone',
+      dataIndex: 'phone',
+    },
+    {
+      title: 'gender',
+      dataIndex: 'gender',
+    },
+  ];
+
+  const advanceSearchForm = (
+    <div>
+      <Form form={form}>
+        <Row gutter={24}>
+          <Col span={8}>
+            <Form.Item label="name" name="name">
+              <Input placeholder="name" />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="email" name="email">
+              <Input placeholder="email" />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="phone" name="phone">
+              <Input placeholder="phone" />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={24} justify="end" style={{ marginBottom: 24 }}>
+          <Button type="primary" onClick={submit}>
+            Search
+          </Button>
+          <Button onClick={reset} style={{ marginLeft: 16 }}>
+            Reset
+          </Button>
+          <Button type="link" onClick={changeType}>
+            Simple Search
+          </Button>
+        </Row>
+      </Form>
+    </div>
+  );
+
+  const searchForm = (
+    <div style={{ marginBottom: 16 }}>
+      <Form form={form} style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Form.Item name="gender" initialValue="male">
+          <Select style={{ width: 120, marginRight: 16 }} onChange={submit}>
+            <Option value="">all</Option>
+            <Option value="male">male</Option>
+            <Option value="female">female</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="name">
+          <Input.Search placeholder="enter name" style={{ width: 240 }} onSearch={submit} />
+        </Form.Item>
+        <Button type="link" onClick={changeType}>
+          Advanced Search
+        </Button>
+      </Form>
+    </div>
+  );
+
+  return (
+    <div>
+      {type === 'simple' ? searchForm : advanceSearchForm}
+      <Table columns={columns} rowKey="email" {...tableProps} />
+
+      <div style={{ background: '#f5f5f5', padding: 8 }}>
+        <p>Current Table: {JSON.stringify(params?.[0])}</p>
+        <p>Current Form: {JSON.stringify(params?.[1])}</p>
+      </div>
+    </div>
+  );
+};