Skip to content

Commit 00b4af0

Browse files
tinyminstinymins
committed
feat(docs): add schema.columns documents
1 parent 2ec0dab commit 00b4af0

File tree

22 files changed

+1202
-21
lines changed

22 files changed

+1202
-21
lines changed

‎.umirc.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,20 @@ const umiConfig: IConfig = {
111111
'/drip-table/schema/style',
112112
'/drip-table/schema/inner-class-name',
113113
'/drip-table/schema/inner-style',
114+
'/drip-table/schema/columns/index',
115+
'/drip-table/schema/columns/key',
116+
'/drip-table/schema/columns/title',
117+
'/drip-table/schema/columns/data-index',
118+
'/drip-table/schema/columns/default-value',
119+
'/drip-table/schema/columns/width',
120+
'/drip-table/schema/columns/align',
121+
'/drip-table/schema/columns/description',
122+
'/drip-table/schema/columns/fixed',
123+
'/drip-table/schema/columns/hidable',
124+
'/drip-table/schema/columns/filters',
125+
'/drip-table/schema/columns/default-filtered-value',
126+
'/drip-table/schema/columns/component',
127+
'/drip-table/schema/columns/options',
114128
'/drip-table/schema/bordered',
115129
'/drip-table/schema/show-header',
116130
'/drip-table/schema/header/index',
@@ -133,6 +147,7 @@ const umiConfig: IConfig = {
133147
path: '/drip-table/types',
134148
children: [
135149
'/drip-table/types/generic-render-element',
150+
'/drip-table/types/column-schema',
136151
],
137152
},
138153
{

‎docs/drip-table/props/on-change.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,6 @@ const dataSource = Array(100).fill(0).map((_, i) => ({
8585
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
8686
}));
8787

88-
console.log(dataSource);
89-
9088
const Demo = () => {
9189
return (
9290
<DripTable

‎docs/drip-table/props/on-display-column-keys-change.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# onDisplayColumnKeysChange
22

3-
- 描述：用户修改展示的列时，配合 [`schema.columns.hidable`](/drip-table/props/schema/columns/hidable) 使用。
3+
- 描述：用户修改展示的列时，配合 [`schema.columns.hidable`](/drip-table/schema/columns/hidable) 使用。
44
- 类型：
55

66
```typescript

‎docs/drip-table/props/on-page-change.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,6 @@ const dataSource = Array(100).fill(0).map((_, i) => ({
6161
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
6262
}));
6363

64-
console.log(dataSource);
65-
6664
const Demo = () => {
6765
return (
6866
<DripTable

‎docs/drip-table/schema/columns.md‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎docs/drip-table/schema/columns/align.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# columns.align
2+
3+
- 描述：表格列对齐
4+
- 类型：`'left' | 'center' | 'right'`
5+
- 默认值：`'left'`
6+
7+
```jsx
8+
/**
9+
* transform: true
10+
* defaultShowCode: false
11+
* hideActions: ["CSB"]
12+
*/
13+
import React from "react";
14+
import DripTable from "drip-table";
15+
import DripTableDriverAntDesign from "drip-table-driver-antd";
16+
import "antd/dist/antd.css";
17+
import "drip-table/dist/index.css";
18+
19+
const schema = {
20+
columns: [
21+
{
22+
key: "mock_1",
23+
title: "商品名称",
24+
dataIndex: "name",
25+
component: "text",
26+
options: { mode: "single", maxRow: 1 },
27+
},
28+
{
29+
key: "mock_2",
30+
title: "商品详情",
31+
align: "center",
32+
dataIndex: "description",
33+
component: "text",
34+
options: { mode: "single", ellipsis: true, maxRow: 1 },
35+
},
36+
{
37+
key: "mock_3",
38+
title: "Custom Component",
39+
align: "right",
40+
dataIndex: "description",
41+
component: "custom::Sample",
42+
options: {
43+
someCustomConfigure: "configure-sample",
44+
},
45+
},
46+
],
47+
};
48+
49+
const dataSource = Array(10).fill(0).map((_, i) => ({
50+
id: i,
51+
name: "商品" + i,
52+
price: 7999,
53+
status: "onSale",
54+
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
55+
}));
56+
57+
const SampleComponent = (props) => (
58+
<div>Sample: {props.schema.options.someCustomConfigure}</div>
59+
);
60+
SampleComponent.componentName = 'Sample';
61+
SampleComponent.schema = { // https://ajv.js.org/json-schema.html
62+
properties: {
63+
someCustomConfigure: { type: 'string' },
64+
},
65+
};
66+
67+
const Demo = () => {
68+
return (
69+
<DripTable
70+
driver={DripTableDriverAntDesign}
71+
schema={schema}
72+
dataSource={dataSource}
73+
components={{
74+
custom: {
75+
Sample: SampleComponent,
76+
},
77+
}}
78+
/>
79+
);
80+
};
81+
82+
export default Demo;
83+
```

‎docs/drip-table/schema/columns/component.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# columns.component
2+
3+
- 描述：组件类型标识符，自定义开发的业务组件以 `命名空间::组件名称` 格式填写；通过 [`components`](/drip-table/props/components) 属性传入组件库实现
4+
- 类型：`string`
5+
- 默认值：必填
6+
7+
```jsx
8+
/**
9+
* transform: true
10+
* defaultShowCode: false
11+
* hideActions: ["CSB"]
12+
*/
13+
import React from "react";
14+
import DripTable from "drip-table";
15+
import DripTableDriverAntDesign from "drip-table-driver-antd";
16+
import "antd/dist/antd.css";
17+
import "drip-table/dist/index.css";
18+
19+
const schema = {
20+
columns: [
21+
{
22+
key: "mock_1",
23+
title: "商品名称",
24+
dataIndex: "name",
25+
component: "text",
26+
options: { mode: "single", maxRow: 1 },
27+
},
28+
{
29+
key: "mock_2",
30+
title: "商品详情",
31+
align: "center",
32+
dataIndex: "description",
33+
component: "text",
34+
options: { mode: "single", ellipsis: true, maxRow: 1 },
35+
},
36+
{
37+
key: "mock_3",
38+
title: "Custom Component",
39+
align: "center",
40+
dataIndex: "description",
41+
component: "custom::Sample",
42+
options: {
43+
someCustomConfigure: "configure-sample",
44+
},
45+
},
46+
],
47+
};
48+
49+
const dataSource = Array(10).fill(0).map((_, i) => ({
50+
id: i,
51+
name: "商品" + i,
52+
price: 7999,
53+
status: "onSale",
54+
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
55+
}));
56+
57+
const SampleComponent = (props) => (
58+
<div>Sample: {props.schema.options.someCustomConfigure}</div>
59+
);
60+
SampleComponent.componentName = 'Sample';
61+
SampleComponent.schema = { // https://ajv.js.org/json-schema.html
62+
properties: {
63+
someCustomConfigure: { type: 'string' },
64+
},
65+
};
66+
67+
const Demo = () => {
68+
return (
69+
<DripTable
70+
driver={DripTableDriverAntDesign}
71+
schema={schema}
72+
dataSource={dataSource}
73+
components={{
74+
custom: {
75+
Sample: SampleComponent,
76+
},
77+
}}
78+
/>
79+
);
80+
};
81+
82+
export default Demo;
83+
```

‎docs/drip-table/schema/columns/data-index.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# columns.dataIndex
2+
3+
- 描述：列数据在数据项中对应的路径，支持通过数组查询嵌套路径
4+
- 类型：`string | string[]`
5+
- 默认值：必填
6+
7+
```jsx
8+
/**
9+
* transform: true
10+
* defaultShowCode: false
11+
* hideActions: ["CSB"]
12+
*/
13+
import React from "react";
14+
import DripTable from "drip-table";
15+
import DripTableDriverAntDesign from "drip-table-driver-antd";
16+
import "antd/dist/antd.css";
17+
import "drip-table/dist/index.css";
18+
19+
const schema = {
20+
columns: [
21+
{
22+
key: "mock_1",
23+
title: "商品名称",
24+
dataIndex: "name",
25+
component: "text",
26+
options: { mode: "single", maxRow: 1 },
27+
},
28+
{
29+
key: "mock_2",
30+
title: "商品详情",
31+
align: "center",
32+
dataIndex: "description",
33+
component: "text",
34+
options: { mode: "single", ellipsis: true, maxRow: 1 },
35+
},
36+
{
37+
key: "mock_3",
38+
title: "商品价格 (CNY)",
39+
width: 200,
40+
align: "center",
41+
dataIndex: ["price", "cny"],
42+
component: "text",
43+
options: { mode: "single", ellipsis: true, maxRow: 1 },
44+
},
45+
{
46+
key: "mock_4",
47+
title: "商品价格 (USD)",
48+
width: 200,
49+
align: "center",
50+
dataIndex: ["price", "usd"],
51+
component: "text",
52+
options: { mode: "single", ellipsis: true, maxRow: 1 },
53+
},
54+
],
55+
};
56+
57+
const dataSource = Array(10).fill(0).map((_, i) => ({
58+
id: i,
59+
name: "商品" + i,
60+
price: { cny: 7999, usd: 1192 },
61+
status: "onSale",
62+
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
63+
}));
64+
65+
const Demo = () => {
66+
return (
67+
<DripTable
68+
driver={DripTableDriverAntDesign}
69+
schema={schema}
70+
dataSource={dataSource}
71+
/>
72+
);
73+
};
74+
75+
export default Demo;
76+
```

‎docs/drip-table/schema/columns/default-filtered-value.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# columns.defaultFilteredValue
2+
3+
- 描述：默认数据过滤器值
4+
- 类型：`React.Key[] | null`
5+
- 默认值：`undefined`
6+
7+
```jsx
8+
/**
9+
* transform: true
10+
* defaultShowCode: true
11+
* hideActions: ["CSB"]
12+
*/
13+
import { message } from "antd";
14+
import React from "react";
15+
import DripTable from "drip-table";
16+
import DripTableDriverAntDesign from "drip-table-driver-antd";
17+
import "antd/dist/antd.css";
18+
import "drip-table/dist/index.css";
19+
20+
const schema = {
21+
columns: [
22+
{
23+
key: "mock_1",
24+
title: "商品名称",
25+
dataIndex: "name",
26+
component: "text",
27+
options: { mode: "single", maxRow: 1 },
28+
},
29+
{
30+
key: "mock_2",
31+
title: "商品详情",
32+
align: "center",
33+
dataIndex: "description",
34+
component: "text",
35+
options: { mode: "single", ellipsis: true, maxRow: 1 },
36+
},
37+
{
38+
key: 'mock_3',
39+
title: '库存状态',
40+
width: 150,
41+
align: 'center',
42+
dataIndex: 'status',
43+
description: '这是一条提示信息',
44+
hidable: true,
45+
filters: [
46+
{ text: '售卖中', value: 'onSale' },
47+
{ text: '已售罄', value: 'soldOut' },
48+
],
49+
defaultFilteredValue: ['onSale'],
50+
component: 'text',
51+
options: {
52+
mode: 'single',
53+
i18n: {
54+
onSale: '售卖中',
55+
soldOut: '已售罄',
56+
},
57+
},
58+
},
59+
],
60+
};
61+
62+
const dataSource = Array(100).fill(0).map((_, i) => ({
63+
id: i + 1,
64+
name: `商品${i + 1}`,
65+
price: 7999,
66+
status: Math.random() > 0.5 ? "onSale" : "soldOut",
67+
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
68+
}));
69+
70+
const Demo = () => {
71+
const [ds, setDS] = React.useState(dataSource);
72+
return (
73+
<DripTable
74+
driver={DripTableDriverAntDesign}
75+
schema={schema}
76+
dataSource={ds}
77+
onChange={({ pagination, filters }) => {
78+
if (filters.status?.length) {
79+
setDS(dataSource.filter(d => filters.status.includes(d.status)));
80+
} else {
81+
setDS(dataSource);
82+
}
83+
message.info(`过滤器：${JSON.stringify(filters)}，分页器：current = ${pagination.current}, pageSize = ${pagination.pageSize}。`);
84+
console.log('onChange', pagination, filters);
85+
}}
86+
/>
87+
);
88+
};
89+
90+
export default Demo;
91+
```

0 commit comments

Comments
 (0)