@aliretail/react-materials-components
Version:
463 lines (358 loc) • 13 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ErrorBlock = exports.EmptyBlock = void 0;
exports.filterColumns = filterColumns;
exports.getCellRender = getCellRender;
exports.getColumnByKey = getColumnByKey;
exports.getColumnConfig = getColumnConfig;
exports.getColumnKey = getColumnKey;
exports.getSelectedColumns = getSelectedColumns;
exports.getValidElement = getValidElement;
exports.isNumeric = isNumeric;
exports.renderColumns = renderColumns;
exports.saveColumnConfig = saveColumnConfig;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
var React = _interopRequireWildcard(require("react"));
var _currency = require("./currency");
var _Result = _interopRequireDefault(require("../Result"));
var R = _interopRequireWildcard(require("ramda"));
var _moment = _interopRequireDefault(require("moment"));
var _numvert = _interopRequireDefault(require("numvert"));
var _excluded = ["children", "group"],
_excluded2 = ["formatConfig"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var Column = _table["default"].Column,
ColumnGroup = _table["default"].ColumnGroup,
GroupHeader = _table["default"].GroupHeader,
GroupFooter = _table["default"].GroupFooter;
var EmptyBlock = /*#__PURE__*/React.createElement(_Result["default"], {
type: "card",
status: "DATA_EMPTY"
});
exports.EmptyBlock = EmptyBlock;
var ErrorBlock = /*#__PURE__*/React.createElement(_Result["default"], {
type: "card",
status: "SYS_500"
});
exports.ErrorBlock = ErrorBlock;
function getValidElement(ele, orElse) {
if (!ele) return null;
if ( /*#__PURE__*/React.isValidElement(ele)) return ele;
if (typeof orElse === 'function') {
return orElse();
}
return orElse;
}
function getColumnKey(column) {
return column.key || column.dataIndex || column.title || column.group;
}
/**
* 从 localStorage 获取表格列配置缓存
*
* @param {string} storageKey localStorage 中的 key
* @return {*} 返回的普通对象，key 是表格列的 key 属性值，value 是 boolean，true 表示选中
*/
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 表示选中
*/
function saveColumnConfig(storageKey, config) {
if (config === void 0) {
config = {};
}
try {
localStorage.setItem(storageKey, JSON.stringify(config));
} catch (e) {// do nothing
}
}
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;
}
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((0, _extends2["default"])({}, i, {
children: groupCols
}));
}
}
} else if (includeKeys.includes(getColumnKey(i))) {
ret.push(i);
}
});
return ret;
}
function isNumeric(value) {
return !isNaN(parseFloat(value)) && isFinite(value);
} // 通过 columnKey 获取到 column
function getColumnByKey(key) {
return R.find(function (item) {
if (getColumnKey(item) === key) {
return true;
}
return false;
});
}
function getCellRender(originalCol, externalConfig) {
var colKey = getColumnKey(originalCol);
var col = (0, _extends2["default"])({}, 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 = (0, _extends2["default"])({}, 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 = (0, _currency.formatAmount)(value, currency);
} else {
res = (0, _currency.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 (0, _moment["default"])(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 (0, _numvert["default"])(value).format('0%');
};
}
if (type === 'link') {
var linkConfig = col.linkConfig || {};
col.cell = function (value) {
return /*#__PURE__*/React.createElement(_button["default"], (0, _extends2["default"])({
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);
}
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 = (0, _objectWithoutPropertiesLoose2["default"])(col, _excluded);
return /*#__PURE__*/React.createElement(ColumnGroup, (0, _extends2["default"])({
key: key,
title: group
}, others), renderColumns(children, externalConfig));
}
var formatConfig = col.formatConfig,
colProps = (0, _objectWithoutPropertiesLoose2["default"])(col, _excluded2);
if (col.groupHeader) {
return /*#__PURE__*/React.createElement(GroupHeader, (0, _extends2["default"])({
key: key
}, colProps));
}
if (col.groupFooter) {
return /*#__PURE__*/React.createElement(GroupFooter, (0, _extends2["default"])({
key: key
}, colProps));
}
return /*#__PURE__*/React.createElement(Column, (0, _extends2["default"])({
key: key
}, getCellRender(col, externalConfig)));
});
}