@aliretail/react-materials-components
Version:
168 lines (128 loc) • 8.07 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
var React = _interopRequireWildcard(require("react"));
var R = _interopRequireWildcard(require("ramda"));
var _numvert = _interopRequireDefault(require("numvert"));
var _TableContext = require("../../TableContext");
var _utils = require("./utils");
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 GroupHeader = _table["default"].GroupHeader,
GroupFooter = _table["default"].GroupFooter;
var AliretailTable = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(AliretailTable, _React$Component);
function AliretailTable() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this.renderBodyByColumns = function () {
var _this$props = _this.props,
columns = _this$props.columns,
resizable = _this$props.resizable,
bakColumns = _this$props.bakColumns,
children = _this$props.children; // 如果使用 children 注入模式，则不使用 column 配置
if (!columns || children) return null;
return (0, _utils.renderColumns)(columns, {
resizable: resizable,
bakColumns: bakColumns
});
};
_this.onResizeChange = function (dataIndex, width) {
var _this$props2 = _this.props,
columns = _this$props2.columns,
tableStateChange = _this$props2.tableStateChange;
columns.map(function (columnItem) {
if (columnItem.dataIndex === dataIndex) {
columnItem.resizeWidth = columnItem.resizeWidth ? columnItem.resizeWidth + width : (columnItem.width || 200) + width;
}
return columnItem;
});
tableStateChange({
columns: columns
});
};
return _this;
}
var _proto = AliretailTable.prototype;
_proto.render = function render() {
var _this$props3 = this.props,
groupHeader = _this$props3.groupHeader,
groupFooter = _this$props3.groupFooter,
emptyContent = _this$props3.emptyContent,
resizable = _this$props3.resizable,
stickyLock = _this$props3.stickyLock; // 将特殊设定的 props 排除
var tableProps = R.omit(['groupHeader', 'groupFooter', 'columns', 'resizable', 'emptyContent', 'onResizeChange', 'tableState', 'tableStateChange', 'bakColumns', 'containerId', 'hasTableSetting', 'i18nBundle', 'stickyLock'], this.props); // children 组装
var body = this.renderBodyByColumns();
var groupHeaderNode = (0, _utils.getValidElement)(groupHeader, function () {
return /*#__PURE__*/React.createElement(GroupHeader, groupHeader);
});
var groupFooterNode = (0, _utils.getValidElement)(groupFooter, function () {
return /*#__PURE__*/React.createElement(GroupFooter, groupFooter);
});
var children = body ? [groupFooterNode, groupFooterNode].concat(body) : [groupHeaderNode, groupFooterNode]; // table 属性
var externalProps = {
hasBorder: false,
emptyContent: emptyContent,
onResizeChange: null
};
if (resizable) {
externalProps.hasBorder = true;
externalProps.onResizeChange = this.onResizeChange;
}
var selectionDisplay; // 当 selectedTooltip === true 时的显示，自动根据传入的 selectedRowKeys 来显示值
if (tableProps.rowSelection && tableProps.rowSelection.selectedTooltip !== false && Array.isArray(tableProps.rowSelection.selectedRowKeys) && tableProps.rowSelection.selectedRowKeys.length > 0) {
selectionDisplay = /*#__PURE__*/React.createElement("div", {
className: "aliretail-table-selection"
}, "\u5DF2\u9009\u62E9", /*#__PURE__*/React.createElement("span", {
className: "aliretail-table-selection-number"
}, (0, _numvert["default"])(tableProps.rowSelection.selectedRowKeys.length).format('0,0')), "\u9879");
} // 当 selectedTooltip 为数字时的显示，此时为受控模式，直接显示对应的数字
if (tableProps.rowSelection && !isNaN(parseFloat(tableProps.rowSelection.selectedTooltip))) {
selectionDisplay = /*#__PURE__*/React.createElement("div", {
className: "aliretail-table-selection"
}, "\u5DF2\u9009\u62E9", /*#__PURE__*/React.createElement("span", {
className: "aliretail-table-selection-number"
}, (0, _numvert["default"])(tableProps.rowSelection.selectedTooltip).format('0,0')), "\u9879");
}
var TableComp = _table["default"];
if (stickyLock) {
TableComp = _table["default"].StickyLock;
}
return /*#__PURE__*/React.createElement("div", {
className: "aliretail-table-table",
"data-name": "AliretailTable"
}, selectionDisplay, /*#__PURE__*/React.createElement(TableComp, (0, _extends2["default"])({}, externalProps, tableProps), children));
};
return AliretailTable;
}(React.Component);
AliretailTable.defaultProps = {
resizable: false,
emptyContent: _utils.EmptyBlock
};
var withContextTable = function withContextTable(Comp) {
return function (props) {
// props 为组件直接传入的 props 一般不需要使用此 props
return /*#__PURE__*/React.createElement(_TableContext.TableConsumer, null, function (context) {
// TODO: 根据需要的 props 之后需要做 optimize
var tableProps = R.filter(function (n) {
return !R.isNil(n);
}, R.pickAll([// 原生 props
'size', 'dataSource', 'onRowClick', 'onRowMouseEnter', 'onRowMouseLeave', 'onSort', 'onFilter', 'rowProps', 'cellProps', 'hasBorder', 'hasHeader', 'isZebra', 'loading', 'loadingComponent', 'filterParams', 'sort', 'sortIcons', 'emptyContent', 'primaryKey', 'expandedRowRender', 'expandedRowIndent', 'openRowKeys', 'hasExpandedRowCtrl', 'getExpandedColProps', 'rowExpandable', 'onRowOpen', 'fixedHeader', 'maxBodyHeight', 'tableWidth', 'rowSelection', 'stickyHeader', 'offsetTop', 'affixProps', 'indent', 'isTree', 'useVirtual', 'onBodyScroll', 'expandedIndexSimulate', 'crossline', 'tableLayout', // 拓展 props
'columns', 'stickyLock', 'groupHeader', 'groupFooter', 'resizable', 'tableState', 'tableStateChange'], context));
var combineTableProps = (0, _extends2["default"])({}, tableProps, tableProps.tableState, props, {
tableStateChange: tableProps.tableStateChange,
bakColumns: tableProps.columns
});
return /*#__PURE__*/React.createElement(Comp, combineTableProps);
});
};
};
var _default = withContextTable(AliretailTable);
exports["default"] = _default;