Review Fixes

s-yadav · Jun 23, 2024 · d7400f1 · d7400f1
1 parent cb18dd0
commit d7400f1
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 77 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -10,15 +10,6 @@
   "commit": true,
   "commitConvention": "none",
   "contributors": [
-    {
-      "login": "ruchikabgosain",
-      "name": "Ruchika",
-      "avatar_url": "https://avatars2.githubusercontent.com/u/30324532?v=4",
-      "profile": "http://mozillians.org/en-US/u/ruchikabgosain/",
-      "contributions": [
-        "doc"
-      ]
-    },
     {
       "login": "s-yadav",
       "name": "Sudhanshu Yadav",
@@ -45,6 +36,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "ruchikabgosain",
+      "name": "Ruchika",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/30324532?v=4",
+      "profile": "http://mozillians.org/en-US/u/ruchikabgosain/",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7

diff --git a/README.md b/README.md
@@ -1,7 +1,11 @@
 
-## react-iv-viewer
+# iv-viewer
 ___
 
+A zooming and panning plugin inspired by Google Photos for your web images. It comes in two different variants. First, a react-based zooming and panning component and 2nd vanilla JS-based zooming and panning library.
+
+## react-iv-viewer
+
 `react-iv-viewer` is a React-based library for viewing images with advanced features like zooming, high-resolution image support, and full-screen viewing. It provides an easy way to integrate image viewing functionality into your React applications.
 
 ### Features
@@ -14,7 +18,6 @@ ___
 - High-resolution image support
 - Full-screen image viewing
 - Customizable viewer dimensions
-- Event handlers for zoom and load events
 - TypeScript support
 
 ### Demos
@@ -94,4 +97,44 @@ const viewer = new FullScreenViewer(options);
 viewer.show('images/low-res-img', 'images/hi-res-img');
 ```
 
-This Markdown provides a clear and concise introduction to `iv-viewer`, its features, installation instructions, and usage examples for both normal and fullscreen viewers in an ES6 environment.
+### Like this
+[:star: this repo](https://github.com/s-yadav/iv-viewer)
+
+### Major updates
+
+#### v2.2.0
+
+- Includes TypeScript type declarations
+- Bugfixing
+
+#### v2.1.0
+
+- It's a complete rewrite of ImageViewer with no jQuery requirement in ES6.
+- While the options and instance method are same the way you use a ImageViewer and FullScreenView is changed. The v1 API will no longer be supported.
+- Published on the npm. V1 was not available on npm.
+- Changed the package name to iv-viewer. image-viewer name was not available on npm. 
+- Added some listeners
+- Added zoom in/out buttons
+- Some SCSS variable for easier overrides.
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="http://mozillians.org/en-US/u/ruchikabgosain/"><img src="https://avatars2.githubusercontent.com/u/30324532?v=4" width="100px;" alt="Ruchika"/><br /><sub><b>Ruchika</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=ruchikabgosain" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://twitter.com/_syadav"><img src="https://avatars1.githubusercontent.com/u/3096766?v=4" width="100px;" alt="Sudhanshu Yadav"/><br /><sub><b>Sudhanshu Yadav</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=s-yadav" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://hockeycommunity.com"><img src="https://avatars0.githubusercontent.com/u/2039539?v=4" width="100px;" alt="Amrit Kahlon"/><br /><sub><b>Amrit Kahlon</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=amritk" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/10000"><img src="https://avatars2.githubusercontent.com/u/3347256?v=4" width="100px;" alt="10000"/><br /><sub><b>10000</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=10000" title="Documentation">📖</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/packages/iv-viewer/README.md b/packages/iv-viewer/README.md
@@ -244,45 +244,3 @@ The second image is optional, which you should pass when you feel you can improv
 codesandbox preview link: [https://8ypwzryom0.codesandbox.io/](https://8ypwzryom0.codesandbox.io/)
 
 codesandbox link: [https://codesandbox.io/s/8ypwzryom0](https://codesandbox.io/s/8ypwzryom0)
-
-### Like this
-[:star: this repo](https://github.com/s-yadav/iv-viewer)
-
-### Major updates
-
-#### v2.2.0
-
-- Includes TypeScript type declarations
-- Bugfixing
-
-#### v2.1.0
-
-- It's a complete rewrite of ImageViewer with no jQuery requirement in ES6.
-- While the options and instance method are same the way you use a ImageViewer and FullScreenView is changed. The v1 API will no longer be supported.
-- Published on the npm. V1 was not available on npm.
-- Changed the package name to iv-viewer. image-viewer name was not available on npm. 
-- Added some listeners
-- Added zoom in/out buttons
-- Some SCSS variable for easier overrides.
-
-## Contributors ✨
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="http://mozillians.org/en-US/u/ruchikabgosain/"><img src="https://avatars2.githubusercontent.com/u/30324532?v=4" width="100px;" alt="Ruchika"/><br /><sub><b>Ruchika</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=ruchikabgosain" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://twitter.com/_syadav"><img src="https://avatars1.githubusercontent.com/u/3096766?v=4" width="100px;" alt="Sudhanshu Yadav"/><br /><sub><b>Sudhanshu Yadav</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=s-yadav" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://hockeycommunity.com"><img src="https://avatars0.githubusercontent.com/u/2039539?v=4" width="100px;" alt="Amrit Kahlon"/><br /><sub><b>Amrit Kahlon</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=amritk" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/10000"><img src="https://avatars2.githubusercontent.com/u/3347256?v=4" width="100px;" alt="10000"/><br /><sub><b>10000</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=10000" title="Documentation">📖</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-enable -->
-<!-- prettier-ignore-end -->
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/packages/react-iv-viewer/src/FullScreenViewer.tsx b/packages/react-iv-viewer/src/FullScreenViewer.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import { FullScreenViewer as BaseFullScreenViewer } from 'iv-viewer';
-import { FullScreenViewerProps, ViewerState } from './types';
+import { FullScreenViewerProps } from './types';
 
 export const FullScreenViewer: React.FC<FullScreenViewerProps> = ({
   img,
@@ -32,9 +32,9 @@ export const FullScreenViewer: React.FC<FullScreenViewerProps> = ({
       hasZoomButtons,
       zoomStep,
       listeners: {
-        onInit: (data: ViewerState) => {
+        onInit: ({ instance }: { instance: BaseFullScreenViewer }) => {
           if (_onLoad.current) {
-            _onLoad.current(data);
+            _onLoad.current(instance);
           }
         },
       },

diff --git a/packages/react-iv-viewer/src/ImageViewer.tsx b/packages/react-iv-viewer/src/ImageViewer.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import { ImageViewer as BaseImageViewer } from 'iv-viewer';
 import 'iv-viewer/dist/iv-viewer.css';
-import { ImageViewerProps, ViewerState } from './types';
+import { ImageViewerProps } from './types';
 
 export const ImageViewer: React.FC<ImageViewerProps> = ({
   img,
@@ -39,15 +39,15 @@ export const ImageViewer: React.FC<ImageViewerProps> = ({
       hasZoomButtons,
       zoomStep,
       listeners: {
-        onInit: (data: ViewerState) => {
+        onInit: ({ instance }: { instance: BaseImageViewer }) => {
           if (_onLoad.current) {
-            _onLoad.current(data);
+            _onLoad.current(instance);
           }
         },
         onDestroy: () => {},
-        onZoomChange: (data: any) => {
+        onZoomChange: ({ zoomValue }: { zoomValue: number }) => {
           if (_onZoomChange.current) {
-            _onZoomChange.current(data.zoomValue);
+            _onZoomChange.current(zoomValue);
           }
         },
       },

diff --git a/packages/react-iv-viewer/src/types.ts b/packages/react-iv-viewer/src/types.ts
@@ -1,12 +1,16 @@
-import { ImageViewer as BaseImageViewer } from 'iv-viewer';
+import {
+  ImageViewer as BaseImageViewer,
+  FullScreenViewer as BaseFullScreenViewer,
+} from 'iv-viewer';
 import React from 'react';
 
 export enum ImageViewerMode {
   inline = 'inline',
   fullScreen = 'fullScreen',
 }
 
-export interface ImageViewerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ImageViewerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onLoad'> {
   img: string;
   hiResImg?: string;
   width?: string;
@@ -19,11 +23,11 @@ export interface ImageViewerProps extends React.HTMLAttributes<HTMLDivElement> {
   zoomOnMouseWheel?: boolean;
   hasZoomButtons?: boolean;
   zoomStep?: number;
-  onLoad?: (viewer: any) => void;
-  onZoomChange?: (data: any) => void;
+  onLoad?: (viewer: BaseImageViewer) => void;
+  onZoomChange?: (zoomValue: number) => void;
 }
 export interface FullScreenViewerProps
-  extends React.ImgHTMLAttributes<HTMLImageElement> {
+  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onLoad'> {
   img: string;
   hiResImg?: string;
   defaultZoom: number;
@@ -33,14 +37,5 @@ export interface FullScreenViewerProps
   zoomOnMouseWheel?: boolean;
   hasZoomButtons?: boolean;
   zoomStep?: number;
-  onLoad?: (viewer: any) => void;
-}
-
-export interface ViewerState {
-  container: HTMLDivElement;
-  instance: BaseImageViewer;
-  reachedMax: boolean;
-  reachedMin: boolean;
-  snapView: HTMLDivElement;
-  zoomValue: number;
+  onLoad?: (viewer: BaseFullScreenViewer) => void;
 }