diff --git a/package.json b/package.json index 2fe6cfa..554cb71 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne/info-page", - "version": "0.1.26", + "version": "0.1.27", "description": "一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式", "syntax": { "esmodules": true diff --git a/src/TableView/index.js b/src/TableView/index.js index 1cc3661..14deb52 100644 --- a/src/TableView/index.js +++ b/src/TableView/index.js @@ -4,7 +4,7 @@ import { Checkbox, Col, Empty, Row } from 'antd'; import { CheckOutlined } from '@ant-design/icons'; import classnames from 'classnames'; import get from 'lodash/get'; -import formatView from '../formatView'; +import computeColumnsValue, { computeDisplay, computeColumnsDisplay } from '../computeColumnsValue'; import { isEmpty } from '@kne/is-empty'; import style from './style.module.scss'; @@ -21,7 +21,7 @@ const TableView = p => { }, p ); - const { className, dataSource, columns, rowKey, rowSelection, valueIsEmpty, emptyIsPlaceholder, placeholder, empty, onRowSelect, render, ...others } = props; + const { className, dataSource, columns, rowKey, rowSelection, valueIsEmpty, emptyIsPlaceholder, placeholder, empty, onRowSelect, render, context, sticky, ...others } = props; const dataSourceMapRef = useRef(new Map()); const defaultSpan = useMemo(() => { const assignedSpan = columns.reduce((a, b) => { @@ -32,15 +32,16 @@ const TableView = p => { return Math.round(Math.max(24 - assignedSpan, 0) / undistributedColCount); }, [columns]); - const header =
; + const header =
; - const renderBody = dataSource => { + const renderBody = (dataSource, context) => { const getId = item => get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey); return dataSource && dataSource.length > 0 ? ( dataSource.map(item => { const id = getId(item); dataSourceMapRef.current.set(id, item); const isChecked = rowSelection?.selectedRowKeys && rowSelection.selectedRowKeys.indexOf(id) > -1; + const columnsValue = computeColumnsValue({ columns, emptyIsPlaceholder, valueIsEmpty, removeEmpty: false, dataSource: item, placeholder, context }); return ( { )} - {columns.map(column => { + {columnsValue.map(column => { const { name, span } = column; - const colItem = (item => { - const itemValue = - typeof column.getValueOf === 'function' - ? column.getValueOf(item, { - dataSource, - columns, - column, - target: item - }) - : get(item, column.name); - - const displayValue = (value => { - if (typeof column.format === 'function') { - return column.format(value, { - dataSource, - columns, - column, - target: item - }); - } - if (typeof column.format === 'string') { - const formatValue = formatView(value, column.format, { - dataSource, - columns, - column, - target: item - }); - if (formatValue) { - return formatValue; - } - } - return value; - })(itemValue); - - const itemIsEmpty = (column.valueIsEmpty || valueIsEmpty)(itemValue); - - if (!(column.hasOwnProperty('emptyIsPlaceholder') ? column.emptyIsPlaceholder : emptyIsPlaceholder) && itemIsEmpty) { - return null; - } - return Object.assign({}, column, { isEmpty: itemIsEmpty, value: displayValue }); - })(item); - return ( { }} className={classnames(style['col'], 'info-page-table-col')} > - - {colItem.isEmpty - ? typeof colItem.renderPlaceholder === 'function' - ? colItem.renderPlaceholder({ - column, - dataSource, - columns, - placeholder, - target: item - }) - : colItem.placeholder || placeholder - : typeof colItem.render === 'function' - ? colItem.render(colItem.value, { - column, - columns, - dataSource, - target: item - }) - : colItem.value} - + {computeDisplay({ column, placeholder, dataSource: item, context })} ); })} @@ -182,7 +122,7 @@ const TableView = p => { return (
{header} -
{renderBody(dataSource)}
+
{renderBody(dataSource, context)}
); }; diff --git a/src/computeColumnsValue.js b/src/computeColumnsValue.js index 7d24d5e..bffb49d 100644 --- a/src/computeColumnsValue.js +++ b/src/computeColumnsValue.js @@ -1,16 +1,16 @@ import get from 'lodash/get'; import formatView from './formatView'; -const computeColumnsValue = ({ columns, emptyIsPlaceholder, valueIsEmpty, dataSource }) => { - return columns - .map(item => { - const itemValue = typeof item.getValueOf === 'function' ? item.getValueOf(dataSource, { column: item }) : get(dataSource, item.name); +const computeColumnsValue = ({ columns, emptyIsPlaceholder, valueIsEmpty, removeEmpty = true, dataSource, context }) => { + return (output => (removeEmpty ? output.filter(item => !!item) : output))( + columns.map(item => { + const itemValue = typeof item.getValueOf === 'function' ? item.getValueOf(dataSource, { column: item, context }) : get(dataSource, item.name); const displayValue = (value => { if (typeof item.format === 'function') { - return item.format(value, { dataSource, column: item }); + return item.format(value, { dataSource, column: item, context }); } if (typeof item.format === 'string') { - const formatValue = formatView(value, item.format, { dataSource, column: item }); + const formatValue = formatView(value, item.format, { dataSource, column: item, context }); if (formatValue) { return formatValue; } @@ -25,7 +25,8 @@ const computeColumnsValue = ({ columns, emptyIsPlaceholder, valueIsEmpty, dataSo (typeof item.display === 'function' && item.display(itemValue, { dataSource, - column: item + column: item, + context }) === false) ) { return null; @@ -37,29 +38,31 @@ const computeColumnsValue = ({ columns, emptyIsPlaceholder, valueIsEmpty, dataSo return Object.assign({}, item, { isEmpty: itemIsEmpty, value: displayValue }); }) - .filter(item => !!item); + ); }; -export const computeDisplay = ({ column, dataSource, placeholder }) => { +export const computeDisplay = ({ column, dataSource, placeholder, context }) => { return column.isEmpty ? typeof column.renderPlaceholder === 'function' ? column.renderPlaceholder({ column: column, dataSource, - placeholder + placeholder, + context }) : column.placeholder || placeholder : typeof column.render === 'function' ? column.render(column.value, { column, - dataSource + dataSource, + context }) : column.value; }; -export const computeColumnsDisplay = ({ columns, emptyIsPlaceholder, valueIsEmpty, dataSource, placeholder }) => { - return computeColumnsValue({ columns, emptyIsPlaceholder, valueIsEmpty, dataSource }).map(column => { - return computeDisplay({ column, placeholder, dataSource }); +export const computeColumnsDisplay = ({ columns, emptyIsPlaceholder, valueIsEmpty, removeEmpty, dataSource, placeholder, context }) => { + return computeColumnsValue({ columns, emptyIsPlaceholder, valueIsEmpty, removeEmpty, dataSource, context }).map(column => { + return computeDisplay({ column, placeholder, dataSource, context }); }); };