feat: Add onMaximizedStatusChange prop fn

example/src/components/Carousel1.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import TwoWayMap from '../utils/TwoWayMap';
 import Carousel from 'react-gallery-carousel';
 import 'react-gallery-carousel/dist/index.css';
@@ -9,14 +9,15 @@ const Carousel1 = () => {
     1: 'Get%20Started',
     2: 'Usage'
   });
-
+  const [isMaximized, setIsMaximized] = useState(false)
   return (
     <section className='section' aria-labelledby='example1'>
       <header className='section-header'>
         <h2 id='example1'>
           Example 1: Customized carousel with user-managed slides{' '}
           <a href='https://yifanai.com/rgc1'>code</a>
         </h2>
+        <h4>isMaximized: {`${isMaximized}`}</h4>
         <p>
           This example has custom elements in slides (user-managed slides) using
           the <code>children</code> prop; and custom widget positions.
@@ -36,6 +37,7 @@ const Carousel1 = () => {
           index={Number(
             indexToTitle.getReversed(window.location.hash.replace('#', ''))
           )}
+          onMaximizedStatusChange={(status) => setIsMaximized(status)}
           // onIndexChange={({ curIndex }) => {
           //   const title = indexToTitle.get(curIndex);
           //   window.history.replaceState(
@@ -49,6 +51,7 @@ const Carousel1 = () => {
         >
           <div className='text-slide'>
             <h3>Introduction</h3>
+            <h4>isMaximized: {`${isMaximized}`}</h4>
             <p>
               <strong>react-gallery-carousel</strong> is a mobile-friendly
               dependency-free React carousel component with support for touch,
@@ -71,13 +74,15 @@ const Carousel1 = () => {
           </div>
           <div className='text-slide'>
             <h3>Get Started</h3>
+            <h4>isMaximized: {`${isMaximized}`}</h4>
             <code>npm install react-gallery-carousel --save</code>
             <div className='vertical-separator'>
               <span>or</span>
             </div>
             <code>yarn add react-gallery-carousel</code>
           </div>
           <div className='text-slide'>
+            <h4>isMaximized: {`${isMaximized}`}</h4>
             <h3>Usage</h3>
             <p>The default carousel shown below as example 2 is created by:</p>
             <code>{'<Carousel images={images} />'}</code>

src/components/Carousel/Carousel.js

@@ -120,6 +120,7 @@ const GalleryCarousel = (props, ref) => {
 
   const handleSizeButtonClick = () => {
     setIsMaximized((isMaximized) => !isMaximized);
+    props.onMaximizedStatusChange(!isMaximized)
   };
 
   /* handle UI updates */
@@ -301,7 +302,12 @@ const GalleryCarousel = (props, ref) => {
   );
 
   /* handle keyboard events */
-  useKeys(documentRef, { Escape: () => setIsMaximized(() => false) });
+  useKeys(documentRef, {
+    Escape: () => {
+      props.onMaximizedStatusChange(false)
+      setIsMaximized(() => false)
+    }
+  });
 
   useKeyboard(carouselRef);
 
@@ -505,7 +511,7 @@ const GalleryCarousel = (props, ref) => {
             <Fragment key={index}>
               {
                 widgetsObj[
-                  positionsToWidgets.get(position).replace(/AtMax$/, '')
+                positionsToWidgets.get(position).replace(/AtMax$/, '')
                 ]
               }
             </Fragment>

src/components/Carousel/props.js

@@ -62,6 +62,7 @@ export const propTypes = {
   shouldMinimizeOnClick: PropTypes.bool.isRequired,
   shouldMinimizeOnSwipeDown: PropTypes.bool.isRequired,
   onIndexChange: PropTypes.func.isRequired,
+  onMaximizedChange: PropTypes.func.isRequired,
   className: PropTypes.string,
   style: PropTypes.object,
   objectFit: objectFitStyles.isRequired,
@@ -99,11 +100,12 @@ export const defaultProps = {
   shouldMaximizeOnClick: false,
   shouldMinimizeOnClick: false,
   shouldMinimizeOnSwipeDown: true,
-  onIndexChange: () => {},
-  onSwipeMoveX: () => {},
-  onSwipeMoveY: () => {},
-  onSwipeEndDown: () => {},
-  onTap: () => {},
+  onIndexChange: () => { },
+  onSwipeMoveX: () => { },
+  onSwipeMoveY: () => { },
+  onSwipeEndDown: () => { },
+  onTap: () => { },
+  onMaximizedStatusChange: () => { },
   objectFit: 'cover',
   objectFitAtMax: 'contain'
 };