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
     )