@mui/x-data-grid/legacy/hooks/features/pagination/useGridPageSize.js

The community edition of the data grid component (MUI X).

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
import { gridPageSizeSelector } from './gridPaginationSelector';
import { gridDensityRowHeightSelector } from '../density';
import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
export var defaultPageSize = function defaultPageSize(autoPageSize) {
  return autoPageSize ? 0 : 100;
};

var mergeStateWithPageSize = function mergeStateWithPageSize(pageSize) {
  return function (state) {
    return _extends({}, state, {
      pagination: _extends({}, state.pagination, {
        pageSize: pageSize
      })
    });
  };
};
/**
 * @requires useGridDimensions (event) - can be after
 */


export var useGridPageSize = function useGridPageSize(apiRef, props) {
  var _props$initialState2, _props$initialState2$;

  var logger = useGridLogger(apiRef, 'useGridPageSize');
  var rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
  apiRef.current.unstable_registerControlState({
    stateId: 'pageSize',
    propModel: props.pageSize,
    propOnChange: props.onPageSizeChange,
    stateSelector: gridPageSizeSelector,
    changeEvent: 'pageSizeChange'
  });
  /**
   * API METHODS
   */

  var setPageSize = React.useCallback(function (pageSize) {
    if (pageSize === gridPageSizeSelector(apiRef)) {
      return;
    }

    logger.debug("Setting page size to ".concat(pageSize));
    apiRef.current.setState(mergeStateWithPageSize(pageSize));
    apiRef.current.forceUpdate();
  }, [apiRef, logger]);
  var pageSizeApi = {
    setPageSize: setPageSize
  };
  useGridApiMethod(apiRef, pageSizeApi, 'GridPageSizeApi');
  /**
   * PRE-PROCESSING
   */

  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
    var _props$initialState, _props$initialState$p;

    var pageSizeToExport = gridPageSizeSelector(apiRef);
    var shouldExportPageSize = // Always export if the `exportOnlyDirtyModels` property is activated
    !context.exportOnlyDirtyModels || // Always export if the page size is controlled
    props.pageSize != null || // Always export if the page size has been initialized
    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size is not equal to the default value
    pageSizeToExport !== defaultPageSize(props.autoPageSize);

    if (!shouldExportPageSize) {
      return prevState;
    }

    return _extends({}, prevState, {
      pagination: _extends({}, prevState.pagination, {
        pageSize: pageSizeToExport
      })
    });
  }, [apiRef, props.pageSize, (_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.pagination) == null ? void 0 : _props$initialState2$.pageSize, props.autoPageSize]);
  /**
   * TODO: Add error if `prop.autoHeight = true`
   */

  var stateRestorePreProcessing = React.useCallback(function (params, context) {
    var _context$stateToResto;

    var pageSize = (_context$stateToResto = context.stateToRestore.pagination) == null ? void 0 : _context$stateToResto.pageSize;

    if (pageSize != null) {
      apiRef.current.setState(mergeStateWithPageSize(pageSize));
    }

    return params;
  }, [apiRef]);
  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
  /**
   * EVENTS
   */

  var handleUpdateAutoPageSize = React.useCallback(function () {
    var dimensions = apiRef.current.getRootDimensions();

    if (!props.autoPageSize || !dimensions) {
      return;
    }

    var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
    var maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
  }, [apiRef, props.autoPageSize, rowHeight]);
  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
  /**
   * EFFECTS
   */

  React.useEffect(function () {
    if (props.pageSize != null && !props.autoPageSize) {
      apiRef.current.setPageSize(props.pageSize);
    }
  }, [apiRef, props.autoPageSize, props.pageSize]);
  React.useEffect(function () {
    handleUpdateAutoPageSize();
  }, [handleUpdateAutoPageSize]);
};