feat: 发布

dist/Photo.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './Photo.less';
+import { brokenElementDataType } from './types';
+export interface IPhotoProps extends React.HTMLAttributes<any> {
+    src: string;
+    intro?: React.ReactNode;
+    loaded: boolean;
+    broken: boolean;
+    width: number;
+    height: number;
+    rotate: number;
+    className?: string;
+    onImageLoad: (PhotoParams: any, callback?: Function) => void;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element | ((photoProps: brokenElementDataType) => JSX.Element);
+}
+declare const Photo: React.FC<IPhotoProps>;
+export default Photo;

dist/PhotoConsumer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IPhotoConsumer {
+    src: string;
+    intro?: React.ReactNode;
+    children?: React.ReactElement<any>;
+}
+declare const PhotoConsumer: React.FC<IPhotoConsumer>;
+export default PhotoConsumer;

dist/PhotoProvider.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { onShowType, addItemType, removeItemType } from './photo-context';
+import { dataType, IPhotoProviderBase } from './types';
+export interface IPhotoProvider extends IPhotoProviderBase {
+    children: React.ReactNode;
+}
+declare type PhotoProviderState = {
+    images: dataType[];
+    visible: boolean;
+    index: number;
+    onShow: onShowType;
+    addItem: addItemType;
+    removeItem: removeItemType;
+};
+export default class PhotoProvider extends React.Component<IPhotoProvider, PhotoProviderState> {
+    constructor(props: any);
+    handleAddItem: addItemType;
+    handleRemoveItem: (key: string) => void;
+    handleShow: (key: string) => void;
+    handleClose: () => void;
+    handleIndexChange: (index: number) => void;
+    render(): JSX.Element;
+}
+export {};

dist/PhotoSlider.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { dataType, IPhotoProviderBase, ReachTypeEnum } from './types';
+import './PhotoSlider.less';
+export interface IPhotoSliderProps extends IPhotoProviderBase {
+    images: dataType[];
+    index?: number;
+    visible: boolean;
+    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
+    onIndexChange?: Function;
+}
+declare type PhotoSliderState = {
+    translateX: number;
+    photoIndex: number;
+    touched: boolean;
+    shouldTransition: boolean;
+    lastClientX: number | undefined;
+    lastClientY: number | undefined;
+    backdropOpacity: number;
+    lastBackdropOpacity: number;
+    overlayVisible: boolean;
+    canPullClose: boolean;
+    rotatingMap: Map<number, number>;
+};
+export default class PhotoSlider extends React.Component<IPhotoSliderProps, PhotoSliderState> {
+    static displayName: string;
+    static defaultProps: {
+        maskClosable: boolean;
+        photoClosable: boolean;
+        bannerVisible: boolean;
+        introVisible: boolean;
+    };
+    static getDerivedStateFromProps(nextProps: any, prevState: any): {
+        photoIndex: any;
+        translateX: number;
+    } | null;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleClose: (evt?: React.MouseEvent<Element, MouseEvent> | React.TouchEvent<Element> | undefined) => void;
+    handlePhotoTap: () => void;
+    handlePhotoMaskTap: () => void;
+    handleResize: () => void;
+    handleRotate: (rotating: number) => void;
+    handleKeyDown: (evt: KeyboardEvent) => void;
+    handleBack: (evt: KeyboardEvent) => void;
+    handleReachVerticalMove: (clientY: any, scale: any) => void;
+    handleReachHorizontalMove: (clientX: any) => void;
+    handleIndexChange: (photoIndex: number, shouldTransition?: boolean) => void;
+    handlePrevious: (shouldTransition?: boolean | undefined) => void;
+    handleNext: (shouldTransition?: boolean | undefined) => void;
+    handleReachMove: (reachState: ReachTypeEnum, clientX: number, clientY: number, scale?: number | undefined) => void;
+    handleReachUp: (clientX: number, clientY: number) => void;
+    render(): JSX.Element;
+}
+export {};

dist/PhotoView.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import { TapFuncType } from './utils/withContinuousTap';
+import { ReachMoveFunction, ReachFunction, PhotoTapFunction, ReachTypeEnum, ShowAnimateEnum, OriginRectType, brokenElementDataType } from './types';
+import './PhotoView.less';
+export interface IPhotoViewProps {
+    src: string;
+    intro?: React.ReactNode;
+    viewClassName?: string;
+    className?: string;
+    style?: object;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element | ((photoProps: brokenElementDataType) => JSX.Element);
+    rotate: number;
+    onPhotoTap: PhotoTapFunction;
+    onMaskTap: PhotoTapFunction;
+    onReachMove: ReachMoveFunction;
+    onReachUp: ReachFunction;
+    onPhotoResize?: () => void;
+    isActive: boolean;
+    showAnimateType?: ShowAnimateEnum;
+    originRect?: OriginRectType;
+}
+declare const initialState: {
+    naturalWidth: number;
+    naturalHeight: number;
+    width: number;
+    height: number;
+    loaded: boolean;
+    broken: boolean;
+    x: number;
+    y: number;
+    scale: number;
+    touched: boolean;
+    maskTouched: boolean;
+    clientX: number;
+    clientY: number;
+    lastX: number;
+    lastY: number;
+    lastMoveClientX: number;
+    lastMoveClientY: number;
+    touchedTime: number;
+    lastTouchLength: number;
+    reachState: ReachTypeEnum;
+};
+export default class PhotoView extends React.Component<IPhotoViewProps, typeof initialState> {
+    static displayName: string;
+    readonly state: {
+        naturalWidth: number;
+        naturalHeight: number;
+        width: number;
+        height: number;
+        loaded: boolean;
+        broken: boolean;
+        x: number;
+        y: number;
+        scale: number;
+        touched: boolean;
+        maskTouched: boolean;
+        clientX: number;
+        clientY: number;
+        lastX: number;
+        lastY: number;
+        lastMoveClientX: number;
+        lastMoveClientY: number;
+        touchedTime: number;
+        lastTouchLength: number;
+        reachState: ReachTypeEnum;
+    };
+    private initialTouchState;
+    private readonly handlePhotoTap;
+    constructor(props: IPhotoViewProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<IPhotoViewProps>): void;
+    componentWillUnmount(): void;
+    handleImageLoad: (imageParams: any) => void;
+    handleResize: () => void;
+    handleStart: (clientX: number, clientY: number, touchLength?: number) => void;
+    onMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
+    onPhotoTap: (clientX: number, clientY: number) => void;
+    onDoubleTap: TapFuncType<number>;
+    handleWheel: (e: any) => void;
+    handleMaskStart: (clientX: number, clientY: number) => void;
+    handleMaskMouseDown: (e: any) => void;
+    handleMaskTouchStart: (e: any) => void;
+    handleTouchStart: (e: any) => void;
+    handleMouseDown: (e: any) => void;
+    handleTouchMove: (e: any) => void;
+    handleMouseMove: (e: any) => void;
+    handleUp: (newClientX: number, newClientY: number) => void;
+    handleTouchEnd: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    render(): JSX.Element;
+}
+export {};

dist/components/ArrowLeft.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function ArrowLeft(props: any): JSX.Element;
+export default ArrowLeft;

dist/components/ArrowRight.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function ArrowRight(props: any): JSX.Element;
+export default ArrowRight;

dist/components/Close.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function Close(props: any): JSX.Element;
+export default Close;

dist/components/SlideWrap.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './SlideWrap.less';
+declare const SlideWrap: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export default SlideWrap;

dist/components/Spinner.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './Spinner.less';
+declare function Spinner(): JSX.Element;
+export default Spinner;

dist/components/VisibleAnimationHandle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { dataType, OriginRectType, ShowAnimateEnum } from '../types';
+interface VisibleHandleProps {
+    visible: boolean;
+    currentImage?: dataType;
+    children: ({ photoVisible, showAnimateType, originRect, onShowAnimateEnd, }: {
+        photoVisible: boolean;
+        showAnimateType: ShowAnimateEnum;
+        originRect: OriginRectType;
+        onShowAnimateEnd: () => void;
+    }) => JSX.Element | null;
+}
+export default function VisibleAnimationHandle({ visible, currentImage, children }: VisibleHandleProps): JSX.Element | null;
+export {};

dist/index.css

@@ -0,0 +1,221 @@
+@keyframes PhotoView__rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes PhotoView__delayShow {
+  0%,
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PhotoView__Spinner {
+  animation: PhotoView__delayShow 0.4s linear both;
+}
+.PhotoView__Spinner svg {
+  animation: PhotoView__rotate 0.6s linear infinite;
+}
+
+.PhotoView__Photo {
+  will-change: transform;
+  cursor: grab;
+}
+.PhotoView__Photo:active {
+  cursor: grabbing;
+}
+
+@keyframes PhotoView__animateIn {
+  from {
+    opacity: 0.4;
+    transform: scale(0.2);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes PhotoView__animateOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+.PhotoView__animateIn {
+  opacity: 0.4;
+  animation: PhotoView__animateIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+}
+.PhotoView__animateOut {
+  opacity: 1;
+  animation: PhotoView__animateOut 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+}
+.PhotoView__PhotoWrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  overflow: hidden;
+}
+.PhotoView__PhotoBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 0;
+  height: 0;
+}
+.PhotoView__PhotoMask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.PhotoView-SlideWrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+  overflow: hidden;
+}
+
+@keyframes PhotoView__fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.PhotoView-PhotoSlider__clean .PhotoView-PhotoSlider__BannerWrap,
+.PhotoView-PhotoSlider__clean .PhotoView-PhotoSlider__ArrowLeft,
+.PhotoView-PhotoSlider__clean .PhotoView-PhotoSlider__ArrowRight,
+.PhotoView-PhotoSlider__clean .PhotoView-PhotoSlider__FooterWrap {
+  opacity: 0;
+}
+.PhotoView-PhotoSlider__willClose .PhotoView-PhotoSlider__BannerWrap:hover {
+  opacity: 0;
+}
+.PhotoView-PhotoSlider__Backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: -1;
+}
+.PhotoView-PhotoSlider__fadeIn {
+  opacity: 0;
+  animation: PhotoView__fade 0.4s linear both;
+}
+.PhotoView-PhotoSlider__fadeOut {
+  opacity: 0;
+  animation: PhotoView__fade 0.4s linear both reverse;
+}
+.PhotoView-PhotoSlider__BannerWrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.2s ease-out;
+  z-index: 20;
+}
+.PhotoView-PhotoSlider__BannerWrap:hover {
+  opacity: 1;
+}
+.PhotoView-PhotoSlider__Counter {
+  padding: 0 10px;
+  font-size: 14px;
+  opacity: 0.75;
+}
+.PhotoView-PhotoSlider__BannerRight {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.PhotoView-PhotoSlider__toolbarIcon {
+  box-sizing: border-box;
+  padding: 10px;
+  opacity: 0.75;
+  cursor: pointer;
+  transition: opacity 0.2s linear;
+}
+.PhotoView-PhotoSlider__toolbarIcon:hover {
+  opacity: 1;
+}
+.PhotoView-PhotoSlider__ArrowLeft,
+.PhotoView-PhotoSlider__ArrowRight {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70px;
+  height: 100px;
+  margin: auto;
+  opacity: 0.75;
+  z-index: 20;
+  cursor: pointer;
+  user-select: none;
+  transition: opacity 0.2s linear;
+}
+.PhotoView-PhotoSlider__ArrowLeft:hover,
+.PhotoView-PhotoSlider__ArrowRight:hover {
+  opacity: 1;
+}
+.PhotoView-PhotoSlider__ArrowLeft svg,
+.PhotoView-PhotoSlider__ArrowRight svg {
+  box-sizing: content-box;
+  padding: 10px;
+  width: 24px;
+  height: 24px;
+  fill: white;
+  background: rgba(0, 0, 0, 0.3);
+}
+.PhotoView-PhotoSlider__ArrowLeft {
+  left: 0;
+}
+.PhotoView-PhotoSlider__ArrowRight {
+  right: 0;
+}
+.PhotoView-PhotoSlider__FooterWrap {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  padding: 10px;
+  width: 100%;
+  min-height: 44px;
+  line-height: 1.5;
+  font-size: 14px;
+  color: #ccc;
+  background-color: rgba(0, 0, 0, 0.5);
+  text-align: justify;
+  transition: opacity 0.2s ease-out;
+  z-index: 20;
+}

dist/index.d.ts

@@ -0,0 +1,4 @@
+import PhotoProvider from './PhotoProvider';
+import PhotoConsumer from './PhotoConsumer';
+import PhotoSlider from './PhotoSlider';
+export { PhotoProvider, PhotoConsumer, PhotoSlider };

dist/index.es.js

@@ -0,0 +1,1865 @@
+import React from 'react';
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var PhotoContext = React.createContext({
+    onShow: function () { },
+    addItem: function () { },
+    removeItem: function () { },
+});
+
+function Spinner() {
+    return (React.createElement("div", { className: "PhotoView__Spinner" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "36", height: "36", fill: "white" },
+            React.createElement("path", { opacity: ".25", d: "M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4" }),
+            React.createElement("path", { d: "M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z" }))));
+}
+
+/**
+ * 获取图片合适的大小
+ */
+function getSuitableImageSize(naturalWidth, naturalHeight, rotate) {
+    var _a;
+    var width;
+    var height;
+    var y = 0;
+    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+    var isVertical = rotate % 180 !== 0;
+    // 若图片不是水平则调换宽高
+    if (isVertical) {
+        _a = [innerWidth, innerHeight], innerHeight = _a[0], innerWidth = _a[1];
+    }
+    var autoWidth = (naturalWidth / naturalHeight) * innerHeight;
+    var autoHeight = (naturalHeight / naturalWidth) * innerWidth;
+    if (naturalWidth < innerWidth && naturalHeight < innerHeight) {
+        width = naturalWidth;
+        height = naturalHeight;
+    }
+    else if (naturalWidth < innerWidth && naturalHeight >= innerHeight) {
+        width = autoWidth;
+        height = innerHeight;
+    }
+    else if (naturalWidth >= innerWidth && naturalHeight < innerHeight) {
+        width = innerWidth;
+        height = autoHeight;
+    }
+    else if (naturalWidth / naturalHeight > innerWidth / innerHeight) {
+        width = innerWidth;
+        height = autoHeight;
+    }
+    // 长图模式
+    else if (naturalHeight / naturalWidth >= 3 && !isVertical) {
+        width = innerWidth;
+        height = autoHeight;
+        // 默认定位到顶部区域
+        y = (height - innerHeight) / 2;
+    }
+    else {
+        width = autoWidth;
+        height = innerHeight;
+    }
+    return {
+        width: Math.floor(width),
+        height: Math.floor(height),
+        x: 0,
+        y: y,
+        scale: 1,
+    };
+}
+
+function useMountedState() {
+    var mountedRef = React.useRef(false);
+    React.useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    });
+    return React.useCallback(function () { return mountedRef.current; }, []);
+}
+
+var Photo = function (props) {
+    var src = props.src, intro = props.intro, loaded = props.loaded, broken = props.broken, width = props.width, height = props.height, rotate = props.rotate, className = props.className, onImageLoad = props.onImageLoad, loadingElement = props.loadingElement, brokenElement = props.brokenElement, restProps = __rest(props, ["src", "intro", "loaded", "broken", "width", "height", "rotate", "className", "onImageLoad", "loadingElement", "brokenElement"]);
+    var isMounted = useMountedState();
+    function handleImageLoaded(e) {
+        var _a = e.target, naturalWidth = _a.naturalWidth, naturalHeight = _a.naturalHeight;
+        if (isMounted()) {
+            onImageLoad(__assign({ loaded: true, naturalWidth: naturalWidth,
+                naturalHeight: naturalHeight }, getSuitableImageSize(naturalWidth, naturalHeight, rotate)));
+        }
+    }
+    function handleImageBroken() {
+        if (isMounted()) {
+            onImageLoad({
+                broken: true,
+            });
+        }
+    }
+    React.useEffect(function () {
+        var currPhoto = new Image();
+        currPhoto.onload = handleImageLoaded;
+        currPhoto.onerror = handleImageBroken;
+        currPhoto.src = src;
+    }, []);
+    if (src && !broken) {
+        if (loaded) {
+            return (React.createElement("img", __assign({ className: classNames('PhotoView__Photo', className), src: src, width: width, height: height, alt: "" }, restProps)));
+        }
+        return loadingElement || React.createElement(Spinner, null);
+    }
+    if (brokenElement) {
+        if (typeof brokenElement === 'function') {
+            return brokenElement({
+                src: src,
+                intro: intro,
+            });
+        }
+        return brokenElement;
+    }
+    return null;
+};
+Photo.displayName = 'Photo';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as the `TypeError` message for "Functions" methods. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/** Used to match leading and trailing whitespace. */
+var reTrim = /^\s+|\s+$/g;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return root.Date.now();
+};
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        result = wait - timeSinceLastCall;
+
+    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return !!value && (type == 'object' || type == 'function');
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && objectToString.call(value) == symbolTag);
+}
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = value.replace(reTrim, '');
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+var lodash_debounce = debounce;
+
+/**
+ * throttle
+ * @param func
+ * @param wait
+ */
+function throttle(func, wait) {
+    return lodash_debounce(func, wait, {
+        leading: true,
+        maxWait: wait,
+        trailing: true,
+    });
+}
+
+/**
+ * 是否支持触摸设备
+ */
+var isTouchDevice = typeof document !== 'undefined' && 'ontouchstart' in document.documentElement;
+
+/**
+ * 从 Touch 事件中获取两个触控中心位置
+ */
+function getMultipleTouchPosition(evt) {
+    var _a = evt.touches[0], clientX = _a.clientX, clientY = _a.clientY;
+    if (evt.touches.length >= 2) {
+        var _b = evt.touches[1], nextClientX = _b.clientX, nextClientY = _b.clientY;
+        return {
+            clientX: (clientX + nextClientX) / 2,
+            clientY: (clientY + nextClientY) / 2,
+            touchLength: Math.sqrt(Math.pow(nextClientX - clientX, 2) + Math.pow(nextClientY - clientY, 2)),
+        };
+    }
+    return { clientX: clientX, clientY: clientY, touchLength: 0 };
+}
+
+/**
+ * 获取移动或缩放之后的中心点
+ */
+function getPositionOnMoveOrScale(_a) {
+    var x = _a.x, y = _a.y, clientX = _a.clientX, clientY = _a.clientY, _b = _a.offsetX, offsetX = _b === void 0 ? 0 : _b, _c = _a.offsetY, offsetY = _c === void 0 ? 0 : _c, fromScale = _a.fromScale, toScale = _a.toScale;
+    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+    var centerClientX = innerWidth / 2;
+    var centerClientY = innerHeight / 2;
+    // 坐标偏移
+    var lastPositionX = centerClientX + x;
+    var lastPositionY = centerClientY + y;
+    // 放大偏移量
+    var offsetScale = toScale / fromScale;
+    // 偏移位置
+    var originX = clientX - (clientX - lastPositionX) * offsetScale - centerClientX;
+    var originY = clientY - (clientY - lastPositionY) * offsetScale - centerClientY;
+    return {
+        x: originX + offsetX,
+        y: originY + offsetY,
+        scale: toScale,
+        lastMoveClientX: clientX,
+        lastMoveClientY: clientY,
+    };
+}
+
+/**
+ * 最大触摸时间
+ */
+var maxTouchTime = 200;
+/**
+ * 最大滑动切换图片距离
+ */
+var maxMoveOffset = 40;
+/**
+ * 图片的间隔
+ */
+var horizontalOffset = 20;
+/**
+ * 最小初始响应距离
+ */
+var minStartTouchOffset = 10;
+/**
+ * 默认背景透明度
+ */
+var defaultOpacity = 1;
+/**
+ * 最小缩放度
+ */
+var minScale = 1;
+/**
+ * 最大缩放度（若图片足够大，则会超出）
+ */
+var maxScale = 6;
+/**
+ * 滑动加速度
+ */
+var slideAcceleration = 0.005;
+/**
+ * 缩放弹性缓冲
+ */
+var scaleBuffer = 0.2;
+
+/**
+ * 边缘超出状态
+ */
+var CloseEdgeEnum;
+(function (CloseEdgeEnum) {
+    CloseEdgeEnum[CloseEdgeEnum["Normal"] = 0] = "Normal";
+    CloseEdgeEnum[CloseEdgeEnum["Small"] = 1] = "Small";
+    CloseEdgeEnum[CloseEdgeEnum["Before"] = 2] = "Before";
+    CloseEdgeEnum[CloseEdgeEnum["After"] = 3] = "After";
+})(CloseEdgeEnum || (CloseEdgeEnum = {}));
+/**
+ * 边缘触发状态
+ */
+var ReachTypeEnum;
+(function (ReachTypeEnum) {
+    ReachTypeEnum[ReachTypeEnum["Normal"] = 0] = "Normal";
+    ReachTypeEnum[ReachTypeEnum["XReach"] = 1] = "XReach";
+    ReachTypeEnum[ReachTypeEnum["YReach"] = 2] = "YReach";
+})(ReachTypeEnum || (ReachTypeEnum = {}));
+/**
+ * 初始响应状态
+ */
+var TouchStartEnum;
+(function (TouchStartEnum) {
+    TouchStartEnum[TouchStartEnum["Normal"] = 0] = "Normal";
+    TouchStartEnum[TouchStartEnum["X"] = 1] = "X";
+    TouchStartEnum[TouchStartEnum["YPush"] = 2] = "YPush";
+    TouchStartEnum[TouchStartEnum["YPull"] = 3] = "YPull";
+})(TouchStartEnum || (TouchStartEnum = {}));
+/**
+ * 动画类型
+ */
+var ShowAnimateEnum;
+(function (ShowAnimateEnum) {
+    ShowAnimateEnum[ShowAnimateEnum["None"] = 0] = "None";
+    ShowAnimateEnum[ShowAnimateEnum["In"] = 1] = "In";
+    ShowAnimateEnum[ShowAnimateEnum["Out"] = 2] = "Out";
+})(ShowAnimateEnum || (ShowAnimateEnum = {}));
+
+/**
+ * 接触左边/上边 或 右边/下边边缘
+ * @param position - x/y
+ * @param scale
+ * @param size - width/height
+ * @param innerSize - innerWidth/innerHeight
+ * @return CloseEdgeEnum
+ */
+function getClosedEdge(position, scale, size, innerSize) {
+    var currentWidth = size * scale;
+    // 图片超出的宽度
+    var outOffsetX = (currentWidth - innerSize) / 2;
+    if (currentWidth <= innerSize) {
+        return CloseEdgeEnum.Small;
+    }
+    else if (position > 0 && outOffsetX - position <= 0) {
+        return CloseEdgeEnum.Before;
+    }
+    else if (position < 0 && outOffsetX + position <= 0) {
+        return CloseEdgeEnum.After;
+    }
+    return CloseEdgeEnum.Normal;
+}
+/**
+ * 获取接触边缘类型
+ * @param initialTouchState
+ * @param horizontalCloseEdge
+ * @param verticalCloseEdge
+ * @param reachState
+ */
+function getReachType(_a) {
+    var initialTouchState = _a.initialTouchState, horizontalCloseEdge = _a.horizontalCloseEdge, verticalCloseEdge = _a.verticalCloseEdge, reachState = _a.reachState;
+    if ((horizontalCloseEdge > 0 && initialTouchState === TouchStartEnum.X) || reachState === ReachTypeEnum.XReach) {
+        return ReachTypeEnum.XReach;
+    }
+    else if ((verticalCloseEdge > 0 &&
+        (initialTouchState === TouchStartEnum.YPull || initialTouchState === TouchStartEnum.YPush)) ||
+        reachState === ReachTypeEnum.YReach) {
+        return ReachTypeEnum.YReach;
+    }
+    return ReachTypeEnum.Normal;
+}
+
+/**
+ * 适应到合适的图片偏移量
+ */
+function slideToPosition(_a) {
+    var _b;
+    var x = _a.x, y = _a.y, lastX = _a.lastX, lastY = _a.lastY, width = _a.width, height = _a.height, scale = _a.scale, rotate = _a.rotate, touchedTime = _a.touchedTime;
+    var moveTime = Date.now() - touchedTime;
+    // 初始速度
+    var speedX = (x - lastX) / moveTime;
+    var speedY = (y - lastY) / moveTime;
+    // 停下所消耗时间
+    var slideTimeX = Math.abs(speedX / slideAcceleration);
+    var slideTimeY = Math.abs(speedY / slideAcceleration);
+    // 计划滑动位置
+    var planX = Math.floor(x + speedX * slideTimeX);
+    var planY = Math.floor(y + speedY * slideTimeY);
+    // 若图片不是水平则调换属性
+    if (rotate % 180 !== 0) {
+        _b = [height, width], width = _b[0], height = _b[1];
+    }
+    var currentX = planX;
+    var currentY = planY;
+    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+    // 图片超出的长度
+    var outOffsetX = (width * scale - innerWidth) / 2;
+    var outOffsetY = (height * scale - innerHeight) / 2;
+    var horizontalCloseEdge = getClosedEdge(planX, scale, width, innerWidth);
+    var verticalCloseEdge = getClosedEdge(planY, scale, height, innerHeight);
+    // x
+    if (horizontalCloseEdge === CloseEdgeEnum.Small) {
+        currentX = 0;
+    }
+    else if (horizontalCloseEdge === CloseEdgeEnum.Before) {
+        currentX = outOffsetX;
+    }
+    else if (horizontalCloseEdge === CloseEdgeEnum.After) {
+        currentX = -outOffsetX;
+    }
+    // y
+    if (verticalCloseEdge === CloseEdgeEnum.Small) {
+        currentY = 0;
+    }
+    else if (verticalCloseEdge === CloseEdgeEnum.Before) {
+        currentY = outOffsetY;
+    }
+    else if (verticalCloseEdge === CloseEdgeEnum.After) {
+        currentY = -outOffsetY;
+    }
+    // 时间过长
+    if (moveTime >= maxTouchTime &&
+        horizontalCloseEdge === CloseEdgeEnum.Normal &&
+        verticalCloseEdge === CloseEdgeEnum.Normal) {
+        return {
+            x: x,
+            y: y,
+        };
+    }
+    return {
+        x: currentX,
+        y: currentY,
+    };
+}
+
+/**
+ * 单击和双击事件处理
+ * @param singleTap - 单击事件
+ * @param doubleTap - 双击事件
+ * @return invokeTap
+ */
+function withContinuousTap(singleTap, doubleTap) {
+    // 当前连续点击次数
+    var continuousClick = 0;
+    var withDebounceTap = lodash_debounce(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        continuousClick = 0;
+        singleTap.apply(void 0, args);
+    }, 300);
+    return function invokeTap() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        continuousClick += 1;
+        withDebounceTap.apply(void 0, args);
+        // 双击
+        if (continuousClick >= 2) {
+            withDebounceTap.cancel();
+            continuousClick = 0;
+            doubleTap.apply(void 0, args);
+        }
+    };
+}
+
+function getAnimateOrigin(originRect, width, height) {
+    if (originRect) {
+        var innerWidth_1 = window.innerWidth, innerHeight_1 = window.innerHeight;
+        var xOrigin = (width - innerWidth_1) / 2 + originRect.clientX;
+        var yOrigin = (height - innerHeight_1) / 2 + originRect.clientY;
+        return xOrigin + "px " + yOrigin + "px";
+    }
+    return undefined;
+}
+
+/**
+ * 纠正缩放后偏离中心区域位置
+ */
+function correctSuitablePosition(_a) {
+    var x = _a.x, y = _a.y, scale = _a.scale;
+    if (scale <= 1) {
+        return {
+            x: 0,
+            y: 0,
+        };
+    }
+    return {
+        x: x,
+        y: y,
+    };
+}
+
+var initialState = {
+    // 真实宽度
+    naturalWidth: 1,
+    // 真实高度
+    naturalHeight: 1,
+    // 宽度
+    width: 1,
+    // 高度
+    height: 1,
+    // 加载成功状态
+    loaded: false,
+    // 破碎状态
+    broken: false,
+    // 图片 X 偏移量
+    x: 0,
+    // 图片 y 偏移量
+    y: 0,
+    // 图片缩放程度
+    scale: 1,
+    // 图片处于触摸的状态
+    touched: false,
+    // 背景处于触摸状态
+    maskTouched: false,
+    // 触摸开始时 x 原始坐标
+    clientX: 0,
+    // 触摸开始时 y 原始坐标
+    clientY: 0,
+    // 触摸开始时图片 x 偏移量
+    lastX: 0,
+    // 触摸开始时图片 y 偏移量
+    lastY: 0,
+    // 上一个触摸状态 x 原始坐标
+    lastMoveClientX: 0,
+    // 上一个触摸状态 y 原始坐标
+    lastMoveClientY: 0,
+    // 触摸开始时时间
+    touchedTime: 0,
+    // 多指触控间距
+    lastTouchLength: 0,
+    // 当前边缘触发状态
+    reachState: ReachTypeEnum.Normal,
+};
+var PhotoView = /** @class */ (function (_super) {
+    __extends(PhotoView, _super);
+    function PhotoView(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = initialState;
+        // 初始响应状态
+        _this.initialTouchState = TouchStartEnum.Normal;
+        _this.handleImageLoad = function (imageParams) {
+            _this.setState(imageParams);
+        };
+        _this.handleResize = function () {
+            var _a = _this.props, onPhotoResize = _a.onPhotoResize, rotate = _a.rotate;
+            var _b = _this.state, loaded = _b.loaded, naturalWidth = _b.naturalWidth, naturalHeight = _b.naturalHeight;
+            if (loaded) {
+                _this.setState(getSuitableImageSize(naturalWidth, naturalHeight, rotate));
+                if (onPhotoResize) {
+                    onPhotoResize();
+                }
+            }
+        };
+        _this.handleStart = function (clientX, clientY, touchLength) {
+            if (touchLength === void 0) { touchLength = 0; }
+            _this.setState(function (prevState) { return ({
+                touched: true,
+                clientX: clientX,
+                clientY: clientY,
+                lastMoveClientX: clientX,
+                lastMoveClientY: clientY,
+                lastX: prevState.x,
+                lastY: prevState.y,
+                lastTouchLength: touchLength,
+                touchedTime: Date.now(),
+            }); });
+        };
+        _this.onMove = function (newClientX, newClientY, touchLength) {
+            var _a;
+            if (touchLength === void 0) { touchLength = 0; }
+            var _b = _this.props, onReachMove = _b.onReachMove, isActive = _b.isActive, rotate = _b.rotate;
+            var _c = _this.state, naturalWidth = _c.naturalWidth, x = _c.x, y = _c.y, clientX = _c.clientX, clientY = _c.clientY, lastMoveClientX = _c.lastMoveClientX, lastMoveClientY = _c.lastMoveClientY, lastX = _c.lastX, lastY = _c.lastY, scale = _c.scale, lastTouchLength = _c.lastTouchLength, reachState = _c.reachState, touched = _c.touched, maskTouched = _c.maskTouched;
+            if ((touched || maskTouched) && isActive) {
+                var _d = _this.state, width = _d.width, height = _d.height;
+                // 若图片不是水平则调换属性
+                if (rotate % 180 !== 0) {
+                    _a = [height, width], width = _a[0], height = _a[1];
+                }
+                // 单指最小缩放下，以初始移动距离来判断意图
+                if (touchLength === 0 && _this.initialTouchState === TouchStartEnum.Normal) {
+                    var isStillX = Math.abs(newClientX - clientX) <= minStartTouchOffset;
+                    var isStillY = Math.abs(newClientY - clientY) <= minStartTouchOffset;
+                    // 初始移动距离不足
+                    if (isStillX && isStillY) {
+                        // 方向记录上次移动距离，以便平滑过渡
+                        _this.setState({
+                            lastMoveClientX: newClientX,
+                            lastMoveClientY: newClientY,
+                        });
+                        return;
+                    }
+                    // 设置响应状态
+                    _this.initialTouchState = !isStillX
+                        ? TouchStartEnum.X
+                        : newClientY > clientY
+                            ? TouchStartEnum.YPull
+                            : TouchStartEnum.YPush;
+                }
+                var offsetX = newClientX - lastMoveClientX;
+                var offsetY = newClientY - lastMoveClientY;
+                // 边缘触发状态
+                var currentReachState = ReachTypeEnum.Normal;
+                if (touchLength === 0) {
+                    // 边缘超出状态
+                    var horizontalCloseEdge = getClosedEdge(offsetX + lastX, scale, width, window.innerWidth);
+                    var verticalCloseEdge = getClosedEdge(offsetY + lastY, scale, height, window.innerHeight);
+                    // 边缘触发检测
+                    currentReachState = getReachType({
+                        initialTouchState: _this.initialTouchState,
+                        horizontalCloseEdge: horizontalCloseEdge,
+                        verticalCloseEdge: verticalCloseEdge,
+                        reachState: reachState,
+                    });
+                    // 接触边缘
+                    if (currentReachState != ReachTypeEnum.Normal) {
+                        onReachMove(currentReachState, newClientX, newClientY, scale);
+                    }
+                }
+                // 横向边缘触发、背景触发禁用当前滑动
+                if (currentReachState === ReachTypeEnum.XReach || maskTouched) {
+                    _this.setState({
+                        reachState: ReachTypeEnum.XReach,
+                    });
+                }
+                else {
+                    // 目标倍数
+                    var endScale = scale + ((touchLength - lastTouchLength) / 100 / 2) * scale;
+                    // 限制最大倍数和最小倍数
+                    var toScale = Math.max(Math.min(endScale, Math.max(maxScale, naturalWidth / width)), minScale - scaleBuffer);
+                    _this.setState(__assign({ lastTouchLength: touchLength, reachState: currentReachState }, getPositionOnMoveOrScale({
+                        x: x,
+                        y: y,
+                        clientX: newClientX,
+                        clientY: newClientY,
+                        offsetX: offsetX,
+                        offsetY: offsetY,
+                        fromScale: scale,
+                        toScale: toScale,
+                    })));
+                }
+            }
+        };
+        _this.onPhotoTap = function (clientX, clientY) {
+            var onPhotoTap = _this.props.onPhotoTap;
+            if (onPhotoTap) {
+                onPhotoTap(clientX, clientY);
+            }
+        };
+        _this.onDoubleTap = function (clientX, clientY) {
+            var _a = _this.state, width = _a.width, naturalWidth = _a.naturalWidth, x = _a.x, y = _a.y, scale = _a.scale, reachState = _a.reachState;
+            if (reachState !== ReachTypeEnum.Normal) {
+                return;
+            }
+            var position = getPositionOnMoveOrScale({
+                x: x,
+                y: y,
+                clientX: clientX,
+                clientY: clientY,
+                fromScale: scale,
+                // 若图片足够大，则放大适应的倍数
+                toScale: scale !== 1 ? 1 : Math.max(2, naturalWidth / width),
+            });
+            _this.setState(__assign(__assign({ clientX: clientX,
+                clientY: clientY }, position), correctSuitablePosition(position)));
+        };
+        _this.handleWheel = function (e) {
+            e.stopPropagation();
+            var clientX = e.clientX, clientY = e.clientY, deltaY = e.deltaY;
+            var _a = _this.state, width = _a.width, naturalWidth = _a.naturalWidth, reachState = _a.reachState;
+            if (reachState !== ReachTypeEnum.Normal) {
+                return;
+            }
+            _this.setState(function (_a) {
+                var x = _a.x, y = _a.y, scale = _a.scale;
+                var endScale = scale - deltaY / 100 / 2;
+                // 限制最大倍数和最小倍数
+                var toScale = Math.max(Math.min(endScale, Math.max(maxScale, naturalWidth / width)), minScale);
+                var position = getPositionOnMoveOrScale({
+                    x: x,
+                    y: y,
+                    clientX: clientX,
+                    clientY: clientY,
+                    fromScale: scale,
+                    toScale: toScale,
+                });
+                return __assign(__assign({ clientX: clientX,
+                    clientY: clientY }, position), correctSuitablePosition(position));
+            });
+        };
+        _this.handleMaskStart = function (clientX, clientY) {
+            _this.setState(function (prevState) { return ({
+                maskTouched: true,
+                clientX: clientX,
+                clientY: clientY,
+                lastX: prevState.x,
+                lastY: prevState.y,
+            }); });
+        };
+        _this.handleMaskMouseDown = function (e) {
+            e.stopPropagation();
+            _this.handleMaskStart(e.clientX, e.clientY);
+        };
+        _this.handleMaskTouchStart = function (e) {
+            e.stopPropagation();
+            var _a = e.touches[0], clientX = _a.clientX, clientY = _a.clientY;
+            _this.handleMaskStart(clientX, clientY);
+        };
+        _this.handleTouchStart = function (e) {
+            e.stopPropagation();
+            var _a = getMultipleTouchPosition(e), clientX = _a.clientX, clientY = _a.clientY, touchLength = _a.touchLength;
+            _this.handleStart(clientX, clientY, touchLength);
+        };
+        _this.handleMouseDown = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            _this.handleStart(e.clientX, e.clientY, 0);
+        };
+        _this.handleTouchMove = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            var _a = getMultipleTouchPosition(e), clientX = _a.clientX, clientY = _a.clientY, touchLength = _a.touchLength;
+            _this.onMove(clientX, clientY, touchLength);
+        };
+        _this.handleMouseMove = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            _this.onMove(e.clientX, e.clientY);
+        };
+        _this.handleUp = function (newClientX, newClientY) {
+            // 重置响应状态
+            _this.initialTouchState = TouchStartEnum.Normal;
+            var _a = _this.props, onReachUp = _a.onReachUp, onPhotoTap = _a.onPhotoTap, onMaskTap = _a.onMaskTap, isActive = _a.isActive, rotate = _a.rotate;
+            var _b = _this.state, width = _b.width, height = _b.height, naturalWidth = _b.naturalWidth, x = _b.x, y = _b.y, lastX = _b.lastX, lastY = _b.lastY, scale = _b.scale, touchedTime = _b.touchedTime, clientX = _b.clientX, clientY = _b.clientY, touched = _b.touched, maskTouched = _b.maskTouched;
+            if ((touched || maskTouched) && isActive) {
+                var hasMove_1 = clientX !== newClientX || clientY !== newClientY;
+                _this.setState(__assign({ touched: false, maskTouched: false, 
+                    // 限制缩放
+                    scale: Math.max(Math.min(scale, Math.max(maxScale, naturalWidth / width)), minScale), reachState: ReachTypeEnum.Normal }, (hasMove_1
+                    ? slideToPosition({
+                        x: x,
+                        y: y,
+                        lastX: lastX,
+                        lastY: lastY,
+                        width: width,
+                        height: height,
+                        scale: scale,
+                        rotate: rotate,
+                        touchedTime: touchedTime,
+                    })
+                    : {
+                        x: x,
+                        y: y,
+                    })), function () {
+                    if (onReachUp) {
+                        onReachUp(newClientX, newClientY);
+                    }
+                    // 触发 Tap 事件
+                    if (!hasMove_1) {
+                        if (touched && onPhotoTap) {
+                            _this.handlePhotoTap(newClientX, newClientY);
+                        }
+                        else if (maskTouched && onMaskTap) {
+                            onMaskTap(newClientX, newClientY);
+                        }
+                    }
+                });
+            }
+        };
+        _this.handleTouchEnd = function (e) {
+            var _a = e.changedTouches[0], clientX = _a.clientX, clientY = _a.clientY;
+            _this.handleUp(clientX, clientY);
+        };
+        _this.handleMouseUp = function (e) {
+            var clientX = e.clientX, clientY = e.clientY;
+            _this.handleUp(clientX, clientY);
+        };
+        _this.onMove = throttle(_this.onMove, 8);
+        _this.handleResize = throttle(_this.handleResize, 8);
+        // 单击与双击事件处理
+        _this.handlePhotoTap = withContinuousTap(_this.onPhotoTap, _this.onDoubleTap);
+        return _this;
+    }
+    PhotoView.prototype.componentDidMount = function () {
+        if (isTouchDevice) {
+            window.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+            window.addEventListener('touchend', this.handleTouchEnd, { passive: false });
+        }
+        else {
+            window.addEventListener('mousemove', this.handleMouseMove);
+            window.addEventListener('mouseup', this.handleMouseUp);
+        }
+        window.addEventListener('resize', this.handleResize);
+    };
+    PhotoView.prototype.componentDidUpdate = function (prevProps) {
+        var rotate = this.props.rotate;
+        if (rotate !== prevProps.rotate) {
+            var _a = this.state, naturalWidth = _a.naturalWidth, naturalHeight = _a.naturalHeight;
+            this.setState(getSuitableImageSize(naturalWidth, naturalHeight, rotate));
+        }
+    };
+    PhotoView.prototype.componentWillUnmount = function () {
+        window.removeEventListener('touchmove', this.handleTouchMove);
+        window.removeEventListener('touchend', this.handleTouchEnd);
+        window.removeEventListener('mousemove', this.handleMouseMove);
+        window.removeEventListener('mouseup', this.handleMouseUp);
+        window.removeEventListener('resize', this.handleResize);
+    };
+    PhotoView.prototype.render = function () {
+        var _a = this.props, src = _a.src, intro = _a.intro, viewClassName = _a.viewClassName, className = _a.className, style = _a.style, rotate = _a.rotate, loadingElement = _a.loadingElement, brokenElement = _a.brokenElement, isActive = _a.isActive, showAnimateType = _a.showAnimateType, originRect = _a.originRect;
+        var _b = this.state, width = _b.width, height = _b.height, loaded = _b.loaded, x = _b.x, y = _b.y, scale = _b.scale, touched = _b.touched, broken = _b.broken;
+        var transform = "translate3d(" + x + "px, " + y + "px, 0) scale(" + scale + ") rotate(" + rotate + "deg)";
+        return (React.createElement("div", { className: classNames('PhotoView__PhotoWrap', viewClassName), style: style },
+            React.createElement("div", { className: "PhotoView__PhotoMask", onMouseDown: !isTouchDevice && isActive ? this.handleMaskMouseDown : undefined, onTouchStart: isTouchDevice && isActive ? this.handleMaskTouchStart : undefined }),
+            React.createElement("div", { className: classNames('PhotoView__PhotoBox', {
+                    PhotoView__animateIn: loaded && showAnimateType === ShowAnimateEnum.In,
+                    PhotoView__animateOut: loaded && showAnimateType === ShowAnimateEnum.Out,
+                }), style: {
+                    transformOrigin: loaded ? getAnimateOrigin(originRect, 0, 0) : undefined,
+                } },
+                React.createElement(Photo, { className: className, src: src, intro: intro, width: width, height: height, loaded: loaded, broken: broken, rotate: rotate, onMouseDown: isTouchDevice ? undefined : this.handleMouseDown, onTouchStart: isTouchDevice ? this.handleTouchStart : undefined, onWheel: this.handleWheel, style: {
+                        WebkitTransform: transform,
+                        transform: transform,
+                        transition: touched ? undefined : 'transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1)',
+                    }, onImageLoad: this.handleImageLoad, loadingElement: loadingElement, brokenElement: brokenElement }))));
+    };
+    PhotoView.displayName = 'PhotoView';
+    return PhotoView;
+}(React.Component));
+
+var SlideWrap = function (_a) {
+    var className = _a.className, children = _a.children, restProps = __rest(_a, ["className", "children"]);
+    var dialogNode = React.useRef(document.createElement('section'));
+    var originalOverflowCallback = React.useRef('');
+    React.useEffect(function () {
+        document.body.appendChild(dialogNode.current);
+        var style = document.body.style;
+        originalOverflowCallback.current = style.overflow;
+        style.overflow = 'hidden';
+        return function () {
+            style.overflow = originalOverflowCallback.current;
+            // 清除容器
+            document.body.removeChild(dialogNode.current);
+        };
+    }, []);
+    return createPortal(React.createElement("div", __assign({ className: classNames('PhotoView-SlideWrap', className) }, restProps), children), dialogNode.current);
+};
+SlideWrap.displayName = 'SlideWrap';
+
+function VisibleAnimationHandle(_a) {
+    var visible = _a.visible, currentImage = _a.currentImage, children = _a.children;
+    var _b = React.useState(visible), photoVisible = _b[0], updatePhotoVisible = _b[1];
+    var _c = React.useState(ShowAnimateEnum.None), showAnimateType = _c[0], updateAnimateStatus = _c[1];
+    var _d = React.useState(), originRect = _d[0], updateOriginRect = _d[1];
+    function onShowAnimateEnd() {
+        updateAnimateStatus(ShowAnimateEnum.None);
+        // Close
+        if (showAnimateType === ShowAnimateEnum.Out) {
+            updatePhotoVisible(false);
+        }
+    }
+    React.useEffect(function () {
+        var originRef = (currentImage || {}).originRef;
+        if (originRef && originRef.nodeType === 1) {
+            // 获取触发时节点位置
+            var _a = originRef.getBoundingClientRect(), top_1 = _a.top, left = _a.left, width = _a.width, height = _a.height;
+            updateOriginRect({
+                clientX: left + width / 2,
+                clientY: top_1 + height / 2,
+            });
+        }
+        else if (originRect && !originRef) {
+            updateOriginRect(undefined);
+        }
+        if (visible) {
+            updateAnimateStatus(ShowAnimateEnum.In);
+            updatePhotoVisible(true);
+        }
+        else {
+            updateAnimateStatus(ShowAnimateEnum.Out);
+        }
+    }, [visible]);
+    return children({
+        photoVisible: photoVisible,
+        showAnimateType: showAnimateType,
+        originRect: originRect,
+        onShowAnimateEnd: onShowAnimateEnd,
+    });
+}
+
+function Close(props) {
+    return (React.createElement("svg", __assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 768 768" }, props),
+        React.createElement("path", { fill: "#FFF", d: "M607.5 205.5l-178.5 178.5 178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z" })));
+}
+
+function ArrowLeft(props) {
+    return (React.createElement("svg", __assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 768 768" }, props),
+        React.createElement("path", { d: "M640.5 352.5v63h-390l178.5 180-45 45-256.5-256.5 256.5-256.5 45 45-178.5 180h390z" })));
+}
+
+function ArrowRight(props) {
+    return (React.createElement("svg", __assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 768 768" }, props),
+        React.createElement("path", { d: "M384 127.5l256.5 256.5-256.5 256.5-45-45 178.5-180h-390v-63h390l-178.5-180z" })));
+}
+
+var PhotoSlider = /** @class */ (function (_super) {
+    __extends(PhotoSlider, _super);
+    function PhotoSlider(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleClose = function (evt) {
+            var onClose = _this.props.onClose;
+            var backdropOpacity = _this.state.backdropOpacity;
+            onClose(evt);
+            _this.setState({
+                overlayVisible: true,
+                // 记录当前关闭时的透明度
+                lastBackdropOpacity: backdropOpacity,
+            });
+        };
+        _this.handlePhotoTap = function () {
+            var photoClosable = _this.props.photoClosable;
+            if (photoClosable) {
+                _this.handleClose();
+            }
+            else {
+                _this.setState(function (prevState) { return ({
+                    overlayVisible: !prevState.overlayVisible,
+                }); });
+            }
+        };
+        _this.handlePhotoMaskTap = function () {
+            var maskClosable = _this.props.maskClosable;
+            if (maskClosable) {
+                _this.handleClose();
+            }
+        };
+        _this.handleResize = function () {
+            var innerWidth = window.innerWidth;
+            _this.setState(function (_a) {
+                var photoIndex = _a.photoIndex;
+                return {
+                    translateX: -(innerWidth + horizontalOffset) * photoIndex,
+                    lastClientX: undefined,
+                    lastClientY: undefined,
+                    shouldTransition: false,
+                };
+            });
+        };
+        _this.handleRotate = function (rotating) {
+            var _a = _this.state, photoIndex = _a.photoIndex, rotatingMap = _a.rotatingMap;
+            rotatingMap.set(photoIndex, rotating);
+            _this.setState({
+                rotatingMap: rotatingMap,
+            });
+        };
+        _this.handleKeyDown = function (evt) {
+            var visible = _this.props.visible;
+            if (visible) {
+                switch (evt.key) {
+                    case 'ArrowLeft':
+                        _this.handlePrevious(false);
+                        break;
+                    case 'ArrowRight':
+                        _this.handleNext(false);
+                        break;
+                    case 'Escape':
+                        _this.handleClose();
+                        break;
+                }
+            }
+        };
+        _this.handleBack = function (evt) {
+            evt.stopPropagation();
+            console.log("范湖一");
+        };
+        _this.handleReachVerticalMove = function (clientY, scale) {
+            _this.setState(function (_a) {
+                var lastClientY = _a.lastClientY, backdropOpacity = _a.backdropOpacity;
+                if (lastClientY === undefined) {
+                    return {
+                        touched: true,
+                        lastClientY: clientY,
+                        backdropOpacity: backdropOpacity,
+                        canPullClose: true,
+                    };
+                }
+                var offsetClientY = Math.abs(clientY - lastClientY);
+                var opacity = Math.max(Math.min(defaultOpacity, defaultOpacity - offsetClientY / 100 / 4), 0);
+                return {
+                    touched: true,
+                    lastClientY: lastClientY,
+                    backdropOpacity: scale === 1 ? opacity : defaultOpacity,
+                    canPullClose: scale === 1,
+                };
+            });
+        };
+        _this.handleReachHorizontalMove = function (clientX) {
+            var innerWidth = window.innerWidth;
+            var images = _this.props.images;
+            _this.setState(function (_a) {
+                var lastClientX = _a.lastClientX, translateX = _a.translateX, photoIndex = _a.photoIndex;
+                if (lastClientX === undefined) {
+                    return {
+                        touched: true,
+                        lastClientX: clientX,
+                        translateX: translateX,
+                        shouldTransition: true,
+                    };
+                }
+                var originOffsetClientX = clientX - lastClientX;
+                var offsetClientX = originOffsetClientX;
+                // 第一张和最后一张超出距离减半
+                if ((photoIndex === 0 && originOffsetClientX > 0) ||
+                    (photoIndex === images.length - 1 && originOffsetClientX < 0)) {
+                    offsetClientX = originOffsetClientX / 2;
+                }
+                return {
+                    touched: true,
+                    lastClientX: lastClientX,
+                    translateX: -(innerWidth + horizontalOffset) * photoIndex + offsetClientX,
+                    shouldTransition: true,
+                };
+            });
+        };
+        _this.handleIndexChange = function (photoIndex, shouldTransition) {
+            if (shouldTransition === void 0) { shouldTransition = true; }
+            var singlePageWidth = window.innerWidth + horizontalOffset;
+            var translateX = -singlePageWidth * photoIndex;
+            _this.setState({
+                touched: false,
+                lastClientX: undefined,
+                lastClientY: undefined,
+                translateX: translateX,
+                photoIndex: photoIndex,
+                shouldTransition: shouldTransition,
+            });
+            var onIndexChange = _this.props.onIndexChange;
+            if (onIndexChange) {
+                onIndexChange(photoIndex);
+            }
+        };
+        _this.handlePrevious = function (shouldTransition) {
+            var photoIndex = _this.state.photoIndex;
+            if (photoIndex > 0) {
+                _this.handleIndexChange(photoIndex - 1, shouldTransition);
+            }
+        };
+        _this.handleNext = function (shouldTransition) {
+            var images = _this.props.images;
+            var photoIndex = _this.state.photoIndex;
+            if (photoIndex < images.length - 1) {
+                _this.handleIndexChange(photoIndex + 1, shouldTransition);
+            }
+        };
+        _this.handleReachMove = function (reachState, clientX, clientY, scale) {
+            if (reachState === ReachTypeEnum.XReach) {
+                _this.handleReachHorizontalMove(clientX);
+            }
+            else if (reachState === ReachTypeEnum.YReach) {
+                _this.handleReachVerticalMove(clientY, scale);
+            }
+        };
+        _this.handleReachUp = function (clientX, clientY) {
+            var images = _this.props.images;
+            var _a = _this.state, _b = _a.lastClientX, lastClientX = _b === void 0 ? clientX : _b, _c = _a.lastClientY, lastClientY = _c === void 0 ? clientY : _c, photoIndex = _a.photoIndex, overlayVisible = _a.overlayVisible, canPullClose = _a.canPullClose;
+            var offsetClientX = clientX - lastClientX;
+            var offsetClientY = clientY - lastClientY;
+            var willClose = false;
+            // 下一张
+            if (offsetClientX < -maxMoveOffset && photoIndex < images.length - 1) {
+                _this.handleIndexChange(photoIndex + 1);
+                return;
+            }
+            // 上一张
+            if (offsetClientX > maxMoveOffset && photoIndex > 0) {
+                _this.handleIndexChange(photoIndex - 1);
+                return;
+            }
+            var singlePageWidth = window.innerWidth + horizontalOffset;
+            // 当前偏移
+            var currentTranslateX = -singlePageWidth * photoIndex;
+            var currentPhotoIndex = photoIndex;
+            if (Math.abs(offsetClientY) > window.innerHeight * 0.14 && canPullClose) {
+                willClose = true;
+                _this.handleClose();
+            }
+            _this.setState({
+                touched: false,
+                translateX: currentTranslateX,
+                photoIndex: currentPhotoIndex,
+                lastClientX: undefined,
+                lastClientY: undefined,
+                backdropOpacity: defaultOpacity,
+                overlayVisible: willClose ? true : overlayVisible,
+            });
+        };
+        _this.state = {
+            translateX: 0,
+            photoIndex: 0,
+            touched: false,
+            shouldTransition: true,
+            lastClientX: undefined,
+            lastClientY: undefined,
+            backdropOpacity: defaultOpacity,
+            lastBackdropOpacity: defaultOpacity,
+            overlayVisible: true,
+            canPullClose: true,
+            rotatingMap: new Map(),
+        };
+        return _this;
+    }
+    PhotoSlider.getDerivedStateFromProps = function (nextProps, prevState) {
+        if (nextProps.index !== undefined && nextProps.index !== prevState.photoIndex) {
+            return {
+                photoIndex: nextProps.index,
+                translateX: -(window.innerWidth + horizontalOffset) * nextProps.index,
+            };
+        }
+        return null;
+    };
+    PhotoSlider.prototype.componentDidMount = function () {
+        var _a = this.props.index, index = _a === void 0 ? 0 : _a;
+        this.setState({
+            translateX: index * -(window.innerWidth + horizontalOffset),
+            photoIndex: index,
+        });
+        window.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('popstate', this.handleBack);
+    };
+    PhotoSlider.prototype.componentWillUnmount = function () {
+        window.removeEventListener('keydown', this.handleKeyDown);
+    };
+    PhotoSlider.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, images = _a.images, visible = _a.visible, className = _a.className, maskClassName = _a.maskClassName, viewClassName = _a.viewClassName, imageClassName = _a.imageClassName, bannerVisible = _a.bannerVisible, introVisible = _a.introVisible, overlayRender = _a.overlayRender, toolbarRender = _a.toolbarRender, loadingElement = _a.loadingElement, brokenElement = _a.brokenElement;
+        var _b = this.state, translateX = _b.translateX, touched = _b.touched, photoIndex = _b.photoIndex, backdropOpacity = _b.backdropOpacity, lastBackdropOpacity = _b.lastBackdropOpacity, overlayVisible = _b.overlayVisible, rotatingMap = _b.rotatingMap, shouldTransition = _b.shouldTransition;
+        var imageLength = images.length;
+        var currentImage = images.length ? images[photoIndex] : undefined;
+        var transform = "translate3d(" + translateX + "px, 0px, 0)";
+        // Overlay
+        var overlayIntro = currentImage && currentImage.intro;
+        return (React.createElement(VisibleAnimationHandle, { visible: visible, currentImage: currentImage }, function (_a) {
+            var photoVisible = _a.photoVisible, showAnimateType = _a.showAnimateType, originRect = _a.originRect, onShowAnimateEnd = _a.onShowAnimateEnd;
+            if (photoVisible) {
+                var innerWidth_1 = window.innerWidth;
+                var currentOverlayVisible = overlayVisible && showAnimateType === ShowAnimateEnum.None;
+                // 关闭过程中使用下拉保存的透明度
+                var currentOpacity = visible ? backdropOpacity : lastBackdropOpacity;
+                // 覆盖物参数
+                var overlayParams = {
+                    images: images,
+                    index: photoIndex,
+                    visible: visible,
+                    onClose: _this.handleClose,
+                    onIndexChange: _this.handleIndexChange,
+                    overlayVisible: currentOverlayVisible,
+                    onRotate: _this.handleRotate,
+                    rotate: rotatingMap.get(photoIndex) || 0,
+                };
+                return (React.createElement(SlideWrap, { className: classNames({
+                        'PhotoView-PhotoSlider__clean': !currentOverlayVisible,
+                        'PhotoView-PhotoSlider__willClose': !visible,
+                    }, className), role: "dialog", id: "PhotoView_Slider", onClick: function (e) { return e.stopPropagation(); } },
+                    React.createElement("div", { className: classNames('PhotoView-PhotoSlider__Backdrop', maskClassName, {
+                            'PhotoView-PhotoSlider__fadeIn': showAnimateType === ShowAnimateEnum.In,
+                            'PhotoView-PhotoSlider__fadeOut': showAnimateType === ShowAnimateEnum.Out,
+                        }), style: {
+                            background: "rgba(0, 0, 0, " + currentOpacity + ")",
+                        }, onAnimationEnd: onShowAnimateEnd }),
+                    bannerVisible && (React.createElement("div", { className: "PhotoView-PhotoSlider__BannerWrap" },
+                        React.createElement("div", { className: "PhotoView-PhotoSlider__Counter" },
+                            photoIndex + 1,
+                            " / ",
+                            imageLength),
+                        React.createElement("div", { className: "PhotoView-PhotoSlider__BannerRight" },
+                            toolbarRender && toolbarRender(overlayParams),
+                            React.createElement(Close, { className: "PhotoView-PhotoSlider__toolbarIcon", onClick: _this.handleClose })))),
+                    images
+                        .slice(
+                    // 加载相邻三张
+                    Math.max(photoIndex - 1, 0), Math.min(photoIndex + 2, imageLength + 1))
+                        .map(function (item, index) {
+                        // 截取之前的索引位置
+                        var realIndex = photoIndex === 0 ? photoIndex + index : photoIndex - 1 + index;
+                        return (React.createElement(PhotoView, { key: item.key || realIndex, src: item.src, intro: item.intro, onReachMove: _this.handleReachMove, onReachUp: _this.handleReachUp, onPhotoTap: _this.handlePhotoTap, onMaskTap: _this.handlePhotoMaskTap, viewClassName: viewClassName, className: imageClassName, style: {
+                                left: (innerWidth_1 + horizontalOffset) * realIndex + "px",
+                                WebkitTransform: transform,
+                                transform: transform,
+                                transition: touched || !shouldTransition
+                                    ? undefined
+                                    : 'transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1)',
+                            }, loadingElement: loadingElement, brokenElement: brokenElement, onPhotoResize: _this.handleResize, isActive: photoIndex === realIndex, showAnimateType: showAnimateType, originRect: originRect, rotate: rotatingMap.get(realIndex) || 0 }));
+                    }),
+                    !isTouchDevice && bannerVisible && (React.createElement(React.Fragment, null,
+                        photoIndex !== 0 && (React.createElement("div", { className: "PhotoView-PhotoSlider__ArrowLeft", onClick: function () { return _this.handlePrevious(false); } },
+                            React.createElement(ArrowLeft, null))),
+                        photoIndex + 1 < imageLength && (React.createElement("div", { className: "PhotoView-PhotoSlider__ArrowRight", onClick: function () { return _this.handleNext(false); } },
+                            React.createElement(ArrowRight, null))))),
+                    Boolean(introVisible && overlayIntro) && (React.createElement("div", { className: "PhotoView-PhotoSlider__FooterWrap" }, overlayIntro)),
+                    overlayRender && overlayRender(overlayParams)));
+            }
+            return null;
+        }));
+    };
+    PhotoSlider.displayName = 'PhotoSlider';
+    PhotoSlider.defaultProps = {
+        maskClosable: true,
+        photoClosable: false,
+        bannerVisible: true,
+        introVisible: true,
+    };
+    return PhotoSlider;
+}(React.Component));
+
+var PhotoProvider = /** @class */ (function (_super) {
+    __extends(PhotoProvider, _super);
+    function PhotoProvider(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleAddItem = function (imageItem) {
+            _this.setState(function (prev) { return ({
+                images: prev.images.concat(imageItem),
+            }); });
+        };
+        _this.handleRemoveItem = function (key) {
+            _this.setState(function (_a) {
+                var images = _a.images, index = _a.index;
+                var nextImages = images.filter(function (item) { return item.key !== key; });
+                var nextEndIndex = nextImages.length - 1;
+                return {
+                    images: nextImages,
+                    index: Math.min(nextEndIndex, index),
+                };
+            });
+        };
+        _this.handleShow = function (key) {
+            var images = _this.state.images;
+            _this.setState({
+                visible: true,
+                index: images.findIndex(function (item) { return item.key === key; }),
+            });
+        };
+        _this.handleClose = function () {
+            _this.setState({
+                visible: false,
+            });
+        };
+        _this.handleIndexChange = function (index) {
+            _this.setState({
+                index: index,
+            });
+        };
+        _this.state = {
+            images: [],
+            visible: false,
+            index: 0,
+            addItem: _this.handleAddItem,
+            removeItem: _this.handleRemoveItem,
+            onShow: _this.handleShow,
+        };
+        return _this;
+    }
+    PhotoProvider.prototype.render = function () {
+        var _a = this.props, children = _a.children, restProps = __rest(_a, ["children"]);
+        var _b = this.state, images = _b.images, visible = _b.visible, index = _b.index;
+        return (React.createElement(PhotoContext.Provider, { value: this.state },
+            children,
+            React.createElement(PhotoSlider, __assign({ images: images, visible: visible, index: index, onIndexChange: this.handleIndexChange, onClose: this.handleClose }, restProps))));
+    };
+    return PhotoProvider;
+}(React.Component));
+
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as references for various `Number` constants. */
+var INFINITY = 1 / 0;
+
+/** `Object#toString` result references. */
+var symbolTag$1 = '[object Symbol]';
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf$1 = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$1 = freeGlobal$1 || freeSelf$1 || Function('return this')();
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to generate unique IDs. */
+var idCounter = 0;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var Symbol = root$1.Symbol;
+
+/** Used to convert symbols to primitives and strings. */
+var symbolProto = Symbol ? Symbol.prototype : undefined,
+    symbolToString = symbolProto ? symbolProto.toString : undefined;
+
+/**
+ * The base implementation of `_.toString` which doesn't convert nullish
+ * values to empty strings.
+ *
+ * @private
+ * @param {*} value The value to process.
+ * @returns {string} Returns the string.
+ */
+function baseToString(value) {
+  // Exit early for strings to avoid a performance hit in some environments.
+  if (typeof value == 'string') {
+    return value;
+  }
+  if (isSymbol$1(value)) {
+    return symbolToString ? symbolToString.call(value) : '';
+  }
+  var result = (value + '');
+  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike$1(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol$1(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike$1(value) && objectToString$1.call(value) == symbolTag$1);
+}
+
+/**
+ * Converts `value` to a string. An empty string is returned for `null`
+ * and `undefined` values. The sign of `-0` is preserved.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {string} Returns the string.
+ * @example
+ *
+ * _.toString(null);
+ * // => ''
+ *
+ * _.toString(-0);
+ * // => '-0'
+ *
+ * _.toString([1, 2, 3]);
+ * // => '1,2,3'
+ */
+function toString(value) {
+  return value == null ? '' : baseToString(value);
+}
+
+/**
+ * Generates a unique ID. If `prefix` is given, the ID is appended to it.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Util
+ * @param {string} [prefix=''] The value to prefix the ID with.
+ * @returns {string} Returns the unique ID.
+ * @example
+ *
+ * _.uniqueId('contact_');
+ * // => 'contact_104'
+ *
+ * _.uniqueId();
+ * // => '105'
+ */
+function uniqueId(prefix) {
+  var id = ++idCounter;
+  return toString(prefix) + id;
+}
+
+var lodash_uniqueid = uniqueId;
+
+var PhotoConsumer = function (_a) {
+    var src = _a.src, intro = _a.intro, children = _a.children;
+    var photoContext = React.useContext(PhotoContext);
+    var key = React.useMemo(function () { return lodash_uniqueid(); }, []);
+    var _b = React.useState({
+        clientX: undefined,
+        clientY: undefined,
+    }), position = _b[0], updatePosition = _b[1];
+    var photoTriggerRef = React.useRef(null);
+    React.useEffect(function () {
+        photoContext.addItem({
+            key: key,
+            src: src,
+            originRef: photoTriggerRef.current,
+            intro: intro,
+        });
+        return function () {
+            photoContext.removeItem(key);
+        };
+    }, []);
+    function handleTouchStart(e) {
+        var _a = e.touches[0], clientX = _a.clientX, clientY = _a.clientY;
+        updatePosition({
+            clientX: clientX,
+            clientY: clientY,
+        });
+        if (children) {
+            var onTouchStart = children.props.onTouchStart;
+            if (onTouchStart) {
+                onTouchStart(e);
+            }
+        }
+    }
+    function handleTouchEnd(e) {
+        var _a = e.changedTouches[0], clientX = _a.clientX, clientY = _a.clientY;
+        if (position.clientX === clientX && position.clientY === clientY) {
+            photoContext.onShow(key);
+        }
+        if (children) {
+            var onTouchEnd = children.props.onTouchEnd;
+            if (onTouchEnd) {
+                onTouchEnd(e);
+            }
+        }
+    }
+    function handleClick(e) {
+        photoContext.onShow(key);
+        if (children) {
+            var onClick = children.props.onClick;
+            if (onClick) {
+                onClick(e);
+            }
+        }
+    }
+    if (children) {
+        return React.Children.only(React.cloneElement(children, isTouchDevice
+            ? {
+                onTouchStart: handleTouchStart,
+                onTouchEnd: handleTouchEnd,
+                ref: photoTriggerRef,
+            }
+            : { onClick: handleClick, ref: photoTriggerRef }));
+    }
+    return null;
+};
+
+export { PhotoConsumer, PhotoProvider, PhotoSlider };
+//# sourceMappingURL=index.es.js.map

dist/index.js

@@ -0,0 +1,1873 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+var classNames = _interopDefault(require('classnames'));
+var reactDom = require('react-dom');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var PhotoContext = React.createContext({
+    onShow: function () { },
+    addItem: function () { },
+    removeItem: function () { },
+});
+
+function Spinner() {
+    return (React.createElement("div", { className: "PhotoView__Spinner" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "36", height: "36", fill: "white" },
+            React.createElement("path", { opacity: ".25", d: "M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4" }),
+            React.createElement("path", { d: "M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z" }))));
+}
+
+/**
+ * 获取图片合适的大小
+ */
+function getSuitableImageSize(naturalWidth, naturalHeight, rotate) {
+    var _a;
+    var width;
+    var height;
+    var y = 0;
+    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+    var isVertical = rotate % 180 !== 0;
+    // 若图片不是水平则调换宽高
+    if (isVertical) {
+        _a = [innerWidth, innerHeight], innerHeight = _a[0], innerWidth = _a[1];
+    }
+    var autoWidth = (naturalWidth / naturalHeight) * innerHeight;
+    var autoHeight = (naturalHeight / naturalWidth) * innerWidth;
+    if (naturalWidth < innerWidth && naturalHeight < innerHeight) {
+        width = naturalWidth;
+        height = naturalHeight;
+    }
+    else if (naturalWidth < innerWidth && naturalHeight >= innerHeight) {
+        width = autoWidth;
+        height = innerHeight;
+    }
+    else if (naturalWidth >= innerWidth && naturalHeight < innerHeight) {
+        width = innerWidth;
+        height = autoHeight;
+    }
+    else if (naturalWidth / naturalHeight > innerWidth / innerHeight) {
+        width = innerWidth;
+        height = autoHeight;
+    }
+    // 长图模式
+    else if (naturalHeight / naturalWidth >= 3 && !isVertical) {
+        width = innerWidth;
+        height = autoHeight;
+        // 默认定位到顶部区域
+        y = (height - innerHeight) / 2;
+    }
+    else {
+        width = autoWidth;
+        height = innerHeight;
+    }
+    return {
+        width: Math.floor(width),
+        height: Math.floor(height),
+        x: 0,
+        y: y,
+        scale: 1,
+    };
+}
+
+function useMountedState() {
+    var mountedRef = React.useRef(false);
+    React.useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    });
+    return React.useCallback(function () { return mountedRef.current; }, []);
+}
+
+var Photo = function (props) {
+    var src = props.src, intro = props.intro, loaded = props.loaded, broken = props.broken, width = props.width, height = props.height, rotate = props.rotate, className = props.className, onImageLoad = props.onImageLoad, loadingElement = props.loadingElement, brokenElement = props.brokenElement, restProps = __rest(props, ["src", "intro", "loaded", "broken", "width", "height", "rotate", "className", "onImageLoad", "loadingElement", "brokenElement"]);
+    var isMounted = useMountedState();
+    function handleImageLoaded(e) {
+        var _a = e.target, naturalWidth = _a.naturalWidth, naturalHeight = _a.naturalHeight;
+        if (isMounted()) {
+            onImageLoad(__assign({ loaded: true, naturalWidth: naturalWidth,
+                naturalHeight: naturalHeight }, getSuitableImageSize(naturalWidth, naturalHeight, rotate)));
+        }
+    }
+    function handleImageBroken() {
+        if (isMounted()) {
+            onImageLoad({
+                broken: true,
+            });
+        }
+    }
+    React.useEffect(function () {
+        var currPhoto = new Image();
+        currPhoto.onload = handleImageLoaded;
+        currPhoto.onerror = handleImageBroken;
+        currPhoto.src = src;
+    }, []);
+    if (src && !broken) {
+        if (loaded) {
+            return (React.createElement("img", __assign({ className: classNames('PhotoView__Photo', className), src: src, width: width, height: height, alt: "" }, restProps)));
+        }
+        return loadingElement || React.createElement(Spinner, null);
+    }
+    if (brokenElement) {
+        if (typeof brokenElement === 'function') {
+            return brokenElement({
+                src: src,
+                intro: intro,
+            });
+        }
+        return brokenElement;
+    }
+    return null;
+};
+Photo.displayName = 'Photo';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as the `TypeError` message for "Functions" methods. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/** Used to match leading and trailing whitespace. */
+var reTrim = /^\s+|\s+$/g;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return root.Date.now();
+};
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        result = wait - timeSinceLastCall;
+
+    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return !!value && (type == 'object' || type == 'function');
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && objectToString.call(value) == symbolTag);
+}
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = value.replace(reTrim, '');
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+var lodash_debounce = debounce;
+
+/**
+ * throttle
+ * @param func
+ * @param wait
+ */
+function throttle(func, wait) {
+    return lodash_debounce(func, wait, {
+        leading: true,
+        maxWait: wait,
+        trailing: true,
+    });
+}
+
+/**
+ * 是否支持触摸设备
+ */
+var isTouchDevice = typeof document !== 'undefined' && 'ontouchstart' in document.documentElement;
+
+/**
+ * 从 Touch 事件中获取两个触控中心位置
+ */
+function getMultipleTouchPosition(evt) {
+    var _a = evt.touches[0], clientX = _a.clientX, clientY = _a.clientY;
+    if (evt.touches.length >= 2) {
+        var _b = evt.touches[1], nextClientX = _b.clientX, nextClientY = _b.clientY;
+        return {
+            clientX: (clientX + nextClientX) / 2,
+            clientY: (clientY + nextClientY) / 2,
+            touchLength: Math.sqrt(Math.pow(nextClientX - clientX, 2) + Math.pow(nextClientY - clientY, 2)),
+        };
+    }
+    return { clientX: clientX, clientY: clientY, touchLength: 0 };
+}
+
+/**
+ * 获取移动或缩放之后的中心点
+ */
+function getPositionOnMoveOrScale(_a) {
+    var x = _a.x, y = _a.y, clientX = _a.clientX, clientY = _a.clientY, _b = _a.offsetX, offsetX = _b === void 0 ? 0 : _b, _c = _a.offsetY, offsetY = _c === void 0 ? 0 : _c, fromScale = _a.fromScale, toScale = _a.toScale;
+    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+    var centerClientX = innerWidth / 2;
+    var centerClientY = innerHeight / 2;
+    // 坐标偏移
+    var lastPositionX = centerClientX + x;
+    var lastPositionY = centerClientY + y;
+    // 放大偏移量
+    var offsetScale = toScale / fromScale;
+    // 偏移位置
+    var originX = clientX - (clientX - lastPositionX) * offsetScale - centerClientX;
+    var originY = clientY - (clientY - lastPositionY) * offsetScale - centerClientY;
+    return {
+        x: originX + offsetX,
+        y: originY + offsetY,
+        scale: toScale,
+        lastMoveClientX: clientX,
+        lastMoveClientY: clientY,
+    };
+}
+
+/**
+ * 最大触摸时间
+ */
+var maxTouchTime = 200;
+/**
+ * 最大滑动切换图片距离
+ */
+var maxMoveOffset = 40;
+/**
+ * 图片的间隔
+ */
+var horizontalOffset = 20;
+/**
+ * 最小初始响应距离
+ */
+var minStartTouchOffset = 10;
+/**
+ * 默认背景透明度
+ */
+var defaultOpacity = 1;
+/**
+ * 最小缩放度
+ */
+var minScale = 1;
+/**
+ * 最大缩放度（若图片足够大，则会超出）
+ */
+var maxScale = 6;
+/**
+ * 滑动加速度
+ */
+var slideAcceleration = 0.005;
+/**
+ * 缩放弹性缓冲
+ */
+var scaleBuffer = 0.2;
+
+/**
+ * 边缘超出状态
+ */
+var CloseEdgeEnum;
+(function (CloseEdgeEnum) {
+    CloseEdgeEnum[CloseEdgeEnum["Normal"] = 0] = "Normal";
+    CloseEdgeEnum[CloseEdgeEnum["Small"] = 1] = "Small";
+    CloseEdgeEnum[CloseEdgeEnum["Before"] = 2] = "Before";
+    CloseEdgeEnum[CloseEdgeEnum["After"] = 3] = "After";
+})(CloseEdgeEnum || (CloseEdgeEnum = {}));
+/**
+ * 边缘触发状态
+ */
+var ReachTypeEnum;
+(function (ReachTypeEnum) {
+    ReachTypeEnum[ReachTypeEnum["Normal"] = 0] = "Normal";
+    ReachTypeEnum[ReachTypeEnum["XReach"] = 1] = "XReach";
+    ReachTypeEnum[ReachTypeEnum["YReach"] = 2] = "YReach";
+})(ReachTypeEnum || (ReachTypeEnum = {}));
+/**
+ * 初始响应状态
+ */
+var TouchStartEnum;
+(function (TouchStartEnum) {
+    TouchStartEnum[TouchStartEnum["Normal"] = 0] = "Normal";
+    TouchStartEnum[TouchStartEnum["X"] = 1] = "X";
+    TouchStartEnum[TouchStartEnum["YPush"] = 2] = "YPush";
+    TouchStartEnum[TouchStartEnum["YPull"] = 3] = "YPull";
+})(TouchStartEnum || (TouchStartEnum = {}));
+/**
+ * 动画类型
+ */
+var ShowAnimateEnum;
+(function (ShowAnimateEnum) {
+    ShowAnimateEnum[ShowAnimateEnum["None"] = 0] = "None";
+    ShowAnimateEnum[ShowAnimateEnum["In"] = 1] = "In";
+    ShowAnimateEnum[ShowAnimateEnum["Out"] = 2] = "Out";
+})(ShowAnimateEnum || (ShowAnimateEnum = {}));
+
+/**
+ * 接触左边/上边 或 右边/下边边缘
+ * @param position - x/y
+ * @param scale
+ * @param size - width/height
+ * @param innerSize - innerWidth/innerHeight
+ * @return CloseEdgeEnum
+ */
+function getClosedEdge(position, scale, size, innerSize) {
+    var currentWidth = size * scale;
+    // 图片超出的宽度
+    var outOffsetX = (currentWidth - innerSize) / 2;
+    if (currentWidth <= innerSize) {
+        return CloseEdgeEnum.Small;
+    }
+    else if (position > 0 && outOffsetX - position <= 0) {
+        return CloseEdgeEnum.Before;
+    }
+    else if (position < 0 && outOffsetX + position <= 0) {
+        return CloseEdgeEnum.After;
+    }
+    return CloseEdgeEnum.Normal;
+}
+/**
+ * 获取接触边缘类型
+ * @param initialTouchState
+ * @param horizontalCloseEdge
+ * @param verticalCloseEdge
+ * @param reachState
+ */
+function getReachType(_a) {
+    var initialTouchState = _a.initialTouchState, horizontalCloseEdge = _a.horizontalCloseEdge, verticalCloseEdge = _a.verticalCloseEdge, reachState = _a.reachState;
+    if ((horizontalCloseEdge > 0 && initialTouchState === TouchStartEnum.X) || reachState === ReachTypeEnum.XReach) {
+        return ReachTypeEnum.XReach;
+    }
+    else if ((verticalCloseEdge > 0 &&
+        (initialTouchState === TouchStartEnum.YPull || initialTouchState === TouchStartEnum.YPush)) ||
+        reachState === ReachTypeEnum.YReach) {
+        return ReachTypeEnum.YReach;
+    }
+    return ReachTypeEnum.Normal;
+}
+
+/**
+ * 适应到合适的图片偏移量
+ */
+function slideToPosition(_a) {
+    var _b;
+    var x = _a.x, y = _a.y, lastX = _a.lastX, lastY = _a.lastY, width = _a.width, height = _a.height, scale = _a.scale, rotate = _a.rotate, touchedTime = _a.touchedTime;
+    var moveTime = Date.now() - touchedTime;
+    // 初始速度
+    var speedX = (x - lastX) / moveTime;
+    var speedY = (y - lastY) / moveTime;
+    // 停下所消耗时间
+    var slideTimeX = Math.abs(speedX / slideAcceleration);
+    var slideTimeY = Math.abs(speedY / slideAcceleration);
+    // 计划滑动位置
+    var planX = Math.floor(x + speedX * slideTimeX);
+    var planY = Math.floor(y + speedY * slideTimeY);
+    // 若图片不是水平则调换属性
+    if (rotate % 180 !== 0) {
+        _b = [height, width], width = _b[0], height = _b[1];
+    }
+    var currentX = planX;
+    var currentY = planY;
+    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+    // 图片超出的长度
+    var outOffsetX = (width * scale - innerWidth) / 2;
+    var outOffsetY = (height * scale - innerHeight) / 2;
+    var horizontalCloseEdge = getClosedEdge(planX, scale, width, innerWidth);
+    var verticalCloseEdge = getClosedEdge(planY, scale, height, innerHeight);
+    // x
+    if (horizontalCloseEdge === CloseEdgeEnum.Small) {
+        currentX = 0;
+    }
+    else if (horizontalCloseEdge === CloseEdgeEnum.Before) {
+        currentX = outOffsetX;
+    }
+    else if (horizontalCloseEdge === CloseEdgeEnum.After) {
+        currentX = -outOffsetX;
+    }
+    // y
+    if (verticalCloseEdge === CloseEdgeEnum.Small) {
+        currentY = 0;
+    }
+    else if (verticalCloseEdge === CloseEdgeEnum.Before) {
+        currentY = outOffsetY;
+    }
+    else if (verticalCloseEdge === CloseEdgeEnum.After) {
+        currentY = -outOffsetY;
+    }
+    // 时间过长
+    if (moveTime >= maxTouchTime &&
+        horizontalCloseEdge === CloseEdgeEnum.Normal &&
+        verticalCloseEdge === CloseEdgeEnum.Normal) {
+        return {
+            x: x,
+            y: y,
+        };
+    }
+    return {
+        x: currentX,
+        y: currentY,
+    };
+}
+
+/**
+ * 单击和双击事件处理
+ * @param singleTap - 单击事件
+ * @param doubleTap - 双击事件
+ * @return invokeTap
+ */
+function withContinuousTap(singleTap, doubleTap) {
+    // 当前连续点击次数
+    var continuousClick = 0;
+    var withDebounceTap = lodash_debounce(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        continuousClick = 0;
+        singleTap.apply(void 0, args);
+    }, 300);
+    return function invokeTap() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        continuousClick += 1;
+        withDebounceTap.apply(void 0, args);
+        // 双击
+        if (continuousClick >= 2) {
+            withDebounceTap.cancel();
+            continuousClick = 0;
+            doubleTap.apply(void 0, args);
+        }
+    };
+}
+
+function getAnimateOrigin(originRect, width, height) {
+    if (originRect) {
+        var innerWidth_1 = window.innerWidth, innerHeight_1 = window.innerHeight;
+        var xOrigin = (width - innerWidth_1) / 2 + originRect.clientX;
+        var yOrigin = (height - innerHeight_1) / 2 + originRect.clientY;
+        return xOrigin + "px " + yOrigin + "px";
+    }
+    return undefined;
+}
+
+/**
+ * 纠正缩放后偏离中心区域位置
+ */
+function correctSuitablePosition(_a) {
+    var x = _a.x, y = _a.y, scale = _a.scale;
+    if (scale <= 1) {
+        return {
+            x: 0,
+            y: 0,
+        };
+    }
+    return {
+        x: x,
+        y: y,
+    };
+}
+
+var initialState = {
+    // 真实宽度
+    naturalWidth: 1,
+    // 真实高度
+    naturalHeight: 1,
+    // 宽度
+    width: 1,
+    // 高度
+    height: 1,
+    // 加载成功状态
+    loaded: false,
+    // 破碎状态
+    broken: false,
+    // 图片 X 偏移量
+    x: 0,
+    // 图片 y 偏移量
+    y: 0,
+    // 图片缩放程度
+    scale: 1,
+    // 图片处于触摸的状态
+    touched: false,
+    // 背景处于触摸状态
+    maskTouched: false,
+    // 触摸开始时 x 原始坐标
+    clientX: 0,
+    // 触摸开始时 y 原始坐标
+    clientY: 0,
+    // 触摸开始时图片 x 偏移量
+    lastX: 0,
+    // 触摸开始时图片 y 偏移量
+    lastY: 0,
+    // 上一个触摸状态 x 原始坐标
+    lastMoveClientX: 0,
+    // 上一个触摸状态 y 原始坐标
+    lastMoveClientY: 0,
+    // 触摸开始时时间
+    touchedTime: 0,
+    // 多指触控间距
+    lastTouchLength: 0,
+    // 当前边缘触发状态
+    reachState: ReachTypeEnum.Normal,
+};
+var PhotoView = /** @class */ (function (_super) {
+    __extends(PhotoView, _super);
+    function PhotoView(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = initialState;
+        // 初始响应状态
+        _this.initialTouchState = TouchStartEnum.Normal;
+        _this.handleImageLoad = function (imageParams) {
+            _this.setState(imageParams);
+        };
+        _this.handleResize = function () {
+            var _a = _this.props, onPhotoResize = _a.onPhotoResize, rotate = _a.rotate;
+            var _b = _this.state, loaded = _b.loaded, naturalWidth = _b.naturalWidth, naturalHeight = _b.naturalHeight;
+            if (loaded) {
+                _this.setState(getSuitableImageSize(naturalWidth, naturalHeight, rotate));
+                if (onPhotoResize) {
+                    onPhotoResize();
+                }
+            }
+        };
+        _this.handleStart = function (clientX, clientY, touchLength) {
+            if (touchLength === void 0) { touchLength = 0; }
+            _this.setState(function (prevState) { return ({
+                touched: true,
+                clientX: clientX,
+                clientY: clientY,
+                lastMoveClientX: clientX,
+                lastMoveClientY: clientY,
+                lastX: prevState.x,
+                lastY: prevState.y,
+                lastTouchLength: touchLength,
+                touchedTime: Date.now(),
+            }); });
+        };
+        _this.onMove = function (newClientX, newClientY, touchLength) {
+            var _a;
+            if (touchLength === void 0) { touchLength = 0; }
+            var _b = _this.props, onReachMove = _b.onReachMove, isActive = _b.isActive, rotate = _b.rotate;
+            var _c = _this.state, naturalWidth = _c.naturalWidth, x = _c.x, y = _c.y, clientX = _c.clientX, clientY = _c.clientY, lastMoveClientX = _c.lastMoveClientX, lastMoveClientY = _c.lastMoveClientY, lastX = _c.lastX, lastY = _c.lastY, scale = _c.scale, lastTouchLength = _c.lastTouchLength, reachState = _c.reachState, touched = _c.touched, maskTouched = _c.maskTouched;
+            if ((touched || maskTouched) && isActive) {
+                var _d = _this.state, width = _d.width, height = _d.height;
+                // 若图片不是水平则调换属性
+                if (rotate % 180 !== 0) {
+                    _a = [height, width], width = _a[0], height = _a[1];
+                }
+                // 单指最小缩放下，以初始移动距离来判断意图
+                if (touchLength === 0 && _this.initialTouchState === TouchStartEnum.Normal) {
+                    var isStillX = Math.abs(newClientX - clientX) <= minStartTouchOffset;
+                    var isStillY = Math.abs(newClientY - clientY) <= minStartTouchOffset;
+                    // 初始移动距离不足
+                    if (isStillX && isStillY) {
+                        // 方向记录上次移动距离，以便平滑过渡
+                        _this.setState({
+                            lastMoveClientX: newClientX,
+                            lastMoveClientY: newClientY,
+                        });
+                        return;
+                    }
+                    // 设置响应状态
+                    _this.initialTouchState = !isStillX
+                        ? TouchStartEnum.X
+                        : newClientY > clientY
+                            ? TouchStartEnum.YPull
+                            : TouchStartEnum.YPush;
+                }
+                var offsetX = newClientX - lastMoveClientX;
+                var offsetY = newClientY - lastMoveClientY;
+                // 边缘触发状态
+                var currentReachState = ReachTypeEnum.Normal;
+                if (touchLength === 0) {
+                    // 边缘超出状态
+                    var horizontalCloseEdge = getClosedEdge(offsetX + lastX, scale, width, window.innerWidth);
+                    var verticalCloseEdge = getClosedEdge(offsetY + lastY, scale, height, window.innerHeight);
+                    // 边缘触发检测
+                    currentReachState = getReachType({
+                        initialTouchState: _this.initialTouchState,
+                        horizontalCloseEdge: horizontalCloseEdge,
+                        verticalCloseEdge: verticalCloseEdge,
+                        reachState: reachState,
+                    });
+                    // 接触边缘
+                    if (currentReachState != ReachTypeEnum.Normal) {
+                        onReachMove(currentReachState, newClientX, newClientY, scale);
+                    }
+                }
+                // 横向边缘触发、背景触发禁用当前滑动
+                if (currentReachState === ReachTypeEnum.XReach || maskTouched) {
+                    _this.setState({
+                        reachState: ReachTypeEnum.XReach,
+                    });
+                }
+                else {
+                    // 目标倍数
+                    var endScale = scale + ((touchLength - lastTouchLength) / 100 / 2) * scale;
+                    // 限制最大倍数和最小倍数
+                    var toScale = Math.max(Math.min(endScale, Math.max(maxScale, naturalWidth / width)), minScale - scaleBuffer);
+                    _this.setState(__assign({ lastTouchLength: touchLength, reachState: currentReachState }, getPositionOnMoveOrScale({
+                        x: x,
+                        y: y,
+                        clientX: newClientX,
+                        clientY: newClientY,
+                        offsetX: offsetX,
+                        offsetY: offsetY,
+                        fromScale: scale,
+                        toScale: toScale,
+                    })));
+                }
+            }
+        };
+        _this.onPhotoTap = function (clientX, clientY) {
+            var onPhotoTap = _this.props.onPhotoTap;
+            if (onPhotoTap) {
+                onPhotoTap(clientX, clientY);
+            }
+        };
+        _this.onDoubleTap = function (clientX, clientY) {
+            var _a = _this.state, width = _a.width, naturalWidth = _a.naturalWidth, x = _a.x, y = _a.y, scale = _a.scale, reachState = _a.reachState;
+            if (reachState !== ReachTypeEnum.Normal) {
+                return;
+            }
+            var position = getPositionOnMoveOrScale({
+                x: x,
+                y: y,
+                clientX: clientX,
+                clientY: clientY,
+                fromScale: scale,
+                // 若图片足够大，则放大适应的倍数
+                toScale: scale !== 1 ? 1 : Math.max(2, naturalWidth / width),
+            });
+            _this.setState(__assign(__assign({ clientX: clientX,
+                clientY: clientY }, position), correctSuitablePosition(position)));
+        };
+        _this.handleWheel = function (e) {
+            e.stopPropagation();
+            var clientX = e.clientX, clientY = e.clientY, deltaY = e.deltaY;
+            var _a = _this.state, width = _a.width, naturalWidth = _a.naturalWidth, reachState = _a.reachState;
+            if (reachState !== ReachTypeEnum.Normal) {
+                return;
+            }
+            _this.setState(function (_a) {
+                var x = _a.x, y = _a.y, scale = _a.scale;
+                var endScale = scale - deltaY / 100 / 2;
+                // 限制最大倍数和最小倍数
+                var toScale = Math.max(Math.min(endScale, Math.max(maxScale, naturalWidth / width)), minScale);
+                var position = getPositionOnMoveOrScale({
+                    x: x,
+                    y: y,
+                    clientX: clientX,
+                    clientY: clientY,
+                    fromScale: scale,
+                    toScale: toScale,
+                });
+                return __assign(__assign({ clientX: clientX,
+                    clientY: clientY }, position), correctSuitablePosition(position));
+            });
+        };
+        _this.handleMaskStart = function (clientX, clientY) {
+            _this.setState(function (prevState) { return ({
+                maskTouched: true,
+                clientX: clientX,
+                clientY: clientY,
+                lastX: prevState.x,
+                lastY: prevState.y,
+            }); });
+        };
+        _this.handleMaskMouseDown = function (e) {
+            e.stopPropagation();
+            _this.handleMaskStart(e.clientX, e.clientY);
+        };
+        _this.handleMaskTouchStart = function (e) {
+            e.stopPropagation();
+            var _a = e.touches[0], clientX = _a.clientX, clientY = _a.clientY;
+            _this.handleMaskStart(clientX, clientY);
+        };
+        _this.handleTouchStart = function (e) {
+            e.stopPropagation();
+            var _a = getMultipleTouchPosition(e), clientX = _a.clientX, clientY = _a.clientY, touchLength = _a.touchLength;
+            _this.handleStart(clientX, clientY, touchLength);
+        };
+        _this.handleMouseDown = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            _this.handleStart(e.clientX, e.clientY, 0);
+        };
+        _this.handleTouchMove = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            var _a = getMultipleTouchPosition(e), clientX = _a.clientX, clientY = _a.clientY, touchLength = _a.touchLength;
+            _this.onMove(clientX, clientY, touchLength);
+        };
+        _this.handleMouseMove = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            _this.onMove(e.clientX, e.clientY);
+        };
+        _this.handleUp = function (newClientX, newClientY) {
+            // 重置响应状态
+            _this.initialTouchState = TouchStartEnum.Normal;
+            var _a = _this.props, onReachUp = _a.onReachUp, onPhotoTap = _a.onPhotoTap, onMaskTap = _a.onMaskTap, isActive = _a.isActive, rotate = _a.rotate;
+            var _b = _this.state, width = _b.width, height = _b.height, naturalWidth = _b.naturalWidth, x = _b.x, y = _b.y, lastX = _b.lastX, lastY = _b.lastY, scale = _b.scale, touchedTime = _b.touchedTime, clientX = _b.clientX, clientY = _b.clientY, touched = _b.touched, maskTouched = _b.maskTouched;
+            if ((touched || maskTouched) && isActive) {
+                var hasMove_1 = clientX !== newClientX || clientY !== newClientY;
+                _this.setState(__assign({ touched: false, maskTouched: false, 
+                    // 限制缩放
+                    scale: Math.max(Math.min(scale, Math.max(maxScale, naturalWidth / width)), minScale), reachState: ReachTypeEnum.Normal }, (hasMove_1
+                    ? slideToPosition({
+                        x: x,
+                        y: y,
+                        lastX: lastX,
+                        lastY: lastY,
+                        width: width,
+                        height: height,
+                        scale: scale,
+                        rotate: rotate,
+                        touchedTime: touchedTime,
+                    })
+                    : {
+                        x: x,
+                        y: y,
+                    })), function () {
+                    if (onReachUp) {
+                        onReachUp(newClientX, newClientY);
+                    }
+                    // 触发 Tap 事件
+                    if (!hasMove_1) {
+                        if (touched && onPhotoTap) {
+                            _this.handlePhotoTap(newClientX, newClientY);
+                        }
+                        else if (maskTouched && onMaskTap) {
+                            onMaskTap(newClientX, newClientY);
+                        }
+                    }
+                });
+            }
+        };
+        _this.handleTouchEnd = function (e) {
+            var _a = e.changedTouches[0], clientX = _a.clientX, clientY = _a.clientY;
+            _this.handleUp(clientX, clientY);
+        };
+        _this.handleMouseUp = function (e) {
+            var clientX = e.clientX, clientY = e.clientY;
+            _this.handleUp(clientX, clientY);
+        };
+        _this.onMove = throttle(_this.onMove, 8);
+        _this.handleResize = throttle(_this.handleResize, 8);
+        // 单击与双击事件处理
+        _this.handlePhotoTap = withContinuousTap(_this.onPhotoTap, _this.onDoubleTap);
+        return _this;
+    }
+    PhotoView.prototype.componentDidMount = function () {
+        if (isTouchDevice) {
+            window.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+            window.addEventListener('touchend', this.handleTouchEnd, { passive: false });
+        }
+        else {
+            window.addEventListener('mousemove', this.handleMouseMove);
+            window.addEventListener('mouseup', this.handleMouseUp);
+        }
+        window.addEventListener('resize', this.handleResize);
+    };
+    PhotoView.prototype.componentDidUpdate = function (prevProps) {
+        var rotate = this.props.rotate;
+        if (rotate !== prevProps.rotate) {
+            var _a = this.state, naturalWidth = _a.naturalWidth, naturalHeight = _a.naturalHeight;
+            this.setState(getSuitableImageSize(naturalWidth, naturalHeight, rotate));
+        }
+    };
+    PhotoView.prototype.componentWillUnmount = function () {
+        window.removeEventListener('touchmove', this.handleTouchMove);
+        window.removeEventListener('touchend', this.handleTouchEnd);
+        window.removeEventListener('mousemove', this.handleMouseMove);
+        window.removeEventListener('mouseup', this.handleMouseUp);
+        window.removeEventListener('resize', this.handleResize);
+    };
+    PhotoView.prototype.render = function () {
+        var _a = this.props, src = _a.src, intro = _a.intro, viewClassName = _a.viewClassName, className = _a.className, style = _a.style, rotate = _a.rotate, loadingElement = _a.loadingElement, brokenElement = _a.brokenElement, isActive = _a.isActive, showAnimateType = _a.showAnimateType, originRect = _a.originRect;
+        var _b = this.state, width = _b.width, height = _b.height, loaded = _b.loaded, x = _b.x, y = _b.y, scale = _b.scale, touched = _b.touched, broken = _b.broken;
+        var transform = "translate3d(" + x + "px, " + y + "px, 0) scale(" + scale + ") rotate(" + rotate + "deg)";
+        return (React.createElement("div", { className: classNames('PhotoView__PhotoWrap', viewClassName), style: style },
+            React.createElement("div", { className: "PhotoView__PhotoMask", onMouseDown: !isTouchDevice && isActive ? this.handleMaskMouseDown : undefined, onTouchStart: isTouchDevice && isActive ? this.handleMaskTouchStart : undefined }),
+            React.createElement("div", { className: classNames('PhotoView__PhotoBox', {
+                    PhotoView__animateIn: loaded && showAnimateType === ShowAnimateEnum.In,
+                    PhotoView__animateOut: loaded && showAnimateType === ShowAnimateEnum.Out,
+                }), style: {
+                    transformOrigin: loaded ? getAnimateOrigin(originRect, 0, 0) : undefined,
+                } },
+                React.createElement(Photo, { className: className, src: src, intro: intro, width: width, height: height, loaded: loaded, broken: broken, rotate: rotate, onMouseDown: isTouchDevice ? undefined : this.handleMouseDown, onTouchStart: isTouchDevice ? this.handleTouchStart : undefined, onWheel: this.handleWheel, style: {
+                        WebkitTransform: transform,
+                        transform: transform,
+                        transition: touched ? undefined : 'transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1)',
+                    }, onImageLoad: this.handleImageLoad, loadingElement: loadingElement, brokenElement: brokenElement }))));
+    };
+    PhotoView.displayName = 'PhotoView';
+    return PhotoView;
+}(React.Component));
+
+var SlideWrap = function (_a) {
+    var className = _a.className, children = _a.children, restProps = __rest(_a, ["className", "children"]);
+    var dialogNode = React.useRef(document.createElement('section'));
+    var originalOverflowCallback = React.useRef('');
+    React.useEffect(function () {
+        document.body.appendChild(dialogNode.current);
+        var style = document.body.style;
+        originalOverflowCallback.current = style.overflow;
+        style.overflow = 'hidden';
+        return function () {
+            style.overflow = originalOverflowCallback.current;
+            // 清除容器
+            document.body.removeChild(dialogNode.current);
+        };
+    }, []);
+    return reactDom.createPortal(React.createElement("div", __assign({ className: classNames('PhotoView-SlideWrap', className) }, restProps), children), dialogNode.current);
+};
+SlideWrap.displayName = 'SlideWrap';
+
+function VisibleAnimationHandle(_a) {
+    var visible = _a.visible, currentImage = _a.currentImage, children = _a.children;
+    var _b = React.useState(visible), photoVisible = _b[0], updatePhotoVisible = _b[1];
+    var _c = React.useState(ShowAnimateEnum.None), showAnimateType = _c[0], updateAnimateStatus = _c[1];
+    var _d = React.useState(), originRect = _d[0], updateOriginRect = _d[1];
+    function onShowAnimateEnd() {
+        updateAnimateStatus(ShowAnimateEnum.None);
+        // Close
+        if (showAnimateType === ShowAnimateEnum.Out) {
+            updatePhotoVisible(false);
+        }
+    }
+    React.useEffect(function () {
+        var originRef = (currentImage || {}).originRef;
+        if (originRef && originRef.nodeType === 1) {
+            // 获取触发时节点位置
+            var _a = originRef.getBoundingClientRect(), top_1 = _a.top, left = _a.left, width = _a.width, height = _a.height;
+            updateOriginRect({
+                clientX: left + width / 2,
+                clientY: top_1 + height / 2,
+            });
+        }
+        else if (originRect && !originRef) {
+            updateOriginRect(undefined);
+        }
+        if (visible) {
+            updateAnimateStatus(ShowAnimateEnum.In);
+            updatePhotoVisible(true);
+        }
+        else {
+            updateAnimateStatus(ShowAnimateEnum.Out);
+        }
+    }, [visible]);
+    return children({
+        photoVisible: photoVisible,
+        showAnimateType: showAnimateType,
+        originRect: originRect,
+        onShowAnimateEnd: onShowAnimateEnd,
+    });
+}
+
+function Close(props) {
+    return (React.createElement("svg", __assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 768 768" }, props),
+        React.createElement("path", { fill: "#FFF", d: "M607.5 205.5l-178.5 178.5 178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z" })));
+}
+
+function ArrowLeft(props) {
+    return (React.createElement("svg", __assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 768 768" }, props),
+        React.createElement("path", { d: "M640.5 352.5v63h-390l178.5 180-45 45-256.5-256.5 256.5-256.5 45 45-178.5 180h390z" })));
+}
+
+function ArrowRight(props) {
+    return (React.createElement("svg", __assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 768 768" }, props),
+        React.createElement("path", { d: "M384 127.5l256.5 256.5-256.5 256.5-45-45 178.5-180h-390v-63h390l-178.5-180z" })));
+}
+
+var PhotoSlider = /** @class */ (function (_super) {
+    __extends(PhotoSlider, _super);
+    function PhotoSlider(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleClose = function (evt) {
+            var onClose = _this.props.onClose;
+            var backdropOpacity = _this.state.backdropOpacity;
+            onClose(evt);
+            _this.setState({
+                overlayVisible: true,
+                // 记录当前关闭时的透明度
+                lastBackdropOpacity: backdropOpacity,
+            });
+        };
+        _this.handlePhotoTap = function () {
+            var photoClosable = _this.props.photoClosable;
+            if (photoClosable) {
+                _this.handleClose();
+            }
+            else {
+                _this.setState(function (prevState) { return ({
+                    overlayVisible: !prevState.overlayVisible,
+                }); });
+            }
+        };
+        _this.handlePhotoMaskTap = function () {
+            var maskClosable = _this.props.maskClosable;
+            if (maskClosable) {
+                _this.handleClose();
+            }
+        };
+        _this.handleResize = function () {
+            var innerWidth = window.innerWidth;
+            _this.setState(function (_a) {
+                var photoIndex = _a.photoIndex;
+                return {
+                    translateX: -(innerWidth + horizontalOffset) * photoIndex,
+                    lastClientX: undefined,
+                    lastClientY: undefined,
+                    shouldTransition: false,
+                };
+            });
+        };
+        _this.handleRotate = function (rotating) {
+            var _a = _this.state, photoIndex = _a.photoIndex, rotatingMap = _a.rotatingMap;
+            rotatingMap.set(photoIndex, rotating);
+            _this.setState({
+                rotatingMap: rotatingMap,
+            });
+        };
+        _this.handleKeyDown = function (evt) {
+            var visible = _this.props.visible;
+            if (visible) {
+                switch (evt.key) {
+                    case 'ArrowLeft':
+                        _this.handlePrevious(false);
+                        break;
+                    case 'ArrowRight':
+                        _this.handleNext(false);
+                        break;
+                    case 'Escape':
+                        _this.handleClose();
+                        break;
+                }
+            }
+        };
+        _this.handleBack = function (evt) {
+            evt.stopPropagation();
+            console.log("范湖一");
+        };
+        _this.handleReachVerticalMove = function (clientY, scale) {
+            _this.setState(function (_a) {
+                var lastClientY = _a.lastClientY, backdropOpacity = _a.backdropOpacity;
+                if (lastClientY === undefined) {
+                    return {
+                        touched: true,
+                        lastClientY: clientY,
+                        backdropOpacity: backdropOpacity,
+                        canPullClose: true,
+                    };
+                }
+                var offsetClientY = Math.abs(clientY - lastClientY);
+                var opacity = Math.max(Math.min(defaultOpacity, defaultOpacity - offsetClientY / 100 / 4), 0);
+                return {
+                    touched: true,
+                    lastClientY: lastClientY,
+                    backdropOpacity: scale === 1 ? opacity : defaultOpacity,
+                    canPullClose: scale === 1,
+                };
+            });
+        };
+        _this.handleReachHorizontalMove = function (clientX) {
+            var innerWidth = window.innerWidth;
+            var images = _this.props.images;
+            _this.setState(function (_a) {
+                var lastClientX = _a.lastClientX, translateX = _a.translateX, photoIndex = _a.photoIndex;
+                if (lastClientX === undefined) {
+                    return {
+                        touched: true,
+                        lastClientX: clientX,
+                        translateX: translateX,
+                        shouldTransition: true,
+                    };
+                }
+                var originOffsetClientX = clientX - lastClientX;
+                var offsetClientX = originOffsetClientX;
+                // 第一张和最后一张超出距离减半
+                if ((photoIndex === 0 && originOffsetClientX > 0) ||
+                    (photoIndex === images.length - 1 && originOffsetClientX < 0)) {
+                    offsetClientX = originOffsetClientX / 2;
+                }
+                return {
+                    touched: true,
+                    lastClientX: lastClientX,
+                    translateX: -(innerWidth + horizontalOffset) * photoIndex + offsetClientX,
+                    shouldTransition: true,
+                };
+            });
+        };
+        _this.handleIndexChange = function (photoIndex, shouldTransition) {
+            if (shouldTransition === void 0) { shouldTransition = true; }
+            var singlePageWidth = window.innerWidth + horizontalOffset;
+            var translateX = -singlePageWidth * photoIndex;
+            _this.setState({
+                touched: false,
+                lastClientX: undefined,
+                lastClientY: undefined,
+                translateX: translateX,
+                photoIndex: photoIndex,
+                shouldTransition: shouldTransition,
+            });
+            var onIndexChange = _this.props.onIndexChange;
+            if (onIndexChange) {
+                onIndexChange(photoIndex);
+            }
+        };
+        _this.handlePrevious = function (shouldTransition) {
+            var photoIndex = _this.state.photoIndex;
+            if (photoIndex > 0) {
+                _this.handleIndexChange(photoIndex - 1, shouldTransition);
+            }
+        };
+        _this.handleNext = function (shouldTransition) {
+            var images = _this.props.images;
+            var photoIndex = _this.state.photoIndex;
+            if (photoIndex < images.length - 1) {
+                _this.handleIndexChange(photoIndex + 1, shouldTransition);
+            }
+        };
+        _this.handleReachMove = function (reachState, clientX, clientY, scale) {
+            if (reachState === ReachTypeEnum.XReach) {
+                _this.handleReachHorizontalMove(clientX);
+            }
+            else if (reachState === ReachTypeEnum.YReach) {
+                _this.handleReachVerticalMove(clientY, scale);
+            }
+        };
+        _this.handleReachUp = function (clientX, clientY) {
+            var images = _this.props.images;
+            var _a = _this.state, _b = _a.lastClientX, lastClientX = _b === void 0 ? clientX : _b, _c = _a.lastClientY, lastClientY = _c === void 0 ? clientY : _c, photoIndex = _a.photoIndex, overlayVisible = _a.overlayVisible, canPullClose = _a.canPullClose;
+            var offsetClientX = clientX - lastClientX;
+            var offsetClientY = clientY - lastClientY;
+            var willClose = false;
+            // 下一张
+            if (offsetClientX < -maxMoveOffset && photoIndex < images.length - 1) {
+                _this.handleIndexChange(photoIndex + 1);
+                return;
+            }
+            // 上一张
+            if (offsetClientX > maxMoveOffset && photoIndex > 0) {
+                _this.handleIndexChange(photoIndex - 1);
+                return;
+            }
+            var singlePageWidth = window.innerWidth + horizontalOffset;
+            // 当前偏移
+            var currentTranslateX = -singlePageWidth * photoIndex;
+            var currentPhotoIndex = photoIndex;
+            if (Math.abs(offsetClientY) > window.innerHeight * 0.14 && canPullClose) {
+                willClose = true;
+                _this.handleClose();
+            }
+            _this.setState({
+                touched: false,
+                translateX: currentTranslateX,
+                photoIndex: currentPhotoIndex,
+                lastClientX: undefined,
+                lastClientY: undefined,
+                backdropOpacity: defaultOpacity,
+                overlayVisible: willClose ? true : overlayVisible,
+            });
+        };
+        _this.state = {
+            translateX: 0,
+            photoIndex: 0,
+            touched: false,
+            shouldTransition: true,
+            lastClientX: undefined,
+            lastClientY: undefined,
+            backdropOpacity: defaultOpacity,
+            lastBackdropOpacity: defaultOpacity,
+            overlayVisible: true,
+            canPullClose: true,
+            rotatingMap: new Map(),
+        };
+        return _this;
+    }
+    PhotoSlider.getDerivedStateFromProps = function (nextProps, prevState) {
+        if (nextProps.index !== undefined && nextProps.index !== prevState.photoIndex) {
+            return {
+                photoIndex: nextProps.index,
+                translateX: -(window.innerWidth + horizontalOffset) * nextProps.index,
+            };
+        }
+        return null;
+    };
+    PhotoSlider.prototype.componentDidMount = function () {
+        var _a = this.props.index, index = _a === void 0 ? 0 : _a;
+        this.setState({
+            translateX: index * -(window.innerWidth + horizontalOffset),
+            photoIndex: index,
+        });
+        window.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('popstate', this.handleBack);
+    };
+    PhotoSlider.prototype.componentWillUnmount = function () {
+        window.removeEventListener('keydown', this.handleKeyDown);
+    };
+    PhotoSlider.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, images = _a.images, visible = _a.visible, className = _a.className, maskClassName = _a.maskClassName, viewClassName = _a.viewClassName, imageClassName = _a.imageClassName, bannerVisible = _a.bannerVisible, introVisible = _a.introVisible, overlayRender = _a.overlayRender, toolbarRender = _a.toolbarRender, loadingElement = _a.loadingElement, brokenElement = _a.brokenElement;
+        var _b = this.state, translateX = _b.translateX, touched = _b.touched, photoIndex = _b.photoIndex, backdropOpacity = _b.backdropOpacity, lastBackdropOpacity = _b.lastBackdropOpacity, overlayVisible = _b.overlayVisible, rotatingMap = _b.rotatingMap, shouldTransition = _b.shouldTransition;
+        var imageLength = images.length;
+        var currentImage = images.length ? images[photoIndex] : undefined;
+        var transform = "translate3d(" + translateX + "px, 0px, 0)";
+        // Overlay
+        var overlayIntro = currentImage && currentImage.intro;
+        return (React.createElement(VisibleAnimationHandle, { visible: visible, currentImage: currentImage }, function (_a) {
+            var photoVisible = _a.photoVisible, showAnimateType = _a.showAnimateType, originRect = _a.originRect, onShowAnimateEnd = _a.onShowAnimateEnd;
+            if (photoVisible) {
+                var innerWidth_1 = window.innerWidth;
+                var currentOverlayVisible = overlayVisible && showAnimateType === ShowAnimateEnum.None;
+                // 关闭过程中使用下拉保存的透明度
+                var currentOpacity = visible ? backdropOpacity : lastBackdropOpacity;
+                // 覆盖物参数
+                var overlayParams = {
+                    images: images,
+                    index: photoIndex,
+                    visible: visible,
+                    onClose: _this.handleClose,
+                    onIndexChange: _this.handleIndexChange,
+                    overlayVisible: currentOverlayVisible,
+                    onRotate: _this.handleRotate,
+                    rotate: rotatingMap.get(photoIndex) || 0,
+                };
+                return (React.createElement(SlideWrap, { className: classNames({
+                        'PhotoView-PhotoSlider__clean': !currentOverlayVisible,
+                        'PhotoView-PhotoSlider__willClose': !visible,
+                    }, className), role: "dialog", id: "PhotoView_Slider", onClick: function (e) { return e.stopPropagation(); } },
+                    React.createElement("div", { className: classNames('PhotoView-PhotoSlider__Backdrop', maskClassName, {
+                            'PhotoView-PhotoSlider__fadeIn': showAnimateType === ShowAnimateEnum.In,
+                            'PhotoView-PhotoSlider__fadeOut': showAnimateType === ShowAnimateEnum.Out,
+                        }), style: {
+                            background: "rgba(0, 0, 0, " + currentOpacity + ")",
+                        }, onAnimationEnd: onShowAnimateEnd }),
+                    bannerVisible && (React.createElement("div", { className: "PhotoView-PhotoSlider__BannerWrap" },
+                        React.createElement("div", { className: "PhotoView-PhotoSlider__Counter" },
+                            photoIndex + 1,
+                            " / ",
+                            imageLength),
+                        React.createElement("div", { className: "PhotoView-PhotoSlider__BannerRight" },
+                            toolbarRender && toolbarRender(overlayParams),
+                            React.createElement(Close, { className: "PhotoView-PhotoSlider__toolbarIcon", onClick: _this.handleClose })))),
+                    images
+                        .slice(
+                    // 加载相邻三张
+                    Math.max(photoIndex - 1, 0), Math.min(photoIndex + 2, imageLength + 1))
+                        .map(function (item, index) {
+                        // 截取之前的索引位置
+                        var realIndex = photoIndex === 0 ? photoIndex + index : photoIndex - 1 + index;
+                        return (React.createElement(PhotoView, { key: item.key || realIndex, src: item.src, intro: item.intro, onReachMove: _this.handleReachMove, onReachUp: _this.handleReachUp, onPhotoTap: _this.handlePhotoTap, onMaskTap: _this.handlePhotoMaskTap, viewClassName: viewClassName, className: imageClassName, style: {
+                                left: (innerWidth_1 + horizontalOffset) * realIndex + "px",
+                                WebkitTransform: transform,
+                                transform: transform,
+                                transition: touched || !shouldTransition
+                                    ? undefined
+                                    : 'transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1)',
+                            }, loadingElement: loadingElement, brokenElement: brokenElement, onPhotoResize: _this.handleResize, isActive: photoIndex === realIndex, showAnimateType: showAnimateType, originRect: originRect, rotate: rotatingMap.get(realIndex) || 0 }));
+                    }),
+                    !isTouchDevice && bannerVisible && (React.createElement(React.Fragment, null,
+                        photoIndex !== 0 && (React.createElement("div", { className: "PhotoView-PhotoSlider__ArrowLeft", onClick: function () { return _this.handlePrevious(false); } },
+                            React.createElement(ArrowLeft, null))),
+                        photoIndex + 1 < imageLength && (React.createElement("div", { className: "PhotoView-PhotoSlider__ArrowRight", onClick: function () { return _this.handleNext(false); } },
+                            React.createElement(ArrowRight, null))))),
+                    Boolean(introVisible && overlayIntro) && (React.createElement("div", { className: "PhotoView-PhotoSlider__FooterWrap" }, overlayIntro)),
+                    overlayRender && overlayRender(overlayParams)));
+            }
+            return null;
+        }));
+    };
+    PhotoSlider.displayName = 'PhotoSlider';
+    PhotoSlider.defaultProps = {
+        maskClosable: true,
+        photoClosable: false,
+        bannerVisible: true,
+        introVisible: true,
+    };
+    return PhotoSlider;
+}(React.Component));
+
+var PhotoProvider = /** @class */ (function (_super) {
+    __extends(PhotoProvider, _super);
+    function PhotoProvider(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleAddItem = function (imageItem) {
+            _this.setState(function (prev) { return ({
+                images: prev.images.concat(imageItem),
+            }); });
+        };
+        _this.handleRemoveItem = function (key) {
+            _this.setState(function (_a) {
+                var images = _a.images, index = _a.index;
+                var nextImages = images.filter(function (item) { return item.key !== key; });
+                var nextEndIndex = nextImages.length - 1;
+                return {
+                    images: nextImages,
+                    index: Math.min(nextEndIndex, index),
+                };
+            });
+        };
+        _this.handleShow = function (key) {
+            var images = _this.state.images;
+            _this.setState({
+                visible: true,
+                index: images.findIndex(function (item) { return item.key === key; }),
+            });
+        };
+        _this.handleClose = function () {
+            _this.setState({
+                visible: false,
+            });
+        };
+        _this.handleIndexChange = function (index) {
+            _this.setState({
+                index: index,
+            });
+        };
+        _this.state = {
+            images: [],
+            visible: false,
+            index: 0,
+            addItem: _this.handleAddItem,
+            removeItem: _this.handleRemoveItem,
+            onShow: _this.handleShow,
+        };
+        return _this;
+    }
+    PhotoProvider.prototype.render = function () {
+        var _a = this.props, children = _a.children, restProps = __rest(_a, ["children"]);
+        var _b = this.state, images = _b.images, visible = _b.visible, index = _b.index;
+        return (React.createElement(PhotoContext.Provider, { value: this.state },
+            children,
+            React.createElement(PhotoSlider, __assign({ images: images, visible: visible, index: index, onIndexChange: this.handleIndexChange, onClose: this.handleClose }, restProps))));
+    };
+    return PhotoProvider;
+}(React.Component));
+
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as references for various `Number` constants. */
+var INFINITY = 1 / 0;
+
+/** `Object#toString` result references. */
+var symbolTag$1 = '[object Symbol]';
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf$1 = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$1 = freeGlobal$1 || freeSelf$1 || Function('return this')();
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to generate unique IDs. */
+var idCounter = 0;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var Symbol = root$1.Symbol;
+
+/** Used to convert symbols to primitives and strings. */
+var symbolProto = Symbol ? Symbol.prototype : undefined,
+    symbolToString = symbolProto ? symbolProto.toString : undefined;
+
+/**
+ * The base implementation of `_.toString` which doesn't convert nullish
+ * values to empty strings.
+ *
+ * @private
+ * @param {*} value The value to process.
+ * @returns {string} Returns the string.
+ */
+function baseToString(value) {
+  // Exit early for strings to avoid a performance hit in some environments.
+  if (typeof value == 'string') {
+    return value;
+  }
+  if (isSymbol$1(value)) {
+    return symbolToString ? symbolToString.call(value) : '';
+  }
+  var result = (value + '');
+  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike$1(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol$1(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike$1(value) && objectToString$1.call(value) == symbolTag$1);
+}
+
+/**
+ * Converts `value` to a string. An empty string is returned for `null`
+ * and `undefined` values. The sign of `-0` is preserved.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {string} Returns the string.
+ * @example
+ *
+ * _.toString(null);
+ * // => ''
+ *
+ * _.toString(-0);
+ * // => '-0'
+ *
+ * _.toString([1, 2, 3]);
+ * // => '1,2,3'
+ */
+function toString(value) {
+  return value == null ? '' : baseToString(value);
+}
+
+/**
+ * Generates a unique ID. If `prefix` is given, the ID is appended to it.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Util
+ * @param {string} [prefix=''] The value to prefix the ID with.
+ * @returns {string} Returns the unique ID.
+ * @example
+ *
+ * _.uniqueId('contact_');
+ * // => 'contact_104'
+ *
+ * _.uniqueId();
+ * // => '105'
+ */
+function uniqueId(prefix) {
+  var id = ++idCounter;
+  return toString(prefix) + id;
+}
+
+var lodash_uniqueid = uniqueId;
+
+var PhotoConsumer = function (_a) {
+    var src = _a.src, intro = _a.intro, children = _a.children;
+    var photoContext = React.useContext(PhotoContext);
+    var key = React.useMemo(function () { return lodash_uniqueid(); }, []);
+    var _b = React.useState({
+        clientX: undefined,
+        clientY: undefined,
+    }), position = _b[0], updatePosition = _b[1];
+    var photoTriggerRef = React.useRef(null);
+    React.useEffect(function () {
+        photoContext.addItem({
+            key: key,
+            src: src,
+            originRef: photoTriggerRef.current,
+            intro: intro,
+        });
+        return function () {
+            photoContext.removeItem(key);
+        };
+    }, []);
+    function handleTouchStart(e) {
+        var _a = e.touches[0], clientX = _a.clientX, clientY = _a.clientY;
+        updatePosition({
+            clientX: clientX,
+            clientY: clientY,
+        });
+        if (children) {
+            var onTouchStart = children.props.onTouchStart;
+            if (onTouchStart) {
+                onTouchStart(e);
+            }
+        }
+    }
+    function handleTouchEnd(e) {
+        var _a = e.changedTouches[0], clientX = _a.clientX, clientY = _a.clientY;
+        if (position.clientX === clientX && position.clientY === clientY) {
+            photoContext.onShow(key);
+        }
+        if (children) {
+            var onTouchEnd = children.props.onTouchEnd;
+            if (onTouchEnd) {
+                onTouchEnd(e);
+            }
+        }
+    }
+    function handleClick(e) {
+        photoContext.onShow(key);
+        if (children) {
+            var onClick = children.props.onClick;
+            if (onClick) {
+                onClick(e);
+            }
+        }
+    }
+    if (children) {
+        return React.Children.only(React.cloneElement(children, isTouchDevice
+            ? {
+                onTouchStart: handleTouchStart,
+                onTouchEnd: handleTouchEnd,
+                ref: photoTriggerRef,
+            }
+            : { onClick: handleClick, ref: photoTriggerRef }));
+    }
+    return null;
+};
+
+exports.PhotoConsumer = PhotoConsumer;
+exports.PhotoProvider = PhotoProvider;
+exports.PhotoSlider = PhotoSlider;
+//# sourceMappingURL=index.js.map

dist/photo-context.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { dataType } from './types';
+export declare type onShowType = (key?: string) => void;
+export declare type addItemType = ({ key, src, originRef, intro }: dataType) => void;
+export declare type removeItemType = (key?: string) => void;
+export interface PhotoContextType {
+    onShow: onShowType;
+    addItem: addItemType;
+    removeItem: removeItemType;
+}
+declare const _default: React.Context<PhotoContextType>;
+export default _default;

dist/types.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+/**
+ * 图片 item 类型
+ */
+export declare type dataType = {
+    key?: string;
+    src: string;
+    originRef?: HTMLElement | null;
+    intro?: React.ReactNode;
+};
+/**
+ * brokenElement函数使用参数
+ */
+export declare type brokenElementDataType = Pick<dataType, 'src' | 'intro'>;
+export declare type overlayRenderProps = {
+    images: dataType[];
+    index: number;
+    visible: boolean;
+    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
+    onIndexChange: (photoIndex: number) => void;
+    overlayVisible: boolean;
+    rotate: number;
+    onRotate: (rotate: number) => void;
+};
+export interface IPhotoProviderBase {
+    maskClosable?: boolean;
+    photoClosable?: boolean;
+    bannerVisible?: boolean;
+    introVisible?: boolean;
+    overlayRender?: (overlayProps: overlayRenderProps) => React.ReactNode;
+    toolbarRender?: (overlayProps: overlayRenderProps) => React.ReactNode;
+    className?: string;
+    maskClassName?: string;
+    viewClassName?: string;
+    imageClassName?: string;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element | ((photoProps: brokenElementDataType) => JSX.Element);
+}
+export declare type ReachMoveFunction = (reachState: ReachTypeEnum, clientX: number, clientY: number, scale?: number) => void;
+export declare type ReachFunction = (clientX: number, clientY: number) => void;
+export declare type PhotoTapFunction = (clientX: number, clientY: number) => void;
+/**
+ * 边缘超出状态
+ */
+export declare enum CloseEdgeEnum {
+    Normal = 0,
+    Small = 1,
+    Before = 2,
+    After = 3
+}
+/**
+ * 边缘触发状态
+ */
+export declare enum ReachTypeEnum {
+    Normal = 0,
+    XReach = 1,
+    YReach = 2
+}
+/**
+ * 初始响应状态
+ */
+export declare enum TouchStartEnum {
+    Normal = 0,
+    X = 1,
+    YPush = 2,
+    YPull = 3
+}
+/**
+ * 动画类型
+ */
+export declare enum ShowAnimateEnum {
+    None = 0,
+    In = 1,
+    Out = 2
+}
+/**
+ * 触发源位置
+ */
+export declare type OriginRectType = {
+    clientX: number;
+    clientY: number;
+} | undefined;

dist/utils/correctSuitablePosition.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 纠正缩放后偏离中心区域位置
+ */
+export default function correctSuitablePosition({ x, y, scale, }: {
+    x: number;
+    y: number;
+    scale: number;
+}): {
+    x: number;
+    y: number;
+};

dist/utils/getAnimateOrigin.d.ts

@@ -0,0 +1,2 @@
+import { OriginRectType } from '../types';
+export default function getAnimateOrigin(originRect: OriginRectType, width: number, height: number): string | undefined;

dist/utils/getCloseEdge.d.ts

@@ -0,0 +1,23 @@
+import { CloseEdgeEnum, ReachTypeEnum, TouchStartEnum } from '../types';
+/**
+ * 接触左边/上边 或 右边/下边边缘
+ * @param position - x/y
+ * @param scale
+ * @param size - width/height
+ * @param innerSize - innerWidth/innerHeight
+ * @return CloseEdgeEnum
+ */
+export declare function getClosedEdge(position: number, scale: number, size: number, innerSize: number): CloseEdgeEnum;
+/**
+ * 获取接触边缘类型
+ * @param initialTouchState
+ * @param horizontalCloseEdge
+ * @param verticalCloseEdge
+ * @param reachState
+ */
+export declare function getReachType({ initialTouchState, horizontalCloseEdge, verticalCloseEdge, reachState, }: {
+    initialTouchState: TouchStartEnum;
+    horizontalCloseEdge: CloseEdgeEnum;
+    verticalCloseEdge: CloseEdgeEnum;
+    reachState: ReachTypeEnum;
+}): ReachTypeEnum;

dist/utils/getMultipleTouchPosition.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * 从 Touch 事件中获取两个触控中心位置
+ */
+export default function getMultipleTouchPosition(evt: React.TouchEvent): {
+    clientX: number;
+    clientY: number;
+    touchLength: number;
+};

dist/utils/getPositionOnMoveOrScale.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 获取移动或缩放之后的中心点
+ */
+export default function getPositionOnMoveOrScale({ x, y, clientX, clientY, offsetX, offsetY, fromScale, toScale, }: {
+    x: number;
+    y: number;
+    clientX: number;
+    clientY: number;
+    offsetX?: number;
+    offsetY?: number;
+    fromScale: number;
+    toScale: number;
+}): {
+    x: number;
+    y: number;
+    scale: number;
+    lastMoveClientX: number;
+    lastMoveClientY: number;
+};

dist/utils/getSuitableImageSize.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 获取图片合适的大小
+ */
+export default function getSuitableImageSize(naturalWidth: number, naturalHeight: number, rotate: number): {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    scale: number;
+};

dist/utils/isTouchDevice.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 是否支持触摸设备
+ */
+declare const isTouchDevice: boolean;
+export default isTouchDevice;

dist/utils/slideToPosition.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 适应到合适的图片偏移量
+ */
+export default function slideToPosition({ x, y, lastX, lastY, width, height, scale, rotate, touchedTime, }: {
+    x: number;
+    y: number;
+    lastX: number;
+    lastY: number;
+    width: number;
+    height: number;
+    scale: number;
+    rotate: number;
+    touchedTime: number;
+}): {
+    x: number;
+    y: number;
+};

dist/utils/throttle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="lodash" />
+/**
+ * throttle
+ * @param func
+ * @param wait
+ */
+export default function throttle(func: any, wait: number): import("lodash").DebouncedFunc<any>;

dist/utils/useMountedState.d.ts

@@ -0,0 +1 @@
+export default function useMountedState(): () => boolean;

dist/utils/withContinuousTap.d.ts

@@ -0,0 +1,8 @@
+export declare type TapFuncType<T> = (...args: T[]) => void;
+/**
+ * 单击和双击事件处理
+ * @param singleTap - 单击事件
+ * @param doubleTap - 双击事件
+ * @return invokeTap
+ */
+export default function withContinuousTap<T>(singleTap: TapFuncType<T>, doubleTap: TapFuncType<T>): TapFuncType<T>;

dist/variables.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 最大触摸时间
+ */
+export declare const maxTouchTime: number;
+/**
+ * 最大滑动切换图片距离
+ */
+export declare const maxMoveOffset: number;
+/**
+ * 图片的间隔
+ */
+export declare const horizontalOffset: number;
+/**
+ * 最小初始响应距离
+ */
+export declare const minStartTouchOffset: number;
+/**
+ * 默认背景透明度
+ */
+export declare const defaultOpacity: number;
+/**
+ * 最小缩放度
+ */
+export declare const minScale: number;
+/**
+ * 最大缩放度（若图片足够大，则会超出）
+ */
+export declare const maxScale: number;
+/**
+ * 滑动加速度
+ */
+export declare const slideAcceleration: number;
+/**
+ * 缩放弹性缓冲
+ */
+export declare const scaleBuffer: number;