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

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

import _extends from "@babel/runtime/helpers/extends";
import React, { useContext, useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { useInView } from 'react-intersection-observer';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import TableContext from './TableContext';
import { VIRTUAL_ROOT_MARGIN } from './TableStore';
import TableRow from './TableRow';

var TableVirtualRow = function TableVirtualRow(props) {
  var index = props.index;
  var context = useContext(TableContext);
  var tableStore = context.tableStore;
  var node = tableStore.node;
  var mounted = useRef(false);

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

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

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