react-photo-view - npm Package Compare versions

Comparing version 0.1.8 to 0.2.0

es/components/Spinner.d.ts

@@ -1,2 +0,2 @@
-declare const _default: import("../../node_modules/styled-components").StyledComponentClass<{
+declare const _default: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<{
     className?: string | undefined;
@@ -3,0 +3,0 @@ }, any, Pick<{

es/photo-context.d.ts

 import React from 'react';
-export declare type onShowType = (dataKey?: string) => void;
-export declare type addItemType = (dataKey?: string, src?: string) => void;
-export declare type removeItemType = (dataKey?: string) => void;
+export declare type onShowType = (key?: string) => void;
+export declare type addItemType = (key?: string, src?: string, intro?: React.ReactNode) => void;
+export declare type removeItemType = (key?: string) => void;
 declare const _default: React.Context<{
@@ -6,0 +6,0 @@ onShow(): void;

es/PhotoConsumer.d.ts

 import React from 'react';
 export interface IPhotoConsumer {
     src: string;
+    intro?: React.ReactNode;
     children?: React.ReactElement<any>;
@@ -5,0 +6,0 @@ }

es/PhotoConsumer.js

@@ -26,3 +26,3 @@ import _extends from 'babel-runtime/helpers/extends';
 
-        _this.dataKey = uniqueId();
+        _this.key = uniqueId();
         _this.handleShow = function (e) {
@@ -33,3 +33,3 @@ var _this$props = _this.props,
 
-            onShow(_this.dataKey);
+            onShow(_this.key);
             if (children) {
@@ -50,6 +50,7 @@ var onClick = children.props.onClick;
             var _props = this.props,
+                addItem = _props.addItem,
                 src = _props.src,
-                addItem = _props.addItem;
+                intro = _props.intro;
 
-            addItem(this.dataKey, src);
+            addItem(this.key, src, intro);
         }
@@ -61,3 +62,3 @@ }, {
 
-            removeItem(this.dataKey);
+            removeItem(this.key);
         }
@@ -83,4 +84,5 @@ }, {
     var src = _a.src,
+        intro = _a.intro,
         children = _a.children,
-        restProps = __rest(_a, ["src", "children"]);
+        restProps = __rest(_a, ["src", "intro", "children"]);
 
@@ -93,3 +95,3 @@ return React.createElement(
                 PhotoViewItem,
-                _extends({}, value, restProps, { src: src }),
+                _extends({}, value, restProps, { src: src, intro: intro }),
                 children
@@ -96,0 +98,0 @@ );

es/PhotoProvider.d.ts

 import React from 'react';
 import { onShowType, addItemType, removeItemType } from './photo-context';
-import { dataType } from './types';
-interface IPhotoProvider {
+import { dataType, IPhotoProviderBase } from './types';
+interface IPhotoProvider extends IPhotoProviderBase {
     children: React.ReactNode;
-    className?: string;
-    maskClassName?: string;
-    viewClassName?: string;
-    imageClassName?: string;
-    loadingElement?: JSX.Element;
-    brokenElement?: JSX.Element;
 }
 declare type PhotoProviderState = {
-    data: dataType[];
+    images: dataType[];
     visible: boolean;
@@ -23,5 +17,5 @@ index: number;
     constructor(props: any);
-    handleAddItem: (dataKey: string, src: string) => void;
-    handleRemoveItem: (dataKey: string) => void;
-    handleShow: (dataKey: string) => void;
+    handleAddItem: (key: string, src: string, intro: React.ReactNode) => void;
+    handleRemoveItem: (key: string) => void;
+    handleShow: (key: string) => void;
     handleClose: () => void;
@@ -28,0 +22,0 @@ handleIndexChange: (index: number) => void;

es/PhotoProvider.js

@@ -0,1 +1,2 @@
+import _extends from 'babel-runtime/helpers/extends';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
@@ -5,2 +6,10 @@ import _createClass from 'babel-runtime/helpers/createClass';
 import _inherits from 'babel-runtime/helpers/inherits';
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
+    }return t;
+};
 import React from 'react';
@@ -18,8 +27,9 @@ import PhotoContext from './photo-context';
 
-        _this.handleAddItem = function (dataKey, src) {
+        _this.handleAddItem = function (key, src, intro) {
             _this.setState(function (prev) {
                 return {
-                    data: prev.data.concat({
-                        dataKey: dataKey,
-                        src: src
+                    images: prev.images.concat({
+                        key: key,
+                        src: src,
+                        intro: intro
                     })
@@ -29,13 +39,13 @@ };
         };
-        _this.handleRemoveItem = function (dataKey) {
+        _this.handleRemoveItem = function (key) {
             _this.setState(function (_ref) {
-                var data = _ref.data,
+                var images = _ref.images,
                     index = _ref.index;
 
-                var nextData = data.filter(function (item) {
-                    return item.dataKey !== dataKey;
+                var nextImages = images.filter(function (item) {
+                    return item.key !== key;
                 });
-                var nextEndIndex = nextData.length - 1;
+                var nextEndIndex = nextImages.length - 1;
                 return {
-                    data: nextData,
+                    images: nextImages,
                     index: Math.min(nextEndIndex, index)
@@ -45,9 +55,9 @@ };
         };
-        _this.handleShow = function (dataKey) {
-            var data = _this.state.data;
+        _this.handleShow = function (key) {
+            var images = _this.state.images;
 
             _this.setState({
                 visible: true,
-                index: data.findIndex(function (item) {
-                    return item.dataKey === dataKey;
+                index: images.findIndex(function (item) {
+                    return item.key === key;
                 })
@@ -67,3 +77,3 @@ });
         _this.state = {
-            data: [],
+            images: [],
             visible: false,
@@ -81,12 +91,6 @@ index: 0,
         value: function render() {
-            var _props = this.props,
-                className = _props.className,
-                maskClassName = _props.maskClassName,
-                viewClassName = _props.viewClassName,
-                imageClassName = _props.imageClassName,
-                loadingElement = _props.loadingElement,
-                brokenElement = _props.brokenElement,
-                children = _props.children;
-            var _state = this.state,
-                data = _state.data,
+            var _a = this.props,
+                children = _a.children,
+                restProps = __rest(_a, ["children"]);var _state = this.state,
+                images = _state.images,
                 visible = _state.visible,
@@ -99,3 +103,3 @@ index = _state.index;
                 children,
-                React.createElement(PhotoSlider, { images: data, visible: visible, index: index, onIndexChange: this.handleIndexChange, onClose: this.handleClose, className: className, maskClassName: maskClassName, viewClassName: viewClassName, imageClassName: imageClassName, loadingElement: loadingElement, brokenElement: brokenElement })
+                React.createElement(PhotoSlider, _extends({ images: images, visible: visible, index: index, onIndexChange: this.handleIndexChange, onClose: this.handleClose }, restProps))
             );
@@ -102,0 +106,0 @@ }

es/PhotoSlider.d.ts

 import React from 'react';
-import { dataType, TouchTypeEnum } from './types';
-interface IPhotoSliderProps {
-    images: (string | dataType)[];
+import { dataType, IPhotoProviderBase } from './types';
+interface IPhotoSliderProps extends IPhotoProviderBase {
+    images: dataType[];
     index?: number;
@@ -9,10 +9,2 @@ visible: boolean;
     onIndexChange?: Function;
-    maskClosable?: boolean;
-    overlay?: React.ReactNode;
-    className?: string;
-    maskClassName?: string;
-    viewClassName?: string;
-    imageClassName?: string;
-    loadingElement?: JSX.Element;
-    brokenElement?: JSX.Element;
 }
@@ -31,2 +23,7 @@ declare type PhotoSliderState = {
     static displayName: string;
+    static defaultProps: {
+        maskClosable: boolean;
+        bannerVisible: boolean;
+        introVisible: boolean;
+    };
     static getDerivedStateFromProps(nextProps: any, prevState: any): {
@@ -40,8 +37,9 @@ photoIndex: any;
     handlePhotoClick: () => void;
+    handlePhotoMaskClick: () => void;
     handleResize: () => void;
     handleReachVerticalMove: (clientX: any, clientY: any) => void;
     handleReachHorizontalMove: (clientX: any) => void;
-    handleReachUp: (clientX: number, clientY: number, touchType: TouchTypeEnum) => void;
+    handleReachUp: (clientX: number, clientY: number) => void;
     render(): JSX.Element | null;
 }
 export {};

es/PhotoSlider.js

@@ -9,4 +9,4 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import Backdrop from './components/Backdrop';
-import { Close, Counter, TopBar } from './components/TopWrap';
-import { TouchTypeEnum } from './types';
+import { Close, Counter, BannerWrap, BannerRight } from './components/BannerWrap';
+import FooterWrap from './components/FooterWrap';
 import { defaultOpacity, horizontalOffset, maxMoveOffset } from './variables';
@@ -29,2 +29,14 @@
         };
+        _this.handlePhotoMaskClick = function () {
+            var _this$props = _this.props,
+                maskClosable = _this$props.maskClosable,
+                onClose = _this$props.onClose;
+
+            if (maskClosable) {
+                onClose();
+                _this.setState({
+                    overlayVisible: true
+                });
+            }
+        };
         _this.handleResize = function () {
@@ -90,12 +102,10 @@ var _window = window,
         };
-        _this.handleReachUp = function (clientX, clientY, touchType) {
+        _this.handleReachUp = function (clientX, clientY) {
             var _window3 = window,
                 innerWidth = _window3.innerWidth,
                 innerHeight = _window3.innerHeight;
-            var _this$props = _this.props,
-                images = _this$props.images,
-                onIndexChange = _this$props.onIndexChange,
-                onClose = _this$props.onClose,
-                _this$props$maskClosa = _this$props.maskClosable,
-                maskClosable = _this$props$maskClosa === undefined ? true : _this$props$maskClosa;
+            var _this$props2 = _this.props,
+                images = _this$props2.images,
+                onIndexChange = _this$props2.onIndexChange,
+                onClose = _this$props2.onClose;
             var _this$state = _this.state,
@@ -116,9 +126,5 @@ _this$state$lastClien = _this$state.lastClientX,
             var isChangeVisible = false;
-            // mask 点击事件
-            if (lastClientX === clientX && lastClientY === clientY && maskClosable && touchType === TouchTypeEnum.Mask) {
+            if (Math.abs(offsetClientY) > innerHeight * 0.14) {
                 isChangeVisible = true;
                 onClose();
-            } else if (Math.abs(offsetClientY) > innerHeight * 0.14) {
-                isChangeVisible = true;
-                onClose();
                 // 下一张
@@ -194,2 +200,4 @@ } else if (offsetClientX < -maxMoveOffset && photoIndex < images.length - 1) {
                 onClose = _props.onClose,
+                bannerVisible = _props.bannerVisible,
+                introVisible = _props.introVisible,
                 loadingElement = _props.loadingElement,
@@ -207,2 +215,5 @@ brokenElement = _props.brokenElement;
             var transform = 'translate3d(' + translateX + 'px, 0px, 0)';
+            // Overlay
+            var overlayIntro = imageLength ? images[photoIndex].intro : undefined;
+            var overlayStyle = { opacity: +overlayVisible };
             if (visible) {
@@ -216,5 +227,5 @@ var _window4 = window,
                     React.createElement(Backdrop, { className: maskClassName, style: { background: 'rgba(0, 0, 0, ' + backdropOpacity + ')' } }),
-                    React.createElement(
-                        TopBar,
-                        { style: { opacity: +overlayVisible } },
+                    bannerVisible ? React.createElement(
+                        BannerWrap,
+                        { style: overlayStyle },
                         React.createElement(
@@ -227,10 +238,13 @@ Counter,
                         ),
-                        React.createElement(Close, { onClick: onClose })
-                    ),
+                        React.createElement(
+                            BannerRight,
+                            null,
+                            React.createElement(Close, { onClick: onClose })
+                        )
+                    ) : undefined,
                     images.slice( // 加载相邻三张
                     Math.max(photoIndex - 1, 0), Math.min(photoIndex + 2, imageLength + 1)).map(function (item, index) {
-                        var isStrItem = typeof item === 'string';
                         // 截取之前的索引位置
                         var realIndex = photoIndex === 0 ? photoIndex + index : photoIndex - 1 + index;
-                        return React.createElement(PhotoView, { key: isStrItem ? item + realIndex : item.dataKey, src: isStrItem ? item : item.src, onReachTopMove: _this2.handleReachVerticalMove, onReachBottomMove: _this2.handleReachVerticalMove, onReachRightMove: realIndex < imageLength - 1 ? _this2.handleReachHorizontalMove : undefined, onReachLeftMove: realIndex > 0 ? _this2.handleReachHorizontalMove : undefined, onReachUp: _this2.handleReachUp, onPhotoClick: _this2.handlePhotoClick, photoScale: photoIndex === realIndex ? photoScale : 1, wrapClassName: viewClassName, className: imageClassName, style: {
+                        return React.createElement(PhotoView, { key: item.key || realIndex, src: item.src, onReachTopMove: _this2.handleReachVerticalMove, onReachBottomMove: _this2.handleReachVerticalMove, onReachRightMove: realIndex < imageLength - 1 ? _this2.handleReachHorizontalMove : undefined, onReachLeftMove: realIndex > 0 ? _this2.handleReachHorizontalMove : undefined, onReachUp: _this2.handleReachUp, onPhotoClick: _this2.handlePhotoClick, onMaskClick: _this2.handlePhotoMaskClick, photoScale: photoIndex === realIndex ? photoScale : 1, wrapClassName: viewClassName, className: imageClassName, style: {
                                 left: (innerWidth + horizontalOffset) * realIndex + 'px',
@@ -242,2 +256,7 @@ WebkitTransform: transform,
                     }),
+                    introVisible && overlayIntro ? React.createElement(
+                        FooterWrap,
+                        { style: overlayStyle },
+                        overlayIntro
+                    ) : undefined,
                     overlay
@@ -266,2 +285,7 @@ );
 
-PhotoSlider.displayName = 'PhotoSlider';
+PhotoSlider.displayName = 'PhotoSlider';
+PhotoSlider.defaultProps = {
+    maskClosable: true,
+    bannerVisible: true,
+    introVisible: true
+};

es/PhotoView.d.ts

 import React from 'react';
-import { ReachFunction, ReachTypeEnum } from './types';
+import { ReachFunction, PhotoClickFunction, ReachTypeEnum } from './types';
 interface IPhotoViewProps {
@@ -11,3 +11,4 @@ src: string;
     brokenElement?: JSX.Element;
-    onPhotoClick?: (clientX: number, clientY: number) => void;
+    onPhotoClick?: PhotoClickFunction;
+    onMaskClick?: PhotoClickFunction;
     onReachTopMove?: ReachFunction;
@@ -17,3 +18,3 @@ onReachRightMove?: ReachFunction;
     onReachLeftMove?: ReachFunction;
-    onReachUp?: (clientX: number, clientY: number, TouchTypeEnum: any) => void;
+    onReachUp?: (clientX: number, clientY: number) => void;
     onPhotoResize?: () => void;
@@ -52,3 +53,2 @@ }
     private photoRef;
-    private readonly onPhotoClick;
     constructor(props: any);
@@ -59,3 +59,3 @@ componentDidMount(): void;
     handleMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
-    debouncePhotoClick: (newClientX: number, newClientY: number) => void;
+    photoClick: (newClientX: number, newClientY: number) => void;
     handlePhotoClick: (e: any) => void;
@@ -67,2 +67,3 @@ handleDoubleClick: (e: any) => void;
     handleMaskTouchStart: (e: any) => void;
+    handleMaskClick: (e: any) => void;
     handleTouchStart: (e: any) => void;
@@ -69,0 +70,0 @@ handleMouseDown: (e: any) => void;

es/PhotoView.js

@@ -13,2 +13,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import isMobile from './utils/isMobile';
+import getCurrentFromEvent from './utils/getCurrentFromEvent';
 import getMultipleTouchPosition from './utils/getMultipleTouchPosition';
@@ -19,3 +20,3 @@ import getPositionOnMoveOrScale from './utils/getPositionOnMoveOrScale';
 import { maxScale, minReachOffset, minScale, scaleBuffer } from './variables';
-import { ReachTypeEnum, TouchTypeEnum } from './types';
+import { ReachTypeEnum } from './types';
 var initialState = {
@@ -124,3 +125,3 @@ // 图片 X 偏移量
         };
-        _this.debouncePhotoClick = function (newClientX, newClientY) {
+        _this.photoClick = function (newClientX, newClientY) {
             var onPhotoClick = _this.props.onPhotoClick;
@@ -131,3 +132,3 @@ var _this$state3 = _this.state,
 
-            if (onPhotoClick && clientX === newClientX && clientY === newClientY) {
+            if (onPhotoClick && Math.abs(clientX - newClientX) < 5 && Math.abs(clientY - newClientY) < 5) {
                 onPhotoClick(newClientX, newClientY);
@@ -137,8 +138,12 @@ }
         _this.handlePhotoClick = function (e) {
-            _this.onPhotoClick(e.clientX, e.clientY);
+            var _getCurrentFromEvent = getCurrentFromEvent(e),
+                clientX = _getCurrentFromEvent.clientX,
+                clientY = _getCurrentFromEvent.clientY;
+
+            _this.photoClick(clientX, clientY);
         };
         _this.handleDoubleClick = function (e) {
             e.preventDefault();
-            // 取消 click 事件
-            _this.onPhotoClick.cancel();
+            // @ts-ignore 取消 click 事件
+            _this.photoClick.cancel();
             var clientX = e.clientX,
@@ -202,4 +207,3 @@ clientY = e.clientY;
                     lastX: prevState.x,
-                    lastY: prevState.y,
-                    touchedTime: Date.now()
+                    lastY: prevState.y
                 };
@@ -218,2 +222,13 @@ });
         };
+        _this.handleMaskClick = function (e) {
+            var evt = getCurrentFromEvent(e);
+            var onMaskClick = _this.props.onMaskClick;
+            var _this$state4 = _this.state,
+                clientX = _this$state4.clientX,
+                clientY = _this$state4.clientY;
+
+            if (onMaskClick && Math.abs(clientX - evt.clientX) < 5 && Math.abs(clientY - evt.clientY) < 5) {
+                onMaskClick(clientX, clientY);
+            }
+        };
         _this.handleTouchStart = function (e) {
@@ -261,5 +276,5 @@ if (e.touches.length >= 2) {
         _this.handleUp = function (newClientX, newClientY) {
-            var _this$state4 = _this.state,
-                touched = _this$state4.touched,
-                maskTouched = _this$state4.maskTouched;
+            var _this$state5 = _this.state,
+                touched = _this$state5.touched,
+                maskTouched = _this$state5.maskTouched;
 
@@ -284,3 +299,3 @@ if (touched || maskTouched) {
                     if (onReachUp) {
-                        onReachUp(newClientX, newClientY, maskTouched ? TouchTypeEnum.Mask : TouchTypeEnum.Image);
+                        onReachUp(newClientX, newClientY);
                     }
@@ -359,3 +374,4 @@ var hasMove = clientX !== newClientX || clientY !== newClientY;
         };
-        _this.onPhotoClick = debounce(_this.debouncePhotoClick, 400);
+        // 加入延迟触发，避免与双击混淆
+        _this.photoClick = debounce(_this.photoClick, 300);
         _this.handleMove = throttle(_this.handleMove, 8);
@@ -409,3 +425,3 @@ return _this;
                 { className: wrapClassName, style: style },
-                React.createElement(PhotoMask, { onMouseDown: isMobile ? undefined : this.handleMaskMouseDown, onTouchStart: isMobile ? this.handleMaskTouchStart : undefined }),
+                React.createElement(PhotoMask, { onMouseDown: isMobile ? undefined : this.handleMaskMouseDown, onTouchStart: isMobile ? this.handleMaskTouchStart : undefined, onClick: this.handleMaskClick }),
                 React.createElement(Photo, { className: className, src: src, ref: this.handlePhotoRef, onClick: this.handlePhotoClick, onDoubleClick: this.handleDoubleClick, onMouseDown: isMobile ? undefined : this.handleMouseDown, onTouchStart: isMobile ? this.handleTouchStart : undefined, onWheel: this.handleWheel, onPhotoResize: this.handleResize, style: {
@@ -412,0 +428,0 @@ WebkitTransform: transform,

es/types.d.ts

 /**
  * 图片 item 类型
  */
+import React from 'react';
 export declare type dataType = {
-    dataKey: string;
+    key?: string;
     src: string;
+    intro?: React.ReactNode;
 };
+export interface IPhotoProviderBase {
+    maskClosable?: boolean;
+    bannerVisible?: boolean;
+    introVisible?: boolean;
+    overlay?: React.ReactNode;
+    className?: string;
+    maskClassName?: string;
+    viewClassName?: string;
+    imageClassName?: string;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element;
+}
 export declare type ReachFunction = (clientX: number, clientY: number) => void;
+export declare type PhotoClickFunction = (clientX: number, clientY: number) => void;
 /**
@@ -26,8 +41,1 @@ * 边缘超出状态
 }
-/**
- * 触摸类型
- */
-export declare enum TouchTypeEnum {
-    Image = 1,
-    Mask = 2
-}

es/types.js

@@ -19,10 +19,2 @@ /**
     ReachTypeEnum[ReachTypeEnum["YReach"] = 2] = "YReach";
-})(ReachTypeEnum || (ReachTypeEnum = {}));
-/**
- * 触摸类型
- */
-export var TouchTypeEnum;
-(function (TouchTypeEnum) {
-    TouchTypeEnum[TouchTypeEnum["Image"] = 1] = "Image";
-    TouchTypeEnum[TouchTypeEnum["Mask"] = 2] = "Mask";
-})(TouchTypeEnum || (TouchTypeEnum = {}));
+})(ReachTypeEnum || (ReachTypeEnum = {}));

lib/components/Spinner.d.ts

@@ -1,2 +0,2 @@
-declare const _default: import("../../node_modules/styled-components").StyledComponentClass<{
+declare const _default: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<{
     className?: string | undefined;
@@ -3,0 +3,0 @@ }, any, Pick<{

lib/photo-context.d.ts

 import React from 'react';
-export declare type onShowType = (dataKey?: string) => void;
-export declare type addItemType = (dataKey?: string, src?: string) => void;
-export declare type removeItemType = (dataKey?: string) => void;
+export declare type onShowType = (key?: string) => void;
+export declare type addItemType = (key?: string, src?: string, intro?: React.ReactNode) => void;
+export declare type removeItemType = (key?: string) => void;
 declare const _default: React.Context<{
@@ -6,0 +6,0 @@ onShow(): void;

lib/PhotoConsumer.d.ts

 import React from 'react';
 export interface IPhotoConsumer {
     src: string;
+    intro?: React.ReactNode;
     children?: React.ReactElement<any>;
@@ -5,0 +6,0 @@ }

lib/PhotoConsumer.js

@@ -58,3 +58,3 @@ 'use strict';
 
-        _this.dataKey = (0, _lodash2['default'])();
+        _this.key = (0, _lodash2['default'])();
         _this.handleShow = function (e) {
@@ -65,3 +65,3 @@ var _this$props = _this.props,
 
-            onShow(_this.dataKey);
+            onShow(_this.key);
             if (children) {
@@ -82,6 +82,7 @@ var onClick = children.props.onClick;
             var _props = this.props,
+                addItem = _props.addItem,
                 src = _props.src,
-                addItem = _props.addItem;
+                intro = _props.intro;
 
-            addItem(this.dataKey, src);
+            addItem(this.key, src, intro);
         }
@@ -93,3 +94,3 @@ }, {
 
-            removeItem(this.dataKey);
+            removeItem(this.key);
         }
@@ -114,4 +115,5 @@ }, {
     var src = _a.src,
+        intro = _a.intro,
         children = _a.children,
-        restProps = __rest(_a, ["src", "children"]);
+        restProps = __rest(_a, ["src", "intro", "children"]);
 
@@ -124,3 +126,3 @@ return _react2['default'].createElement(
                 PhotoViewItem,
-                (0, _extends3['default'])({}, value, restProps, { src: src }),
+                (0, _extends3['default'])({}, value, restProps, { src: src, intro: intro }),
                 children
@@ -127,0 +129,0 @@ );

lib/PhotoProvider.d.ts

 import React from 'react';
 import { onShowType, addItemType, removeItemType } from './photo-context';
-import { dataType } from './types';
-interface IPhotoProvider {
+import { dataType, IPhotoProviderBase } from './types';
+interface IPhotoProvider extends IPhotoProviderBase {
     children: React.ReactNode;
-    className?: string;
-    maskClassName?: string;
-    viewClassName?: string;
-    imageClassName?: string;
-    loadingElement?: JSX.Element;
-    brokenElement?: JSX.Element;
 }
 declare type PhotoProviderState = {
-    data: dataType[];
+    images: dataType[];
     visible: boolean;
@@ -23,5 +17,5 @@ index: number;
     constructor(props: any);
-    handleAddItem: (dataKey: string, src: string) => void;
-    handleRemoveItem: (dataKey: string) => void;
-    handleShow: (dataKey: string) => void;
+    handleAddItem: (key: string, src: string, intro: React.ReactNode) => void;
+    handleRemoveItem: (key: string) => void;
+    handleShow: (key: string) => void;
     handleClose: () => void;
@@ -28,0 +22,0 @@ handleIndexChange: (index: number) => void;

lib/PhotoProvider.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -38,2 +42,11 @@
 
+var __rest = undefined && undefined.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
+    }return t;
+};
+
 var PhotoProvider = function (_React$Component) {
@@ -47,8 +60,9 @@ (0, _inherits3['default'])(PhotoProvider, _React$Component);
 
-        _this.handleAddItem = function (dataKey, src) {
+        _this.handleAddItem = function (key, src, intro) {
             _this.setState(function (prev) {
                 return {
-                    data: prev.data.concat({
-                        dataKey: dataKey,
-                        src: src
+                    images: prev.images.concat({
+                        key: key,
+                        src: src,
+                        intro: intro
                     })
@@ -58,13 +72,13 @@ };
         };
-        _this.handleRemoveItem = function (dataKey) {
+        _this.handleRemoveItem = function (key) {
             _this.setState(function (_ref) {
-                var data = _ref.data,
+                var images = _ref.images,
                     index = _ref.index;
 
-                var nextData = data.filter(function (item) {
-                    return item.dataKey !== dataKey;
+                var nextImages = images.filter(function (item) {
+                    return item.key !== key;
                 });
-                var nextEndIndex = nextData.length - 1;
+                var nextEndIndex = nextImages.length - 1;
                 return {
-                    data: nextData,
+                    images: nextImages,
                     index: Math.min(nextEndIndex, index)
@@ -74,9 +88,9 @@ };
         };
-        _this.handleShow = function (dataKey) {
-            var data = _this.state.data;
+        _this.handleShow = function (key) {
+            var images = _this.state.images;
 
             _this.setState({
                 visible: true,
-                index: data.findIndex(function (item) {
-                    return item.dataKey === dataKey;
+                index: images.findIndex(function (item) {
+                    return item.key === key;
                 })
@@ -96,3 +110,3 @@ });
         _this.state = {
-            data: [],
+            images: [],
             visible: false,
@@ -110,12 +124,6 @@ index: 0,
         value: function render() {
-            var _props = this.props,
-                className = _props.className,
-                maskClassName = _props.maskClassName,
-                viewClassName = _props.viewClassName,
-                imageClassName = _props.imageClassName,
-                loadingElement = _props.loadingElement,
-                brokenElement = _props.brokenElement,
-                children = _props.children;
-            var _state = this.state,
-                data = _state.data,
+            var _a = this.props,
+                children = _a.children,
+                restProps = __rest(_a, ["children"]);var _state = this.state,
+                images = _state.images,
                 visible = _state.visible,
@@ -128,3 +136,3 @@ index = _state.index;
                 children,
-                _react2['default'].createElement(_PhotoSlider2['default'], { images: data, visible: visible, index: index, onIndexChange: this.handleIndexChange, onClose: this.handleClose, className: className, maskClassName: maskClassName, viewClassName: viewClassName, imageClassName: imageClassName, loadingElement: loadingElement, brokenElement: brokenElement })
+                _react2['default'].createElement(_PhotoSlider2['default'], (0, _extends3['default'])({ images: images, visible: visible, index: index, onIndexChange: this.handleIndexChange, onClose: this.handleClose }, restProps))
             );
@@ -131,0 +139,0 @@ }

lib/PhotoSlider.d.ts

 import React from 'react';
-import { dataType, TouchTypeEnum } from './types';
-interface IPhotoSliderProps {
-    images: (string | dataType)[];
+import { dataType, IPhotoProviderBase } from './types';
+interface IPhotoSliderProps extends IPhotoProviderBase {
+    images: dataType[];
     index?: number;
@@ -9,10 +9,2 @@ visible: boolean;
     onIndexChange?: Function;
-    maskClosable?: boolean;
-    overlay?: React.ReactNode;
-    className?: string;
-    maskClassName?: string;
-    viewClassName?: string;
-    imageClassName?: string;
-    loadingElement?: JSX.Element;
-    brokenElement?: JSX.Element;
 }
@@ -31,2 +23,7 @@ declare type PhotoSliderState = {
     static displayName: string;
+    static defaultProps: {
+        maskClosable: boolean;
+        bannerVisible: boolean;
+        introVisible: boolean;
+    };
     static getDerivedStateFromProps(nextProps: any, prevState: any): {
@@ -40,8 +37,9 @@ photoIndex: any;
     handlePhotoClick: () => void;
+    handlePhotoMaskClick: () => void;
     handleResize: () => void;
     handleReachVerticalMove: (clientX: any, clientY: any) => void;
     handleReachHorizontalMove: (clientX: any) => void;
-    handleReachUp: (clientX: number, clientY: number, touchType: TouchTypeEnum) => void;
+    handleReachUp: (clientX: number, clientY: number) => void;
     render(): JSX.Element | null;
 }
 export {};

lib/PhotoSlider.js

@@ -39,6 +39,8 @@ 'use strict';
 
-var _TopWrap = require('./components/TopWrap');
+var _BannerWrap = require('./components/BannerWrap');
 
-var _types = require('./types');
+var _FooterWrap = require('./components/FooterWrap');
 
+var _FooterWrap2 = _interopRequireDefault(_FooterWrap);
+
 var _variables = require('./variables');
@@ -63,2 +65,14 @@
         };
+        _this.handlePhotoMaskClick = function () {
+            var _this$props = _this.props,
+                maskClosable = _this$props.maskClosable,
+                onClose = _this$props.onClose;
+
+            if (maskClosable) {
+                onClose();
+                _this.setState({
+                    overlayVisible: true
+                });
+            }
+        };
         _this.handleResize = function () {
@@ -124,12 +138,10 @@ var _window = window,
         };
-        _this.handleReachUp = function (clientX, clientY, touchType) {
+        _this.handleReachUp = function (clientX, clientY) {
             var _window3 = window,
                 innerWidth = _window3.innerWidth,
                 innerHeight = _window3.innerHeight;
-            var _this$props = _this.props,
-                images = _this$props.images,
-                onIndexChange = _this$props.onIndexChange,
-                onClose = _this$props.onClose,
-                _this$props$maskClosa = _this$props.maskClosable,
-                maskClosable = _this$props$maskClosa === undefined ? true : _this$props$maskClosa;
+            var _this$props2 = _this.props,
+                images = _this$props2.images,
+                onIndexChange = _this$props2.onIndexChange,
+                onClose = _this$props2.onClose;
             var _this$state = _this.state,
@@ -150,9 +162,5 @@ _this$state$lastClien = _this$state.lastClientX,
             var isChangeVisible = false;
-            // mask 点击事件
-            if (lastClientX === clientX && lastClientY === clientY && maskClosable && touchType === _types.TouchTypeEnum.Mask) {
+            if (Math.abs(offsetClientY) > innerHeight * 0.14) {
                 isChangeVisible = true;
                 onClose();
-            } else if (Math.abs(offsetClientY) > innerHeight * 0.14) {
-                isChangeVisible = true;
-                onClose();
                 // 下一张
@@ -228,2 +236,4 @@ } else if (offsetClientX < -_variables.maxMoveOffset && photoIndex < images.length - 1) {
                 onClose = _props.onClose,
+                bannerVisible = _props.bannerVisible,
+                introVisible = _props.introVisible,
                 loadingElement = _props.loadingElement,
@@ -241,2 +251,5 @@ brokenElement = _props.brokenElement;
             var transform = 'translate3d(' + translateX + 'px, 0px, 0)';
+            // Overlay
+            var overlayIntro = imageLength ? images[photoIndex].intro : undefined;
+            var overlayStyle = { opacity: +overlayVisible };
             if (visible) {
@@ -250,7 +263,7 @@ var _window4 = window,
                     _react2['default'].createElement(_Backdrop2['default'], { className: maskClassName, style: { background: 'rgba(0, 0, 0, ' + backdropOpacity + ')' } }),
-                    _react2['default'].createElement(
-                        _TopWrap.TopBar,
-                        { style: { opacity: +overlayVisible } },
+                    bannerVisible ? _react2['default'].createElement(
+                        _BannerWrap.BannerWrap,
+                        { style: overlayStyle },
                         _react2['default'].createElement(
-                            _TopWrap.Counter,
+                            _BannerWrap.Counter,
                             null,
@@ -261,10 +274,13 @@ photoIndex + 1,
                         ),
-                        _react2['default'].createElement(_TopWrap.Close, { onClick: onClose })
-                    ),
+                        _react2['default'].createElement(
+                            _BannerWrap.BannerRight,
+                            null,
+                            _react2['default'].createElement(_BannerWrap.Close, { onClick: onClose })
+                        )
+                    ) : undefined,
                     images.slice( // 加载相邻三张
                     Math.max(photoIndex - 1, 0), Math.min(photoIndex + 2, imageLength + 1)).map(function (item, index) {
-                        var isStrItem = typeof item === 'string';
                         // 截取之前的索引位置
                         var realIndex = photoIndex === 0 ? photoIndex + index : photoIndex - 1 + index;
-                        return _react2['default'].createElement(_PhotoView2['default'], { key: isStrItem ? item + realIndex : item.dataKey, src: isStrItem ? item : item.src, onReachTopMove: _this2.handleReachVerticalMove, onReachBottomMove: _this2.handleReachVerticalMove, onReachRightMove: realIndex < imageLength - 1 ? _this2.handleReachHorizontalMove : undefined, onReachLeftMove: realIndex > 0 ? _this2.handleReachHorizontalMove : undefined, onReachUp: _this2.handleReachUp, onPhotoClick: _this2.handlePhotoClick, photoScale: photoIndex === realIndex ? photoScale : 1, wrapClassName: viewClassName, className: imageClassName, style: {
+                        return _react2['default'].createElement(_PhotoView2['default'], { key: item.key || realIndex, src: item.src, onReachTopMove: _this2.handleReachVerticalMove, onReachBottomMove: _this2.handleReachVerticalMove, onReachRightMove: realIndex < imageLength - 1 ? _this2.handleReachHorizontalMove : undefined, onReachLeftMove: realIndex > 0 ? _this2.handleReachHorizontalMove : undefined, onReachUp: _this2.handleReachUp, onPhotoClick: _this2.handlePhotoClick, onMaskClick: _this2.handlePhotoMaskClick, photoScale: photoIndex === realIndex ? photoScale : 1, wrapClassName: viewClassName, className: imageClassName, style: {
                                 left: (innerWidth + _variables.horizontalOffset) * realIndex + 'px',
@@ -276,2 +292,7 @@ WebkitTransform: transform,
                     }),
+                    introVisible && overlayIntro ? _react2['default'].createElement(
+                        _FooterWrap2['default'],
+                        { style: overlayStyle },
+                        overlayIntro
+                    ) : undefined,
                     overlay
@@ -300,2 +321,7 @@ );
 PhotoSlider.displayName = 'PhotoSlider';
+PhotoSlider.defaultProps = {
+    maskClosable: true,
+    bannerVisible: true,
+    introVisible: true
+};
 module.exports = exports['default'];

lib/PhotoView.d.ts

 import React from 'react';
-import { ReachFunction, ReachTypeEnum } from './types';
+import { ReachFunction, PhotoClickFunction, ReachTypeEnum } from './types';
 interface IPhotoViewProps {
@@ -11,3 +11,4 @@ src: string;
     brokenElement?: JSX.Element;
-    onPhotoClick?: (clientX: number, clientY: number) => void;
+    onPhotoClick?: PhotoClickFunction;
+    onMaskClick?: PhotoClickFunction;
     onReachTopMove?: ReachFunction;
@@ -17,3 +18,3 @@ onReachRightMove?: ReachFunction;
     onReachLeftMove?: ReachFunction;
-    onReachUp?: (clientX: number, clientY: number, TouchTypeEnum: any) => void;
+    onReachUp?: (clientX: number, clientY: number) => void;
     onPhotoResize?: () => void;
@@ -52,3 +53,2 @@ }
     private photoRef;
-    private readonly onPhotoClick;
     constructor(props: any);
@@ -59,3 +59,3 @@ componentDidMount(): void;
     handleMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
-    debouncePhotoClick: (newClientX: number, newClientY: number) => void;
+    photoClick: (newClientX: number, newClientY: number) => void;
     handlePhotoClick: (e: any) => void;
@@ -67,2 +67,3 @@ handleDoubleClick: (e: any) => void;
     handleMaskTouchStart: (e: any) => void;
+    handleMaskClick: (e: any) => void;
     handleTouchStart: (e: any) => void;
@@ -69,0 +70,0 @@ handleMouseDown: (e: any) => void;

lib/PhotoView.js

@@ -55,2 +55,6 @@ 'use strict';
 
+var _getCurrentFromEvent2 = require('./utils/getCurrentFromEvent');
+
+var _getCurrentFromEvent3 = _interopRequireDefault(_getCurrentFromEvent2);
+
 var _getMultipleTouchPosition = require('./utils/getMultipleTouchPosition');
@@ -179,3 +183,3 @@
         };
-        _this.debouncePhotoClick = function (newClientX, newClientY) {
+        _this.photoClick = function (newClientX, newClientY) {
             var onPhotoClick = _this.props.onPhotoClick;
@@ -186,3 +190,3 @@ var _this$state3 = _this.state,
 
-            if (onPhotoClick && clientX === newClientX && clientY === newClientY) {
+            if (onPhotoClick && Math.abs(clientX - newClientX) < 5 && Math.abs(clientY - newClientY) < 5) {
                 onPhotoClick(newClientX, newClientY);
@@ -192,8 +196,12 @@ }
         _this.handlePhotoClick = function (e) {
-            _this.onPhotoClick(e.clientX, e.clientY);
+            var _getCurrentFromEvent = (0, _getCurrentFromEvent3['default'])(e),
+                clientX = _getCurrentFromEvent.clientX,
+                clientY = _getCurrentFromEvent.clientY;
+
+            _this.photoClick(clientX, clientY);
         };
         _this.handleDoubleClick = function (e) {
             e.preventDefault();
-            // 取消 click 事件
-            _this.onPhotoClick.cancel();
+            // @ts-ignore 取消 click 事件
+            _this.photoClick.cancel();
             var clientX = e.clientX,
@@ -257,4 +265,3 @@ clientY = e.clientY;
                     lastX: prevState.x,
-                    lastY: prevState.y,
-                    touchedTime: Date.now()
+                    lastY: prevState.y
                 };
@@ -273,2 +280,13 @@ });
         };
+        _this.handleMaskClick = function (e) {
+            var evt = (0, _getCurrentFromEvent3['default'])(e);
+            var onMaskClick = _this.props.onMaskClick;
+            var _this$state4 = _this.state,
+                clientX = _this$state4.clientX,
+                clientY = _this$state4.clientY;
+
+            if (onMaskClick && Math.abs(clientX - evt.clientX) < 5 && Math.abs(clientY - evt.clientY) < 5) {
+                onMaskClick(clientX, clientY);
+            }
+        };
         _this.handleTouchStart = function (e) {
@@ -316,5 +334,5 @@ if (e.touches.length >= 2) {
         _this.handleUp = function (newClientX, newClientY) {
-            var _this$state4 = _this.state,
-                touched = _this$state4.touched,
-                maskTouched = _this$state4.maskTouched;
+            var _this$state5 = _this.state,
+                touched = _this$state5.touched,
+                maskTouched = _this$state5.maskTouched;
 
@@ -339,3 +357,3 @@ if (touched || maskTouched) {
                     if (onReachUp) {
-                        onReachUp(newClientX, newClientY, maskTouched ? _types.TouchTypeEnum.Mask : _types.TouchTypeEnum.Image);
+                        onReachUp(newClientX, newClientY);
                     }
@@ -414,3 +432,4 @@ var hasMove = clientX !== newClientX || clientY !== newClientY;
         };
-        _this.onPhotoClick = (0, _lodash2['default'])(_this.debouncePhotoClick, 400);
+        // 加入延迟触发，避免与双击混淆
+        _this.photoClick = (0, _lodash2['default'])(_this.photoClick, 300);
         _this.handleMove = (0, _throttle2['default'])(_this.handleMove, 8);
@@ -464,3 +483,3 @@ return _this;
                 { className: wrapClassName, style: style },
-                _react2['default'].createElement(_PhotoMask2['default'], { onMouseDown: _isMobile2['default'] ? undefined : this.handleMaskMouseDown, onTouchStart: _isMobile2['default'] ? this.handleMaskTouchStart : undefined }),
+                _react2['default'].createElement(_PhotoMask2['default'], { onMouseDown: _isMobile2['default'] ? undefined : this.handleMaskMouseDown, onTouchStart: _isMobile2['default'] ? this.handleMaskTouchStart : undefined, onClick: this.handleMaskClick }),
                 _react2['default'].createElement(_Photo2['default'], { className: className, src: src, ref: this.handlePhotoRef, onClick: this.handlePhotoClick, onDoubleClick: this.handleDoubleClick, onMouseDown: _isMobile2['default'] ? undefined : this.handleMouseDown, onTouchStart: _isMobile2['default'] ? this.handleTouchStart : undefined, onWheel: this.handleWheel, onPhotoResize: this.handleResize, style: {
@@ -467,0 +486,0 @@ WebkitTransform: transform,

lib/types.d.ts

 /**
  * 图片 item 类型
  */
+import React from 'react';
 export declare type dataType = {
-    dataKey: string;
+    key?: string;
     src: string;
+    intro?: React.ReactNode;
 };
+export interface IPhotoProviderBase {
+    maskClosable?: boolean;
+    bannerVisible?: boolean;
+    introVisible?: boolean;
+    overlay?: React.ReactNode;
+    className?: string;
+    maskClassName?: string;
+    viewClassName?: string;
+    imageClassName?: string;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element;
+}
 export declare type ReachFunction = (clientX: number, clientY: number) => void;
+export declare type PhotoClickFunction = (clientX: number, clientY: number) => void;
 /**
@@ -26,8 +41,1 @@ * 边缘超出状态
 }
-/**
- * 触摸类型
- */
-export declare enum TouchTypeEnum {
-    Image = 1,
-    Mask = 2
-}

lib/types.js

@@ -24,10 +24,2 @@ "use strict";
     ReachTypeEnum[ReachTypeEnum["YReach"] = 2] = "YReach";
-})(ReachTypeEnum || (exports.ReachTypeEnum = ReachTypeEnum = {}));
-/**
- * 触摸类型
- */
-var TouchTypeEnum = exports.TouchTypeEnum = undefined;
-(function (TouchTypeEnum) {
-    TouchTypeEnum[TouchTypeEnum["Image"] = 1] = "Image";
-    TouchTypeEnum[TouchTypeEnum["Mask"] = 2] = "Mask";
-})(TouchTypeEnum || (exports.TouchTypeEnum = TouchTypeEnum = {}));
+})(ReachTypeEnum || (exports.ReachTypeEnum = ReachTypeEnum = {}));

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

160737

increased by5.66%

Number of package files

97

increased by8.99%

Lines of code

3716

increased by4.24%

No dependency changes