eli-video-interview 1.2.38 → 1.2.39-alpha.2

package/esm/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/esm/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/esm/components/react-photo-view/PhotoSlider.js

@@ -0,0 +1,262 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import ArrowLeft from './components/ArrowLeft';
+import ArrowRight from './components/ArrowRight';
+import CloseIcon from './components/CloseIcon';
+import PreventScroll from './components/PreventScroll';
+import SlidePortal from './components/SlidePortal';
+import useAdjacentImages from './hooks/useAdjacentImages';
+import useAnimationVisible from './hooks/useAnimationVisible';
+import useEventListener from './hooks/useEventListener';
+import useIsomorphicLayoutEffect from './hooks/useIsomorphicLayoutEffect';
+import useMethods from './hooks/useMethods';
+import useSetState from './hooks/useSetState';
+import PhotoBox from './PhotoBox';
+import './PhotoSlider.css';
+import isTouchDevice from './utils/isTouchDevice';
+import { limitNumber } from './utils/limitTarget';
+import { defaultEasing, defaultOpacity, defaultSpeed, horizontalOffset, maxMoveOffset } from './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,
+};
+export default 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 ? 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 = useSetState(initialState), state = _g[0], updateState = _g[1];
+    var _h = 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 = useRef(index);
+    // 当前图片
+    var imageLength = images.length;
+    var currentImage = images[index];
+    // 是否开启
+    // noinspection SuspiciousTypeOfGuard
+    var enableLoop = typeof loop === 'boolean' ? loop : imageLength > loop;
+    // 显示动画处理
+    var _k = useAnimationVisible(visible, afterClose), realVisible = _k[0], activeAnimation = _k[1], onAnimationEnd = _k[2];
+    useIsomorphicLayoutEffect(function () {
+        // 显示弹出层，修正正确的指向
+        if (realVisible) {
+            updateState({
+                pause: true,
+                x: index * -(window.innerWidth + horizontalOffset),
+            });
+            virtualIndexRef.current = index;
+            return;
+        }
+        // 关闭后清空状态
+        updateState(initialState);
+    }, [realVisible]);
+    var _l = useMethods({
+        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 = limitNumber(currentIndex, 0, max);
+            var nextVirtualIndex = enableLoop ? currentIndex : limitIndex;
+            // 单个屏幕宽度
+            var singlePageWidth = window.innerWidth + 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;
+    useEventListener('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 + 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 : 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 + 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 < -maxMoveOffset) {
+            changeIndex(index + 1);
+            return;
+        }
+        // 上一张
+        if (offsetClientX > maxMoveOffset) {
+            changeIndex(index - 1);
+            return;
+        }
+        var singlePageWidth = window.innerWidth + 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 = useAdjacentImages(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) : defaultSpeed;
+    var currentEasing = easingFn ? easingFn(activeAnimation) : defaultEasing;
+    var slideSpeed = speedFn ? speedFn(3) : defaultSpeed + 200;
+    var slideEasing = easingFn ? easingFn(3) : defaultEasing;
+    return (_jsxs(SlidePortal, __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 && _jsx(PreventScroll, {}), _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 && (_jsxs("div", __assign({ className: "PhotoView-Slider__BannerWrap" }, { children: [_jsx("div", { className: "PhotoView-Slider__Counter" }), _jsxs("div", __assign({ className: "PhotoView-Slider__BannerRight" }, { children: [toolbarRender && overlayParams && toolbarRender(overlayParams), _jsx(CloseIcon, { className: "PhotoView-Slider__toolbarIcon", onClick: close })] }))] }))), adjacentImages.map(function (item, currentIndex) {
+                // 截取之前的索引位置
+                var nextIndex = !enableLoop && index === 0 ? index + currentIndex : virtualIndexRef.current - 1 + currentIndex;
+                return (_jsx(PhotoBox, { 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 + 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 && bannerVisible && (_jsxs(_Fragment, { children: [(enableLoop || index !== 0) && (_jsx("div", __assign({ className: "PhotoView-Slider__ArrowLeft", onClick: function () { return changeIndex(index - 1, true); } }, { children: _jsx(ArrowLeft, {}) }))), (enableLoop || index + 1 < imageLength) && (_jsx("div", __assign({ className: "PhotoView-Slider__ArrowRight", onClick: function () { return changeIndex(index + 1, true); } }, { children: _jsx(ArrowRight, {}) })))] })), overlayRender && overlayParams && _jsx("div", __assign({ className: "PhotoView-Slider__Overlay" }, { children: overlayRender(overlayParams) }))] })));
+}

package/esm/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/esm/components/react-photo-view/PhotoView.js

@@ -0,0 +1,48 @@
+import { Children, cloneElement, useContext, useEffect, useRef } from 'react';
+import useInitial from './hooks/useInitial';
+import useMethods from './hooks/useMethods';
+import PhotoContext from './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 = useContext(PhotoContext);
+    var key = useInitial(function () { return photoContext.nextId(); });
+    var originRef = useRef(null);
+    useEffect(function () {
+        return function () {
+            photoContext.remove(key);
+        };
+    }, []);
+    function invokeChildrenFn(eventName, e) {
+        if (children) {
+            var eventFn = children.props[eventName];
+            if (eventFn) {
+                eventFn(e);
+            }
+        }
+    }
+    var fn = useMethods({
+        render: function (props) {
+            return render && render(props);
+        },
+        click: function (e) {
+            photoContext.show(key);
+            invokeChildrenFn('onClick', e);
+        },
+    });
+    useEffect(function () {
+        photoContext.update({
+            key: key,
+            src: src,
+            originRef: originRef,
+            render: fn.render,
+            overlay: overlay,
+            width: width,
+            height: height,
+        });
+    }, [src]);
+    if (children) {
+        return Children.only(cloneElement(children, { onClick: fn.click, ref: originRef }));
+    }
+    return null;
+};
+export default PhotoView;

package/esm/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/esm/components/react-photo-view/components/ArrowLeft.js

@@ -0,0 +1,18 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+function ArrowLeft(props) {
+    return (_jsx("svg", __assign({ focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, props, { children: _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" }) })));
+}
+export default ArrowLeft;

package/esm/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/esm/components/react-photo-view/components/ArrowRight.js

@@ -0,0 +1,18 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+function ArrowRight(props) {
+    return (_jsx("svg", __assign({ focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, props, { children: _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" }) })));
+}
+export default ArrowRight;

package/esm/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/esm/components/react-photo-view/components/CloseIcon.js

@@ -0,0 +1,16 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+function CloseIcon(props) {
+    return (_jsx("svg", __assign({ width: "44", height: "44", viewBox: "0 0 768 768" }, props, { children: _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" }) })));
+}
+export default CloseIcon;

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

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

package/esm/components/react-photo-view/components/PreventScroll.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+export default function PreventScroll() {
+    useEffect(function () {
+        var style = document.body.style;
+        var lastOverflow = style.overflow;
+        style.overflow = 'hidden';
+        return function () {
+            style.overflow = lastOverflow;
+        };
+    }, []);
+    return null;
+}

package/esm/components/react-photo-view/components/SlidePortal.css

@@ -0,0 +1,10 @@
+.PhotoView-Portal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+  overflow: hidden;
+  touch-action: none;
+}

package/esm/components/react-photo-view/components/SlidePortal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './SlidePortal.css';
+export interface ISliderPortalProps extends React.HTMLAttributes<HTMLDivElement> {
+    container?: HTMLElement;
+}
+declare function SlidePortal({ container, ...rest }: ISliderPortalProps): React.ReactPortal;
+export default SlidePortal;

package/esm/components/react-photo-view/components/SlidePortal.js

@@ -0,0 +1,30 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import './SlidePortal.css';
+function SlidePortal(_a) {
+    var _b = _a.container, container = _b === void 0 ? document.body : _b, rest = __rest(_a, ["container"]);
+    return createPortal(_jsx("div", __assign({}, rest)), container);
+}
+export default SlidePortal;

package/esm/components/react-photo-view/components/Spinner.css

@@ -0,0 +1,23 @@
+@keyframes PhotoView__rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes PhotoView__delayIn {
+  0%,
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PhotoView__Spinner {
+  animation: PhotoView__delayIn 0.4s linear both;
+}
+.PhotoView__Spinner svg {
+  animation: PhotoView__rotate 0.6s linear infinite;
+}

package/esm/components/react-photo-view/components/Spinner.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Spinner.css';
+declare function Spinner({ className, ...props }: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export default Spinner;