refactor: mobile modals (#2173)

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,19 +1,20 @@
 import { getPlatformString } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
-import { ReactNode } from 'react'
+import { ForwardedRef, forwardRef, ReactNode } from 'react'
 
 type Props = {
   children: ReactNode
   onDismiss: () => void
 }
 
-const HistoryModalDialog = ({ children, onDismiss }: Props) => {
+const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: ForwardedRef<HTMLDivElement>) => {
   return (
     <DialogOverlay
       className={`sn-component ${getPlatformString()}`}
       onDismiss={onDismiss}
       aria-label="Note revision history"
+      ref={ref}
     >
       <DialogContent
         aria-label="Note revision history"
@@ -26,6 +27,6 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
       </DialogContent>
     </DialogOverlay>
   )
-}
+})
 
 export default HistoryModalDialog

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx

@@ -46,6 +46,7 @@ const HistoryModalDialogContent = ({
         >
           Content
         </button>
+        <div className="mx-auto text-base font-semibold">History</div>
         <button className="ml-auto mr-2 rounded-full border border-border p-1.5" onClick={dismissModal}>
           <Icon type="close" className="h-4 w-4" />
         </button>

packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx

@@ -4,6 +4,7 @@ import HistoryModalDialogContent from './HistoryModalDialogContent'
 import HistoryModalDialog from './HistoryModalDialog'
 import { RevisionHistoryModalProps } from './RevisionHistoryModalProps'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
+import { useModalAnimation } from '../Shared/useModalAnimation'
 
 const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({
   application,
@@ -14,7 +15,9 @@ const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({
 }) => {
   const addAndroidBackHandler = useAndroidBackHandler()
 
-  const isOpen = !!historyModalController.note
+  const isOpen = Boolean(
+    historyModalController.note && application.isAuthorizedToRenderItem(historyModalController.note),
+  )
 
   useEffect(() => {
     let removeListener: (() => void) | undefined
@@ -33,24 +36,24 @@ const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({
     }
   }, [addAndroidBackHandler, historyModalController, isOpen])
 
-  if (!historyModalController.note) {
-    return null
-  }
+  const [isMounted, setElement] = useModalAnimation(isOpen)
 
-  if (!application.isAuthorizedToRenderItem(historyModalController.note)) {
+  if (!isMounted) {
     return null
   }
 
   return (
-    <HistoryModalDialog onDismiss={historyModalController.dismissModal}>
-      <HistoryModalDialogContent
-        application={application}
-        dismissModal={historyModalController.dismissModal}
-        note={historyModalController.note}
-        notesController={notesController}
-        selectionController={selectionController}
-        subscriptionController={subscriptionController}
-      />
+    <HistoryModalDialog onDismiss={historyModalController.dismissModal} ref={setElement}>
+      {!!historyModalController.note && (
+        <HistoryModalDialogContent
+          application={application}
+          dismissModal={historyModalController.dismissModal}
+          note={historyModalController.note}
+          notesController={notesController}
+          selectionController={selectionController}
+          subscriptionController={subscriptionController}
+        />
+      )}
     </HistoryModalDialog>
   )
 }