@mui/x-data-grid/esm/hooks/features/virtualization/useGridVirtualization.js

The Community plan edition of the MUI X Data Grid components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
import { isJSDOM } from "../../../utils/isJSDOM.js";
import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
import { useGridEventPriority } from "../../utils/index.js";
const HAS_LAYOUT = !isJSDOM;

// HACK: Typescript doesn't use the alias name ("GridVirtualizationState") and changes
// the autogenerated docs result, but this would otherwise be just:
//   export type GridVirtualizationState = VirtualizationState;

// XXX: We want to use the virtualizer as the source of truth for its state, but this needs to
// stay because some parts of the grid require the `virtualization` state during initialization.
export const virtualizationStateInitializer = (state, props) => {
  const {
    disableVirtualization,
    autoHeight
  } = props;
  const virtualization = {
    enabled: !disableVirtualization && HAS_LAYOUT,
    enabledForColumns: !disableVirtualization && HAS_LAYOUT,
    enabledForRows: !disableVirtualization && !autoHeight && HAS_LAYOUT,
    renderContext: EMPTY_RENDER_CONTEXT
  };
  return _extends({}, state, {
    virtualization
  });
};
export function useGridVirtualization(apiRef, rootProps) {
  const {
    virtualizer
  } = apiRef.current;
  const {
    autoHeight,
    disableVirtualization
  } = rootProps;

  /*
   * API METHODS
   */

  const setVirtualization = enabled => {
    enabled &&= HAS_LAYOUT;
    virtualizer.store.set('virtualization', _extends({}, virtualizer.store.state.virtualization, {
      enabled,
      enabledForColumns: enabled,
      enabledForRows: enabled && !autoHeight
    }));
  };
  const setColumnVirtualization = enabled => {
    enabled &&= HAS_LAYOUT;
    virtualizer.store.set('virtualization', _extends({}, virtualizer.store.state.virtualization, {
      enabledForColumns: enabled
    }));
  };
  const api = {
    unstable_setVirtualization: setVirtualization,
    unstable_setColumnVirtualization: setColumnVirtualization
  };
  useGridApiMethod(apiRef, api, 'public');
  const forceUpdateRenderContext = virtualizer.api.forceUpdateRenderContext;
  apiRef.current.register('private', {
    updateRenderContext: forceUpdateRenderContext
  });

  /*
   * EFFECTS
   */

  useGridEventPriority(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
  useGridEventPriority(apiRef, 'paginationModelChange', forceUpdateRenderContext);
  useGridEventPriority(apiRef, 'columnsChange', forceUpdateRenderContext);

  /* eslint-disable react-hooks/exhaustive-deps */
  React.useEffect(() => {
    setVirtualization(!rootProps.disableVirtualization);
  }, [disableVirtualization, autoHeight]);
  /* eslint-enable react-hooks/exhaustive-deps */
}