76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import { ElementIds } from '@/Constants/ElementIDs'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { ChangeEventHandler, FormEventHandler, useCallback, useEffect, useState } from 'react'
|
|
import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
|
|
import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
|
|
import FilePreview from '@/Components/FilePreview/FilePreview'
|
|
import { FileViewProps } from './FileViewProps'
|
|
|
|
const FileViewWithoutProtection = ({ application, viewControllerManager, file }: FileViewProps) => {
|
|
const [name, setName] = useState(file.name)
|
|
|
|
useEffect(() => {
|
|
setName(file.name)
|
|
}, [file.name])
|
|
|
|
const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(async (event) => {
|
|
setName(event.target.value)
|
|
}, [])
|
|
|
|
const onFormSubmit: FormEventHandler = useCallback(
|
|
async (event) => {
|
|
event.preventDefault()
|
|
|
|
await application.items.renameFile(file, name)
|
|
|
|
void application.sync.sync()
|
|
},
|
|
[application.items, application.sync, file, name],
|
|
)
|
|
|
|
return (
|
|
<div className="sn-component section editor" aria-label="File">
|
|
<div className="flex flex-col">
|
|
<div className="content-title-bar section-title-bar w-full" id="file-title-bar">
|
|
<div className="flex items-center justify-between h-8">
|
|
<div className="flex-grow">
|
|
<form onSubmit={onFormSubmit} className="title overflow-auto">
|
|
<input
|
|
className="input"
|
|
id={ElementIds.FileTitleEditor}
|
|
onChange={onTitleChange}
|
|
onFocus={(event) => {
|
|
event.target.select()
|
|
}}
|
|
spellCheck={false}
|
|
value={name}
|
|
autoComplete="off"
|
|
/>
|
|
</form>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="mr-3">
|
|
<AttachedFilesButton
|
|
application={application}
|
|
featuresController={viewControllerManager.featuresController}
|
|
filePreviewModalController={viewControllerManager.filePreviewModalController}
|
|
filesController={viewControllerManager.filesController}
|
|
navigationController={viewControllerManager.navigationController}
|
|
notesController={viewControllerManager.notesController}
|
|
/>
|
|
</div>
|
|
<FileOptionsPanel
|
|
filesController={viewControllerManager.filesController}
|
|
selectionController={viewControllerManager.selectionController}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<FilePreview file={file} application={application} key={file.uuid} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(FileViewWithoutProtection)
|