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

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

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useContext, useEffect, useState } from 'react';
import { action } from 'mobx';
import { observer } from 'mobx-react-lite';
import { Droppable } from 'react-beautiful-dnd';
import omit from 'lodash/omit';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import Spin from '../spin';
import TableContext from './TableContext';
import { toTransformValue } from '../_util/transform';
import mergeProps from '../_util/mergeProps';
import { isStickySupport } from './utils';
import { instance } from './Table';
import { useRenderClone } from './hooks';

function getRowHeight(tableStore, dataSet, draggableId) {
  var rowMetaData = tableStore.rowMetaData;

  if (rowMetaData) {
    var record = dataSet.find(function (r) {
      return String(r.key) === String(draggableId);
    });

    if (record) {
      var metaData = rowMetaData.find(function (meta) {
        return meta.record === record;
      });

      if (metaData) {
        return metaData.height;
      }
    }
  }

  return tableStore.virtualRowHeight;
}

var VirtualWrapper = function VirtualWrapper(props) {
  var children = props.children;

  var _useContext = useContext(TableContext),
      tableStore = _useContext.tableStore,
      prefixCls = _useContext.prefixCls,
      virtualSpin = _useContext.virtualSpin,
      spinProps = _useContext.spinProps,
      isTree = _useContext.isTree,
      rowDragRender = _useContext.rowDragRender,
      dataSet = _useContext.dataSet;

  var virtualTop = tableStore.virtualTop,
      virtualHeight = tableStore.virtualHeight,
      _tableStore$scrolling = tableStore.scrolling,
      scrolling = _tableStore$scrolling === void 0 ? false : _tableStore$scrolling;

  var _useState = useState(virtualHeight),
      _useState2 = _slicedToArray(_useState, 2),
      height = _useState2[0],
      setHeight = _useState2[1];

  useEffect(action(function () {
    if (virtualHeight !== height) {
      var lastScrollTop = tableStore.lastScrollTop,
          tableBodyWrap = tableStore.node.tableBodyWrap;

      if (lastScrollTop && tableBodyWrap) {
        var scrollTop = Math.max(0, virtualHeight - height + lastScrollTop);

        if (scrollTop === tableBodyWrap.scrollTop) {
          tableStore.setLastScrollTop(scrollTop);
        } else {
          tableBodyWrap.scrollTop = scrollTop;
        }
      }

      setHeight(virtualHeight);
    }
  }), [virtualHeight, height, tableStore]);
  useEffect(function () {
    var lastScrollTop = tableStore.lastScrollTop,
        tableBodyWrap = tableStore.node.tableBodyWrap;

    if (lastScrollTop) {
      tableStore.setLastScrollTop(tableBodyWrap ? tableBodyWrap.scrollTop : 0);
    }
  }, [tableStore]);

  var getBody = function getBody(droppableProvided, droppableSnapshot) {
    var wrapperStyle = {
      height: pxToRem(virtualHeight, true)
    };
    var style = {};

    if (scrolling) {
      wrapperStyle.pointerEvents = 'none';
    }

    var dragRowHeight = droppableSnapshot && droppableSnapshot.draggingFromThisWith ? getRowHeight(tableStore, dataSet, droppableSnapshot.draggingFromThisWith) : undefined;
    var top = dragRowHeight ? virtualTop + dragRowHeight : virtualTop;

    if (isStickySupport() && tableStore.hasRowGroups) {
      wrapperStyle.paddingTop = pxToRem(top, true);
      style.position = 'relative';
    } else {
      style.transform = toTransformValue({
        translateY: pxToRem(top, true)
      });
    }

    return /*#__PURE__*/React.createElement("div", _extends({
      className: "".concat(prefixCls, "-tbody-wrapper"),
      style: wrapperStyle,
      ref: droppableProvided && droppableProvided.innerRef
    }, droppableProvided && droppableProvided.droppableProps), /*#__PURE__*/React.createElement("div", {
      style: style
    }, children(droppableSnapshot, dragRowHeight)));
  };

  var renderClone = useRenderClone();
  var content = tableStore.rowDraggable ? /*#__PURE__*/React.createElement(Droppable, _extends({
    droppableId: tableStore.node.props.id || "table",
    key: "table",
    isCombineEnabled: isTree,
    mode: "virtual",
    renderClone: renderClone,
    getContainerForClone: function getContainerForClone() {
      return instance(tableStore.node.getClassName(), prefixCls).tbody;
    }
  }, rowDragRender && rowDragRender.droppableProps), getBody) : getBody();
  return /*#__PURE__*/React.createElement(React.Fragment, null, content, virtualSpin && scrolling && /*#__PURE__*/React.createElement(Spin, _extends({}, mergeProps(omit(spinProps, ['dataSet']), {
    spinning: true,
    style: {
      position: 'absolute',
      top: '50%',
      left: '50%',
      marginTop: pxToRem(tableStore.lastScrollTop, true),
      transform: toTransformValue({
        translate: '-50% -50%'
      })
    }
  }))));
};

VirtualWrapper.displayName = 'VirtualWrapper';
export default observer(VirtualWrapper);
//# sourceMappingURL=VirtualWrapper.js.map