37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
import { observer } from 'mobx-react-lite'
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
|
|
import FileViewWithoutProtection from './FileViewWithoutProtection'
|
|
import { FileViewProps } from './FileViewProps'
|
|
|
|
const FileView = ({ application, viewControllerManager, file }: FileViewProps) => {
|
|
const [shouldShowProtectedOverlay, setShouldShowProtectedOverlay] = useState(
|
|
file.protected && !application.hasProtectionSources(),
|
|
)
|
|
|
|
useEffect(() => {
|
|
setShouldShowProtectedOverlay(viewControllerManager.filesController.showProtectedOverlay)
|
|
}, [viewControllerManager.filesController.showProtectedOverlay])
|
|
|
|
const dismissProtectedWarning = useCallback(() => {
|
|
void viewControllerManager.filesController.toggleFileProtection(file)
|
|
}, [file, viewControllerManager.filesController])
|
|
|
|
return shouldShowProtectedOverlay ? (
|
|
<div aria-label="Note" className="section editor sn-component">
|
|
<div className="h-full flex justify-center items-center">
|
|
<ProtectedItemOverlay
|
|
viewControllerManager={viewControllerManager}
|
|
hasProtectionSources={application.hasProtectionSources()}
|
|
onViewItem={dismissProtectedWarning}
|
|
itemType={'note'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<FileViewWithoutProtection application={application} viewControllerManager={viewControllerManager} file={file} />
|
|
)
|
|
}
|
|
|
|
export default observer(FileView)
|