From ea256608c24e55e533a61bb908fbbf6de3ea841f Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Wed, 14 Aug 2024 09:48:32 -0400
Subject: [PATCH] RC #291 - Updating MediaGallery component to use Modal

---
 .../core-data/src/components/MediaGallery.js  | 67 +++++++------------
 1 file changed, 26 insertions(+), 41 deletions(-)

diff --git a/packages/core-data/src/components/MediaGallery.js b/packages/core-data/src/components/MediaGallery.js
index c16e5451..41ef9f89 100644
--- a/packages/core-data/src/components/MediaGallery.js
+++ b/packages/core-data/src/components/MediaGallery.js
@@ -1,11 +1,15 @@
 // @flow
 
-import * as Dialog from '@radix-ui/react-dialog';
 import Viewer from '@samvera/clover-iiif/viewer';
-import { X } from 'lucide-react';
 import React from 'react';
+import Modal from './Modal';
 
 type Props = {
+  /**
+   * Class name to append to the root element.
+   */
+  className?: string,
+
   /**
    * URL of the IIIF manifest to render.
    */
@@ -21,46 +25,27 @@ type Props = {
  * This component renders a IIIF Viewer for the passed MediaContent record.
  */
 const MediaGallery = (props: Props) => (
-  <Dialog.Root
-    open={props.manifestUrl}
-    onOpenChange={props.onClose}
+  <Modal
+    className={props.className}
+    onClose={props.onClose}
+    open
   >
-    <Dialog.Portal>
-      <Dialog.Overlay
-        className='dialog-overlay'
-      />
-      <Dialog.Content
-        className='dialog-content'
-      >
-        <div
-          className='pt-6 pb-2 text-sm w-full text-muted min-h-20'
-        >
-          { props.manifestUrl && (
-            <Viewer
-              iiifContent={props.manifestUrl}
-              options={{
-                informationPanel: {
-                  open: false,
-                  renderToggle: false
-                }
-              }}
-            />
-          )}
-        </div>
-        <Dialog.Close
-          asChild
-        >
-          <button
-            aria-label='Close'
-            className='dialog-close rounded-full'
-            type='button'
-          >
-            <X className='h-7 w-7 p-1.5' />
-          </button>
-        </Dialog.Close>
-      </Dialog.Content>
-    </Dialog.Portal>
-  </Dialog.Root>
+    <div
+      className='pt-6 pb-2 text-sm w-full text-muted min-h-20'
+    >
+      { props.manifestUrl && (
+        <Viewer
+          iiifContent={props.manifestUrl}
+          options={{
+            informationPanel: {
+              open: false,
+              renderToggle: false
+            }
+          }}
+        />
+      )}
+    </div>
+  </Modal>
 );
 
 export default MediaGallery;