补充高阶组件文档说明

This commit is contained in:
yangchch6 2019-05-06 11:17:40 +08:00
parent 90853f05e7
commit ddaadf2772
12 changed files with 19697 additions and 4970 deletions

View File

@ -94,7 +94,7 @@ class Demo extends Component {
| title | 表格标题 | Function | - | | title | 表格标题 | Function | - |
| footer | 表格尾部 | Function | - | | footer | 表格尾部 | Function | - |
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' | | emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
| scroll | 横向或纵向支持滚动,也可用于指定滚动区域的宽高度| `{ x: number | true | 百分比, y: number }` | {} | | scroll | 横向或纵向支持滚动,也可用于指定滚动区域的宽高度| `{ x: number / 百分比, y: number }` | {} |
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null | | rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body | | getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - | | expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |

View File

@ -2,7 +2,7 @@
* *
* @title 横向滚动条 * @title 横向滚动条
* @parent 滚动 Scroll View * @parent 滚动 Scroll View
* @description 设置`scroll`属性支持横向或纵向滚动x的取值可以是正整数(自动转为相应的像素值)百分比相对于表格真实宽度的百分比大于100%时会出现滚动条布尔值y的取值是正整数 * @description `scroll.x`的值代表表体内容的实际宽度默认情况下是根据各列宽度合计出来的其值超过父元素的宽度时会自动出现滚动条如设置 `scroll={{ x:1000 }}`可以手动添加横向滚动条也可以设置`scroll={{ x:"110%" }}`
* demo0201 * demo0201
*/ */
@ -141,7 +141,7 @@ const data = [
class Demo11 extends Component { class Demo11 extends Component {
render() { render() {
return ( return (
<Table columns={columns} data={data} scroll={{ x:true }} /> <Table columns={columns} data={data} scroll={{ x: "110%" }} />
); );
} }
} }

View File

@ -2,7 +2,7 @@
* *
* @title 纵向滚动条 * @title 纵向滚动条
* @parent 滚动 Scroll View * @parent 滚动 Scroll View
* @description 设置`scroll`属性支持横向或纵向滚动x/y的取值可以是正整数百分比布尔值 * @description 通过设置 `scroll.y` 可达到固定表头的效果如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条
* demo0202 * demo0202
*/ */
@ -100,7 +100,7 @@ const data = [
class Demo12 extends Component { class Demo12 extends Component {
render() { render() {
return ( return (
<Table columns={columns} data={data} scroll={{y:150 }} /> <Table columns={columns} data={data} scroll={{ y:150 }} />
); );
} }
} }

View File

@ -7,14 +7,12 @@
*/ */
import React, { Component } from 'react'; import React, { Component } from 'react';
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee"; import {Icon,Checkbox} from "tinper-bee";
import Table from '../../src'; import Table from '../../src';
import multiSelect from '../../src/lib/multiSelect'; import multiSelect from '../../src/lib/multiSelect';
import sort from '../../src/lib/sort'; import sort from '../../src/lib/sort';
const { Item } = Menu;
const data27 = [ const data27 = [
{ {
key: "1", key: "1",
@ -106,30 +104,10 @@ class Demo27 extends Component {
} }
render() { render() {
const menu1 = (
<Menu
onSelect={this.onSelect}>
<Item key="1">模态弹出</Item>
<Item key="2">链接跳转</Item>
<Item key="3">打开新页</Item>
</Menu>);
let multiObj = { let multiObj = {
type: "checkbox" type: "checkbox"
}; };
let columns27 = [ let columns27 = [
{ title: "关联",dataIndex: "link",key: "link",width: 80,
render: (text, record, index) => {
return (
<Dropdown
trigger={['click']}
overlay={menu1}
animation="slide-up"
>
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
</Dropdown>
)
}
},
{ {
title: "姓名", title: "姓名",
width: 180, width: 180,

View File

@ -21,7 +21,7 @@ const renderContent = (value, row, index) => {
}; };
const columns = [{ const columns = [{
title: 'Name', title: '姓名',
key: "name", key: "name",
dataIndex: 'name', dataIndex: 'name',
render: (text, row, index) => { render: (text, row, index) => {
@ -36,12 +36,12 @@ const columns = [{
}; };
}, },
}, { }, {
title: 'Age', title: '年龄',
key: "Age", key: "age",
dataIndex: 'age', dataIndex: 'age',
render: renderContent, render: renderContent,
}, { }, {
title: 'Home phone', title: '联系方式',
colSpan: 2, colSpan: 2,
key: "tel", key: "tel",
dataIndex: 'tel', dataIndex: 'tel',
@ -62,13 +62,13 @@ const columns = [{
return obj; return obj;
}, },
}, { }, {
title: 'Phone', title: '手机号',
colSpan: 0, colSpan: 0,
key: "phone", key: "phone",
dataIndex: 'phone', dataIndex: 'phone',
render: renderContent, render: renderContent,
}, { }, {
title: 'Address', title: '家庭住址',
key: "address", key: "address",
dataIndex: 'address', dataIndex: 'address',
render: renderContent, render: renderContent,
@ -76,39 +76,39 @@ const columns = [{
const data = [{ const data = [{
key: '1', key: '1',
name: 'John Brown', name: '小红',
age: 32, age: 32,
tel: '0571-22098909', tel: '0571-22098909',
phone: 18889898989, phone: 18889898989,
address: 'New York No. 1 Lake Park', address: '北京海淀',
}, { }, {
key: '2', key: '2',
name: 'Jim Green', name: '小明',
tel: '0571-22098333', tel: '0571-22098333',
phone: 18889898888, phone: 18889898888,
age: 42, age: 42,
address: 'London No. 1 Lake Park', address: '河北张家口',
}, { }, {
key: '3', key: '3',
name: 'Joe Black', name: '张三',
age: 32, age: 32,
tel: '0575-22098909', tel: '0575-22098909',
phone: 18900010002, phone: 18900010002,
address: 'Sidney No. 1 Lake Park', address: '浙江杭州',
}, { }, {
key: '4', key: '4',
name: 'Jim Red', name: '李四',
age: 18, age: 18,
tel: '0575-22098909', tel: '0575-22098909',
phone: 18900010002, phone: 18900010002,
address: 'London No. 2 Lake Park', address: '广州深圳',
}, { }, {
key: '5', key: '5',
name: 'Jake White', name: '王五',
age: 18, age: 18,
tel: '0575-22098909', tel: '0575-22098909',
phone: 18900010002, phone: 18900010002,
address: 'Dublin No. 2 Lake Park', address: '北京昌平',
}]; }];
class Demo15 extends Component { class Demo15 extends Component {

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

24439
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -58,7 +58,7 @@ import 'bee-table/build/Table.css';
| title | 表格标题 | Function | - | | title | 表格标题 | Function | - |
| footer | 表格尾部 | Function | - | | footer | 表格尾部 | Function | - |
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' | | emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
| scroll | 横向或纵向支持滚动,也可用于指定滚动区域的宽高度 | `{ x: number / true / 百分比 , y: number }` | {} | | scroll | 横向或纵向支持滚动,也可用于指定滚动区域的宽高度 | `{ x: number / 百分比 , y: number }` | {} |
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null | | rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body | | getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - | | expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
@ -121,10 +121,13 @@ import 'bee-table/build/Table.css';
### 高阶函数 ### 高阶函数
Table内部封装了六个高阶组件接收基础 Table 组件作为输入,输出一个新的复杂 Table 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。
Table拓展功能方法。注拼接成复杂功能的table组件不能在render中定义需要像此例子声明在组件的外侧不然在操作state会导致功能出现异常 ![image](https://user-images.githubusercontent.com/33412781/57187761-88701d00-6f26-11e9-9b31-d57c85ae3e23.png)
需要单独的去引用相应的js文件目录在lib文件夹示例如下 > 注不要在render方法内部使用高阶组件。这样不仅会有性能问题 重新挂载一个组件还会导致这个组件的状态和他所有的子节点的状态丢失。
使用时需要单独引用相应的js文件目录在lib文件夹以多选功能multiSelect为例
```js ```js
import multiSelect from "tinper-bee/lib/multiSelect.js"; import multiSelect from "tinper-bee/lib/multiSelect.js";
@ -132,22 +135,7 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
### multiSelect 多选功能 ### multiSelect 多选功能
#### API #### 如何使用
Data 数组参数:
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| _checked | 设置是否选中当前数据 | boolean | true/false |
| _disabled | 设置是否禁用当前数据 | boolean | true/false |
Table 组件参数:
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
#### 使用
```js ```js
import multiSelect from "tinper-bee/lib/multiSelect.js"; import multiSelect from "tinper-bee/lib/multiSelect.js";
@ -157,8 +145,35 @@ const MultiSelectTable = multiSelect(Table, Checkbox);
``` ```
#### API
Table 组件参数:
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
Data 数组参数:
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| _checked | 设置是否选中当前数据 | boolean | true/false |
| _disabled | 设置是否禁用当前数据 | boolean | true/false |
#### multiSelect 使用示例
- [多选功能](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%A4%9A%E9%80%89%E5%8A%9F%E8%83%BD)
### sort 排序功能 ### sort 排序功能
#### 如何使用
```js
import sort from "tinper-bee/lib/sort.js";
import { Table, Icon } from 'tinper-bee';
const SortTable = sort(Table, Icon);
```
#### API #### API
column 数组参数: column 数组参数:
@ -168,27 +183,14 @@ column 数组参数:
| sorter | 排序函数,可以自定义 | Function | 无 | | sorter | 排序函数,可以自定义 | Function | 无 |
| sorterClick | 排序钩子函数| Function | (coloum,type) | | sorterClick | 排序钩子函数| Function | (coloum,type) |
#### 使用 #### sort 使用示例
- [列排序](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%88%97%E6%8E%92%E5%BA%8F)
```js - [后端列排序](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%90%8E%E7%AB%AF%E5%88%97%E6%8E%92%E5%BA%8F)
import sort from "tinper-bee/lib/sort.js"; - [多列排序](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%A4%9A%E5%88%97%E6%8E%92%E5%BA%8F)
import { Table, Icon } from 'tinper-bee';
const SortTable = sort(Table, Icon);
```
### sum 合计功能 ### sum 合计功能
#### API #### 如何使用
column 数组参数:
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| sumCol | 该列设置为合计列,合计行中会显示合计数据 | boolean | false |
#### 使用
```js ```js
import sum from "tinper-bee/lib/sum.js"; import sum from "tinper-bee/lib/sum.js";
@ -198,8 +200,29 @@ const SumTable = sum(Table);
``` ```
#### API
column 数组参数:
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| sumCol | 该列设置为合计列,合计行中会显示合计数据 | boolean | false |
#### sum 使用示例
- [列合计(总计)](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%88%97%E5%90%88%E8%AE%A1%EF%BC%88%E6%80%BB%E8%AE%A1%EF%BC%89)
### dragColumn 拖拽列功能 ### dragColumn 拖拽列功能
#### 如何使用
```js
import dragColumn from "tinper-bee/lib/dragColumn.js";
import { Table } from 'tinper-bee';
const DragColumnTable = dragColumn(Table);
```
#### API #### API
Table 组件参数: Table 组件参数:
@ -211,32 +234,52 @@ Table 组件参数:
| onDrop | 拖拽释放回调函数(交换列) | function | () => {} | | onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} | | onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
#### 使用 #### dragColumn 使用示例
- [拖拽改变列顺序](http://design.yonyoucloud.com/tinper-bee/bee-table#%E6%8B%96%E6%8B%BD%E6%94%B9%E5%8F%98%E5%88%97%E9%A1%BA%E5%BA%8F)
```js - [拖拽改变列宽度](http://design.yonyoucloud.com/tinper-bee/bee-table#%E6%8B%96%E6%8B%BD%E6%94%B9%E5%8F%98%E5%88%97%E5%AE%BD%E5%BA%A6)
import dragColumn from "tinper-bee/lib/dragColumn.js";
import { Table } from 'tinper-bee';
const DragColumnTable = dragColumn(Table);
```
### filterColumn 过滤功能 ### filterColumn 过滤功能
#### API #### 如何使用
#### 使用
```js ```js
import filterColumn from "tinper-bee/lib/filterColumn.js"; import filterColumn from "tinper-bee/lib/filterColumn.js";
import { Table, Checkbox, Popover, Icon } from 'tinper-bee'; import { Table, Checkbox, Popover, Icon } from 'tinper-bee';
const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon); const FilterColumnTable = filterColumn(Table, Checkbox, Popover, Icon);
``` ```
#### API
#### filterColumn 示例
- [按条件、值过滤](http://design.yonyoucloud.com/tinper-bee/bee-table#%E6%8C%89%E6%9D%A1%E4%BB%B6%E3%80%81%E5%80%BC%E8%BF%87%E6%BB%A4)
- [复杂表格中行过滤](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%A4%8D%E6%9D%82%E8%A1%A8%E6%A0%BC%E4%B8%AD%E8%A1%8C%E8%BF%87%E6%BB%A4)
### bigData 大数据渲染
#### 如何使用
```js
import bigData from "tinper-bee/lib/bigData.js";
import { Table } from 'tinper-bee';
const BigDataTable = bigData(Table);
```
#### API
#### bigData 使用示例
- [万行以上数据渲染](http://design.yonyoucloud.com/tinper-bee/bee-table#%E4%B8%87%E8%A1%8C%E4%BB%A5%E4%B8%8A%E6%95%B0%E6%8D%AE%E6%B8%B2%E6%9F%93)
- [嵌套子表格滚动加载](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%B5%8C%E5%A5%97%E5%AD%90%E8%A1%A8%E6%A0%BC%E6%BB%9A%E5%8A%A8%E5%8A%A0%E8%BD%BD)
- [多功能表格滚动加载](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%A4%9A%E5%8A%9F%E8%83%BD%E8%A1%A8%E6%A0%BC%E6%BB%9A%E5%8A%A8%E5%8A%A0%E8%BD%BD)
- [层级树大数据场景](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%B1%82%E7%BA%A7%E6%A0%91%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%9C%BA%E6%99%AF)
### rendertype ### rendertype
在表格中提供了多种rendertype可以供选择比如下拉框输入框日期等 在表格中提供了多种rendertype可以供选择比如下拉框输入框日期等
@ -304,7 +347,7 @@ const InputRender = renderInput(Form, FormControl, Icon);
注:其他参数参见Datepicker组件参数配置 注:其他参数参见Datepicker组件参数配置
#### DateRender:使用 #### 使用
```js ```js
import renderDate from "tinper-bee/lib/DateRender.js"; import renderDate from "tinper-bee/lib/DateRender.js";
@ -333,7 +376,7 @@ const DateRender = renderDate(Datepicker, Icon);
注:其他参数参见Select组件参数配置 注:其他参数参见Select组件参数配置
#### SelectRender:使用 #### 使用
```js ```js
import renderSelect from "tinper-bee/lib/SelectRender.js"; import renderSelect from "tinper-bee/lib/SelectRender.js";

View File

@ -84,7 +84,8 @@
"sort 排序功能": "", "sort 排序功能": "",
"sum 合计功能": "", "sum 合计功能": "",
"dragColumn 拖拽列功能": "", "dragColumn 拖拽列功能": "",
"filterColumn 过滤功能": "" "filterColumn 过滤功能": "",
"bigData 大数据渲染": ""
}, },
"rendertype":{ "rendertype":{
"InputRender": "", "InputRender": "",

View File

@ -62,7 +62,7 @@
"component-classes": "^1.2.6", "component-classes": "^1.2.6",
"lodash.clonedeep": "^4.5.0", "lodash.clonedeep": "^4.5.0",
"object-path": "^0.11.3", "object-path": "^0.11.3",
"ref-tree": "^2.0.1-beta.1", "ref-tree": "2.0.1-beta.1",
"shallowequal": "^1.0.2", "shallowequal": "^1.0.2",
"throttle-debounce": "^2.0.1", "throttle-debounce": "^2.0.1",
"tinper-bee-core": "latest", "tinper-bee-core": "latest",