@aliretail/react-materials-components
Version:
422 lines (340 loc) • 10.7 kB
JavaScript
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _Button from "@alifd/next/es/button";
import _extends from "@babel/runtime/helpers/extends";
import _Table from "@alifd/next/es/table";
var _excluded = ["children", "group"],
_excluded2 = ["formatConfig"];
import * as React from 'react';
import { formatAmount } from "./currency";
import Result from "../Result";
import * as R from 'ramda';
import moment from 'moment';
import numvert from 'numvert';
var Column = _Table.Column,
ColumnGroup = _Table.ColumnGroup,
GroupHeader = _Table.GroupHeader,
GroupFooter = _Table.GroupFooter;
export var EmptyBlock = /*#__PURE__*/React.createElement(Result, {
type: "card",
status: "DATA_EMPTY"
});
export var ErrorBlock = /*#__PURE__*/React.createElement(Result, {
type: "card",
status: "SYS_500"
});
export function getValidElement(ele, orElse) {
if (!ele) return null;
if ( /*#__PURE__*/React.isValidElement(ele)) return ele;
if (typeof orElse === 'function') {
return orElse();
}
return orElse;
}
export function getColumnKey(column) {
return column.key || column.dataIndex || column.title || column.group;
}
/**
* 从 localStorage 获取表格列配置缓存
*
* @param {string} storageKey localStorage 中的 key
* @return {*} 返回的普通对象，key 是表格列的 key 属性值，value 是 boolean，true 表示选中
*/
export function getColumnConfig(storageKey) {
try {
var config = localStorage.getItem(storageKey);
var res = JSON.parse(config);
return res || {};
} catch (e) {
return {};
}
}
/**
* 把表格列配置保存进 localStorage
* @param {string} storageKey localStorage 中的 key
* @param {Object} config 普通对象，key 是表格列的 key 属性值，value 是 boolean，true 表示选中
*/
export function saveColumnConfig(storageKey, config) {
if (config === void 0) {
config = {};
}
try {
localStorage.setItem(storageKey, JSON.stringify(config));
} catch (e) {// do nothing
}
}
export function getSelectedColumns(columnConfig, columns) {
if (columns === void 0) {
columns = [];
}
var res = [];
var useAll = Object.keys(columnConfig).length === 0;
columns.forEach(function (column) {
var key = getColumnKey(column);
if (column.group) {
var subKeys = getSelectedColumns(columnConfig, column.children);
if (subKeys.length === column.children.length) {
subKeys.unshift(key);
}
res = res.concat(subKeys);
} else if (useAll || columnConfig[key] === true) {
res.push(key);
}
});
return res;
}
export function filterColumns(columns, includeKeys) {
if (!includeKeys) return columns;
var ret = [];
columns.forEach(function (i) {
if (i.groupHeader || i.GroupFooter) {
ret.push(i);
} else if (i.group) {
if (includeKeys.includes(getColumnKey(i))) {
ret.push(i);
} else {
var groupCols = filterColumns(i.children, includeKeys);
if (groupCols.length) {
ret.push(_extends({}, i, {
children: groupCols
}));
}
}
} else if (includeKeys.includes(getColumnKey(i))) {
ret.push(i);
}
});
return ret;
}
export function isNumeric(value) {
return !isNaN(parseFloat(value)) && isFinite(value);
} // 通过 columnKey 获取到 column
export function getColumnByKey(key) {
return R.find(function (item) {
if (getColumnKey(item) === key) {
return true;
}
return false;
});
}
export function getCellRender(originalCol, externalConfig) {
var colKey = getColumnKey(originalCol);
var col = _extends({}, originalCol); // 一定可以通过 column 的 key 获取到原始柱值
// 包装成嵌套函数
var getBakColumn = function getBakColumn(columns) {
columns.forEach(function (columnItem) {
if (columnItem.group) {
getBakColumn(columnItem.children);
}
if (getColumnKey(columnItem) === colKey) {
var externalColConfig = R.pick([// 由于会导致报错，暂时去除 chosen 传输
// 'chosen',
'hidden', 'width', 'resizeWidth'], col);
col = _extends({}, columnItem, externalColConfig);
}
});
}; // 通过覆盖原有 columnItem， 获取过去的所有配置
if (externalConfig.bakColumns) {
getBakColumn(externalConfig.bakColumns);
}
if (externalConfig.resizable) {
// 如果 column 配置上有 resizeWidth 为最高优先级的 宽度
if (col.resizeWidth) {
col.width = col.resizeWidth;
delete col.resizeWidth;
}
col.resizable = true;
} // 有自定义 cell、无 type 或无 dataIndex 时，不附加
if (!col.type || !col.dataIndex || col.cell) {
return col;
}
var _col = col,
type = _col.type; // 不传多余的参数下去以免组件报不识别 prop 的 warning
delete col.type;
if (type === 'id') {
col.cell = function (value) {
return /*#__PURE__*/React.createElement("span", {
className: "cell-nowrap"
}, value);
};
} // 金额渲染
if (type === 'money') {
// 优先取 col 上的 currency 定义的货币，如果无，取 record 上的
var formatConfig = col.formatConfig || {};
if (!col.width) {
col.width = 145;
}
col.cell = function (value, index, record) {
var currency = record.currency;
var shouldAppendCurrency = currency && formatConfig.currencyVisible !== false;
var res = 0;
if (shouldAppendCurrency) {
res = formatAmount(value, currency);
} else {
res = formatAmount(value);
} // 金额 + 币种，宽度设置为 120
if (!col.width && shouldAppendCurrency) {
col.width = 120;
} // 金额展示，宽度设置为 90
if (!col.width && !shouldAppendCurrency) {
col.width = 90;
}
return /*#__PURE__*/React.createElement("span", {
className: "cell-money"
}, shouldAppendCurrency ? res + " " + currency : res);
};
col.align = 'right';
delete col.formatConfig;
delete col.appendCurrency;
} // 币种展示
if (type === 'currency') {
if (!col.width) {
col.width = 60;
}
col.cell = function (value) {
return /*#__PURE__*/React.createElement("span", {
className: "cell-currency"
}, value);
};
} // 时间渲染
if (type === 'datetime' || type === 'date') {
if (!col.width) {
col.width = 158;
}
col.align = 'center';
var _formatConfig = col.formatConfig || {}; // datetime 兜底 format 是 YYYY-MM-DD HH:mm:ss
// date 兜底 format 是 YYYY-MM-DD
var fmt = _formatConfig.format || (type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss');
col.cell = function (value) {
if (!value) {
return '--';
}
return moment(value).format(fmt);
};
delete col.formatConfig;
delete col.format;
} // 电话显示
if (type === 'phone') {
if (!col.width) {
col.width = 132;
}
} // OU 编码
if (type === 'ou') {
if (!col.width) {
col.width = 58;
}
col.align = 'center';
}
if (type === 'percent') {
if (!col.width) {
col.width = 80;
}
col.align = 'center';
col.cell = function (value) {
return numvert(value).format('0%');
};
}
if (type === 'link') {
var linkConfig = col.linkConfig || {};
col.cell = function (value) {
return /*#__PURE__*/React.createElement(_Button, _extends({
text: true,
type: "primary"
}, linkConfig), value);
};
}
if (type === 'tag') {
var _col2 = col,
tagCondition = _col2.tagCondition;
if (tagCondition) {
col.cell = function (value) {
var tagType = 'processing';
try {
tagType = tagCondition(value);
if (!['processing', 'disabled', 'error', 'success'].includes(tagType)) {
console.warn('[AliretailTablex] tagCondition 返回值不允许为 processing、disabled、error、success 以外的值');
} // eslint-disable-next-line no-empty
} catch (_unused) {}
if (tagType === 'processing') {
return /*#__PURE__*/React.createElement("span", {
className: "cell-tag cell-processing-tag"
}, value);
}
if (tagType === 'disabled') {
return /*#__PURE__*/React.createElement("span", {
className: "cell-tag cell-disabled-tag"
}, value);
}
if (tagType === 'error') {
return /*#__PURE__*/React.createElement("span", {
className: "cell-tag cell-error-tag"
}, value);
}
if (tagType === 'success') {
return /*#__PURE__*/React.createElement("span", {
className: "cell-tag cell-success-tag"
}, value);
}
};
}
delete col.tagCondition;
} // deprecated
if (type === 'status') {
var statusConfig = col.statusConfig || {};
col.cell = function (value) {
return /*#__PURE__*/React.createElement("span", {
style: {
color: statusConfig[value]
}
}, value);
};
}
if (type === 'bankCard') {
col.cell = function (value) {
if (value && isNumeric(value)) {
return value.replace(/(\d{4})(?=\d)/g, '$1 ');
}
};
if (!col.width) {
col.width = 183;
}
}
return R.omit(['formatConfig'], col);
}
export function renderColumns(columns, externalConfig) {
if (columns === void 0) {
columns = [];
}
// todo: render by type: time, money(currency, format)
return columns.filter(function (col) {
if (col.hidden === true) {
return false;
}
return true;
}).map(function (col) {
var key = getColumnKey(col); // column 为 group 模式
if (col.group) {
var children = col.children,
group = col.group,
others = _objectWithoutPropertiesLoose(col, _excluded);
return /*#__PURE__*/React.createElement(ColumnGroup, _extends({
key: key,
title: group
}, others), renderColumns(children, externalConfig));
}
var formatConfig = col.formatConfig,
colProps = _objectWithoutPropertiesLoose(col, _excluded2);
if (col.groupHeader) {
return /*#__PURE__*/React.createElement(GroupHeader, _extends({
key: key
}, colProps));
}
if (col.groupFooter) {
return /*#__PURE__*/React.createElement(GroupFooter, _extends({
key: key
}, colProps));
}
return /*#__PURE__*/React.createElement(Column, _extends({
key: key
}, getCellRender(col, externalConfig)));
});
}