Optimize code

src/components/Playground/CodeEditor/Editor/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/Playground/CodeEditor/Editor/editor.scss'
@@ -19,7 +18,7 @@ interface EditorProps {
     onJumpFile?: (fileName: string) => void
 }
 
-const Editor: React.FC<EditorProps> = ({
+const Editor = ({
     tsConfig,
     files = {},
     selectedFileName = '',
@@ -28,7 +27,7 @@ const Editor: React.FC<EditorProps> = ({
     onChange,
     options,
     onJumpFile
-}) => {
+}: EditorProps) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
     const monacoRef = useRef<Monaco>()
     const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()

src/components/Playground/CodeEditor/FileSelector/Item.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
 
 interface ItemProps {
     className?: string
@@ -7,7 +7,7 @@ interface ItemProps {
     value: string
     active?: boolean
     hasEditing?: boolean
-    setHasEditing?: React.Dispatch<React.SetStateAction<boolean>>
+    setHasEditing?: Dispatch<SetStateAction<boolean>>
     onOk?: (fileName: string) => void
     onCancel?: () => void
     onRemove?: (fileName: string) => void
@@ -15,7 +15,7 @@ interface ItemProps {
     onValidate?: (newFileName: string, oldFileName: string) => boolean
 }
 
-const Item: React.FC<ItemProps> = ({
+const Item = ({
     className,
     readonly = false,
     value,
@@ -28,7 +28,7 @@ const Item: React.FC<ItemProps> = ({
     onClick,
     onValidate,
     ...prop
-}) => {
+}: ItemProps) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const [fileName, setFileName] = useState(value)
     const [creating, setCreating] = useState(prop.creating)
@@ -41,7 +41,7 @@ const Item: React.FC<ItemProps> = ({
         onClick?.()
     }
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
             event.preventDefault()
             finishNameFile()
@@ -89,11 +89,11 @@ const Item: React.FC<ItemProps> = ({
         })
     }
 
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         setFileName(e.target.value)
     }
 
-    const handleOnDelete = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleOnDelete = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         if (hasEditing) {
             return

src/components/Playground/CodeEditor/FileSelector/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -22,7 +21,7 @@ interface FileSelectorProps {
     selectedFileName?: string
 }
 
-const FileSelector: React.FC<FileSelectorProps> = ({
+const FileSelector = ({
     files = {},
     onChange,
     onError,
@@ -32,7 +31,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     onAddFile,
     onUpdateFileName,
     selectedFileName = ''
-}) => {
+}: FileSelectorProps) => {
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [tabs, setTabs] = useState<string[]>([])
     const [creating, setCreating] = useState(false)

src/components/Playground/CodeEditor/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import FlexBox from '@/components/common/FlexBox'
@@ -29,7 +28,7 @@ interface CodeEditorProps {
     onError?: (msg: string) => void
 }
 
-const CodeEditor: React.FC<CodeEditorProps> = ({
+const CodeEditor = ({
     theme,
     tsConfig,
     files,
@@ -44,7 +43,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     onChangeFileContent,
     onError,
     ...props
-}) => {
+}: CodeEditorProps) => {
     const filteredFilesName = getFileNameList(files).filter(
         (item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
     )

src/components/Playground/Output/Preview/index.tsx

@@ -1,4 +1,3 @@
-import React, { useRef, useState } from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
@@ -34,7 +33,7 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Preview: React.FC<PreviewProps> = ({ iframeKey, files, importMap }) => {
+const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [errorMsg, setErrorMsg] = useState('')
     const [loaded, setLoaded] = useState(false)

src/components/Playground/Output/Transform/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import '@/components/Playground/Output/Transform/transform.scss'
@@ -13,7 +12,7 @@ interface OutputProps {
     theme?: ITheme
 }
 
-const Transform: React.FC<OutputProps> = ({ file, theme }) => {
+const Transform = ({ file, theme }: OutputProps) => {
     const [compiledCode, setCompiledCode] = useState('')
     const [errorMsg, setErrorMsg] = useState('')
 

src/components/Playground/Output/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
@@ -11,7 +10,7 @@ interface OutputProps {
     importMap: IImportMap
 }
 
-const Output: React.FC<OutputProps> = ({ files, selectedFileName, importMap }) => {
+const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (

src/components/Playground/index.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import '@/components/Playground/playground.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { IFiles, IImportMap, ITsConfig } from '@/components/Playground/shared'
@@ -17,11 +16,7 @@ interface PlaygroundProps {
     initTsConfigRaw: string
 }
 
-const Playground: React.FC<PlaygroundProps> = ({
-    initFiles,
-    initImportMapRaw,
-    initTsConfigRaw
-}) => {
+const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: PlaygroundProps) => {
     const [files, setFiles] = useState(initFiles)
     const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
     const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)

src/components/common/Card.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/card.scss'
 
-interface CardProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+interface CardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
 const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
     return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />

src/components/common/FitCenter.tsx

@@ -1,12 +1,11 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/fit-center.scss'
 
-interface FitCenterProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     vertical?: boolean
 }
 
-const FitCenter: React.FC<FitCenterProps> = ({ className, vertical, ...props }) => {
+const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
     return (
         <div
             className={`fit-center${className ? ` ${className}` : ''}${

src/components/common/FitFullscreen.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/fit-fullscreen.scss'
 
 interface FitFullscreenProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     zIndex?: number
     backgroundColor?: string
 }

src/components/common/FlexBox.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/flex-box.scss'
 
-interface FlexBoxProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     direction?: 'horizontal' | 'vertical'
     gap?: number
 }

src/components/common/FullscreenLoadingMask.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/fullscreen-loading-mask.scss'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import FitFullscreen from '@/components/common/FitFullscreen'
 
-const FullscreenLoadingMask: React.FC = () => {
+const FullscreenLoadingMask = () => {
     const loadingIcon = (
         <>
             <Icon

src/components/common/HideScrollbar.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { TouchEvent, MouseEvent, KeyboardEvent, DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/hide-scrollbar.scss'
 
 interface HideScrollbarProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     isPreventScroll?: boolean
     isPreventVerticalScroll?: boolean
     isPreventHorizontalScroll?: boolean
@@ -210,7 +210,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }, [autoHideWaitingTime, horizontalScrollbarPosition])
 
         const handleDefaultTouchStart = useCallback(
-            (event: React.TouchEvent) => {
+            (event: TouchEvent) => {
                 if (event.touches.length !== 1 || isPreventScroll) {
                     lastTouchPositionRef.current = { x: -1, y: -1 }
                     return
@@ -223,7 +223,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         )
 
         const handleDefaultTouchmove = useCallback(
-            (event: React.TouchEvent) => {
+            (event: TouchEvent) => {
                 if (event.touches.length !== 1 || isPreventScroll) {
                     lastTouchPositionRef.current = { x: -1, y: -1 }
                     return
@@ -252,7 +252,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
             [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
         )
 
-        const handleDefaultMouseDown = (event: React.MouseEvent) => {
+        const handleDefaultMouseDown = (event: MouseEvent) => {
             if (isPreventAnyScroll)
                 if (event.button === 1) {
                     event.preventDefault()
@@ -260,7 +260,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }
 
         const handleDefaultKeyDown = useCallback(
-            (event: React.KeyboardEvent) => {
+            (event: KeyboardEvent) => {
                 if (
                     isPreventScroll &&
                     [
@@ -297,7 +297,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         )
 
         const handleScrollbarMouseEvent = (eventFlag: string, scrollbarFlag: string) => {
-            return (event: React.MouseEvent) => {
+            return (event: MouseEvent) => {
                 switch (eventFlag) {
                     case 'down':
                         lastScrollbarClickPositionRef.current = {
@@ -348,7 +348,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }
 
         const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
-            return (event: React.TouchEvent) => {
+            return (event: TouchEvent) => {
                 switch (eventFlag) {
                     case 'start':
                         if (event.touches.length !== 1) {

src/components/common/Indicator.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import _ from 'lodash'
 import '@/assets/css/components/common/indicator.scss'
 
@@ -8,7 +7,7 @@ interface IndicatorProps {
     onSwitch?: (index: number) => void
 }
 
-const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
+const Indicator = ({ total, current, onSwitch }: IndicatorProps) => {
     const handleClick = (index: number) => {
         return () => {
             onSwitch?.(index)

src/components/common/LoadingMask.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/loading-mask.scss'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 
-interface LoadingMaskProps extends React.PropsWithChildren {
+interface LoadingMaskProps extends PropsWithChildren {
     hidden?: boolean
-    maskContent?: React.ReactNode
+    maskContent?: ReactNode
 }
-const LoadingMask: React.FC<LoadingMaskProps> = (props) => {
+const LoadingMask = (props: LoadingMaskProps) => {
     const loadingIcon = (
         <>
             <Icon

src/components/common/Permission.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 import { hasPathPermission, hasPermission } from '@/util/auth'
 
-interface PermissionProps extends React.PropsWithChildren {
+interface PermissionProps extends PropsWithChildren {
     operationCode?: string
     path?: string
 }
 
-const Permission: React.FC<PermissionProps> = (props) => {
+const Permission = (props: PermissionProps) => {
     if (
         (!props.operationCode || hasPermission(props.operationCode)) &&
         (!props.path || hasPathPermission(props.path))

src/components/common/Sidebar/Footer.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
@@ -6,7 +5,7 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'
 
-const Footer: React.FC = () => {
+const Footer = () => {
     const matches = useMatches()
     const lastMatch = matches.reduce((_, second) => second)
     const location = useLocation()

src/components/common/Sidebar/Item.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { ReactNode, MouseEvent } from 'react'
 import Icon from '@ant-design/icons'
 import Submenu from '@/components/common/Sidebar/Submenu'
 
@@ -6,15 +6,15 @@ type ItemProps = {
     icon?: IconComponent
     text?: string
     path: string
-    children?: React.ReactNode
+    children?: ReactNode
     end?: boolean
 }
 
-const Item: React.FC<ItemProps> = (props) => {
+const Item = (props: ItemProps) => {
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
 
-    const showSubmenu = (e: React.MouseEvent) => {
+    const showSubmenu = (e: MouseEvent) => {
         const parentElement = e.currentTarget.parentElement
         if (parentElement?.childElementCount === 2) {
             const parentClientRect = parentElement.getBoundingClientRect()

src/components/common/Sidebar/ItemList.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 
-const ItemList: React.FC<React.PropsWithChildren> = (props) => {
+const ItemList = (props: PropsWithChildren) => {
     return <ul>{props.children}</ul>
 }
 

src/components/common/Sidebar/Scroll.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 
 export interface SidebarScrollElement {
     refreshLayout(): void
 }
 
-const Scroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
+const Scroll = forwardRef<SidebarScrollElement, PropsWithChildren>((props, ref) => {
     useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
         return {
             refreshLayout() {

src/components/common/Sidebar/Separate.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 
-const Separate: React.FC<
-    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-> = ({ className, ...props }) => {
+const Separate = ({
+    className,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
     return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
 }
 

src/components/common/Sidebar/Submenu.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 
-interface SidebarSubmenuProps extends React.PropsWithChildren {
+interface SidebarSubmenuProps extends PropsWithChildren {
     submenuTop: number
     submenuLeft: number
 }
 
-const Submenu: React.FC<SidebarSubmenuProps> = (props) => {
+const Submenu = (props: SidebarSubmenuProps) => {
     return (
         <ul
             className={'submenu'}

src/components/common/Sidebar/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/sidebar.scss'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
@@ -9,21 +9,14 @@ import Separate from '@/components/common/Sidebar/Separate'
 import Submenu from '@/components/common/Sidebar/Submenu'
 import Footer from '@/components/common/Sidebar/Footer'
 
-interface SidebarProps extends React.PropsWithChildren {
+interface SidebarProps extends PropsWithChildren {
     title: string
     width?: string
     onSidebarSwitch?: (hidden: boolean) => void
-    bottomFixed?: React.ReactNode
+    bottomFixed?: ReactNode
 }
 
-const Sidebar: React.FC<SidebarProps> & {
-    Item: typeof Item
-    ItemList: typeof ItemList
-    Scroll: typeof Scroll
-    Separate: typeof Separate
-    Submenu: typeof Submenu
-    Footer: typeof Footer
-} = (props) => {
+const Sidebar = (props: SidebarProps) => {
     const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
 
     const switchSidebar = () => {