FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize CodeEditor

Browse Source
This commit is contained in:
Fat Snake
2024-01-09 11:42:11 +08:00
parent 3ec95ee8a4
commit 087b632610
3 changed files with 26 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
View File

@@ -120,14 +120,15 @@ const FileSelector: React.FC<FileSelectorProps> = ({
}
useEffect(() => {
Object.keys(files).length &&
setTabs(
Object.keys(files).filter(
(item) =>
![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
!files[item].hidden
)
)
Object.keys(files).length
? setTabs(
Object.keys(files).filter(
(item) =>
![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
!files[item].hidden
)
)
: setTabs([])
}, [files])
return (
@@ -166,14 +167,16 @@ const FileSelector: React.FC<FileSelectorProps> = ({
</FlexBox>
</HideScrollbar>
</div>
<div className={'sticky'}>
<Item
value={'Import Map'}
active={selectedFileName === IMPORT_MAP_FILE_NAME}
onClick={editImportMap}
readonly
/>
</div>
{files[IMPORT_MAP_FILE_NAME] && (
<div className={'sticky'}>
<Item
value={'Import Map'}
active={selectedFileName === IMPORT_MAP_FILE_NAME}
onClick={editImportMap}
readonly
/>
</div>
)}
</div>
</>
)

6
src/components/ReactPlayground/CodeEditor/index.tsx
View File

@@ -83,6 +83,9 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
}
const handleOnChangeFileContent = (code = '') => {
if (!files[onSelectedFileChange ? props.selectedFileName : selectedFileName]) {
return
}
const clone = _.cloneDeep(files)
clone[onSelectedFileChange ? props.selectedFileName : selectedFileName].value = code ?? ''
onChangeFileContent?.(
@@ -119,7 +122,8 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
readonly ||
readonlyFiles?.includes(
onSelectedFileChange ? props.selectedFileName : selectedFileName
)
) ||
!files[onSelectedFileChange ? props.selectedFileName : selectedFileName]
}
onChange={handleOnChangeFileContent}
/>

42
src/pages/OnlineEditor.tsx
View File

@@ -1,54 +1,16 @@
import React from 'react'
import CodeEditor from '@/components/ReactPlayground/CodeEditor'
import { fileNameToLanguage } from '@/components/ReactPlayground/files'
import { initFiles } from '@/components/ReactPlayground/files'
import { IFiles } from '@/components/ReactPlayground/shared'
const OnlineEditor: React.FC = () => {
const [files, setFiles] = useState<IFiles>({
['App.tsx']: {
name: 'App.tsx',
language: fileNameToLanguage('App.tsx'),
value: 'const a = () => {}'
},
['App.css']: {
name: 'App.css',
language: fileNameToLanguage('App.css'),
value: '.title {}'
},
cde: {
name: 'App.css',
language: fileNameToLanguage('App.css'),
value: '.title {}'
},
def: {
name: 'App.css',
language: fileNameToLanguage('App.css'),
value: '.title {}'
},
efg: {
name: 'App.css',
language: fileNameToLanguage('App.css'),
value: '.title {}'
},
fgh: {
name: 'App.css',
language: fileNameToLanguage('App.css'),
value: '.title {}'
},
ghi: {
name: 'App.css',
language: fileNameToLanguage('App.css'),
value: '.title {}'
}
})
const [files, setFiles] = useState<IFiles>(initFiles)
return (
<>
<CodeEditor
files={files}
selectedFileName={'App.css'}
notRemovable={['App.css', 'fgh']}
readonlyFiles={['App.tsx']}
onAddFile={(_, files) => setFiles(files)}
onRemoveFile={(_, files) => setFiles(files)}
onRenameFile={(_, __, files) => setFiles(files)}