Merge pull request #173 from itoldya/ts-declaration

Add TypeScript declaration file

index.d.ts

@@ -0,0 +1,101 @@
+import * as React from "react";
+
+declare module "react-grid-gallery" {
+  export interface ReactGridGalleryImageComponentProps {
+    item: ReactGridGalleryImage;
+    index: number;
+    margin: number;
+    height: number;
+    isSelectable: boolean;
+    onClick: (index: number, event: React.MouseEvent<HTMLElement>) => void;
+    onSelectImage: (
+      index: number,
+      event: React.MouseEvent<HTMLElement>
+    ) => void;
+    tileViewportStyle: () => React.CSSProperties;
+    thumbnailStyle: () => React.CSSProperties;
+    tagStyle: React.CSSProperties;
+    customOverlay: React.ReactNode;
+    thumbnailImageComponent: React.ComponentType<ReactGridGalleryThumbnailImageComponentProps>;
+  }
+
+  export interface ReactGridGalleryThumbnailImageComponentImageProps {
+    key: string;
+    src: string;
+    alt: string;
+    title: string | null;
+    style: React.CSSProperties;
+  }
+
+  export type ReactGridGalleryThumbnailImageComponentProps =
+    ReactGridGalleryImageComponentProps & {
+      imageProps: ReactGridGalleryThumbnailImageComponentImageProps;
+    };
+
+  export interface ReactGridGalleryImageTag {
+    value: React.ReactNode;
+    title: string;
+    key?: string;
+  }
+
+  export interface ReactGridGalleryImage {
+    src: string;
+    thumbnail: string;
+    thumbnailWidth: number;
+    thumbnailHeight: number;
+    nano?: string;
+    alt?: string;
+    tags?: ReactGridGalleryImageTag[];
+    isSelected?: boolean;
+    caption?: React.ReactNode;
+    srcSet?: string[];
+    customOverlay?: React.ReactNode;
+    thumbnailCaption?: React.ReactNode;
+    orientation?: number;
+  }
+
+  export interface ReactGridGalleryProps {
+    images: ReactGridGalleryImage[];
+    id?: string;
+    enableImageSelection?: boolean;
+    onSelectImage?: (index: number, image: ReactGridGalleryImage) => void;
+    rowHeight?: number;
+    maxRows?: number;
+    margin?: number;
+    enableLightbox?: boolean;
+    onClickThumbnail?: (
+      index: number,
+      event: React.MouseEvent<HTMLElement>
+    ) => void;
+    lightboxWillOpen?: (index: number) => void;
+    lightboxWillClose?: () => void;
+    tagStyle?: React.CSSProperties;
+    tileViewportStyle?: () => React.CSSProperties;
+    thumbnailStyle?: () => React.CSSProperties;
+    thumbnailImageComponent?: React.ComponentType<ReactGridGalleryThumbnailImageComponentProps>;
+
+    backdropClosesModal?: boolean;
+    currentImage?: number;
+    preloadNextImage?: boolean;
+    customControls?: React.ReactNode[];
+    enableKeyboardInput?: boolean;
+    imageCountSeparator?: string;
+    isOpen?: boolean;
+    showCloseButton?: boolean;
+    showImageCount?: boolean;
+    onClickImage?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClickPrev?: () => void;
+    onClickNext?: () => void;
+
+    currentImageWillChange?: (index: number) => void;
+    showLightboxThumbnails?: boolean;
+
+    onClickLightboxThumbnail?: (index: number) => void;
+    lightboxWidth?: number;
+    lightBoxProps?: any;
+  }
+
+  class ReactGridGallery extends React.Component<ReactGridGalleryProps> {}
+
+  export default ReactGridGallery;
+}

package.json

@@ -38,6 +38,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^28.1.6",
+    "@types/react": "^16.14.30",
     "gh-pages": "^4.0.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",

rollup.config.js

@@ -4,6 +4,7 @@ import { nodeResolve } from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
 import serve from "rollup-plugin-serve";
 import livereload from "rollup-plugin-livereload";
+import copy from "rollup-plugin-copy";
 import pkg from "./package.json";
 
 const isWatchMode = process.env.ROLLUP_WATCH;
@@ -53,6 +54,22 @@ export default [
       { file: pkg.main, format: "cjs", exports: "default" },
       { file: pkg.module, format: "es", exports: "default" },
     ],
-    plugins: [babel({ babelHelpers: "bundled" })],
+    plugins: [
+      babel({ babelHelpers: "bundled" }),
+      copy({
+        targets: [
+          {
+            src: "./index.d.ts",
+            dest: "./dist",
+            rename: `${pkg.name}.cjs.d.ts`,
+          },
+          {
+            src: "./index.d.ts",
+            dest: "./dist",
+            rename: `${pkg.name}.esm.d.ts`,
+          },
+        ],
+      }),
+    ],
   },
 ];