Add FileSelector to CodeEditor

2024-01-08 18:09:05 +08:00
parent 88c66bd7a7
commit 5709815613
12 changed files with 540 additions and 62 deletions
--- a/src/components/ReactPlayground/CodeEditor/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/index.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import FileSelector from '@/components/ReactPlayground/CodeEditor/FileSelector'
+import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
+import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared.ts'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import _ from 'lodash'
+
+interface CodeEditorProps {
+    theme: ITheme
+    files: IFiles
+    readonly?: boolean
+    readonlyFiles?: string[]
+    selectedFileName: string
+    options?: IEditorOptions
+    onSelectedFileChange?: (fileName: string) => void
+    onRemoveFile?: (fileName: string, files: IFiles) => void
+}
+
+const CodeEditor: React.FC<CodeEditorProps> = ({
+    theme,
+    files,
+    readonly,
+    readonlyFiles,
+    options,
+    onSelectedFileChange,
+    onRemoveFile,
+    ...props
+}) => {
+    const [selectedFileName, setSelectedFileName] = useState(props.selectedFileName)
+
+    const handleOnChangeSelectedFile = (fileName: string) => {
+        if (onSelectedFileChange) {
+            onSelectedFileChange(fileName)
+        } else {
+            setSelectedFileName(fileName)
+        }
+    }
+
+    const handleOnRemoveFile = (fileName: string) => {
+        const clone = _.cloneDeep(files)
+        delete clone[fileName]
+        onRemoveFile?.(fileName, clone)
+    }
+
+    return (
+        <>
+            <FitFullscreen>
+                <FlexBox style={{ height: '100%' }}>
+                    <FileSelector
+                        files={files}
+                        readonly={readonly}
+                        readonlyFiles={readonlyFiles}
+                        selectedFileName={
+                            onSelectedFileChange ? props.selectedFileName : selectedFileName
+                        }
+                        onChange={handleOnChangeSelectedFile}
+                        onRemoveFile={handleOnRemoveFile}
+                    />
+                    <Editor
+                        theme={theme}
+                        selectedFileName={selectedFileName}
+                        files={files}
+                        options={options}
+                    />
+                </FlexBox>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default CodeEditor