fixed type

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-photo-view",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "React photo preview.",
   "main": "./lib/index",
   "module": "./es/index",

src/PhotoSlider.tsx

@@ -8,10 +8,22 @@ import isMobile from './utils/isMobile';
 import {
   dataType,
   IPhotoProviderBase,
-  IPhotoSliderProps,
 } from './types';
 import { defaultOpacity, horizontalOffset, maxMoveOffset } from './variables';
 
+interface IPhotoSliderProps extends IPhotoProviderBase {
+  // 图片列表
+  images: dataType[];
+  // 图片当前索引
+  index?: number;
+  // 可见
+  visible: boolean;
+  // 关闭事件
+  onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
+  // 索引改变回调
+  onIndexChange?: Function;
+}
+
 type PhotoSliderState =  {
   // 偏移量
   translateX: number;
@@ -33,7 +45,7 @@ type PhotoSliderState =  {
 };
 
 export default class PhotoSlider extends React.Component<
-  IPhotoProviderBase & IPhotoSliderProps,
+  IPhotoSliderProps,
   PhotoSliderState
 > {
   static displayName = 'PhotoSlider';
@@ -163,6 +175,19 @@ export default class PhotoSlider extends React.Component<
     });
   }
 
+  handleIndexChange = (photoIndex: number) => {
+    const singlePageWidth = window.innerWidth + horizontalOffset;
+    const translateX = -singlePageWidth * photoIndex;
+    this.setState({
+      translateX,
+      photoIndex,
+    });
+    const { onIndexChange } = this.props;
+    if (onIndexChange) {
+      onIndexChange(photoIndex);
+    }
+  }
+
   handleReachUp = (clientX: number, clientY: number) => {
     const { innerWidth, innerHeight } = window;
     const { images, onIndexChange, onClose } = this.props;
@@ -216,8 +241,6 @@ export default class PhotoSlider extends React.Component<
     const {
       images,
       visible,
-      index,
-      onIndexChange,
       className,
       maskClassName,
       viewClassName,
@@ -311,10 +334,10 @@ export default class PhotoSlider extends React.Component<
           ) : undefined}
           {overlayRender && overlayRender({
             images,
-            index,
+            index: photoIndex,
             visible,
             onClose,
-            onIndexChange,
+            onIndexChange: this.handleIndexChange,
             overlayVisible,
           })}
         </SlideWrap>

src/types.ts

@@ -12,18 +12,20 @@ export type dataType = {
   intro?: React.ReactNode;
 };
 
-export interface IPhotoSliderProps {
+type overlayRenderProps = {
   // 图片列表
   images: dataType[];
   // 图片当前索引
-  index?: number;
+  index: number;
   // 可见
   visible: boolean;
   // 关闭事件
   onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
   // 索引改变回调
-  onIndexChange?: Function;
-}
+  onIndexChange: (photoIndex: number) => void;
+  // 覆盖物可见度
+  overlayVisible: boolean;
+};
 
 export interface IPhotoProviderBase {
   // 背景可点击关闭，默认 true
@@ -35,9 +37,7 @@ export interface IPhotoProviderBase {
   // 简介 visible，默认 true
   introVisible?: boolean;
   // 自定义渲染
-  overlayRender?: (
-    overlayProps: IPhotoSliderProps & { overlayVisible: boolean },
-  ) => React.ReactNode;
+  overlayRender?: (overlayProps: overlayRenderProps) => React.ReactNode;
   // className
   className?: string;
   // 遮罩 className