eli-video-interview 1.2.39 → 1.2.40-alpha.10

package/lib/components/react-photo-view/PhotoProvider.js

@@ -0,0 +1,104 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useMethods_1 = __importDefault(require("./hooks/useMethods"));
+var useSetState_1 = __importDefault(require("./hooks/useSetState"));
+var photo_context_1 = __importDefault(require("./photo-context"));
+var PhotoSlider_1 = __importDefault(require("./PhotoSlider"));
+var initialState = {
+    images: [],
+    visible: false,
+    index: 0,
+};
+function PhotoProvider(_a) {
+    var children = _a.children, onIndexChange = _a.onIndexChange, onVisibleChange = _a.onVisibleChange, restProps = __rest(_a, ["children", "onIndexChange", "onVisibleChange"]);
+    var _b = (0, useSetState_1.default)(initialState), state = _b[0], updateState = _b[1];
+    var uniqueIdRef = (0, react_1.useRef)(0);
+    var images = state.images, visible = state.visible, index = state.index;
+    var methods = (0, useMethods_1.default)({
+        nextId: function () {
+            return (uniqueIdRef.current += 1);
+        },
+        update: function (imageItem) {
+            var currentIndex = images.findIndex(function (n) { return n.key === imageItem.key; });
+            if (currentIndex > -1) {
+                var nextImages = images.slice();
+                nextImages.splice(currentIndex, 1, imageItem);
+                updateState({
+                    images: nextImages,
+                });
+                return;
+            }
+            updateState(function (prev) { return ({
+                images: prev.images.concat(imageItem),
+            }); });
+        },
+        remove: function (key) {
+            updateState(function (prev) {
+                var nextImages = prev.images.filter(function (item) { return item.key !== key; });
+                var nextEndIndex = nextImages.length - 1;
+                return {
+                    images: nextImages,
+                    index: Math.min(nextEndIndex, index),
+                };
+            });
+        },
+        show: function (key) {
+            var currentIndex = images.findIndex(function (item) { return item.key === key; });
+            updateState({
+                visible: true,
+                index: currentIndex,
+            });
+            if (onVisibleChange) {
+                onVisibleChange(true, currentIndex, state);
+            }
+        },
+    });
+    var fn = (0, useMethods_1.default)({
+        close: function () {
+            updateState({
+                visible: false,
+            });
+            if (onVisibleChange) {
+                onVisibleChange(false, index, state);
+            }
+        },
+        changeIndex: function (nextIndex) {
+            updateState({
+                index: nextIndex,
+            });
+            if (onIndexChange) {
+                onIndexChange(nextIndex, state);
+            }
+        },
+    });
+    var value = (0, react_1.useMemo)(function () { return (__assign(__assign({}, state), methods)); }, [state, methods]);
+    return ((0, jsx_runtime_1.jsxs)(photo_context_1.default.Provider, __assign({ value: value }, { children: [children, (0, jsx_runtime_1.jsx)(PhotoSlider_1.default, __assign({ images: images, visible: visible, index: index, onIndexChange: fn.changeIndex, onClose: fn.close }, restProps))] })));
+}
+exports.default = PhotoProvider;

package/lib/components/react-photo-view/PhotoSlider.css

@@ -0,0 +1,125 @@
+@keyframes PhotoView__fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,
+.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,
+.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,
+.PhotoView-Slider__clean .PhotoView-Slider__Overlay {
+  opacity: 0;
+}
+.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover {
+  opacity: 0;
+}
+.PhotoView-Slider__Backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #000000;
+  transition-property: background-color;
+  z-index: -1;
+}
+.PhotoView-Slider__fadeIn {
+  opacity: 0;
+  animation: PhotoView__fade linear both;
+}
+.PhotoView-Slider__fadeOut {
+  opacity: 0;
+  animation: PhotoView__fade linear both reverse;
+}
+.PhotoView-Slider__BannerWrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  color: white;
+  transition: opacity 0.2s ease-out;
+  z-index: 20;
+}
+.PhotoView-Slider__BannerWrap:hover {
+  opacity: 1;
+}
+.PhotoView-Slider__Counter {
+  padding: 0 10px;
+  font-size: 14px;
+  opacity: 0.75;
+}
+.PhotoView-Slider__BannerRight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  z-index: 20;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 24px;
+  margin-top: 16px;
+  margin-right: 16px;
+  background: rgba(0, 0, 0, 0.56);
+}
+.PhotoView-Slider__BannerRight svg {
+  box-sizing: content-box;
+  padding: 10px;
+  width: 24px;
+  height: 24px;
+  fill: white;
+}
+.PhotoView-Slider__toolbarIcon {
+  box-sizing: border-box;
+  padding: 10px;
+  fill: white;
+  opacity: 0.75;
+  cursor: pointer;
+  transition: opacity 0.2s linear;
+}
+.PhotoView-Slider__toolbarIcon:hover {
+  opacity: 1;
+}
+.PhotoView-Slider__ArrowLeft,
+.PhotoView-Slider__ArrowRight {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  height: 56px;
+  margin: auto;
+  opacity: 0.75;
+  z-index: 20;
+  cursor: pointer;
+  user-select: none;
+  transition: opacity 0.2s linear;
+  border-radius: 28px;
+  background: rgba(0, 0, 0, 0.56);
+}
+.PhotoView-Slider__ArrowLeft:hover,
+.PhotoView-Slider__ArrowRight:hover {
+  opacity: 1;
+}
+.PhotoView-Slider__ArrowLeft svg,
+.PhotoView-Slider__ArrowRight svg {
+  box-sizing: content-box;
+  padding: 10px;
+  width: 24px;
+  height: 24px;
+  fill: white;
+}
+.PhotoView-Slider__ArrowLeft {
+  left: 24px;
+}
+.PhotoView-Slider__ArrowRight {
+  right: 24px;
+}

package/lib/components/react-photo-view/PhotoSlider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './PhotoSlider.css';
+import type { DataType, PhotoProviderBase } from './types';
+export interface IPhotoSliderProps extends PhotoProviderBase {
+    images: DataType[];
+    index?: number;
+    onIndexChange?: (index: number) => void;
+    visible: boolean;
+    onClose: (evt?: React.MouseEvent | React.TouchEvent) => void;
+    afterClose?: () => void;
+}
+export default function PhotoSlider(props: IPhotoSliderProps): JSX.Element | null;

package/lib/components/react-photo-view/PhotoSlider.js

@@ -0,0 +1,268 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ArrowLeft_1 = __importDefault(require("./components/ArrowLeft"));
+var ArrowRight_1 = __importDefault(require("./components/ArrowRight"));
+var CloseIcon_1 = __importDefault(require("./components/CloseIcon"));
+var PreventScroll_1 = __importDefault(require("./components/PreventScroll"));
+var SlidePortal_1 = __importDefault(require("./components/SlidePortal"));
+var useAdjacentImages_1 = __importDefault(require("./hooks/useAdjacentImages"));
+var useAnimationVisible_1 = __importDefault(require("./hooks/useAnimationVisible"));
+var useEventListener_1 = __importDefault(require("./hooks/useEventListener"));
+var useIsomorphicLayoutEffect_1 = __importDefault(require("./hooks/useIsomorphicLayoutEffect"));
+var useMethods_1 = __importDefault(require("./hooks/useMethods"));
+var useSetState_1 = __importDefault(require("./hooks/useSetState"));
+var PhotoBox_1 = __importDefault(require("./PhotoBox"));
+require("./PhotoSlider.css");
+var isTouchDevice_1 = __importDefault(require("./utils/isTouchDevice"));
+var limitTarget_1 = require("./utils/limitTarget");
+var variables_1 = require("./variables");
+var initialState = {
+    x: 0,
+    touched: false,
+    pause: false,
+    lastCX: undefined,
+    lastCY: undefined,
+    bg: undefined,
+    lastBg: undefined,
+    overlay: true,
+    minimal: true,
+    scale: 1,
+    rotate: 0,
+};
+function PhotoSlider(props) {
+    var _a = props.loop, loop = _a === void 0 ? 3 : _a, speedFn = props.speed, easingFn = props.easing, photoClosable = props.photoClosable, _b = props.maskClosable, maskClosable = _b === void 0 ? true : _b, _c = props.maskOpacity, maskOpacity = _c === void 0 ? variables_1.defaultOpacity : _c, _d = props.pullClosable, pullClosable = _d === void 0 ? true : _d, _e = props.bannerVisible, bannerVisible = _e === void 0 ? true : _e, overlayRender = props.overlayRender, toolbarRender = props.toolbarRender, className = props.className, maskClassName = props.maskClassName, photoClassName = props.photoClassName, photoWrapClassName = props.photoWrapClassName, loadingElement = props.loadingElement, brokenElement = props.brokenElement, images = props.images, _f = props.index, controlledIndex = _f === void 0 ? 0 : _f, controlledIndexChange = props.onIndexChange, visible = props.visible, onClose = props.onClose, afterClose = props.afterClose, portalContainer = props.portalContainer;
+    var _g = (0, useSetState_1.default)(initialState), state = _g[0], updateState = _g[1];
+    var _h = (0, react_1.useState)(0), innerIndex = _h[0], updateInnerIndex = _h[1];
+    var x = state.x, touched = state.touched, pause = state.pause, lastCX = state.lastCX, lastCY = state.lastCY, _j = state.bg, bg = _j === void 0 ? maskOpacity : _j, lastBg = state.lastBg, overlay = state.overlay, minimal = state.minimal, scale = state.scale, rotate = state.rotate, onScale = state.onScale, onRotate = state.onRotate;
+    // 受控 index
+    // eslint-disable-next-line no-prototype-builtins
+    var isControlled = props.hasOwnProperty('index');
+    var index = isControlled ? controlledIndex : innerIndex;
+    var onIndexChange = isControlled ? controlledIndexChange : updateInnerIndex;
+    // 内部虚拟 index
+    var virtualIndexRef = (0, react_1.useRef)(index);
+    // 当前图片
+    var imageLength = images.length;
+    var currentImage = images[index];
+    // 是否开启
+    // noinspection SuspiciousTypeOfGuard
+    var enableLoop = typeof loop === 'boolean' ? loop : imageLength > loop;
+    // 显示动画处理
+    var _k = (0, useAnimationVisible_1.default)(visible, afterClose), realVisible = _k[0], activeAnimation = _k[1], onAnimationEnd = _k[2];
+    (0, useIsomorphicLayoutEffect_1.default)(function () {
+        // 显示弹出层，修正正确的指向
+        if (realVisible) {
+            updateState({
+                pause: true,
+                x: index * -(window.innerWidth + variables_1.horizontalOffset),
+            });
+            virtualIndexRef.current = index;
+            return;
+        }
+        // 关闭后清空状态
+        updateState(initialState);
+    }, [realVisible]);
+    var _l = (0, useMethods_1.default)({
+        close: function (evt) {
+            if (onRotate) {
+                onRotate(0);
+            }
+            updateState({
+                overlay: true,
+                // 记录当前关闭时的透明度
+                lastBg: bg,
+            });
+            onClose(evt);
+        },
+        changeIndex: function (nextIndex, isPause) {
+            if (isPause === void 0) { isPause = false; }
+            // 当前索引
+            var currentIndex = enableLoop ? virtualIndexRef.current + (nextIndex - index) : nextIndex;
+            var max = imageLength - 1;
+            // 虚拟 index
+            // 非循环模式，限制区间
+            var limitIndex = (0, limitTarget_1.limitNumber)(currentIndex, 0, max);
+            var nextVirtualIndex = enableLoop ? currentIndex : limitIndex;
+            // 单个屏幕宽度
+            var singlePageWidth = window.innerWidth + variables_1.horizontalOffset;
+            updateState({
+                touched: false,
+                lastCX: undefined,
+                lastCY: undefined,
+                x: -singlePageWidth * nextVirtualIndex,
+                pause: isPause,
+            });
+            virtualIndexRef.current = nextVirtualIndex;
+            // 更新真实的 index
+            var realLoopIndex = nextIndex < 0 ? max : nextIndex > max ? 0 : nextIndex;
+            if (onIndexChange) {
+                onIndexChange(enableLoop ? realLoopIndex : limitIndex);
+            }
+        },
+    }), close = _l.close, changeIndex = _l.changeIndex;
+    (0, useEventListener_1.default)('keydown', function (evt) {
+        if (visible) {
+            switch (evt.key) {
+                case 'ArrowLeft':
+                    changeIndex(index - 1, true);
+                    break;
+                case 'ArrowRight':
+                    changeIndex(index + 1, true);
+                    break;
+                case 'Escape':
+                    close();
+                    break;
+            }
+        }
+    });
+    function handlePhotoTap(closeable) {
+        return closeable ? close() : updateState({ overlay: !overlay });
+    }
+    function handleResize() {
+        updateState({
+            x: -(window.innerWidth + variables_1.horizontalOffset) * index,
+            lastCX: undefined,
+            lastCY: undefined,
+            pause: true,
+        });
+        virtualIndexRef.current = index;
+    }
+    function handleReachVerticalMove(clientY, nextScale) {
+        if (lastCY === undefined) {
+            updateState({
+                touched: true,
+                lastCY: clientY,
+                bg: bg,
+                minimal: true,
+            });
+            return;
+        }
+        var opacity = maskOpacity === null ? null : (0, limitTarget_1.limitNumber)(maskOpacity, 0.01, maskOpacity - Math.abs(clientY - lastCY) / 100 / 4);
+        updateState({
+            touched: true,
+            lastCY: lastCY,
+            bg: nextScale === 1 ? opacity : maskOpacity,
+            minimal: nextScale === 1,
+        });
+    }
+    function handleReachHorizontalMove(clientX) {
+        if (lastCX === undefined) {
+            updateState({
+                touched: true,
+                lastCX: clientX,
+                x: x,
+                pause: false,
+            });
+            return;
+        }
+        var originOffsetClientX = clientX - lastCX;
+        var offsetClientX = originOffsetClientX;
+        // 第一张和最后一张超出距离减半
+        if (!enableLoop && ((index === 0 && originOffsetClientX > 0) || (index === imageLength - 1 && originOffsetClientX < 0))) {
+            offsetClientX = originOffsetClientX / 2;
+        }
+        updateState({
+            touched: true,
+            lastCX: lastCX,
+            x: -(window.innerWidth + variables_1.horizontalOffset) * virtualIndexRef.current + offsetClientX,
+            pause: false,
+        });
+    }
+    function handleReachMove(reachPosition, clientX, clientY, nextScale) {
+        if (reachPosition === 'x') {
+            handleReachHorizontalMove(clientX);
+        }
+        else if (reachPosition === 'y') {
+            handleReachVerticalMove(clientY, nextScale);
+        }
+    }
+    function handleReachUp(clientX, clientY) {
+        var offsetClientX = clientX - (lastCX !== null && lastCX !== void 0 ? lastCX : clientX);
+        var offsetClientY = clientY - (lastCY !== null && lastCY !== void 0 ? lastCY : clientY);
+        var willClose = false;
+        // 下一张
+        if (offsetClientX < -variables_1.maxMoveOffset) {
+            changeIndex(index + 1);
+            return;
+        }
+        // 上一张
+        if (offsetClientX > variables_1.maxMoveOffset) {
+            changeIndex(index - 1);
+            return;
+        }
+        var singlePageWidth = window.innerWidth + variables_1.horizontalOffset;
+        // 当前偏移
+        var currentTranslateX = -singlePageWidth * virtualIndexRef.current;
+        if (Math.abs(offsetClientY) > 100 && minimal && pullClosable) {
+            willClose = true;
+            close();
+        }
+        updateState({
+            touched: false,
+            x: currentTranslateX,
+            lastCX: undefined,
+            lastCY: undefined,
+            bg: maskOpacity,
+            overlay: willClose ? true : overlay,
+        });
+    }
+    // 截取相邻的图片
+    var adjacentImages = (0, useAdjacentImages_1.default)(images, index, enableLoop);
+    if (!realVisible) {
+        return null;
+    }
+    var currentOverlayVisible = overlay && !activeAnimation;
+    // 关闭过程中使用下拉保存的透明度
+    var currentOpacity = visible ? bg : lastBg;
+    // 覆盖物参数
+    var overlayParams = onScale &&
+        onRotate && {
+        images: images,
+        index: index,
+        visible: visible,
+        onClose: close,
+        onIndexChange: changeIndex,
+        overlayVisible: currentOverlayVisible,
+        overlay: currentImage && currentImage.overlay,
+        scale: scale,
+        rotate: rotate,
+        onScale: onScale,
+        onRotate: onRotate,
+    };
+    // 动画时间
+    var currentSpeed = speedFn ? speedFn(activeAnimation) : variables_1.defaultSpeed;
+    var currentEasing = easingFn ? easingFn(activeAnimation) : variables_1.defaultEasing;
+    var slideSpeed = speedFn ? speedFn(3) : variables_1.defaultSpeed + 200;
+    var slideEasing = easingFn ? easingFn(3) : variables_1.defaultEasing;
+    return ((0, jsx_runtime_1.jsxs)(SlidePortal_1.default, __assign({ className: "PhotoView-Portal".concat(!currentOverlayVisible ? ' PhotoView-Slider__clean' : '').concat(!visible ? ' PhotoView-Slider__willClose' : '').concat(className ? " ".concat(className) : ''), role: "dialog", onClick: function (e) { return e.stopPropagation(); }, container: portalContainer }, { children: [visible && (0, jsx_runtime_1.jsx)(PreventScroll_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: "PhotoView-Slider__Backdrop".concat(maskClassName ? " ".concat(maskClassName) : '').concat(activeAnimation === 1 ? ' PhotoView-Slider__fadeIn' : activeAnimation === 2 ? ' PhotoView-Slider__fadeOut' : ''), style: {
+                    background: currentOpacity ? "rgba(0, 0, 0, ".concat(currentOpacity, ")") : undefined,
+                    transitionTimingFunction: currentEasing,
+                    transitionDuration: "".concat(touched ? 0 : currentSpeed, "ms"),
+                    animationDuration: "".concat(currentSpeed, "ms"),
+                }, onAnimationEnd: onAnimationEnd }), bannerVisible && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "PhotoView-Slider__BannerWrap" }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "PhotoView-Slider__Counter" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "PhotoView-Slider__BannerRight" }, { children: [toolbarRender && overlayParams && toolbarRender(overlayParams), (0, jsx_runtime_1.jsx)(CloseIcon_1.default, { className: "PhotoView-Slider__toolbarIcon", onClick: close })] }))] }))), adjacentImages.map(function (item, currentIndex) {
+                // 截取之前的索引位置
+                var nextIndex = !enableLoop && index === 0 ? index + currentIndex : virtualIndexRef.current - 1 + currentIndex;
+                return ((0, jsx_runtime_1.jsx)(PhotoBox_1.default, { item: item, speed: currentSpeed, easing: currentEasing, visible: visible, onReachMove: handleReachMove, onReachUp: handleReachUp, onPhotoTap: function () { return handlePhotoTap(photoClosable); }, onMaskTap: function () { return handlePhotoTap(maskClosable); }, wrapClassName: photoWrapClassName, className: photoClassName, style: {
+                        left: "".concat((window.innerWidth + variables_1.horizontalOffset) * nextIndex, "px"),
+                        transform: "translate3d(".concat(x, "px, 0px, 0)"),
+                        transition: touched || pause ? undefined : "transform ".concat(slideSpeed, "ms ").concat(slideEasing),
+                    }, loadingElement: loadingElement, brokenElement: brokenElement, onPhotoResize: handleResize, isActive: (currentImage && currentImage.key) === item.key, expose: updateState }, enableLoop ? "".concat(item.key, "/").concat(item.src, "/").concat(nextIndex) : item.key));
+            }), !isTouchDevice_1.default && bannerVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(enableLoop || index !== 0) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "PhotoView-Slider__ArrowLeft", onClick: function () { return changeIndex(index - 1, true); } }, { children: (0, jsx_runtime_1.jsx)(ArrowLeft_1.default, {}) }))), (enableLoop || index + 1 < imageLength) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "PhotoView-Slider__ArrowRight", onClick: function () { return changeIndex(index + 1, true); } }, { children: (0, jsx_runtime_1.jsx)(ArrowRight_1.default, {}) })))] })), overlayRender && overlayParams && (0, jsx_runtime_1.jsx)("div", __assign({ className: "PhotoView-Slider__Overlay" }, { children: overlayRender(overlayParams) }))] })));
+}
+exports.default = PhotoSlider;

package/lib/components/react-photo-view/PhotoView.d.ts

@@ -0,0 +1,30 @@
+import type React from 'react';
+import type { PhotoRenderParams } from './types';
+export interface PhotoViewProps {
+    /**
+     * 图片地址
+     */
+    src?: string;
+    /**
+     * 自定义渲染，优先级比 src 低
+     */
+    render?: (props: PhotoRenderParams) => React.ReactNode;
+    /**
+     * 自定义覆盖节点
+     */
+    overlay?: React.ReactNode;
+    /**
+     * 自定义渲染节点宽度
+     */
+    width?: number;
+    /**
+     * 自定义渲染节点高度
+     */
+    height?: number;
+    /**
+     * 子节点，一般为缩略图
+     */
+    children?: React.ReactElement;
+}
+declare const PhotoView: React.FC<PhotoViewProps>;
+export default PhotoView;

package/lib/components/react-photo-view/PhotoView.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useInitial_1 = __importDefault(require("./hooks/useInitial"));
+var useMethods_1 = __importDefault(require("./hooks/useMethods"));
+var photo_context_1 = __importDefault(require("./photo-context"));
+var PhotoView = function (_a) {
+    var src = _a.src, render = _a.render, overlay = _a.overlay, width = _a.width, height = _a.height, children = _a.children;
+    var photoContext = (0, react_1.useContext)(photo_context_1.default);
+    var key = (0, useInitial_1.default)(function () { return photoContext.nextId(); });
+    var originRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        return function () {
+            photoContext.remove(key);
+        };
+    }, []);
+    function invokeChildrenFn(eventName, e) {
+        if (children) {
+            var eventFn = children.props[eventName];
+            if (eventFn) {
+                eventFn(e);
+            }
+        }
+    }
+    var fn = (0, useMethods_1.default)({
+        render: function (props) {
+            return render && render(props);
+        },
+        click: function (e) {
+            photoContext.show(key);
+            invokeChildrenFn('onClick', e);
+        },
+    });
+    (0, react_1.useEffect)(function () {
+        photoContext.update({
+            key: key,
+            src: src,
+            originRef: originRef,
+            render: fn.render,
+            overlay: overlay,
+            width: width,
+            height: height,
+        });
+    }, [src]);
+    if (children) {
+        return react_1.Children.only((0, react_1.cloneElement)(children, { onClick: fn.click, ref: originRef }));
+    }
+    return null;
+};
+exports.default = PhotoView;

package/lib/components/react-photo-view/components/ArrowLeft.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function ArrowLeft(props: React.HTMLAttributes<SVGElement>): JSX.Element;
+export default ArrowLeft;

package/lib/components/react-photo-view/components/ArrowLeft.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+function ArrowLeft(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", 
+            // eslint-disable-next-line max-len
+            d: "M8.81116012,11.2726407 L13.7609076,6.32289322 C14.1514319,5.93236893 14.7845969,5.93236893 15.1751212,6.32289322 C15.5656454,6.71341751 15.5656454,7.34658249 15.1751212,7.73710678 L10.907,12.004 L15.1751212,16.2726407 C15.5656454,16.663165 15.5656454,17.29633 15.1751212,17.6868542 C14.7845969,18.0773785 14.1514319,18.0773785 13.7609076,17.6868542 L8.81116012,12.7371068 C8.63091814,12.5568648 8.53386477,12.324936 8.52,12.0890314 L8.52,11.9207161 C8.53386477,11.6848114 8.63091814,11.4528827 8.81116012,11.2726407 Z" }) })));
+}
+exports.default = ArrowLeft;

package/lib/components/react-photo-view/components/ArrowRight.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function ArrowRight(props: React.HTMLAttributes<SVGElement>): JSX.Element;
+export default ArrowRight;

package/lib/components/react-photo-view/components/ArrowRight.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+function ArrowRight(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", 
+            // eslint-disable-next-line max-len
+            d: "M15.1768542,12.7371068 L10.2271068,17.6868542 C9.83658249,18.0773785 9.20341751,18.0773785 8.81289322,17.6868542 C8.42236893,17.29633 8.42236893,16.663165 8.81289322,16.2726407 L13.08,12.004 L8.81289322,7.73710678 C8.42236893,7.34658249 8.42236893,6.71341751 8.81289322,6.32289322 C9.20341751,5.93236893 9.83658249,5.93236893 10.2271068,6.32289322 L15.1768542,11.2726407 C15.3570962,11.4528827 15.4541496,11.6848114 15.4680144,11.9207161 L15.4680144,12.0890314 C15.4541496,12.324936 15.3570962,12.5568648 15.1768542,12.7371068 Z" }) })));
+}
+exports.default = ArrowRight;

package/lib/components/react-photo-view/components/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function CloseIcon(props: React.HTMLAttributes<SVGElement>): JSX.Element;
+export default CloseIcon;

package/lib/components/react-photo-view/components/CloseIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+function CloseIcon(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "44", height: "44", viewBox: "0 0 768 768" }, props, { children: (0, jsx_runtime_1.jsx)("path", { 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" }) })));
+}
+exports.default = CloseIcon;

package/lib/components/react-photo-view/components/PreventScroll.d.ts

@@ -0,0 +1 @@
+export default function PreventScroll(): null;