choerodon-ui/lib/rc-components/table/BaseTable.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _react = _interopRequireWildcard(require("react"));

var _miniStore = require("mini-store");

var _classnames = _interopRequireDefault(require("classnames"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _ColGroup = _interopRequireDefault(require("./ColGroup"));

var _TableHeader = _interopRequireDefault(require("./TableHeader"));

var _TableFooter = _interopRequireDefault(require("./TableFooter"));

var _TableRow = _interopRequireDefault(require("./TableRow"));

var _ExpandableRow = _interopRequireDefault(require("./ExpandableRow"));

var _TableContext = _interopRequireDefault(require("./TableContext"));

var _measureScrollbar = _interopRequireDefault(require("../../_util/measureScrollbar"));

var _isStickySupport = _interopRequireDefault(require("../../_util/isStickySupport"));

var _utils = require("./utils");

var BaseTable = function BaseTable(props) {
  var table = (0, _react.useContext)(_TableContext["default"]);
  var columnManager = table.columnManager,
      components = table.components;
  var _table$props = table.props,
      prefixCls = _table$props.prefixCls,
      scroll = _table$props.scroll,
      data = _table$props.data,
      getBodyWrapper = _table$props.getBodyWrapper,
      childrenColumnName = _table$props.childrenColumnName,
      rowClassName = _table$props.rowClassName,
      rowRef = _table$props.rowRef,
      onRowClick = _table$props.onRowClick,
      onRowDoubleClick = _table$props.onRowDoubleClick,
      onRowContextMenu = _table$props.onRowContextMenu,
      onRowMouseEnter = _table$props.onRowMouseEnter,
      onRowMouseLeave = _table$props.onRowMouseLeave,
      onRow = _table$props.onRow;
  var store = props.store,
      expander = props.expander,
      tableClassName = props.tableClassName,
      hasHead = props.hasHead,
      hasBody = props.hasBody,
      hasFoot = props.hasFoot,
      fixed = props.fixed,
      getRowKey = props.getRowKey,
      isAnyColumnsFixed = props.isAnyColumnsFixed;
  var tableStyle = {};

  var getColumns = function getColumns() {
    var cols = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.columns || [];
    var isBody = arguments.length > 1 ? arguments[1] : undefined;
    var sticky = {
      stickyLeft: 0,
      stickyRight: !isBody && scroll && scroll.y ? (0, _measureScrollbar["default"])() : 0
    };

    if ((0, _isStickySupport["default"])()) {
      sticky.stickyRight = cols.reduce(function (right, col) {
        if (col.fixed === 'right') {
          return right + (0, _utils.columnWidth)(col);
        }

        return right;
      }, sticky.stickyRight);
    }

    return cols.map(function (column) {
      var newColumn = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
        className: !!column.fixed && !fixed ? (0, _classnames["default"])((0, _isStickySupport["default"])() ? "".concat(prefixCls, "-sticky-column") : "".concat(prefixCls, "-fixed-columns-in-body"), column.className) : column.className
      });

      if ((0, _isStickySupport["default"])()) {
        if (column.fixed === 'right') {
          sticky.stickyRight -= (0, _utils.columnWidth)(column);
          newColumn.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, newColumn.style), {}, {
            right: sticky.stickyRight
          });
        } else if (column.fixed) {
          newColumn.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, newColumn.style), {}, {
            left: sticky.stickyLeft
          });
          sticky.stickyLeft += (0, _utils.columnWidth)(column);
        }
      }

      return newColumn;
    });
  };

  var handleRowHover = (0, _react.useCallback)(function (isHover, key) {
    store.setState({
      currentHoverKey: isHover ? key : null
    });
  }, [store]);

  var renderRows = function renderRows(renderData, indent) {
    var rows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
    var ancestorKeys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];

    var _loop = function _loop(i) {
      var record = renderData[i];
      var key = getRowKey(record, i);
      var className = typeof rowClassName === 'string' ? rowClassName : rowClassName(record, i, indent);
      var onHoverProps = {};

      if (columnManager.isAnyColumnsFixed()) {
        onHoverProps.onHover = handleRowHover;
      }

      var leafColumns = void 0;

      if (fixed === 'left') {
        leafColumns = columnManager.leftLeafColumns();
      } else if (fixed === 'right') {
        leafColumns = columnManager.rightLeafColumns();
      } else {
        leafColumns = getColumns(columnManager.leafColumns(), true);
      }

      var rowPrefixCls = "".concat(prefixCls, "-row");
      var rowIndex = rows.filter(function (row) {
        return !row.props.expandedRow;
      }).length;

      var row = /*#__PURE__*/_react["default"].createElement(_ExpandableRow["default"], (0, _extends2["default"])({}, expander.props, {
        fixed: fixed,
        index: rowIndex,
        prefixCls: rowPrefixCls,
        record: record,
        key: key,
        rowKey: key,
        onRowClick: onRowClick,
        needIndentSpaced: expander.needIndentSpaced,
        onExpandedChange: expander.handleExpandChange
      }), function (expandableRow) {
        return (
          /*#__PURE__*/
          // eslint-disable-line
          _react["default"].createElement(_TableRow["default"], (0, _extends2["default"])({
            fixed: fixed,
            indent: indent,
            className: className,
            record: record,
            index: rowIndex,
            prefixCls: rowPrefixCls,
            childrenColumnName: childrenColumnName,
            columns: leafColumns,
            onRow: onRow,
            onRowDoubleClick: onRowDoubleClick,
            onRowContextMenu: onRowContextMenu,
            onRowMouseEnter: onRowMouseEnter,
            onRowMouseLeave: onRowMouseLeave
          }, onHoverProps, {
            rowKey: key,
            ancestorKeys: ancestorKeys,
            ref: rowRef(record, i, indent),
            components: components,
            isAnyColumnsFixed: isAnyColumnsFixed
          }, expandableRow))
        );
      });

      rows.push(row);
      expander.renderRows(renderRows, rows, record, i, indent, fixed, key, ancestorKeys);
    };

    for (var i = 0; i < renderData.length; i++) {
      _loop(i);
    }

    return rows;
  };

  var placeholder = hasHead && !hasBody && scroll.y && fixed !== 'left';

  if (!fixed && scroll.x) {
    // not set width, then use content fixed width
    if (scroll.x === true) {
      tableStyle.tableLayout = 'fixed';
    } else {
      if (placeholder && (0, _isNumber["default"])(scroll.x)) {
        tableStyle.width = scroll.x + (0, _measureScrollbar["default"])() + 1;
      } else {
        tableStyle.width = scroll.x;
      }
    }
  }

  var Table = hasBody ? components.table : 'table';
  var BodyWrapper = components.body.wrapper;
  var body;

  if (hasBody) {
    body = /*#__PURE__*/_react["default"].createElement(BodyWrapper, {
      className: "".concat(prefixCls, "-tbody")
    }, renderRows(data, 0));

    if (getBodyWrapper) {
      body = getBodyWrapper(body);
    }
  }

  var columns = getColumns();
  return /*#__PURE__*/_react["default"].createElement(Table, {
    className: tableClassName,
    style: tableStyle,
    key: "table"
  }, /*#__PURE__*/_react["default"].createElement(_ColGroup["default"], {
    columns: columns,
    fixed: fixed,
    placeholder: placeholder
  }), hasHead && /*#__PURE__*/_react["default"].createElement(_TableHeader["default"], {
    expander: expander,
    columns: columns,
    fixed: fixed,
    placeholder: placeholder
  }), body, hasFoot && /*#__PURE__*/_react["default"].createElement(_TableFooter["default"], {
    onHover: handleRowHover,
    columns: columns,
    fixed: fixed
  }));
};

var _default = (0, _miniStore.connect)()(BaseTable);

exports["default"] = _default;
//# sourceMappingURL=BaseTable.js.map