choerodon-ui/pro/lib/table/TableVirtualRow.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 _react = _interopRequireWildcard(require("react"));

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

var _reactIntersectionObserver = require("react-intersection-observer");

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

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

var _TableStore = require("./TableStore");

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

var TableVirtualRow = function TableVirtualRow(props) {
  var index = props.index;
  var context = (0, _react.useContext)(_TableContext["default"]);
  var tableStore = context.tableStore;
  var node = tableStore.node;
  var mounted = (0, _react.useRef)(false);

  var _useInView = (0, _reactIntersectionObserver.useInView)({
    root: tableStore.overflowY ? node.tableBodyWrap || node.element : null,
    rootMargin: "".concat(_TableStore.VIRTUAL_ROOT_MARGIN, "px"),
    initialInView: mounted.current || tableStore.isRowInView(index),
    triggerOnce: true
  }),
      intersectionRef = _useInView.ref,
      inView = _useInView.inView,
      entry = _useInView.entry;

  (0, _react.useEffect)(function () {
    mounted.current = true;
    return function () {
      mounted.current = false;
    };
  }, []);
  var columnsInView = tableStore.columnGroups.inView;
  var height = !inView || !columnsInView ? entry && entry.target.offsetParent ? (0, _UnitConvertor.pxToRem)(entry.boundingClientRect.height || entry.target.offsetHeight, true) : undefined : undefined;
  return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], (0, _extends2["default"])({}, props, {
    intersectionRef: intersectionRef,
    inView: inView,
    columnsInView: columnsInView,
    virtualHeight: height
  }));
};

TableVirtualRow.displayName = 'TableVirtualRow';

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

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