@aliretail/react-materials-components/es/Tablex/components/Table/index.js

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Table from "@alifd/next/es/table";
import * as React from 'react';
import * as R from 'ramda';
import numvert from 'numvert';
import { TableConsumer } from "../../TableContext";
import { renderColumns, getValidElement, EmptyBlock } from "./utils";
var GroupHeader = _Table.GroupHeader,
    GroupFooter = _Table.GroupFooter;

var AliretailTable = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(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 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 = getValidElement(groupHeader, function () {
      return /*#__PURE__*/React.createElement(GroupHeader, groupHeader);
    });
    var groupFooterNode = 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"
      }, numvert(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"
      }, numvert(tableProps.rowSelection.selectedTooltip).format('0,0')), "\u9879");
    }

    var TableComp = _Table;

    if (stickyLock) {
      TableComp = _Table.StickyLock;
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "aliretail-table-table",
      "data-name": "AliretailTable"
    }, selectionDisplay, /*#__PURE__*/React.createElement(TableComp, _extends({}, externalProps, tableProps), children));
  };

  return AliretailTable;
}(React.Component);

AliretailTable.defaultProps = {
  resizable: false,
  emptyContent: EmptyBlock
};

var withContextTable = function withContextTable(Comp) {
  return function (props) {
    // props 为组件直接传入的 props 一般不需要使用此 props
    return /*#__PURE__*/React.createElement(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 = _extends({}, tableProps, tableProps.tableState, props, {
        tableStateChange: tableProps.tableStateChange,
        bakColumns: tableProps.columns
      });

      return /*#__PURE__*/React.createElement(Comp, combineTableProps);
    });
  };
};

export default withContextTable(AliretailTable);