react-photo-view - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

es/PhotoSlider.d.ts

 import React from 'react';
-import { dataType, IPhotoProviderBase } from './types';
-interface IPhotoSliderProps extends IPhotoProviderBase {
-    images: dataType[];
-    index?: number;
-    visible: boolean;
-    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
-    onIndexChange?: Function;
-}
+import { IPhotoProviderBase, IPhotoSliderProps } from './types';
 declare type PhotoSliderState = {
@@ -20,6 +13,7 @@ translateX: number;
 };
-export default class PhotoSlider extends React.Component<IPhotoSliderProps, PhotoSliderState> {
+export default class PhotoSlider extends React.Component<IPhotoProviderBase & IPhotoSliderProps, PhotoSliderState> {
     static displayName: string;
     static defaultProps: {
         maskClosable: boolean;
+        photoClosable: boolean;
         bannerVisible: boolean;
@@ -35,2 +29,3 @@ introVisible: boolean;
     componentWillUnmount(): void;
+    handleClose: () => void;
     handlePhotoTap: () => void;
@@ -37,0 +32,0 @@ handlePhotoMaskTap: () => void;

es/PhotoSlider.js

@@ -22,21 +22,24 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 
-        _this.handlePhotoTap = function () {
-            _this.setState(function (prevState) {
-                return {
-                    overlayVisible: !prevState.overlayVisible
-                };
+        _this.handleClose = function () {
+            _this.props.onClose();
+            _this.setState({
+                overlayVisible: true
             });
         };
-        _this.handlePhotoMaskTap = function () {
-            var _this$props = _this.props,
-                maskClosable = _this$props.maskClosable,
-                onClose = _this$props.onClose;
-
-            if (maskClosable) {
-                onClose();
-                _this.setState({
-                    overlayVisible: true
+        _this.handlePhotoTap = function () {
+            if (_this.props.photoClosable) {
+                _this.handleClose();
+            } else {
+                _this.setState(function (prevState) {
+                    return {
+                        overlayVisible: !prevState.overlayVisible
+                    };
                 });
             }
         };
+        _this.handlePhotoMaskTap = function () {
+            if (_this.props.maskClosable) {
+                _this.handleClose();
+            }
+        };
         _this.handleResize = function () {
@@ -106,6 +109,6 @@ var _window = window,
                 innerHeight = _window3.innerHeight;
-            var _this$props2 = _this.props,
-                images = _this$props2.images,
-                onIndexChange = _this$props2.onIndexChange,
-                onClose = _this$props2.onClose;
+            var _this$props = _this.props,
+                images = _this$props.images,
+                onIndexChange = _this$props.onIndexChange,
+                onClose = _this$props.onClose;
             var _this$state = _this.state,
@@ -193,3 +196,4 @@ _this$state$lastClien = _this$state.lastClientX,
                 visible = _props.visible,
-                overlay = _props.overlay,
+                index = _props.index,
+                onIndexChange = _props.onIndexChange,
                 className = _props.className,
@@ -202,2 +206,3 @@ maskClassName = _props.maskClassName,
                 introVisible = _props.introVisible,
+                overlayRender = _props.overlayRender,
                 loadingElement = _props.loadingElement,
@@ -258,3 +263,10 @@ brokenElement = _props.brokenElement;
                     ) : undefined,
-                    overlay
+                    overlayRender && overlayRender({
+                        images: images,
+                        index: index,
+                        visible: visible,
+                        onClose: onClose,
+                        onIndexChange: onIndexChange,
+                        overlayVisible: overlayVisible
+                    })
                 );
@@ -285,4 +297,5 @@ }
     maskClosable: true,
+    photoClosable: false,
     bannerVisible: true,
     introVisible: true
 };

es/types.d.ts

@@ -10,7 +10,17 @@ import React from 'react';
 };
+export interface IPhotoSliderProps {
+    images: dataType[];
+    index?: number;
+    visible: boolean;
+    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
+    onIndexChange?: Function;
+}
 export interface IPhotoProviderBase {
     maskClosable?: boolean;
+    photoClosable?: boolean;
     bannerVisible?: boolean;
     introVisible?: boolean;
-    overlay?: React.ReactNode;
+    overlayRender?: (overlayProps: IPhotoSliderProps & {
+        overlayVisible: boolean;
+    }) => React.ReactNode;
     className?: string;
@@ -17,0 +27,0 @@ maskClassName?: string;

lib/PhotoSlider.d.ts

 import React from 'react';
-import { dataType, IPhotoProviderBase } from './types';
-interface IPhotoSliderProps extends IPhotoProviderBase {
-    images: dataType[];
-    index?: number;
-    visible: boolean;
-    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
-    onIndexChange?: Function;
-}
+import { IPhotoProviderBase, IPhotoSliderProps } from './types';
 declare type PhotoSliderState = {
@@ -20,6 +13,7 @@ translateX: number;
 };
-export default class PhotoSlider extends React.Component<IPhotoSliderProps, PhotoSliderState> {
+export default class PhotoSlider extends React.Component<IPhotoProviderBase & IPhotoSliderProps, PhotoSliderState> {
     static displayName: string;
     static defaultProps: {
         maskClosable: boolean;
+        photoClosable: boolean;
         bannerVisible: boolean;
@@ -35,2 +29,3 @@ introVisible: boolean;
     componentWillUnmount(): void;
+    handleClose: () => void;
     handlePhotoTap: () => void;
@@ -37,0 +32,0 @@ handlePhotoMaskTap: () => void;

lib/PhotoSlider.js

@@ -61,21 +61,24 @@ 'use strict';
 
-        _this.handlePhotoTap = function () {
-            _this.setState(function (prevState) {
-                return {
-                    overlayVisible: !prevState.overlayVisible
-                };
+        _this.handleClose = function () {
+            _this.props.onClose();
+            _this.setState({
+                overlayVisible: true
             });
         };
-        _this.handlePhotoMaskTap = function () {
-            var _this$props = _this.props,
-                maskClosable = _this$props.maskClosable,
-                onClose = _this$props.onClose;
-
-            if (maskClosable) {
-                onClose();
-                _this.setState({
-                    overlayVisible: true
+        _this.handlePhotoTap = function () {
+            if (_this.props.photoClosable) {
+                _this.handleClose();
+            } else {
+                _this.setState(function (prevState) {
+                    return {
+                        overlayVisible: !prevState.overlayVisible
+                    };
                 });
             }
         };
+        _this.handlePhotoMaskTap = function () {
+            if (_this.props.maskClosable) {
+                _this.handleClose();
+            }
+        };
         _this.handleResize = function () {
@@ -145,6 +148,6 @@ var _window = window,
                 innerHeight = _window3.innerHeight;
-            var _this$props2 = _this.props,
-                images = _this$props2.images,
-                onIndexChange = _this$props2.onIndexChange,
-                onClose = _this$props2.onClose;
+            var _this$props = _this.props,
+                images = _this$props.images,
+                onIndexChange = _this$props.onIndexChange,
+                onClose = _this$props.onClose;
             var _this$state = _this.state,
@@ -232,3 +235,4 @@ _this$state$lastClien = _this$state.lastClientX,
                 visible = _props.visible,
-                overlay = _props.overlay,
+                index = _props.index,
+                onIndexChange = _props.onIndexChange,
                 className = _props.className,
@@ -241,2 +245,3 @@ maskClassName = _props.maskClassName,
                 introVisible = _props.introVisible,
+                overlayRender = _props.overlayRender,
                 loadingElement = _props.loadingElement,
@@ -297,3 +302,10 @@ brokenElement = _props.brokenElement;
                     ) : undefined,
-                    overlay
+                    overlayRender && overlayRender({
+                        images: images,
+                        index: index,
+                        visible: visible,
+                        onClose: onClose,
+                        onIndexChange: onIndexChange,
+                        overlayVisible: overlayVisible
+                    })
                 );
@@ -323,2 +335,3 @@ }
     maskClosable: true,
+    photoClosable: false,
     bannerVisible: true,
@@ -325,0 +338,0 @@ introVisible: true

lib/types.d.ts

@@ -10,7 +10,17 @@ import React from 'react';
 };
+export interface IPhotoSliderProps {
+    images: dataType[];
+    index?: number;
+    visible: boolean;
+    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
+    onIndexChange?: Function;
+}
 export interface IPhotoProviderBase {
     maskClosable?: boolean;
+    photoClosable?: boolean;
     bannerVisible?: boolean;
     introVisible?: boolean;
-    overlay?: React.ReactNode;
+    overlayRender?: (overlayProps: IPhotoSliderProps & {
+        overlayVisible: boolean;
+    }) => React.ReactNode;
     className?: string;
@@ -17,0 +27,0 @@ maskClassName?: string;

package.json

 {
   "name": "react-photo-view",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "React photo preview.",
@@ -5,0 +5,0 @@ "main": "./lib/index",

No alert changes

Improved metrics

Total package byte prevSize

166660

increased by0.87%

Lines of code

3899

increased by0.98%

No dependency changes