# @aligov/components-use-form-table-hooks

> a hooks for fusion table

Latest version **1.4.4** (published 2020-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @aligov/components-use-form-table-hooks
pnpm add @aligov/components-use-form-table-hooks
yarn add @aligov/components-use-form-table-hooks
bun add @aligov/components-use-form-table-hooks
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.4 |
| Published | 2020-09-15 |
| First published | 2019-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | leezq, baizhao, zhaojian6516, daip, ccs0118, zhangcong52, zwhu, guoliang.hgl, mo.zhou, zhousufa, jerrywang12, xiazhiqiang, liunian, itrip, tao1991123 |
| Keywords | ice, react, component |

## Links

- npm: https://www.npmjs.com/package/@aligov/components-use-form-table-hooks
- Homepage: https://unpkg.com/@aligov/components-use-form-table-hooks@1.4.4/build/index.html
- npm.io page: https://npm.io/package/@aligov/components-use-form-table-hooks

## Dependencies (5)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [@alifd/next](https://npm.io/package/@alifd/next.md) ^1.17.8
- [@uform/next](https://npm.io/package/@uform/next.md) ^0.4.3
- [react-addons-update](https://npm.io/package/react-addons-update.md) ^15.6.2
- [@aligov/components-gov-table](https://npm.io/package/@aligov/components-gov-table.md) ^1.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.4.4 (latest) — 2020-09-15
- 1.4.3 — 2020-05-22
- 1.4.2 — 2020-05-08
- 1.4.1 — 2020-05-06
- 1.4.0 — 2020-05-06
- 1.3.0 — 2020-03-10
- 1.2.3 — 2020-03-05
- 1.2.2 — 2019-12-30
- 1.2.1 — 2019-12-07
- 1.1.1 — 2019-11-27
- 1.1.0 — 2019-10-22
- 1.0.0 — 2019-10-12
- 0.1.0 — 2019-10-09

## README

# @aligov/components-use-form-table-hooks

搭配基于fusion封装的GovTable使用。

```bash
tnpm i @aligov/components-use-form-table-hooks -S
```

## 基础用法

下面是场景的列表查询的例子，由 form + table + 分页组成

```jsx
import React from 'react';
import { Pagination } from '@alifd/next';
import { Field, FormButtonGroup, Reset, SchemaForm, Submit } from '@uform/next';
import GovTable from '@aligov/components-gov-table';
import useFormTableHooks from '@aligov/components-use-form-table-hooks';

async function getData(params) {
  return await {
    total: 1000,
    list: [
      {id: 1, content: 'a'},
      {id: 2, content: 'b'}
    ]
  };
}

function Page() {
  const {
    loading, // 是否为加载状态
    data = {}, // 当前列表数据
    search,  // 表单搜索触发提交
    reload,  // 重新搜索，用于操作后更新列表场景
    changeTable, // 表格翻页接口
  } = useFormTableHooks(getData);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: 'Content',
      dataIndex: 'content'
    }
  ];

  const { list, total = 0, current = 1, pageSize = 10 } = data;

  return (
    <div>
      <SchemaForm
        labelCol={6}
        wrapperCol={18}
        autoAddColon={false}
        onSubmit={search}
      >
        <Field name="id" type="string"/>

        <FormButtonGroup>
          <Submit>查询</Submit>
          <Reset>重置</Reset>
        </FormButtonGroup>
      </SchemaForm>

      <GovTable loading={loading} dataSource={list} columns={columns} hasBorder={false} />

      <Pagination
        onChange={changeTable}
        current={current}
        total={total}
        pageSize={pageSize}
      />
    </div>
  );
}
```

## API

`const hookExport = useFormTableHooks(searchService, options);`


### 参数

| 参数                        | 说明                                                                                                          | 类型                  | 默认值                                             |
|-----------------------------|---------------------------------------------------------------------------------------------------------------|-----------------------|----------------------------------------------------|
| searchService               | 必须，根据表单及分页参数来查询列表内容                                                                        | (any) => Promise<any> |                                                    |
| options                     | 可选，定制处理                                                                                                | Object                | `{}`                                               |
| options.defaultPageSize     | 表格每页条目数量                                                                                              | Number                | 10                                                 |
| options.initData            | 用来给表单或其它查询相关参数设定默认值                                                                        | Object                | `{}`                                               |
| options.waitUntilManualCall | 初始化后不自动查询，配合 hook 返回结果中的 `readyToSearch` 方法来使用，用于需要等待某些异步结果才能查询的场景 | Boolean               | false                                              |
| options.trim                | 是否在发送请求时，对请求参数中字符串类型的值做 trim 处理（仅第一层）                                          | Boolean               | true                                               |
| options.initSort            | 初始化的表格排序设置，详见 Fusion 中 Table 的 sort 属性                                                       | Object                | `{}`                                               |
| options.sortFormatter       | 排序参数发送请求前的格式化方案，默认是把所有对象放到 `sortParams` key 中                                      | (any) => any          | `sortParams => ({ sortParams: sortParams })`       |
| options.initFilterParams    | 初始化时的表格过滤设置，详见 Fusion 中 Table 的 filterParams 属性                                             | Object                | `{}`                                               |
| options.filterFormatter     | 表格过滤参数发送请求前的格式化方案，默认是把所有对象放到 `filterParams` key 中                                | (any) => any          | `filterParams => ({ filterParams: filterParams })` |

### 返回结果

 返回结果是一个对象，包含以下属性

 | 属性            | 说明                                                                                                                         | 类型                                       |
 |-----------------|------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------|
 | loading         | 是否正在请求中                                                                                                               | Boolean                                    |
 | formData        | form 表单参数，包含了 `options.initData`中的内容                                                                             | Object                                     |
 | data            | 列表数据，主要是 `searchService` 的返回结果                                                                                  | any                                        |
 | search          | 触发表单查询，会重置页码为 1。可携带额外的参数来查询                                                                         | (extraParams?: object} => void             |
 | reload          | 刷新当前页，常用于表格操作后刷新的场景，可携带额外的参数来表示可能移除的数量，用于避免最后一页条目都不再展示后页码不对的场景 | (deleteCount: Number = 0) => void          |
 | changeTable     | 表格翻页，主要用于 Fusion Pagination 组件的 onChange 属性                                                                    | (current: number) => void                  |
 | readyToSearch   | 调用后解除 `options.waitUntilManualCall` 的控制，触发表单查询及后续的响应                                                    | Function                                   |
 | updateFormData  | 更新表单数据，但不触发查询，不常用                                                                                           | (data: Object) => void                     |
 | updateTableData | 直接更新列表数据，主要用于操作后不发送请求来完全刷新列表的场景，不常用                                                       | (tableData: any) => void                   |
 | updateTableRow  | 直接更新列表某行数据，不常用                                                                                                 | (index: number, rowData: any) => void      |
 | sortParams      | Table 的 sort 属性                                                                                                           | Object                                     |
 | onSort          | Table 的 onSort 属性                                                                                                         | (dataIndex: string, order: string) => void |
 | filterParams    | Table 的 filterParams 属性                                                                                                   | Object                                     |
 | onFilter        | Table 的 onFilter 属性                                                                                                       | (filterParams: Object) => void             |
 
## 相关信息

### 初始化时不马上发请求

默认情况下，在调用 hooks 时就会马上调用 searchService 来获取数据。但如果需要先获取某些异步数据（如表单某些地方需要通过异步来获取并设置默认值），那么可通过 `options.waitUntilManualCall` 以及返回的 `readyToSearch` 来搭配使用。

例子：

```jsx
const { readyToSearch, updateFormData } = useFormTableHooks(searchService, { waitUntilManualCall: true });

asyncFn().then((res = {}) => {
    updateFormData(res);
    readyToSearch();
});
```


### 请求和分页

`searchService` 一般应该满足前后端接口规范中的[列表类接口][guide-ajax-list]的约定里的 `data` 格式（注意：后端接口本身应满足完全的结构，但经通用请求库包装后，service 只会返回接口里的有效数据 `data`）， 即假设是分页的场景。

但如果接口本身不满足通用的列表查询规范，而是直接返回一个数组。那么 hook 返回结果种的 `data` 将不是一个 object，而是数组。这个时候则需要根据实际的数据结构来展示。





[ajax-api-list]: https://yuque.antfin-inc.com/xgztel/fed/ue6sux#ePGgf

---
_Source: https://npm.io/package/@aligov/components-use-form-table-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._