fix: unit coding style && name to import (#333)

shiqiWang0 · beier · web-flow · commit 02dd422de9a1 · 2023-05-05T14:38:03.000+08:00
* fix: unit coding style &amp;&amp; name to import

* fix: update contextMenu snapshot

---------

Co-authored-by: beier &lt;beier@dtstack.com&gt;
diff --git a/src/blockHeader/index.tsx b/src/blockHeader/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, ReactNode } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
@@ -10,13 +10,13 @@ export interface IBlockHeaderProps {
     // 标题
     title: string;
     // 标题前的图标，默认是一个色块
-    beforeTitle?: React.ReactNode;
+    beforeTitle?: ReactNode;
     // 标题后的提示图标或文案
-    afterTitle?: React.ReactNode;
+    afterTitle?: ReactNode;
     // 默认展示为问号的tooltip
-    tooltip?: React.ReactNode;
+    tooltip?: ReactNode;
     // 后缀自定义内容块
-    addonAfter?: React.ReactNode;
+    addonAfter?: ReactNode;
     /**
      * 小标题 font-size: 12px; line-height: 32px
      * 中标题 font-size: 14px; line-height: 40px
@@ -35,7 +35,7 @@ export interface IBlockHeaderProps {
     defaultExpand?: boolean;
     // 展开/收起时的回调
     onChange?: (expand: boolean) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
     const prefixCls = 'dtc-block-header';
diff --git a/src/collapsibleActionItems/index.tsx b/src/collapsibleActionItems/index.tsx
@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Button, ButtonProps, Divider, Dropdown, DropDownProps, Menu } from 'antd';
 import { EllipsisOutlined } from '@ant-design/icons';
 
 type ActionItem = {
     key: React.Key;
-    name: React.ReactNode;
+    name: ReactNode;
     disabled?: boolean;
-    render?: () => React.ReactNode;
+    render?: () => ReactNode;
     [propName: string]: any;
 };
 
 interface ICollapsibleActionItems {
     maxCount?: number; // 最多展示数量，超出折叠到下拉菜单中
     actionItems: ActionItem[];
     className?: string;
-    divider?: React.ReactNode; // 分隔符
-    collapseIcon?: React.ReactNode; // 折叠菜单图标
+    divider?: ReactNode; // 分隔符
+    collapseIcon?: ReactNode; // 折叠菜单图标
     dropdownProps?: Partial<DropDownProps>;
     buttonProps?: Partial<ButtonProps>;
     onItemClick?(key: React.Key): void;
diff --git a/src/contextMenu/__tests__/__snapshots__/contextMenu.test.tsx.snap b/src/contextMenu/__tests__/__snapshots__/contextMenu.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`test contextMenu should match snapshot 1`] = `
         style="opacity: 0;"
       >
         <ul
-          class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light dt-contextMenu-menu"
+          class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light dtc-contextMenu-menu"
           data-menu-list="true"
           role="menu"
           tabindex="0"
diff --git a/src/contextMenu/index.tsx b/src/contextMenu/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, PropsWithChildren } from 'react';
+import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import { Dropdown, Menu, DropdownProps, Popconfirm, PopconfirmProps } from 'antd';
 import './style.scss';
 
@@ -10,7 +10,7 @@ interface IMenuProps {
     /**
      * 菜单栏的标题文案
      */
-    text: React.ReactNode;
+    text: ReactNode;
     /**
      * 菜单栏的样式
      */
@@ -46,7 +46,7 @@ export default function ContextMenu({
 }: PropsWithChildren<IContextMenu>) {
     const menu = (
         <Menu
-            className="dt-contextMenu-menu"
+            className="dtc-contextMenu-menu"
             onClick={(item) => {
                 item.domEvent.stopPropagation();
                 data.find((i) => i.key === item.key)?.cb?.();
diff --git a/src/contextMenu/style.scss b/src/contextMenu/style.scss
@@ -1,4 +1,4 @@
-.dt-contextMenu-menu {
+.dtc-contextMenu-menu {
     padding: 0;
     background: #FFF;
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
diff --git a/src/copy/index.tsx b/src/copy/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode, CSSProperties } from 'react';
 import { Tooltip, message } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
 import useClippy from 'use-clippy';
@@ -7,10 +7,10 @@ import './style.scss';
 
 export interface ICopyProps {
     text: string;
-    title?: React.ReactNode;
-    button?: React.ReactNode;
+    title?: ReactNode;
+    button?: ReactNode;
     hideTooltip?: boolean;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     className?: string;
     onCopy?: (text: string) => void;
 }
diff --git a/src/dropdown/select.tsx b/src/dropdown/select.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, ReactNode } from 'react';
 import { Button, Checkbox, Col, Dropdown, Row, Space, type DropDownProps } from 'antd';
 import classNames from 'classnames';
 import List from 'rc-virtual-list';
@@ -10,7 +10,7 @@ import './style.scss';
 interface IDropdownSelectProps
     extends Pick<DropDownProps, 'getPopupContainer'>,
         Required<Pick<CheckboxGroupProps, 'value' | 'options' | 'onChange'>> {
-    children: React.ReactNode;
+    children: ReactNode;
     className?: string;
     onSubmit?: (value: CheckboxValueType[]) => void;
 }
diff --git a/src/ellipsisText/demos/valueType.tsx b/src/ellipsisText/demos/valueType.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode, Component } from 'react';
 import { EllipsisText } from 'dt-react-component';
 import { Divider } from 'antd';
 
@@ -18,8 +18,8 @@ const element = (
 
 const useEllipsisText = () => element;
 
-class WithEllipsisText extends React.Component {
-    render(): React.ReactNode {
+class WithEllipsisText extends Component {
+    render(): ReactNode {
         return element;
     }
 }
diff --git a/src/ellipsisText/index.tsx b/src/ellipsisText/index.tsx
@@ -1,4 +1,11 @@
-import React, { useRef, useState, useLayoutEffect, useCallback, ReactNode } from 'react';
+import React, {
+    useRef,
+    useState,
+    useLayoutEffect,
+    useCallback,
+    ReactNode,
+    CSSProperties,
+} from 'react';
 import { Tooltip } from 'antd';
 import { AbstractTooltipProps, RenderFunction } from 'antd/lib/tooltip';
 import classNames from 'classnames';
@@ -199,7 +206,7 @@ const EllipsisText = (props: IEllipsisTextProps) => {
     };
 
     const renderText = useCallback(() => {
-        const style: React.CSSProperties = {
+        const style: CSSProperties = {
             maxWidth: width,
             cursor,
         };
diff --git a/src/empty/index.tsx b/src/empty/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode, CSSProperties } from 'react';
 import { Empty as AntdEmpty, EmptyProps } from 'antd';
 import './style.scss';
 
@@ -14,16 +14,16 @@ export const IMG_MAP = {
 interface IProps {
     type?: 'default' | 'search' | 'chart' | 'project' | 'overview' | 'permission';
     height?: number;
-    image?: React.ReactNode;
-    imageStyle?: React.CSSProperties;
+    image?: ReactNode;
+    imageStyle?: CSSProperties;
 }
 
 const Empty = (props: EmptyProps & IProps) => {
     const { type = 'default', height = 80, image, imageStyle, ...restProps } = props;
-    let newImage: React.ReactNode = IMG_MAP[type] ? (
+    let newImage: ReactNode = IMG_MAP[type] ? (
         <img src={require('./emptyImg/' + IMG_MAP[type])}></img>
     ) : null;
-    if (image) newImage = image as React.ReactNode;
+    if (image) newImage = image as ReactNode;
     const newImageStyle = imageStyle ? { height, ...imageStyle } : { height };
     return (
         <div className="dtc-empty">
diff --git a/src/errorBoundary/index.tsx b/src/errorBoundary/index.tsx
@@ -1,26 +1,23 @@
-import React from 'react';
+import React, { ReactNode, Component, ErrorInfo } from 'react';
 import LoadError from './loadError';
 
 interface IErrorBoundaryProps {
-    children?: React.ReactNode;
-    errorPage?: React.ReactNode;
+    children?: ReactNode;
+    errorPage?: ReactNode;
     onError?: (error: Error) => void;
 }
 
 interface IErrorBoundaryState {
     hasError: boolean;
 }
-export default class ErrorBoundary extends React.Component<
-    IErrorBoundaryProps,
-    IErrorBoundaryState
-> {
+export default class ErrorBoundary extends Component<IErrorBoundaryProps, IErrorBoundaryState> {
     state = { hasError: false };
     static getDerivedStateFromError(_error: any) {
         // Update state so the next render will show the fallback UI.
         return { hasError: true };
     }
 
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
         this.setState({ hasError: true });
         this.props.onError?.(error);
         console.log(error);
diff --git a/src/form/table.tsx b/src/form/table.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, ReactNode } from 'react';
 import { Form, Table, type FormListFieldData, type TableProps } from 'antd';
 import classnames from 'classnames';
 import utils from '../utils';
@@ -78,7 +78,7 @@ export interface ColumnType
         record: FormListFieldData,
         namePath: OverrideParameters,
         formInstance?: RcFormInstance
-    ) => React.ReactNode;
+    ) => ReactNode;
 }
 
 const className = 'dtc-form__table';
diff --git a/src/fullscreen/index.tsx b/src/fullscreen/index.tsx
@@ -1,5 +1,5 @@
 import { Button } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, ReactNode, CSSProperties, HTMLAttributes } from 'react';
 import KeyEventListener from '../keyEventListener';
 import MyIcon from './icon';
 
@@ -24,12 +24,12 @@ interface DocumentWithFullscreen extends Document {
 }
 
 export interface IFullscreenProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    extends React.DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
     themeDark?: boolean;
     target?: string;
-    iconStyle?: React.CSSProperties;
-    fullIcon?: React.ReactNode;
-    exitFullIcon?: React.ReactNode;
+    iconStyle?: CSSProperties;
+    fullIcon?: ReactNode;
+    exitFullIcon?: ReactNode;
     onFullscreen?: (isFullScreen: boolean) => void;
 }
 
diff --git a/src/keyEventListener/index.tsx b/src/keyEventListener/index.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, ReactNode, ForwardRefExoticComponent } from 'react';
 import KeyCombiner from './listener';
 
 export interface IKeyEventListenerProps {
     onKeyDown?: (e: KeyboardEvent) => void;
     onKeyUp?: (e: KeyboardEvent) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
-interface CompoundedComponent extends React.ForwardRefExoticComponent<IKeyEventListenerProps> {
+interface CompoundedComponent extends ForwardRefExoticComponent<IKeyEventListenerProps> {
     KeyCombiner: typeof KeyCombiner;
 }
 
diff --git a/src/keyEventListener/listener.tsx b/src/keyEventListener/listener.tsx
@@ -1,11 +1,11 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState, ReactNode } from 'react';
 
 export interface IKeyCombinerProps {
     onTrigger?: (evt: any) => void;
     keyMap?: {
         [key: string]: boolean;
     };
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 
 export default ({ onTrigger, keyMap, children }: IKeyCombinerProps) => {
diff --git a/src/loadError/index.md b/src/loadError/index.md
diff --git a/src/progressLine/index.tsx b/src/progressLine/index.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React, { ReactNode } from 'react';
 import { Tooltip } from 'antd';
 import { TooltipProps } from 'antd/lib/tooltip';
 import './style.scss';
 
 interface IProgressLineProps {
     // 顶部左侧的内容
-    title?: React.ReactNode;
+    title?: ReactNode;
     // 顶部右侧的百分比，需要带上 %
     percent?: string;
     // 进度条的颜色
diff --git a/src/resize/index.tsx b/src/resize/index.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactNode } from 'react';
 
 export interface ResizeProps {
     observerEle?: HTMLElement | null;
-    children?: React.ReactNode;
+    children?: ReactNode;
     onResize?: () => void;
 }
 
diff --git a/src/slidePane/index.tsx b/src/slidePane/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, CSSProperties, MouseEvent, KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import { assign } from 'lodash';
 import RcDrawer from 'rc-drawer';
@@ -7,9 +7,9 @@ import './style.scss';
 export interface ISlidePaneProps {
     visible: boolean;
     className?: string;
-    style?: React.CSSProperties;
-    bodyStyle?: React.CSSProperties;
-    onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    style?: CSSProperties;
+    bodyStyle?: CSSProperties;
+    onClose?: (e: MouseEvent | KeyboardEvent) => void;
 }
 const SlidePane = ({
     visible,
@@ -20,7 +20,7 @@ const SlidePane = ({
     onClose,
 }: PropsWithChildren<ISlidePaneProps>) => {
     const slidePrefixCls = 'dtc-slide-pane';
-    let rootStyle: React.CSSProperties = {
+    let rootStyle: CSSProperties = {
         top: 0,
         right: 0,
         transform: visible ? undefined : 'translate3d(150%, 0, 0)',
diff --git a/src/spreadSheet/index.tsx b/src/spreadSheet/index.tsx
@@ -19,12 +19,12 @@ export interface ISpreadSheetProps {
 const SpreadSheet: React.FC<ISpreadSheetProps> = ({ data, columns = [], className, options }) => {
     const tableRef = useRef<any>(null);
     const copyUtils = new CopyUtils();
-    const _timer = useRef<number>();
+    const _timer = useRef<NodeJS.Timeout>();
 
     useEffect(() => {
         if (tableRef.current) {
             removeRenderClock();
-            _timer.current = window.setTimeout(() => {
+            _timer.current = setTimeout(() => {
                 tableRef.current.hotInstance.render();
             }, 100);
         }
diff --git a/src/statusTag/index.tsx b/src/statusTag/index.tsx

Original file line number	Diff line number	Diff line change
@@ -20,7 +20,7 @@ exports[`test contextMenu should match snapshot 1`] = `
`20`	`20`	`style="opacity: 0;"`
`21`	`21`	`>`
`22`	`22`	`<ul`
`23`		`- class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light dt-contextMenu-menu"`
	`23`	`+ class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light dtc-contextMenu-menu"`
`24`	`24`	`data-menu-list="true"`
`25`	`25`	`role="menu"`
`26`	`26`	`tabindex="0"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.dt-contextMenu-menu {`
	`1`	`+.dtc-contextMenu-menu {`
`2`	`2`	`padding: 0;`
`3`	`3`	`background: #FFF;`
`4`	`4`	`box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React from 'react';`
	`1`	`+import React, { ReactNode, Component } from 'react';`
`2`	`2`	`import { EllipsisText } from 'dt-react-component';`
`3`	`3`	`import { Divider } from 'antd';`
`4`	`4`
`@@ -18,8 +18,8 @@ const element = (`
`18`	`18`
`19`	`19`	`const useEllipsisText = () => element;`
`20`	`20`
`21`		`-class WithEllipsisText extends React.Component {`
`22`		`- render(): React.ReactNode {`
	`21`	`+class WithEllipsisText extends Component {`
	`22`	`+ render(): ReactNode {`
`23`	`23`	`return element;`
`24`	`24`	`}`
`25`	`25`	`}`