Skip to content

Commit d3914a1

Browse files
zhipenglinzhipenglin
authored
Merge pull request #58 from kne-union/linzp
修改columns渲染实现，添加context
2 parents 42a816a + 737dc6c commit d3914a1

File tree

3 files changed

+26
-83
lines changed

3 files changed

+26
-83
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kne/info-page",
3-
"version": "0.1.26",
3+
"version": "0.1.27",
44
"description": "一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式",
55
"syntax": {
66
"esmodules": true

‎src/TableView/index.js‎

Lines changed: 8 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Checkbox, Col, Empty, Row } from 'antd';
44
import { CheckOutlined } from '@ant-design/icons';
55
import classnames from 'classnames';
66
import get from 'lodash/get';
7-
import formatView from '../formatView';
7+
import computeColumnsValue, { computeDisplay, computeColumnsDisplay } from '../computeColumnsValue';
88
import { isEmpty } from '@kne/is-empty';
99
import style from './style.module.scss';
1010

@@ -21,7 +21,7 @@ const TableView = p => {
2121
},
2222
p
2323
);
24-
const { className, dataSource, columns, rowKey, rowSelection, valueIsEmpty, emptyIsPlaceholder, placeholder, empty, onRowSelect, render, ...others } = props;
24+
const { className, dataSource, columns, rowKey, rowSelection, valueIsEmpty, emptyIsPlaceholder, placeholder, empty, onRowSelect, render, context, sticky, ...others } = props;
2525
const dataSourceMapRef = useRef(new Map());
2626
const defaultSpan = useMemo(() => {
2727
const assignedSpan = columns.reduce((a, b) => {
@@ -32,15 +32,16 @@ const TableView = p => {
3232
return Math.round(Math.max(24 - assignedSpan, 0) / undistributedColCount);
3333
}, [columns]);
3434

35-
const header = <Header {...props} defaultSpan={defaultSpan} colsSize={colsSize} setColsSize={setColsSize} />;
35+
const header = <Header {...props} sticky={sticky} defaultSpan={defaultSpan} colsSize={colsSize} setColsSize={setColsSize} />;
3636

37-
const renderBody = dataSource => {
37+
const renderBody = (dataSource, context) => {
3838
const getId = item => get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey);
3939
return dataSource && dataSource.length > 0 ? (
4040
dataSource.map(item => {
4141
const id = getId(item);
4242
dataSourceMapRef.current.set(id, item);
4343
const isChecked = rowSelection?.selectedRowKeys && rowSelection.selectedRowKeys.indexOf(id) > -1;
44+
const columnsValue = computeColumnsValue({ columns, emptyIsPlaceholder, valueIsEmpty, removeEmpty: false, dataSource: item, placeholder, context });
4445
return (
4546
<Row
4647
wrap={false}
@@ -88,50 +89,8 @@ const TableView = p => {
8889
)}
8990
<Col flex={1}>
9091
<Row className={classnames('info-page-table-row-content')} wrap={false}>
91-
{columns.map(column => {
92+
{columnsValue.map(column => {
9293
const { name, span } = column;
93-
const colItem = (item => {
94-
const itemValue =
95-
typeof column.getValueOf === 'function'
96-
? column.getValueOf(item, {
97-
dataSource,
98-
columns,
99-
column,
100-
target: item
101-
})
102-
: get(item, column.name);
103-
104-
const displayValue = (value => {
105-
if (typeof column.format === 'function') {
106-
return column.format(value, {
107-
dataSource,
108-
columns,
109-
column,
110-
target: item
111-
});
112-
}
113-
if (typeof column.format === 'string') {
114-
const formatValue = formatView(value, column.format, {
115-
dataSource,
116-
columns,
117-
column,
118-
target: item
119-
});
120-
if (formatValue) {
121-
return formatValue;
122-
}
123-
}
124-
return value;
125-
})(itemValue);
126-
127-
const itemIsEmpty = (column.valueIsEmpty || valueIsEmpty)(itemValue);
128-
129-
if (!(column.hasOwnProperty('emptyIsPlaceholder') ? column.emptyIsPlaceholder : emptyIsPlaceholder) && itemIsEmpty) {
130-
return null;
131-
}
132-
return Object.assign({}, column, { isEmpty: itemIsEmpty, value: displayValue });
133-
})(item);
134-
13594
return (
13695
<Col
13796
key={name}
@@ -143,26 +102,7 @@ const TableView = p => {
143102
}}
144103
className={classnames(style['col'], 'info-page-table-col')}
145104
>
146-
<span className={style['col-content']}>
147-
{colItem.isEmpty
148-
? typeof colItem.renderPlaceholder === 'function'
149-
? colItem.renderPlaceholder({
150-
column,
151-
dataSource,
152-
columns,
153-
placeholder,
154-
target: item
155-
})
156-
: colItem.placeholder || placeholder
157-
: typeof colItem.render === 'function'
158-
? colItem.render(colItem.value, {
159-
column,
160-
columns,
161-
dataSource,
162-
target: item
163-
})
164-
: colItem.value}
165-
</span>
105+
<span className={style['col-content']}>{computeDisplay({ column, placeholder, dataSource: item, context })}</span>
166106
</Col>
167107
);
168108
})}
@@ -182,7 +122,7 @@ const TableView = p => {
182122
return (
183123
<div {...others} className={classnames(style['table'], 'info-page-table', className)}>
184124
{header}
185-
<div className={classnames('info-page-table-body')}>{renderBody(dataSource)}</div>
125+
<div className={classnames('info-page-table-body')}>{renderBody(dataSource, context)}</div>
186126
</div>
187127
);
188128
};

‎src/computeColumnsValue.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import get from 'lodash/get';
22
import formatView from './formatView';
33

4-
const computeColumnsValue = ({ columns, emptyIsPlaceholder, valueIsEmpty, dataSource }) => {
5-
return columns
6-
.map(item => {
7-
const itemValue = typeof item.getValueOf === 'function' ? item.getValueOf(dataSource, { column: item }) : get(dataSource, item.name);
4+
const computeColumnsValue = ({ columns, emptyIsPlaceholder, valueIsEmpty, removeEmpty = true, dataSource, context }) => {
5+
return (output => (removeEmpty ? output.filter(item => !!item) : output))(
6+
columns.map(item => {
7+
const itemValue = typeof item.getValueOf === 'function' ? item.getValueOf(dataSource, { column: item, context }) : get(dataSource, item.name);
88
const displayValue = (value => {
99
if (typeof item.format === 'function') {
10-
return item.format(value, { dataSource, column: item });
10+
return item.format(value, { dataSource, column: item, context });
1111
}
1212
if (typeof item.format === 'string') {
13-
const formatValue = formatView(value, item.format, { dataSource, column: item });
13+
const formatValue = formatView(value, item.format, { dataSource, column: item, context });
1414
if (formatValue) {
1515
return formatValue;
1616
}
@@ -25,7 +25,8 @@ const computeColumnsValue = ({ columns, emptyIsPlaceholder, valueIsEmpty, dataSo
2525
(typeof item.display === 'function' &&
2626
item.display(itemValue, {
2727
dataSource,
28-
column: item
28+
column: item,
29+
context
2930
}) === false)
3031
) {
3132
return null;
@@ -37,29 +38,31 @@ const computeColumnsValue = ({ columns, emptyIsPlaceholder, valueIsEmpty, dataSo
3738

3839
return Object.assign({}, item, { isEmpty: itemIsEmpty, value: displayValue });
3940
})
40-
.filter(item => !!item);
41+
);
4142
};
4243

43-
export const computeDisplay = ({ column, dataSource, placeholder }) => {
44+
export const computeDisplay = ({ column, dataSource, placeholder, context }) => {
4445
return column.isEmpty
4546
? typeof column.renderPlaceholder === 'function'
4647
? column.renderPlaceholder({
4748
column: column,
4849
dataSource,
49-
placeholder
50+
placeholder,
51+
context
5052
})
5153
: column.placeholder || placeholder
5254
: typeof column.render === 'function'
5355
? column.render(column.value, {
5456
column,
55-
dataSource
57+
dataSource,
58+
context
5659
})
5760
: column.value;
5861
};
5962

60-
export const computeColumnsDisplay = ({ columns, emptyIsPlaceholder, valueIsEmpty, dataSource, placeholder }) => {
61-
return computeColumnsValue({ columns, emptyIsPlaceholder, valueIsEmpty, dataSource }).map(column => {
62-
return computeDisplay({ column, placeholder, dataSource });
63+
export const computeColumnsDisplay = ({ columns, emptyIsPlaceholder, valueIsEmpty, removeEmpty, dataSource, placeholder, context }) => {
64+
return computeColumnsValue({ columns, emptyIsPlaceholder, valueIsEmpty, removeEmpty, dataSource, context }).map(column => {
65+
return computeDisplay({ column, placeholder, dataSource, context });
6366
});
6467
};
6568

0 commit comments

Comments
 (0)