diff --git a/package.json b/package.json index c42c5d4..22c6dac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne/info-page", - "version": "0.1.5", + "version": "0.1.6", "description": "一般用在复杂的详情展示页面,InfoPage提供了一个标准的展示信息的格式", "syntax": { "esmodules": true diff --git a/src/TableView/index.js b/src/TableView/index.js index 9f6d6be..a178c8a 100644 --- a/src/TableView/index.js +++ b/src/TableView/index.js @@ -1,60 +1,11 @@ import React, { useMemo } from 'react'; import { isEmpty } from '@kne/is-empty'; -import { Row, Col } from 'antd'; +import { Col, Row } from 'antd'; import get from 'lodash/get'; -import dayjs from 'dayjs'; import classnames from 'classnames'; import boxComputed from './boxComputed'; import style from './style.module.scss'; - -const defaultFormat = { - date: (value, { args }) => { - const template = args[0] || 'YYYY-MM-DD'; - return dayjs(value).format(template); - }, - datetime: (value, { args }) => { - const template = args[0] || 'YYYY-MM-DD HH:mm:ss'; - return dayjs(value).format(template); - }, - dateRange: (value, { args }) => { - const template = args[0] || 'YYYY-MM-DD', - allowNull = args[1]; - if (!isEmpty(value[0]) && !isEmpty(value[1])) { - return `${dayjs(value[0]).format(template)}~${dayjs(value[1]).format(template)}`; - } - if (allowNull === 'allow' && !isEmpty(value[0])) { - return `${dayjs(value[0]).format(template)}以后`; - } - if (allowNull === 'allow' && !isEmpty(value[1])) { - return `${dayjs(value[1]).format(template)}以前`; - } - return ''; - }, - boolean: value => { - if (value) { - return '是'; - } - return '否'; - }, - number: (value, { args }) => { - const style = args[0] || 'decimal', - unit = args[1] || 1, - maximumFractionDigits = args[2] || 2, - roundingMode = args[3] || 'halfExpand'; - return new Intl.NumberFormat( - {}, - { - style, - maximumFractionDigits, - roundingMode - } - ).format(value / unit); - }, - money: (value, { args }) => { - const unit = args[0] || '元'; - return `${value}${unit}`; - } -}; +import { formatView } from '../defaultFormat'; const TableView = props => { const { dataSource, columns, col, valueIsEmpty, emptyIsPlaceholder, placeholder, className } = Object.assign( @@ -79,15 +30,9 @@ const TableView = props => { return item.format(value, { dataSource, column: item }); } if (typeof item.format === 'string') { - const formatList = item.format.split(' ').filter(item => !!item); - if (formatList.length > 0) { - return formatList.reduce((value, format) => { - const [name, ...args] = format.split('-'); - if (typeof defaultFormat[name] === 'function') { - return defaultFormat[name](value, { dataSource, column: item, args }); - } - return value; - }, value); + const formatValue = formatView(value, item.format, { dataSource, column: item }); + if (formatValue) { + return formatValue; } } return value; diff --git a/src/defaultFormat.js b/src/defaultFormat.js new file mode 100644 index 0000000..31daea8 --- /dev/null +++ b/src/defaultFormat.js @@ -0,0 +1,66 @@ +import dayjs from 'dayjs'; +import { isEmpty } from '@kne/is-empty'; + +const defaultFormat = { + date: (value, { args }) => { + const template = args[0] || 'YYYY-MM-DD'; + return dayjs(value).format(template); + }, + datetime: (value, { args }) => { + const template = args[0] || 'YYYY-MM-DD HH:mm:ss'; + return dayjs(value).format(template); + }, + dateRange: (value, { args }) => { + const template = args[0] || 'YYYY-MM-DD', + allowNull = args[1]; + if (!isEmpty(value[0]) && !isEmpty(value[1])) { + return `${dayjs(value[0]).format(template)}~${dayjs(value[1]).format(template)}`; + } + if (allowNull === 'allow' && !isEmpty(value[0])) { + return `${dayjs(value[0]).format(template)}以后`; + } + if (allowNull === 'allow' && !isEmpty(value[1])) { + return `${dayjs(value[1]).format(template)}以前`; + } + return ''; + }, + boolean: value => { + if (value) { + return '是'; + } + return '否'; + }, + number: (value, { args }) => { + const style = args[0] || 'decimal', + unit = args[1] || 1, + maximumFractionDigits = args[2] || 2, + roundingMode = args[3] || 'halfExpand'; + return new Intl.NumberFormat( + {}, + { + style, + maximumFractionDigits, + roundingMode + } + ).format(value / unit); + }, + money: (value, { args }) => { + const unit = args[0] || '元'; + return `${value}${unit}`; + } +}; + +export const formatView = (value, format, context) => { + const formatList = format.split(' ').filter(item => !!item); + if (formatList.length > 0) { + return formatList.reduce((value, format) => { + const [name, ...args] = format.split('-'); + if (typeof defaultFormat[name] === 'function') { + return defaultFormat[name](value, Object.assign({}, context, { args })); + } + return value; + }, value); + } +}; + +export default defaultFormat; diff --git a/src/index.js b/src/index.js index 6e05362..4daf6ab 100644 --- a/src/index.js +++ b/src/index.js @@ -2,3 +2,4 @@ export { default } from './InfoPage'; export { default as Content } from './Content'; export { default as Descriptions } from './Descriptions'; export { default as TableView } from './TableView'; +export * from './defaultFormat';