# react-antd-mobile-table

## 介绍
react-antd-mobile-table 基于 antd-mobile 进行二次封装的表单组件


**使用：**
表单配置项
```js
export const defaultOptions = {
  header: "",   // 表单头部标题
  submitBtn: true,  // 保存按钮显隐
  submitBtnText: "保存",  // 保存按钮文字
  cancelBtn: true, // 返回按钮显隐
  cancelBtnText: "返回", // 返回按钮文字
  btnSize: "middle",  // 默认按钮大小
  column: [
      {
        label: "input",
        prop: "input",
        rules: [{ required: true, message: '姓名不能为空' }]
      },
      {
        label: "number",
        prop: "number",
        type: "number",
        max: 99
      },
      {
        label: "password",
        prop: "password",
        type: "password"
      },
      {
        label: "select",
        prop: "select",
        type: "select",
        selectList: [
          {
            label: "18",
            value: "18"
          },
          {
            label: "19",
            value: "19"
          },
          {
            label: "20",
            value: "20"
          }
        ]
      },
      {
        label: "date",
        prop: "date",
        type: "date"
      },
      {
        label: "radio",
        prop: "radio",
        type: "radio",
        selectList: "是,否"
      },
      {
        label: "checkbox",
        prop: "checkbox",
        type: "checkbox",
        radioLayout: "inline",
        selectList: [
          {
            label: "足球",
            value: "足球"
          },
          {
            label: "篮球",
            value: "篮球"
          },
          {
            label: "乒乓球",
            value: "乒乓球"
          }
        ]
      },
      {
        label: "rate",
        prop: "rate",
        type: "rate"
      },
      {
        label: "selector",
        prop: "selector",
        type: "selector",
        selectList: "1, 2, 3, 4"
      },
      {
        label: "slider",
        prop: "slider",
        type: "slider"
      },
      {
        label: "Switch",
        prop: "switch",
        type: "switch"
      },
      {
        label: "textarea",
        prop: "textarea",
        type: "textarea"
      },
      {
        label: "subtable",
        prop: "subtable",
        type: "subtable",
        column: [
          {
            label: "input",
            prop: "hello"
          },
          {
            label: "date",
            prop: "date",
            type: "date"
          }
        ]
    }
  ]
}

```


```jsx
import { Form } from "react-antd-mobile-table"
// 表单组件基本使用
export default function App() {
  // 初始化数据
  const formData = { input: "", slider: 50, checkbox: ["1"], select: "", date: "", switch: true }
  // form表单实例方法
  const refForm = createRef();
  const [type, setType] = useState("add");
  const [options, setOptions] = useState(defaultOptions);
  // 保存按钮
  const submit = (value) => {
  }

  return (
    <Form formData={formData} ref={refForm} options={options} type={type} submit={submit} />
  )
}
```

**Form组件属性：**
| key       | type    | desc                    | required |
| :-------: | :-----: | :---------------------: | :------: |
| formData  | object  | 表单初始值               | true     |
| options   | object  | 表单配置项               | true     |
| type      | string  | 当前表单类型, add,edit,view            | true     |
| submit    | func    | 点击保存按钮提交事件      | false    |
| cancel    | func    | 点击返回按钮触发事件      | false    |


**options属性：**
| key       | type    | desc                    | required |
| :-------: | :-----: | :---------------------: | :------: |
| header    | string  | 表单头部标题             | false |
| submitBtn | boolean | 保存按钮显隐             | false |
| submitBtnText | string | 保存按钮文字          | false  |
| cancelBtn |  boolean | 返回按钮显隐    | false |
| cancelBtnText | string | 返回按钮文字  | false |
| btnSize   | string | 默认按钮大小, 'mini' ，'small'，'middle'，'large' | false |
| column  | Array   |  表单配置项  | true |

**options中的column属性:**
| key       | type    | desc                    | required |
| :-------: | :-----: | :---------------------: | :------: |
| label     | string  | 表单项名字               | false|
| prop      | string  | 表单formData字段名，不可重复 |  true|
| type      | string  | 表单项类型：input,number,password,elect,date,radio,checkbox,rate,selector,slider,textarea,subtable | false|
| disabled  | boolean | 表单项是否禁用  | fasle |
| addDisabled | boolean | type为add时有效 | false |
| editDisabled | boolean | type为edit时有效 | false |
| viewDisabled | boolean | type 为view时有效 | false |
| display   |  boolean | 表单项显隐   | true |
| addDisplay | boolean | type为add时有效 | true |
| editDisplay | boolean | type为edit时有效 | true |
| viewDisplay | boolean | type为view时有效 | true |
| selectList| Array, string   | 下拉，单选，日期，多选框等下拉项，可参考 antd-mobile相关配置项 | false|
| style     | object  |  表单项相关样式 | false|
|radioLayout| string | checkbox,radio配置项，inline,block。默认值：inline (单选框选项) | false |
| 其它配置项 | any     | 基于antd-mobile封装，可传入相关组件的配置项 | false|


**List组件：**
列表组件基于 antd-table 的 List、PullToRefresh、SearchBar、InfiniteScroll 进行二次封装的

| key       | type    | desc                    | required |
| :-------: | :-----: | :---------------------: | :------: |
|data       |  Array  | 展示数据列表             | true     |
|options    | object  | 属性key索引值，title展示内容，description小标题，header列表头部展示文字，mode卡片模式（default, card） | false |
|searchBarOptions| object | 搜索框配置项， 具体参考SearchBar 组件配置 | false |
|pullToRefreshOptions| object | 下拉刷新配置，具体参考PullToRefresh组件配置 | false |
|listItemOptions| object | 列表项相关配置，具体参考 List.Item 组件配置 | false |
|infiniteScrollOptions| object | 上拉加载数据配置，具体参考 InfiniteScroll 组件配置 | false |

```jsx
// 案例
import React, { createRef, useState } from "react";
import { List, ActionSheet } from "react-antd-mobile-table";

// 模拟请求数据
const getRandomData = () => {
  const list = Array.from({ length: 30 }).map((item, index) => ({ id: index + 1 + Math.random(), name: index + "_hello", desc: "world_" + index }))

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(list)
    }, 2000)
  })
}

const actions = [
  { text: '复制', key: 'copy' },
  { text: '修改', key: 'edit' },
  { text: '保存', key: 'save' },
];

export default () => {
  // 数据列表
  const [list, setList] = useState([]);
  const listRef = createRef();

  const [row, setRow] = useState({});
  const actionSheetRef = createRef();

  const options = {
    key: "id",        // 数据遍历 索引
    title: "name",    // 展示标题字段
    description: "desc",  // 展示描述字段
    header: "标题内容",  // list 标题
    mode: "default"   // 默认和卡片两种模式  default | card
  };

  // 搜索框配置
  const searchBarOptions = {
    onSearch: (value) => {
      console.log(value, "___value___", list);
    }
  };

  // list 选项配置
  const listItemOptions = {
    onClick: (e, item) => {
      setRow(item);
      actionSheetRef.current.setVisible(true);
    }
  };

  // 上拉加载数据配置
  const infiniteScrollOptions = {
    loadMore: async () => {
      const res = await getRandomData();
      if (list.length < 100) {
        setList([...list, ...res])
      } else {
        listRef.current.setHasMore(false)
      }
    }
  }

  const onAction = (action, close, row) => {
    close();
  }

  return (
    <>
      <List
        ref={listRef}
        data={list}
        options={options}
        searchBarOptions={searchBarOptions}
        listItemOptions={listItemOptions}
        infiniteScrollOptions={infiniteScrollOptions}
      />
      <ActionSheet row={row} onAction={onAction} actions={actions} ref={actionSheetRef}></ActionSheet>
    </>
  )
}
```