🤖 Merge PR DefinitelyTyped#71451 fix(react-modal-image): add onClose(), reorder typedef, modify jsdoc by @hkleungai

Author: hkleungai

types/react-modal-image/index.d.ts

@@ -1,39 +1,65 @@
 import * as React from "react";
 
-export interface ModalImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    /* The small image to display */
+export interface ModalImageProps {
+    /** Optional. `class` for the small preview image. */
+    className?: string | undefined;
+
+    /** Optional. `alt` for the small image and the heading text in Lightbox. */
+    alt?: string | undefined;
+
+    /** `src` for the small preview image. */
     small: string;
 
-    /* The srcset attribute for the small image */
-    smallSrcSet?: string;
+    /** Optional. `srcSet` for the small preview image. */
+    smallSrcSet?: string | undefined;
+
+    /** Optional if `large` is defined. Image shown when zoomed out in Lightbox. */
+    medium?: string | undefined;
+
+    /**	Optional if `medium` is defined. Image shown when zoomed in Lightbox. Downloadable. */
+    large?: string | undefined;
+
+    /** Optional. Set to `true` to hide download-button from the Lightbox. */
+    hideDownload?: boolean | undefined;
+
+    /** Optional. Set to `true` to hide zoom-button from the Lightbox. */
+    hideZoom?: boolean | undefined;
+
+    /** Optional. Set to `true` to show rotate-button within the Lightbox. */
+    showRotate?: boolean | undefined;
+
+    /** Optional. Background color of the image shown in Lightbox. Defaults to black. Handy for transparent images. */
+    imageBackgroundColor?: string | undefined;
+}
 
-    /* The medium image to display */
-    medium?: string;
+export interface LightboxProps {
+    /** Optional if `large` is defined. Image shown when zoomed out in Lightbox. */
+    medium?: string | undefined;
 
-    /* The large image to display */
-    large?: string;
+    /**	Optional if `medium` is defined. Image shown when zoomed in Lightbox. Downloadable. */
+    large?: string | undefined;
 
-    /* The alt tag for the image */
-    alt?: string;
+    /** Optional. `alt` for the small image and the heading text in Lightbox. */
+    alt?: string | undefined;
 
-    /* Should the download button be hidden? */
-    hideDownload?: boolean;
+    /** Will be invoked when the Lightbox requests to be closed. */
+    onClose?: (() => void) | undefined;
 
-    /* Should the zoom button be hidden? */
-    hideZoom?: boolean;
+    /** Optional. Set to `true` to hide download-button from the Lightbox. */
+    hideDownload?: boolean | undefined;
 
-    /* Should the rotate button be shown? */
-    showRotate?: boolean;
+    /** Optional. Set to `true` to hide zoom-button from the Lightbox. */
+    hideZoom?: boolean | undefined;
 
-    /* The color to display in the background. */
-    imageBackgroundColor?: string;
+    /** Optional. Set to `true` to show rotate-button within the Lightbox. */
+    showRotate?: boolean | undefined;
 
-    /* The class name for the modal */
-    className?: string;
+    /** Optional. Background color of the image shown in Lightbox. Defaults to black. Handy for transparent images. */
+    imageBackgroundColor?: string | undefined;
 }
 
 declare class ModalImage extends React.Component<ModalImageProps> {}
-declare class Lightbox extends React.Component<ModalImageProps> {}
+declare class Lightbox extends React.Component<LightboxProps> {}
 
 export default ModalImage;
 export { Lightbox };

types/react-modal-image/react-modal-image-tests.tsx

@@ -1,36 +1,33 @@
 import * as React from "react";
-import ModalImage, { Lightbox, ModalImageProps } from "react-modal-image";
-
-const props: ModalImageProps = {
-    /* The small image to display */
-    small: "https://example.com/image-small.jpg",
-
-    /* The large image to display */
-    large: "https://example.com/image-large.jpg",
-
-    /* The alt tag for the image */
-    alt: "Example Image",
-
-    /* Should the download button be hidden? */
-    hideDownload: true,
-
-    /* Should the zoom button be hidden? */
-    hideZoom: true,
-
-    /* The color to display in the background. */
-    imageBackgroundColor: "#000",
-
-    /* The class name for the modal */
-    className: "example-class",
-};
-
-class ReactModalImageTest extends React.Component {
-    render() {
-        return (
-            <>
-                <ModalImage {...props} />
-                <Lightbox {...props} />
-            </>
-        );
-    }
-}
+import ModalImage, { Lightbox, LightboxProps, ModalImageProps } from "react-modal-image";
+
+// @ts-ignore - props.small is required.
+<ModalImage />;
+
+<ModalImage small="image-small.jpg" />;
+
+<ModalImage
+    className="example-class"
+    alt="Example Image"
+    small="image-small.jpg"
+    smallSrcSet="small-src-set"
+    medium="image-medium.jpg"
+    large="image-large.jpg"
+    hideDownload={true}
+    hideZoom={true}
+    showRotate={true}
+    imageBackgroundColor="#000"
+/>;
+
+<Lightbox />;
+
+<Lightbox
+    medium="image-medium.jpg"
+    large="image-large.jpg"
+    alt="Example Image"
+    onClose={() => {}}
+    hideDownload={true}
+    hideZoom={true}
+    showRotate={true}
+    imageBackgroundColor="#000"
+/>;