[core] Batch small changes

packages/demo-app/src/app/demos/grid/components/settings-panel.tsx

@@ -6,7 +6,6 @@ import Button from '@material-ui/core/Button';
 import FormLabel from '@material-ui/core/FormLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
-import { useContext } from 'react';
 import { darkThemeId, lightThemeId, ThemeContext } from '../../theme';
 import { StyledPanels } from './styled-panel';
 
@@ -24,7 +23,7 @@ export interface SettingsPanelProps {
 export const SettingsPanel: React.FC<SettingsPanelProps> = ({ onApply, type, size }) => {
   const [sizeState, setSize] = React.useState<number>(size);
   const [typeState, setType] = React.useState<string>(type);
-  const currentTheme = useContext(ThemeContext);
+  const currentTheme = React.useContext(ThemeContext);
   const [selectedTheme, setSelectedTheme] = React.useState<string>(currentTheme.theme);
   const [selectedPaginationValue, setSelectedPaginationValue] = React.useState<number>(-1);
 

packages/demo-app/src/app/demos/theme/useTheme.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useLocalStorage } from '../utils/useLocalStorage';
 import { DEFAULT_THEME, STORAGE_THEME_KEY, ThemeValuePair } from './themeProvider';
 import { darkTheme } from './dark';
@@ -15,10 +15,10 @@ type ReturnType = {
 export function useTheme(): ReturnType {
   const [selectedThemeId, setSelectedTheme] = useLocalStorage(STORAGE_THEME_KEY, DEFAULT_THEME);
 
-  const [theme, setTheme] = useState(ThemeValuePair[selectedThemeId]);
-  const [isDark, setIsDark] = useState(theme.id === darkTheme.id);
+  const [theme, setTheme] = React.useState(ThemeValuePair[selectedThemeId]);
+  const [isDark, setIsDark] = React.useState(theme.id === darkTheme.id);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setIsDark(theme === darkTheme);
   }, [theme]);
 

packages/grid/x-grid-modules/lib/autosizer/index.js

@@ -1,4 +1,4 @@
-import { createElement, PureComponent } from 'react';
+import * as React from 'react';
 
 /**
  * Detect Element Resize.
@@ -378,7 +378,7 @@ var AutoSizer = function (_React$PureComponent) {
         childParams.width = width;
       }
 
-      return createElement(
+      return React.createElement(
         'div',
         {
           className: className,
@@ -389,7 +389,7 @@ var AutoSizer = function (_React$PureComponent) {
     }
   }]);
   return AutoSizer;
-}(PureComponent);
+}(React.PureComponent);
 
 AutoSizer.defaultProps = {
   onResize: function onResize() {},

packages/grid/x-grid-modules/src/hooks/features/usePagination.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useReducer, useRef } from 'react';
+import * as React from 'react';
 import { useLogger } from '../utils';
 import {
   PAGE_CHANGED_EVENT,
@@ -64,10 +64,10 @@ export const usePagination = (
       options.rowCount == null ? rows.length : options.rowCount,
     ),
   };
-  const stateRef = useRef(initialState);
-  const [state, dispatch] = useReducer(paginationReducer, initialState);
+  const stateRef = React.useRef(initialState);
+  const [state, dispatch] = React.useReducer(paginationReducer, initialState);
 
-  const updateState = useCallback(
+  const updateState = React.useCallback(
     (stateUpdate: Partial<PaginationState>) => {
       const newState = { ...stateRef.current, ...stateUpdate };
       stateRef.current = newState;
@@ -76,7 +76,7 @@ export const usePagination = (
     [dispatch],
   );
 
-  const setPage = useCallback(
+  const setPage = React.useCallback(
     (page: number) => {
       if (apiRef && apiRef.current) {
         page = stateRef.current.pageCount >= page ? page : stateRef.current.pageCount;
@@ -98,7 +98,7 @@ export const usePagination = (
   );
 
   // We use stateRef in this method to avoid reattaching this method to the api every time the state changes
-  const setPageSize = useCallback(
+  const setPageSize = React.useCallback(
     (pageSize: number) => {
       if (stateRef.current.pageSize === pageSize) {
         return;
@@ -127,51 +127,51 @@ export const usePagination = (
     [stateRef, apiRef, setPage, updateState, logger],
   );
 
-  const onPageChanged = useCallback(
+  const onPageChanged = React.useCallback(
     (handler: (param: PageChangedParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(PAGE_CHANGED_EVENT, handler);
     },
     [apiRef],
   );
-  const onPageSizeChanged = useCallback(
+  const onPageSizeChanged = React.useCallback(
     (handler: (param: PageChangedParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(PAGESIZE_CHANGED_EVENT, handler);
     },
     [apiRef],
   );
 
-  const getAutoPageSize = useCallback(() => {
+  const getAutoPageSize = React.useCallback(() => {
     const containerProps = apiRef?.current?.getContainerPropsState();
     return containerProps?.viewportPageSize;
   }, [apiRef]);
 
-  const resetAutopageSize = useCallback(() => {
+  const resetAutopageSize = React.useCallback(() => {
     const autoPagesize = getAutoPageSize();
     if (autoPagesize) {
       logger.debug(`Setting autoPagesize to ${autoPagesize}`);
       setPageSize(autoPagesize);
     }
   }, [setPageSize, logger, getAutoPageSize]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     stateRef.current = state;
   }, [state]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (apiRef.current?.isInitialised) {
       apiRef.current!.emit(PAGE_CHANGED_EVENT, stateRef.current);
     }
   }, [apiRef, stateRef, apiRef.current?.isInitialised]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     updateState({ paginationMode: options.paginationMode! });
   }, [options.paginationMode, updateState]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setPage(options.page != null ? options.page : 1);
   }, [options.page, setPage]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const rowCount = options.rowCount == null ? rows.length : options.rowCount;
     if (rowCount !== state.rowCount) {
       logger.info(`Options or rows changed, recalculating pageCount and rowCount`);
@@ -193,7 +193,7 @@ export const usePagination = (
     state.page,
   ]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (
       !options.autoPageSize &&
       options.pageSize &&
@@ -203,7 +203,7 @@ export const usePagination = (
     }
   }, [options.autoPageSize, options.pageSize, logger, setPageSize]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (options.autoPageSize && columns.visible.length > 0) {
       resetAutopageSize();
     }
@@ -212,7 +212,7 @@ export const usePagination = (
   useApiEventHandler(apiRef, PAGE_CHANGED_EVENT, options.onPageChanged);
   useApiEventHandler(apiRef, PAGESIZE_CHANGED_EVENT, options.onPageSizeChanged);
 
-  const onResize = useCallback(() => {
+  const onResize = React.useCallback(() => {
     if (options.autoPageSize) {
       resetAutopageSize();
     }

packages/grid/x-grid-modules/src/hooks/utils/useLogger.ts

@@ -13,7 +13,7 @@ export interface Logger {
 
 const noop = () => {};
 
-export const noopLogger: Logger = {
+const noopLogger: Logger = {
   debug: noop,
   info: noop,
   warn: noop,

packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import * as React from 'react';
 import {
   ContainerProps,
   GridOptions,
@@ -25,11 +25,11 @@ export const useVirtualColumns = (
   apiRef: ApiRef,
 ): UseVirtualColumnsReturnType => {
   const logger = useLogger('useVirtualColumns');
-  const renderedColRef = useRef<RenderColumnsProps | null>(null);
-  const containerPropsRef = useRef<ContainerProps | null>(null);
-  const lastScrollLeftRef = useRef<number>(0);
+  const renderedColRef = React.useRef<RenderColumnsProps | null>(null);
+  const containerPropsRef = React.useRef<ContainerProps | null>(null);
+  const lastScrollLeftRef = React.useRef<number>(0);
 
-  const getColumnIdxFromScroll = useCallback(
+  const getColumnIdxFromScroll = React.useCallback(
     (left: number) => {
       const positions = apiRef.current!.getColumnsMeta().positions;
       const hasColumns = apiRef.current!.getVisibleColumns().length;
@@ -44,7 +44,7 @@ export const useVirtualColumns = (
     [apiRef],
   );
 
-  const getColumnFromScroll = useCallback(
+  const getColumnFromScroll = React.useCallback(
     (left: number) => {
       const visibleColumns = apiRef.current!.getVisibleColumns();
       if (!visibleColumns.length) {
@@ -55,7 +55,7 @@ export const useVirtualColumns = (
     [apiRef, getColumnIdxFromScroll],
   );
 
-  const isColumnVisibleInWindow = useCallback(
+  const isColumnVisibleInWindow = React.useCallback(
     (colIndex: number): boolean => {
       if (!containerPropsRef.current) {
         return false;
@@ -73,7 +73,7 @@ export const useVirtualColumns = (
     [containerPropsRef, getColumnFromScroll, apiRef],
   );
 
-  const updateRenderedCols: UpdateRenderedColsFnType = useCallback(
+  const updateRenderedCols: UpdateRenderedColsFnType = React.useCallback(
     (containerProps: ContainerProps | null, scrollLeft: number) => {
       if (!containerProps) {
         return false;
@@ -147,7 +147,7 @@ export const useVirtualColumns = (
   };
   useApiMethod(apiRef, virtualApi, 'ColumnVirtualizationApi');
 
-  const resetRenderedColState = useCallback(() => {
+  const resetRenderedColState = React.useCallback(() => {
     logger.debug('Clearing previous renderedColRef');
     renderedColRef.current = null;
   }, [logger, renderedColRef]);