@mui/x-data-grid-pro/hooks/features/lazyLoader/useGridLazyLoader.js

The Pro plan edition of the Data Grid components (MUI X).

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useGridLazyLoader = void 0;
var React = _interopRequireWildcard(require("react"));
var _xDataGrid = require("@mui/x-data-grid");
var _internals = require("@mui/x-data-grid/internals");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function findSkeletonRowsSection({
  apiRef,
  visibleRows,
  range
}) {
  let {
    firstRowIndex,
    lastRowIndex
  } = range;
  const visibleRowsSection = visibleRows.slice(range.firstRowIndex, range.lastRowIndex);
  let startIndex = 0;
  let endIndex = visibleRowsSection.length - 1;
  let isSkeletonSectionFound = false;
  while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) {
    const isStartingWithASkeletonRow = apiRef.current.getRowNode(visibleRowsSection[startIndex].id)?.type === 'skeletonRow';
    const isEndingWithASkeletonRow = apiRef.current.getRowNode(visibleRowsSection[endIndex].id)?.type === 'skeletonRow';
    if (isStartingWithASkeletonRow && isEndingWithASkeletonRow) {
      isSkeletonSectionFound = true;
    }
    if (!isStartingWithASkeletonRow) {
      startIndex += 1;
      firstRowIndex += 1;
    }
    if (!isEndingWithASkeletonRow) {
      endIndex -= 1;
      lastRowIndex -= 1;
    }
  }
  return isSkeletonSectionFound ? {
    firstRowIndex,
    lastRowIndex
  } : undefined;
}

/**
 * @requires useGridRows (state)
 * @requires useGridPagination (state)
 * @requires useGridDimensions (method) - can be after
 * @requires useGridScroll (method
 */
const useGridLazyLoader = (privateApiRef, props) => {
  const sortModel = (0, _xDataGrid.useGridSelector)(privateApiRef, _xDataGrid.gridSortModelSelector);
  const filterModel = (0, _xDataGrid.useGridSelector)(privateApiRef, _xDataGrid.gridFilterModelSelector);
  const renderedRowsIntervalCache = React.useRef({
    firstRowToRender: 0,
    lastRowToRender: 0
  });
  const isDisabled = props.rowsLoadingMode !== 'server';
  const handleRenderedRowsIntervalChange = React.useCallback(params => {
    if (isDisabled) {
      return;
    }
    const fetchRowsParams = {
      firstRowToRender: params.firstRowIndex,
      lastRowToRender: params.lastRowIndex,
      sortModel,
      filterModel
    };
    if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowIndex && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowIndex) {
      return;
    }
    renderedRowsIntervalCache.current = {
      firstRowToRender: params.firstRowIndex,
      lastRowToRender: params.lastRowIndex
    };
    if (sortModel.length === 0 && filterModel.items.length === 0) {
      const currentVisibleRows = (0, _internals.getVisibleRows)(privateApiRef, {
        pagination: props.pagination,
        paginationMode: props.paginationMode
      });
      const skeletonRowsSection = findSkeletonRowsSection({
        apiRef: privateApiRef,
        visibleRows: currentVisibleRows.rows,
        range: {
          firstRowIndex: params.firstRowIndex,
          lastRowIndex: params.lastRowIndex
        }
      });
      if (!skeletonRowsSection) {
        return;
      }
      fetchRowsParams.firstRowToRender = skeletonRowsSection.firstRowIndex;
      fetchRowsParams.lastRowToRender = skeletonRowsSection.lastRowIndex;
    }
    privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
  }, [privateApiRef, isDisabled, props.pagination, props.paginationMode, sortModel, filterModel]);
  const handleGridSortModelChange = React.useCallback(newSortModel => {
    if (isDisabled) {
      return;
    }
    privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
    const renderContext = (0, _xDataGrid.gridRenderContextSelector)(privateApiRef);
    const fetchRowsParams = {
      firstRowToRender: renderContext.firstRowIndex,
      lastRowToRender: renderContext.lastRowIndex,
      sortModel: newSortModel,
      filterModel
    };
    privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
  }, [privateApiRef, isDisabled, filterModel]);
  const handleGridFilterModelChange = React.useCallback(newFilterModel => {
    if (isDisabled) {
      return;
    }
    privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
    const renderContext = (0, _xDataGrid.gridRenderContextSelector)(privateApiRef);
    const fetchRowsParams = {
      firstRowToRender: renderContext.firstRowIndex,
      lastRowToRender: renderContext.lastRowIndex,
      sortModel,
      filterModel: newFilterModel
    };
    privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
  }, [privateApiRef, isDisabled, sortModel]);
  (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
  (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'sortModelChange', handleGridSortModelChange);
  (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'filterModelChange', handleGridFilterModelChange);
  (0, _xDataGrid.useGridApiOptionHandler)(privateApiRef, 'fetchRows', props.onFetchRows);
};
exports.useGridLazyLoader = useGridLazyLoader;