fix: change lightBoxAdditionalProps

* fix: change lightBoxAdditionalProps * fix: readme * fix: readme * fix: readme Co-authored-by: Ori Amir <[email protected]>
OriAmir · Aug 14, 2022 · 3aa4ae5 · 3aa4ae5
1 parent e235b1c
commit 3aa4ae5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -152,16 +152,17 @@ You can control the selected images yourself in your component or just get the i
 
 :warning: If you will not pass the image <b>id</b> property to the image element the selected image will return as URL representation instead of id representation. In the case of a duplicate image URL, this feature will not work as expected.
 <br/>
-:warning: When passing the `onSelect` function to the library it's automatically move to <b>Uncontrolled</b> mode and will not manage the selected images any more.
+:warning: When passing the `onSelect` function to the library it's automatically move to <b>Uncontrolled</b> mode and will not manage the selected images any more.<br/>
 
 
-<br/>
 <h3>Using Lightbox</h3>
 You can use lightbox when clicking on one of the images that display on the gallery.
 For the lightbox component library we use the <a target="_blank" href="https://www.npmjs.com/package/react-image-lightbox">react-image-lightbox library</a>.<br/>
-You can sent the props from this library and to send them as prop to library called <b>'lightBoxAdditionalProps'</b>.
-If you want to pass image caption and title you can pass that via the img props.
+You can sent the props from this library and to send them as prop to library called <b>'lightBoxAdditionalProps'</b>.</br>
 
+:warning: These properties are not available to send as additional props (because we already using them internally):
+`mainSrc, nextSrc, prevSrc, onCloseRequest, onMovePrevRequest, onMoveNextRequest` <br/>
+:warning: If you want to pass `imageTitle` or `imageCaption` you can pass that via the img props.
 
 <br/><br/>
 
@@ -175,5 +176,4 @@ For bugs, questions and discussions please use the <a href="https://github.com/O
 
 <br/>
 <h3>License</h4>
-React Responsive Gallery is free to use for personal and commercial projects under the MIT License.
-```
+React Responsive Gallery is free to use for personal and commercial projects under the MIT License.
diff --git a/src/components/Gallery/Gallery.types.ts b/src/components/Gallery/Gallery.types.ts
@@ -42,10 +42,17 @@ export interface ImageElementProps {
   orderL?: number;
 }
 
-interface AdditionalILightBoxProps extends Omit<ILightBoxProps, "mainSrc" | "onCloseRequest"> { 
-    mainSrc?: string;
-    onCloseRequest?(): void;
-}
+export type AdditionalILightBoxProps = Omit<
+  ILightBoxProps,
+  | "mainSrc"
+  | "nextSrc"
+  | "prevSrc"
+  | "onCloseRequest"
+  | "onMovePrevRequest"
+  | "onMoveNextRequest"
+  | "imageTitle"
+  | "imageCaption"
+>;
 
 export type ResponsiveGalleryProps = {
   images: Array<ImageElementProps>;

diff --git a/src/components/Gallery/ImagesLightBox/ImagesLightBox.types.ts b/src/components/Gallery/ImagesLightBox/ImagesLightBox.types.ts
@@ -1,9 +1,11 @@
-import { ILightBoxProps } from "react-image-lightbox";
-import { ImageElementProps } from "../../Gallery/Gallery.types";
+import {
+  ImageElementProps,
+  AdditionalILightBoxProps,
+} from "../../Gallery/Gallery.types";
 
 export type ImageLightBoxProps = {
   imagesLightbox: Array<ImageElementProps>;
   photoIndex: number;
   lightBoxDispatch: (obj: { type: string; payload?: number | string }) => void;
-  lightBoxAdditionalProps?: ILightBoxProps;
+  lightBoxAdditionalProps?: AdditionalILightBoxProps;
 };