73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
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
|