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

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

@@ -0,0 +1,308 @@
+"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 useAnimationPosition_1 = __importDefault(require("./hooks/useAnimationPosition"));
+var useContinuousTap_1 = __importDefault(require("./hooks/useContinuousTap"));
+var useDebounceCallback_1 = __importDefault(require("./hooks/useDebounceCallback"));
+var useEventListener_1 = __importDefault(require("./hooks/useEventListener"));
+var useIsomorphicLayoutEffect_1 = __importDefault(require("./hooks/useIsomorphicLayoutEffect"));
+var useMethods_1 = __importDefault(require("./hooks/useMethods"));
+var useMountedRef_1 = __importDefault(require("./hooks/useMountedRef"));
+var useScrollPosition_1 = __importDefault(require("./hooks/useScrollPosition"));
+var useSetState_1 = __importDefault(require("./hooks/useSetState"));
+var Photo_1 = __importDefault(require("./Photo"));
+require("./PhotoBox.css");
+var edgeHandle_1 = require("./utils/edgeHandle");
+var getMultipleTouchPosition_1 = __importDefault(require("./utils/getMultipleTouchPosition"));
+var getPositionOnMoveOrScale_1 = __importDefault(require("./utils/getPositionOnMoveOrScale"));
+var getRotateSize_1 = __importDefault(require("./utils/getRotateSize"));
+var getSuitableImageSize_1 = __importDefault(require("./utils/getSuitableImageSize"));
+var isTouchDevice_1 = __importDefault(require("./utils/isTouchDevice"));
+var limitTarget_1 = require("./utils/limitTarget");
+var variables_1 = require("./variables");
+var initialState = {
+    // 真实宽度
+    naturalWidth: undefined,
+    // 真实高度
+    naturalHeight: undefined,
+    // 宽度
+    width: undefined,
+    // 高度
+    height: undefined,
+    // 加载成功状态
+    loaded: undefined,
+    // 破碎状态
+    broken: false,
+    // 图片 X 偏移量
+    x: 0,
+    // 图片 y 偏移量
+    y: 0,
+    // 图片处于触摸的状态
+    touched: false,
+    // 背景处于触摸状态
+    maskTouched: false,
+    // 旋转状态
+    rotate: 0,
+    // 放大缩小
+    scale: 1,
+    // 触摸开始时 x 原始坐标
+    CX: 0,
+    // 触摸开始时 y 原始坐标
+    CY: 0,
+    // 触摸开始时图片 x 偏移量
+    lastX: 0,
+    // 触摸开始时图片 y 偏移量
+    lastY: 0,
+    // 上一个触摸状态 x 原始坐标
+    lastCX: 0,
+    // 上一个触摸状态 y 原始坐标
+    lastCY: 0,
+    // 上一个触摸状态的 scale
+    lastScale: 1,
+    // 触摸开始时时间
+    touchTime: 0,
+    // 多指触控间距
+    touchLength: 0,
+    // 是否暂停 transition
+    pause: true,
+    // 停止 Raf
+    stopRaf: true,
+    // 当前边缘触发状态
+    reach: undefined,
+};
+function PhotoBox(_a) {
+    var _b = _a.item, src = _b.src, render = _b.render, _c = _b.width, customWidth = _c === void 0 ? 0 : _c, _d = _b.height, customHeight = _d === void 0 ? 0 : _d, originRef = _b.originRef, visible = _a.visible, speed = _a.speed, easing = _a.easing, wrapClassName = _a.wrapClassName, className = _a.className, style = _a.style, loadingElement = _a.loadingElement, brokenElement = _a.brokenElement, onPhotoTap = _a.onPhotoTap, onMaskTap = _a.onMaskTap, onReachMove = _a.onReachMove, onReachUp = _a.onReachUp, onPhotoResize = _a.onPhotoResize, isActive = _a.isActive, expose = _a.expose;
+    var _e = (0, useSetState_1.default)(initialState), state = _e[0], updateState = _e[1];
+    var initialTouchRef = (0, react_1.useRef)(0);
+    var mounted = (0, useMountedRef_1.default)();
+    var _f = state.naturalWidth, naturalWidth = _f === void 0 ? customWidth : _f, _g = state.naturalHeight, naturalHeight = _g === void 0 ? customHeight : _g, _h = state.width, width = _h === void 0 ? customWidth : _h, _j = state.height, height = _j === void 0 ? customHeight : _j, _k = state.loaded, loaded = _k === void 0 ? !src : _k, broken = state.broken, x = state.x, y = state.y, touched = state.touched, stopRaf = state.stopRaf, maskTouched = state.maskTouched, rotate = state.rotate, scale = state.scale, CX = state.CX, CY = state.CY, lastX = state.lastX, lastY = state.lastY, lastCX = state.lastCX, lastCY = state.lastCY, lastScale = state.lastScale, touchTime = state.touchTime, touchLength = state.touchLength, pause = state.pause, reach = state.reach;
+    var fn = (0, useMethods_1.default)({
+        onScale: function (current) { return onScale((0, limitTarget_1.limitScale)(current)); },
+        onRotate: function (current) {
+            if (rotate !== current) {
+                expose({ rotate: current });
+                updateState(__assign({ rotate: current }, (0, getSuitableImageSize_1.default)(naturalWidth, naturalHeight, current)));
+            }
+        },
+    });
+    // 默认为屏幕中心缩放
+    function onScale(current, clientX, clientY) {
+        if (scale !== current) {
+            expose({ scale: current });
+            updateState(__assign(__assign({ scale: current }, (0, getPositionOnMoveOrScale_1.default)(x, y, width, height, scale, current, clientX, clientY)), (current <= 1 && { x: 0, y: 0 })));
+        }
+    }
+    var handleMove = (0, useDebounceCallback_1.default)(function (nextClientX, nextClientY, currentTouchLength) {
+        if (currentTouchLength === void 0) { currentTouchLength = 0; }
+        if ((touched || maskTouched) && isActive) {
+            // 通过旋转调换宽高
+            var _a = (0, getRotateSize_1.default)(rotate, width, height), currentWidth_1 = _a[0], currentHeight_1 = _a[1];
+            // 单指最小缩放下，以初始移动距离来判断意图
+            if (currentTouchLength === 0 && initialTouchRef.current === 0) {
+                var isStillX = Math.abs(nextClientX - CX) <= variables_1.minStartTouchOffset;
+                var isStillY = Math.abs(nextClientY - CY) <= variables_1.minStartTouchOffset;
+                // 初始移动距离不足
+                if (isStillX && isStillY) {
+                    // 方向记录上次移动距离，以便平滑过渡
+                    updateState({ lastCX: nextClientX, lastCY: nextClientY });
+                    return;
+                }
+                // 设置响应状态
+                initialTouchRef.current = !isStillX ? 1 : nextClientY > CY ? 3 : 2;
+            }
+            var offsetX = nextClientX - lastCX;
+            var offsetY = nextClientY - lastCY;
+            // 边缘触发状态
+            var currentReach = undefined;
+            if (currentTouchLength === 0) {
+                // 边缘超出状态
+                var horizontalCloseEdge = (0, edgeHandle_1.computePositionEdge)(offsetX + lastX, scale, currentWidth_1, window.innerWidth)[0];
+                var verticalCloseEdge = (0, edgeHandle_1.computePositionEdge)(offsetY + lastY, scale, currentHeight_1, window.innerHeight)[0];
+                // 边缘触发检测
+                currentReach = (0, edgeHandle_1.getReachType)(initialTouchRef.current, horizontalCloseEdge, verticalCloseEdge, reach);
+                // 接触边缘
+                if (currentReach !== undefined) {
+                    onReachMove(currentReach, nextClientX, nextClientY, scale);
+                }
+            }
+            // 横向边缘触发、背景触发禁用当前滑动
+            if (currentReach === 'x' || maskTouched) {
+                updateState({ reach: 'x' });
+                return;
+            }
+            // 目标倍数
+            var toScale = (0, limitTarget_1.limitScale)(scale + ((currentTouchLength - touchLength) / 100 / 2) * scale, naturalWidth / width, variables_1.scaleBuffer);
+            // 导出变量
+            expose({ scale: toScale });
+            updateState(__assign({ touchLength: currentTouchLength, reach: currentReach, scale: toScale }, (0, getPositionOnMoveOrScale_1.default)(x, y, width, height, scale, toScale, nextClientX, nextClientY, offsetX, offsetY)));
+        }
+    }, {
+        maxWait: 8,
+    });
+    function updateRaf(position) {
+        if (stopRaf || touched) {
+            return false;
+        }
+        if (mounted.current) {
+            // 下拉关闭时可以有动画
+            updateState(__assign(__assign({}, position), { pause: visible }));
+        }
+        return mounted.current;
+    }
+    var slideToPosition = (0, useScrollPosition_1.default)(function (nextX) { return updateRaf({ x: nextX }); }, function (nextY) { return updateRaf({ y: nextY }); }, function (nextScale) {
+        if (mounted.current) {
+            expose({ scale: nextScale });
+            updateState({ scale: nextScale });
+        }
+        return !touched && mounted.current;
+    });
+    var handlePhotoTap = (0, useContinuousTap_1.default)(onPhotoTap, function (currentClientX, currentClientY) {
+        if (!reach) {
+            // 若图片足够大，则放大适应的倍数
+            var endScale = scale !== 1 ? 1 : Math.max(2, naturalWidth / width);
+            onScale(endScale, currentClientX, currentClientY);
+        }
+    });
+    function handleUp(nextClientX, nextClientY) {
+        // 重置响应状态
+        initialTouchRef.current = 0;
+        if ((touched || maskTouched) && isActive) {
+            updateState({
+                touched: false,
+                maskTouched: false,
+                pause: false,
+                stopRaf: false,
+                reach: undefined,
+            });
+            var safeScale = (0, limitTarget_1.limitScale)(scale, naturalWidth / width);
+            // Go
+            slideToPosition(x, y, lastX, lastY, width, height, scale, safeScale, lastScale, rotate, touchTime);
+            onReachUp(nextClientX, nextClientY);
+            // 触发 Tap 事件
+            if (CX === nextClientX && CY === nextClientY) {
+                if (touched) {
+                    handlePhotoTap(nextClientX, nextClientY);
+                    return;
+                }
+                if (maskTouched) {
+                    onMaskTap(nextClientX, nextClientY);
+                }
+            }
+        }
+    }
+    (0, useEventListener_1.default)(isTouchDevice_1.default ? undefined : 'mousemove', function (e) {
+        e.preventDefault();
+        handleMove(e.clientX, e.clientY);
+    });
+    (0, useEventListener_1.default)(isTouchDevice_1.default ? undefined : 'mouseup', function (e) {
+        handleUp(e.clientX, e.clientY);
+    });
+    (0, useEventListener_1.default)(isTouchDevice_1.default ? 'touchmove' : undefined, function (e) {
+        e.preventDefault();
+        var position = (0, getMultipleTouchPosition_1.default)(e);
+        handleMove.apply(void 0, position);
+    }, { passive: false });
+    (0, useEventListener_1.default)(isTouchDevice_1.default ? 'touchend' : undefined, function (_a) {
+        var changedTouches = _a.changedTouches;
+        var touch = changedTouches[0];
+        handleUp(touch.clientX, touch.clientY);
+    }, { passive: false });
+    (0, useEventListener_1.default)('resize', (0, useDebounceCallback_1.default)(function () {
+        if (loaded && !touched) {
+            updateState((0, getSuitableImageSize_1.default)(naturalWidth, naturalHeight, rotate));
+            onPhotoResize();
+        }
+    }, { maxWait: 8 }));
+    (0, useIsomorphicLayoutEffect_1.default)(function () {
+        if (isActive) {
+            expose(__assign({ scale: scale, rotate: rotate }, fn));
+        }
+    }, [isActive]);
+    function handlePhotoLoad(params) {
+        updateState(__assign(__assign({}, params), (params.loaded && (0, getSuitableImageSize_1.default)(params.naturalWidth || 0, params.naturalHeight || 0, rotate))));
+    }
+    function handleStart(currentClientX, currentClientY, currentTouchLength) {
+        if (currentTouchLength === void 0) { currentTouchLength = 0; }
+        updateState({
+            touched: true,
+            CX: currentClientX,
+            CY: currentClientY,
+            lastCX: currentClientX,
+            lastCY: currentClientY,
+            lastX: x,
+            lastY: y,
+            lastScale: scale,
+            touchLength: currentTouchLength,
+            touchTime: Date.now(),
+        });
+    }
+    function handleWheel(e) {
+        if (!reach) {
+            // 限制最大倍数和最小倍数
+            var toScale = (0, limitTarget_1.limitScale)(scale - e.deltaY / 100 / 2, naturalWidth / width);
+            updateState({ stopRaf: true });
+            onScale(toScale, e.clientX, e.clientY);
+        }
+    }
+    function handleMaskStart(e) {
+        updateState({
+            maskTouched: true,
+            CX: e.clientX,
+            CY: e.clientY,
+            lastX: x,
+            lastY: y,
+        });
+    }
+    function handleTouchStart(e) {
+        e.stopPropagation();
+        handleStart.apply(void 0, (0, getMultipleTouchPosition_1.default)(e));
+    }
+    function handleMouseDown(e) {
+        e.stopPropagation();
+        if (e.button === 0) {
+            handleStart(e.clientX, e.clientY, 0);
+        }
+    }
+    // 计算位置
+    var _l = (0, useAnimationPosition_1.default)(visible, originRef, loaded, x, y, width, height, scale, speed, function (isPause) { return updateState({ pause: isPause }); }), translateX = _l[0], translateY = _l[1], currentWidth = _l[2], currentHeight = _l[3], currentScale = _l[4], opacity = _l[5], easingMode = _l[6], FIT = _l[7];
+    // 图片 objectFit 渐变时间
+    var transitionLayoutTime = easingMode < 4 ? speed / 2 : easingMode > 4 ? speed : 0;
+    var transitionCSS = "transform ".concat(speed, "ms ").concat(easing);
+    var attrs = {
+        className: className,
+        onMouseDown: isTouchDevice_1.default ? undefined : handleMouseDown,
+        onTouchStart: isTouchDevice_1.default ? handleTouchStart : undefined,
+        onWheel: handleWheel,
+        style: {
+            width: currentWidth,
+            height: currentHeight,
+            opacity: opacity,
+            objectFit: easingMode === 4 ? undefined : FIT,
+            transform: rotate ? "rotate(".concat(rotate, "deg)") : undefined,
+            transition: 
+            // 初始状态无渐变
+            easingMode > 2 ? "".concat(transitionCSS, ", opacity ").concat(speed, "ms ease, height ").concat(transitionLayoutTime, "ms ").concat(easing) : undefined,
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "PhotoView__PhotoWrap".concat(wrapClassName ? " ".concat(wrapClassName) : ''), style: style, onMouseDown: !isTouchDevice_1.default && isActive ? handleMaskStart : undefined, onTouchStart: isTouchDevice_1.default && isActive ? function (e) { return handleMaskStart(e.touches[0]); } : undefined }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "PhotoView__PhotoBox", style: {
+                transform: "matrix(".concat(currentScale, ", 0, 0, ").concat(currentScale, ", ").concat(translateX, ", ").concat(translateY - 107, ")"),
+                transition: touched || pause ? undefined : transitionCSS,
+                willChange: isActive ? 'transform' : undefined,
+            } }, { children: src ? ((0, jsx_runtime_1.jsx)(Photo_1.default, __assign({ src: src, loaded: loaded, broken: broken }, attrs, { onPhotoLoad: handlePhotoLoad, loadingElement: loadingElement, brokenElement: brokenElement }))) : (render && render({ attrs: attrs, scale: currentScale, rotate: rotate })) })) })));
+}
+exports.default = PhotoBox;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataType } from './types';
+interface PhotoPageProps {
+    images: DataType[];
+    index: number;
+    onSelected?: (string: any, number: any) => void;
+}
+declare const PhotoPage: React.FC<PhotoPageProps>;
+export default PhotoPage;

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

@@ -0,0 +1,79 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var fbm_ui_1 = require("fbm-ui");
+var mui_1 = require("fbm-ui/lib/mui");
+var chunk = function (a, n) { return __spreadArray([], Array(Math.ceil(a.length / n)), true).map(function (_, i) { return a.slice(n * i, n + n * i); }); };
+var IconButton = (0, fbm_ui_1.styled)(fbm_ui_1.Box)(function (_a) {
+    var disabled = _a.disabled;
+    return ({
+        marginTop: -56,
+        width: 48,
+        height: 48,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: disabled ? 'RGBA(255, 255, 255, 0.26)' : 'white',
+        backgroundColor: disabled ? 'RGBA(0, 0, 0, 0.26)' : 'RGBA(0, 0, 0, 0.56)',
+        borderRadius: 24,
+        cursor: disabled ? 'default' : 'pointer',
+        flexShrink: 0,
+        '& .MuiBox-root': {
+            backgroundColor: 'transparent',
+        },
+    });
+});
+var Image = (0, fbm_ui_1.styled)('img')(function (_a) {
+    var selected = _a.selected;
+    return ({
+        width: 96,
+        height: 96,
+        objectFit: 'cover',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+        border: "".concat(selected ? 'solid 5px RGB(76, 175, 80) ' : 'none'),
+    });
+});
+var PhotoPage = function (_a) {
+    var images = _a.images, index = _a.index, onSelected = _a.onSelected;
+    var pre = Math.floor((window.innerWidth - 200) / 110);
+    var maxPage = Math.ceil(images.length / pre);
+    var _b = (0, react_1.useState)(0), page = _b[0], setPage = _b[1];
+    var handleNext = function () {
+        if (page < maxPage - 1)
+            setPage(function (prevPage) { return prevPage + 1; });
+    };
+    var handleBack = function () {
+        if (page > 0)
+            setPage(function (prevPage) { return prevPage - 1; });
+    };
+    (0, react_1.useEffect)(function () {
+        setPage(Math.floor(index / pre));
+    }, [index, images, pre]);
+    return ((0, jsx_runtime_1.jsxs)(fbm_ui_1.Box, __assign({ sx: { flexGrow: 1, display: 'flex', alignItems: 'center', px: 7 } }, { children: [(0, jsx_runtime_1.jsx)(IconButton, __assign({ onClick: handleBack, disabled: page === 0 }, { children: (0, jsx_runtime_1.jsx)(fbm_ui_1.KeyboardArrowLeftIcon, {}) })), (0, jsx_runtime_1.jsx)(mui_1.Stack, __assign({ spacing: 1, direction: "row", sx: { height: 150, display: 'flex', justifyContent: 'center', flexGrow: 1, p: 2 } }, { children: chunk(images, pre)[page].map(function (_a, i) {
+                    var key = _a.key, src = _a.src, title = _a.title;
+                    return ((0, jsx_runtime_1.jsxs)(mui_1.Stack, __assign({ alignItems: "center", spacing: 1, onClick: function () { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(src, i); } }, { children: [(0, jsx_runtime_1.jsx)(Image, { src: src, selected: key === images[index].key }), (0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ sx: { width: 96, lineHeight: '14px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, variant: "body2", color: "white" }, { children: title }))] }), key));
+                }) })), (0, jsx_runtime_1.jsx)(IconButton, __assign({ onClick: handleNext, disabled: page === maxPage - 1 }, { children: (0, jsx_runtime_1.jsx)(fbm_ui_1.KeyboardArrowRightIcon, {}) }))] })));
+};
+exports.default = PhotoPage;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { DataType, PhotoProviderBase } from './types';
+export interface PhotoProviderProps extends PhotoProviderBase {
+    children: React.ReactNode;
+    onIndexChange?: (index: number, state: PhotoProviderState) => void;
+    onVisibleChange?: (visible: boolean, index: number, state: PhotoProviderState) => void;
+}
+declare type PhotoProviderState = {
+    images: DataType[];
+    visible: boolean;
+    index: number;
+};
+export default function PhotoProvider({ children, onIndexChange, onVisibleChange, ...restProps }: PhotoProviderProps): JSX.Element;
+export {};

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;