feat: adjust the import method (#400)

* feat: adjust the import method

* test: update scrollable component snapshot

* We are in  Qiandao lake.

Author: ProfBramble

build/web/app.js

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+import ReactDOM from 'react-dom';
 import { Workbench, MoleculeProvider } from '../../esm';
 import '../../esm/style/mo.css';
 
 const App = () => (
-    <React.StrictMode>
+    <StrictMode>
         <MoleculeProvider>
             <Workbench />
         </MoleculeProvider>
-    </React.StrictMode>
+    </StrictMode>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/components/actionBar/__tests__/actionBar.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 

src/components/actionBar/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 import {
     prefixClaName,

src/components/breadcrumb/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { prefixClaName, classNames, getBEMElement } from 'mo/common/className';
 import { ComponentProps } from 'react';
 import { Icon } from 'mo/components';

src/components/button/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { classNames, getBEMModifier, prefixClaName } from 'mo/common/className';
 
 type BtnSizeType = 'normal' | 'large';

src/components/checkbox/__tests__/checkbox.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 

src/components/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ComponentProps } from 'react';
 import { prefixClaName, classNames, getBEMElement } from 'mo/common/className';
 

src/components/collapse/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useRef, useLayoutEffect, useEffect, useCallback } from 'react';
 import { useState } from 'react';
 import Logger from 'mo/common/logger';
 import { Toolbar } from 'mo/components/toolbar';
@@ -57,8 +57,8 @@ export const MAX_GROW_HEIGHT = 220;
 
 export function Collapse(props: ICollapseProps) {
     const [activePanelKeys, setActivePanelKeys] = useState<React.Key[]>([]);
-    const wrapper = React.useRef<HTMLDivElement>(null);
-    const requestAF = React.useRef<number>();
+    const wrapper = useRef<HTMLDivElement>(null);
+    const requestAF = useRef<number>();
 
     const {
         className,
@@ -80,19 +80,19 @@ export function Collapse(props: ICollapseProps) {
 
     // to save position temporarily, empty array when rerender
     const _cachePosition: number[][] = [];
-    let _cacheWrapperHeight = React.useRef(0);
+    const _cacheWrapperHeight = useRef(0);
 
-    const handleResize = React.useCallback(() => {
+    const handleResize = useCallback(() => {
         // just want to trigger rerender
         setActivePanelKeys((keys) => keys.concat());
     }, []);
 
-    React.useEffect(() => {
+    useEffect(() => {
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, []);
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         // It's necessary to check panel's empty before calculate every panel
         filterData.forEach((panel) => {
             const isActive = activePanelKeys.includes(panel.id);

src/components/contextMenu/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { HTMLElementType } from 'mo/common/dom';
 import { IContextView, useContextView } from 'mo/components/contextView';
 

src/components/contextView/index.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import {
     prefixClaName,
     classNames,

src/components/dialog/actionButton.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
+import React, { useRef } from 'react';
 import { Button, IButtonProps } from 'mo/components/button';
 export interface ActionButtonProps extends IButtonProps {
     actionFn?: (...args: any[]) => any | PromiseLike<any>;
     closeModal: Function;
 }
 
 const ActionButton: React.FC<ActionButtonProps> = (props) => {
-    const clickedRef = React.useRef<boolean>(false);
+    const clickedRef = useRef<boolean>(false);
 
     const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
         const { closeModal } = props;

src/components/dialog/confirm.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 import { Icon } from 'mo/components/icon';
 import { IModalFuncProps, destroyFns } from './modal';

src/components/dialog/confirmDialog.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { classNames } from 'mo/common/className';
 import {
     confirmClassName,

src/components/dropdown/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { classNames, getBEMModifier, prefixClaName } from 'mo/common/className';
 import { useContextView } from '../contextView';
 import {
@@ -20,7 +20,7 @@ export type DropDownRef = {
 
 export const defaultDropDownClassName = prefixClaName('drop-down');
 
-export const DropDown = React.forwardRef<DropDownRef, IDropDownProps>(
+export const DropDown = forwardRef<DropDownRef, IDropDownProps>(
     (props: IDropDownProps, ref) => {
         const {
             className,
@@ -34,7 +34,7 @@ export const DropDown = React.forwardRef<DropDownRef, IDropDownProps>(
             render: () => overlay,
         });
 
-        React.useImperativeHandle(ref, () => ({
+        useImperativeHandle(ref, () => ({
             contextView,
             dispose: () => {
                 contextView!.hide();

src/components/icon/__tests__/icon.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 

src/components/icon/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { classNames, prefixClaName } from 'mo/common/className';
 import 'vscode-codicons/dist/codicon.css';
 import { ComponentProps } from 'react';

src/components/input/input.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { classNames, prefixClaName, getBEMModifier } from 'mo/common/className';
 import { KeyCodes } from 'mo/common/keyCodes';
 

src/components/input/textArea.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import RcTextArea, { TextAreaProps } from 'rc-textarea';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { useEffect, useRef } from 'react';

src/components/list/__tests__/list.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 

src/components/list/list.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { prefixClaName, classNames, getBEMModifier } from 'mo/common/className';
 import { ComponentProps, useEffect, useState } from 'react';
 import { cloneReactChildren } from 'mo/react';

src/components/menu/subMenu.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { classNames } from 'mo/common/className';
 import { TriggerEvent } from 'mo/common/dom';
 import { Icon } from 'mo/components/icon';

src/components/monaco/index.tsx

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import * as React from 'react';
+import React from 'react';
 import { PureComponent } from 'react';
 import { editor } from 'monaco-editor';
 import { isEqual } from 'lodash';