rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace 'preact' with 'react' (#1048)

Browse Source
This commit is contained in:
Aman Harwara
2022-05-30 12:42:52 +05:30
committed by GitHub
parent e74b4953ea
commit 8c368dd96b
231 changed files with 4794 additions and 4302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
View File

@@ -2,9 +2,8 @@ import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { HistoryEntry, SNComponent, SNNote } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useEffect, useMemo } from 'preact/hooks'
import { ComponentView } from '@/Components/ComponentView/ComponentView'
import { FunctionComponent, useEffect, useMemo } from 'react'
import ComponentView from '@/Components/ComponentView/ComponentView'
import { LegacyHistoryEntry } from './utils'
const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
@@ -17,58 +16,64 @@ type SelectedRevisionContentProps = {
templateNoteForRevision: SNNote
}
export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> = observer(
({ application, appState, selectedRevision, editorForCurrentNote, templateNoteForRevision }) => {
const componentViewer = useMemo(() => {
if (!editorForCurrentNote) {
return undefined
const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> = ({
application,
appState,
selectedRevision,
editorForCurrentNote,
templateNoteForRevision,
}) => {
const componentViewer = useMemo(() => {
if (!editorForCurrentNote) {
return undefined
}
const componentViewer = application.componentManager.createComponentViewer(editorForCurrentNote)
componentViewer.setReadonly(true)
componentViewer.lockReadonly = true
componentViewer.overrideContextItem = templateNoteForRevision
return componentViewer
}, [application, editorForCurrentNote, templateNoteForRevision])
useEffect(() => {
return () => {
if (componentViewer) {
application.componentManager.destroyComponentViewer(componentViewer)
}
}
}, [application, componentViewer])
const componentViewer = application.componentManager.createComponentViewer(editorForCurrentNote)
componentViewer.setReadonly(true)
componentViewer.lockReadonly = true
componentViewer.overrideContextItem = templateNoteForRevision
return componentViewer
}, [application, editorForCurrentNote, templateNoteForRevision])
useEffect(() => {
return () => {
if (componentViewer) {
application.componentManager.destroyComponentViewer(componentViewer)
}
}
}, [application, componentViewer])
return (
<div className="flex flex-col h-full overflow-hidden">
<div className="p-4 text-base font-bold w-full">
<div className="title">{selectedRevision.payload.content.title}</div>
</div>
{!componentViewer && (
<div className="relative flex-grow min-h-0 overflow-hidden">
{selectedRevision.payload.content.text.length ? (
<textarea
readOnly={true}
className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
>
{selectedRevision.payload.content.text}
</textarea>
) : (
<div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
)}
</div>
)}
{componentViewer && (
<div className="component-view">
<ComponentView
key={componentViewer.identifier}
componentViewer={componentViewer}
application={application}
appState={appState}
/>
</div>
)}
return (
<div className="flex flex-col h-full overflow-hidden">
<div className="p-4 text-base font-bold w-full">
<div className="title">{selectedRevision.payload.content.title}</div>
</div>
)
},
)
{!componentViewer && (
<div className="relative flex-grow min-h-0 overflow-hidden">
{selectedRevision.payload.content.text.length ? (
<textarea
readOnly={true}
className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
>
{selectedRevision.payload.content.text}
</textarea>
) : (
<div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
)}
</div>
)}
{componentViewer && (
<div className="component-view">
<ComponentView
key={componentViewer.identifier}
componentViewer={componentViewer}
application={application}
appState={appState}
/>
</div>
)}
</div>
)
}
export default observer(SelectedRevisionContent)