choerodon-ui/pro/es/table/TableTBody.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { action } from 'mobx';
import { Draggable, Droppable } from 'react-beautiful-dnd';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import ReactResizeObserver from '../../../es/_util/resizeObserver';
import { getConfig } from '../../../es/configure';
import isFunction from 'lodash/isFunction';
import TableContext from './TableContext';
import TableRow from './TableRow';
import { ColumnLock, DragColumnAlign } from './enum';
import ExpandedRow from './ExpandedRow';
import { DataSetStatus } from '../data-set/enum';
import autobind from '../_util/autobind';
import { instance } from './Table';
import { isDraggingStyle, isStickySupport } from './utils';

var TableTBody =
/*#__PURE__*/
function (_Component) {
  _inherits(TableTBody, _Component);

  var _super = _createSuper(TableTBody);

  function TableTBody(props, context) {
    var _this;

    _classCallCheck(this, TableTBody);

    _this = _super.call(this, props, context);
    var tableStore = context.tableStore,
        dataSet = context.dataSet;

    if (tableStore.performanceEnabled) {
      if (dataSet.status === DataSetStatus.ready && dataSet.length) {
        tableStore.performanceOn = true;
        tableStore.timing.renderStart = Date.now();
      }
    }

    return _this;
  }

  _createClass(TableTBody, [{
    key: "handlePerformance",
    value: function handlePerformance() {
      var _this$context = this.context,
          code = _this$context.code,
          tableStore = _this$context.tableStore,
          dataSet = _this$context.dataSet;

      if (tableStore.performanceEnabled && tableStore.performanceOn) {
        var timing = tableStore.timing;
        var performance = dataSet.performance;
        var onPerformance = getConfig('onPerformance');
        timing.renderEnd = Date.now();
        onPerformance('Table', {
          name: code,
          url: performance.url,
          size: dataSet.length,
          timing: _objectSpread({}, performance.timing, {}, timing)
        });
        tableStore.performanceOn = false;
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.handlePerformance();
    }
  }, {
    key: "componentWillUpdate",
    value: function componentWillUpdate() {
      var tableStore = this.context.tableStore;

      if (tableStore.performanceEnabled && tableStore.performanceOn) {
        tableStore.timing.renderStart = Date.now();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.handlePerformance();
      var lock = this.props.lock;

      if (!lock) {
        var node = this.context.tableStore.node;

        if (node.isFocus && !node.wrapper.contains(document.activeElement)) {
          node.focus();
        }
      }
    }
  }, {
    key: "handleResize",
    value: function handleResize(_width, height) {
      var tableStore = this.context.tableStore;

      if (!tableStore.hidden) {
        tableStore.calcBodyHeight = height;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          lock = _this$props.lock,
          columnGroups = _this$props.columnGroups;
      var _this$context2 = this.context,
          prefixCls = _this$context2.prefixCls,
          tableStore = _this$context2.tableStore,
          rowDragRender = _this$context2.rowDragRender,
          dataSet = _this$context2.dataSet;
      var data = tableStore.data,
          virtual = tableStore.virtual,
          rowDraggable = tableStore.rowDraggable;
      var virtualData = virtual ? data.slice(tableStore.virtualStartIndex, tableStore.virtualEndIndex) : data;
      var rows = virtualData.length ? this.getRows(virtualData, columnGroups, true, virtual) : this.getEmptyRow(columnGroups);
      var body = rowDraggable ? React.createElement(Droppable, _extends({
        droppableId: "table",
        key: "table",
        renderClone: function renderClone(provided, snapshot, rubric) {
          if (snapshot.isDragging && tableStore.overflowX && tableStore.dragColumnAlign === DragColumnAlign.right) {
            var style = provided.draggableProps.style;

            if (isDraggingStyle(style)) {
              var left = style.left,
                  width = style.width;
              style.left = left - Math.max(tableStore.columnGroups.leafColumnsWidth - 50, width);
            }
          }

          var record = dataSet.get(rubric.source.index);

          if (record) {
            var leafColumnsBody = lock ? tableStore.columnGroups : columnGroups;
            var renderClone = rowDragRender && rowDragRender.renderClone;
            var id = record.id;

            if (renderClone && isFunction(renderClone)) {
              return renderClone({
                provided: provided,
                snapshot: snapshot,
                rubric: rubric,
                key: id,
                hidden: false,
                lock: false,
                prefixCls: prefixCls,
                columns: leafColumnsBody.leafs.map(function (_ref) {
                  var column = _ref.column;
                  return column;
                }),
                columnGroups: leafColumnsBody,
                record: record,
                index: id
              });
            }

            return React.createElement(TableRow, {
              provided: provided,
              snapshot: snapshot,
              key: id,
              hidden: false,
              lock: false,
              columnGroups: leafColumnsBody,
              record: record,
              index: id
            });
          }

          return React.createElement("span", null);
        },
        getContainerForClone: function getContainerForClone() {
          return instance(tableStore.node.getClassName(), prefixCls).tbody;
        }
      }, rowDragRender && rowDragRender.droppableProps), function (droppableProvided) {
        return React.createElement("tbody", _extends({
          ref: droppableProvided.innerRef
        }, droppableProvided.droppableProps, {
          className: "".concat(prefixCls, "-tbody")
        }), rows, droppableProvided.placeholder);
      }) : React.createElement("tbody", {
        className: "".concat(prefixCls, "-tbody")
      }, rows);
      return lock || virtual ? body : React.createElement(ReactResizeObserver, {
        onResize: this.handleResize,
        resizeProp: "height",
        immediately: true
      }, body);
    }
  }, {
    key: "getRows",
    value: function getRows(records, columnGroups, expanded, virtual) {
      var _this2 = this;

      return records.map(function (record, index) {
        return _this2.getRow(columnGroups, record, virtual ? record.index : index, expanded);
      });
    }
  }, {
    key: "getEmptyRow",
    value: function getEmptyRow(columnGroups) {
      var _this$context3 = this.context,
          prefixCls = _this$context3.prefixCls,
          dataSet = _this$context3.dataSet,
          _this$context3$tableS = _this$context3.tableStore,
          emptyText = _this$context3$tableS.emptyText,
          width = _this$context3$tableS.width;
      var lock = this.props.lock;
      var styles = width ? {
        position: isStickySupport() ? 'sticky' : 'relative',
        left: pxToRem(width / 2)
      } : {
        transform: 'none',
        display: 'inline-block'
      };
      var tdStyle = width ? undefined : {
        textAlign: 'center'
      };
      return React.createElement("tr", {
        className: "".concat(prefixCls, "-empty-row")
      }, React.createElement("td", {
        colSpan: columnGroups.leafs.length,
        style: tdStyle
      }, React.createElement("div", {
        style: styles
      }, !lock && dataSet.status === DataSetStatus.ready && emptyText)));
    }
  }, {
    key: "renderExpandedRows",
    value: function renderExpandedRows(columnGroups, record, isExpanded) {
      return this.getRows(record.children || [], columnGroups, isExpanded);
    }
  }, {
    key: "getRow",
    value: function getRow(columnGroups, record, index, expanded) {
      var lock = this.props.lock;
      var _this$context4 = this.context,
          tableStore = _this$context4.tableStore,
          rowDragRender = _this$context4.rowDragRender;
      var key = record.key;
      var children = tableStore.isTree && React.createElement(ExpandedRow, {
        record: record,
        columnGroups: columnGroups
      }, this.renderExpandedRows);

      if (tableStore.rowDraggable) {
        var dragColumnAlign = tableStore.dragColumnAlign;

        if (!dragColumnAlign || dragColumnAlign === DragColumnAlign.right && lock !== ColumnLock.left || dragColumnAlign === DragColumnAlign.left && lock !== ColumnLock.right) {
          return React.createElement(Draggable, {
            draggableId: String(key),
            index: index,
            key: record.key
          }, function (provided, snapshot) {
            return React.createElement(TableRow, _extends({
              provided: provided,
              snapshot: snapshot,
              key: record.key,
              hidden: !expanded,
              lock: lock,
              columnGroups: columnGroups,
              record: record,
              index: index
            }, rowDragRender && rowDragRender.draggableProps), children);
          });
        }
      }

      return React.createElement(TableRow, {
        key: key,
        hidden: !expanded,
        lock: lock,
        columnGroups: columnGroups,
        record: record,
        index: index
      }, children);
    }
  }]);

  return TableTBody;
}(Component);

TableTBody.displayName = 'TableTBody';
TableTBody.contextType = TableContext;

__decorate([autobind, action], TableTBody.prototype, "handleResize", null);

__decorate([autobind], TableTBody.prototype, "renderExpandedRows", null);

TableTBody = __decorate([observer], TableTBody);
export default TableTBody;
//# sourceMappingURL=TableTBody.js.map