choerodon-ui/pro/lib/table/VirtualWrapper.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

var _mobx = require("mobx");

var _mobxReactLite = require("mobx-react-lite");

var _reactBeautifulDnd = require("react-beautiful-dnd");

var _omit = _interopRequireDefault(require("lodash/omit"));

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _spin = _interopRequireDefault(require("../spin"));

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

var _transform = require("../_util/transform");

var _mergeProps = _interopRequireDefault(require("../_util/mergeProps"));

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

var _Table = require("./Table");

var _hooks = require("./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 = (0, _react.useContext)(_TableContext["default"]),
      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 = (0, _react.useState)(virtualHeight),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      height = _useState2[0],
      setHeight = _useState2[1];

  (0, _react.useEffect)((0, _mobx.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]);
  (0, _react.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: (0, _UnitConvertor.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 ((0, _utils.isStickySupport)() && tableStore.hasRowGroups) {
      wrapperStyle.paddingTop = (0, _UnitConvertor.pxToRem)(top, true);
      style.position = 'relative';
    } else {
      style.transform = (0, _transform.toTransformValue)({
        translateY: (0, _UnitConvertor.pxToRem)(top, true)
      });
    }

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

  var renderClone = (0, _hooks.useRenderClone)();
  var content = tableStore.rowDraggable ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, (0, _extends2["default"])({
    droppableId: "table",
    key: "table",
    isCombineEnabled: isTree,
    mode: "virtual",
    renderClone: renderClone,
    getContainerForClone: function getContainerForClone() {
      return (0, _Table.instance)(tableStore.node.getClassName(), prefixCls).tbody;
    }
  }, rowDragRender && rowDragRender.droppableProps), getBody) : getBody();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, content, virtualSpin && scrolling && /*#__PURE__*/_react["default"].createElement(_spin["default"], (0, _extends2["default"])({}, (0, _mergeProps["default"])((0, _omit["default"])(spinProps, ['dataSet']), {
    spinning: true,
    style: {
      position: 'absolute',
      top: '50%',
      left: '50%',
      marginTop: (0, _UnitConvertor.pxToRem)(tableStore.lastScrollTop, true),
      transform: (0, _transform.toTransformValue)({
        translate: '-50% -50%'
      })
    }
  }))));
};

VirtualWrapper.displayName = 'VirtualWrapper';

var _default = (0, _mobxReactLite.observer)(VirtualWrapper);

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