[core] import * as React from 'react';

mui · Jul 25, 2020 · 5a1a8a6 · 5a1a8a6
1 parent ff61359
commit 5a1a8a6
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 63 deletions.
diff --git a/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx b/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);
 

diff --git a/packages/demo-app/src/app/demos/theme/useTheme.ts b/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]);
 

diff --git a/packages/grid/x-grid-modules/lib/autosizer/index.js b/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() {},

diff --git a/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts b/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,
@@ -59,10 +59,10 @@ export const usePagination = (
     page: 1,
     pageCount: getPageCount(options.paginationPageSize, rows.length),
   };
-  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;
@@ -71,7 +71,7 @@ export const usePagination = (
     [dispatch],
   );
 
-  const setPage = useCallback(
+  const setPage = React.useCallback(
     (page: number) => {
       if (apiRef && apiRef.current) {
         apiRef.current!.renderPage(page);
@@ -89,7 +89,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;
@@ -118,37 +118,37 @@ 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 (rows.length !== state.rowCount) {
       logger.info(`Options or rows changed, recalculating pageCount and rowCount`);
       const newPageCount = getPageCount(state.pageSize, rows.length);
@@ -160,7 +160,7 @@ export const usePagination = (
     }
   }, [rows.length, logger, updateState, state.rowCount, state.pageSize, setPage, state.page]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (
       !options.paginationAutoPageSize &&
       options.paginationPageSize &&
@@ -170,7 +170,7 @@ export const usePagination = (
     }
   }, [options.paginationAutoPageSize, options.paginationPageSize, logger, setPageSize]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (options.paginationAutoPageSize && columns.visible.length > 0) {
       resetAutopageSize();
     }
@@ -179,7 +179,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.paginationAutoPageSize) {
       resetAutopageSize();
     }

diff --git a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts b/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]);