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

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

@@ -0,0 +1,14 @@
+.PhotoView__Photo {
+  max-width: initial;
+  cursor: grab;
+}
+.PhotoView__Photo:active {
+  cursor: grabbing;
+}
+.PhotoView__icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  transform: translate(-50%, -50%);
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import './Photo.css';
+import type { BrokenElementParams } from './types';
+export interface IPhotoLoadedParams {
+    loaded?: boolean;
+    naturalWidth?: number;
+    naturalHeight?: number;
+    broken?: boolean;
+}
+export interface IPhotoProps extends React.HTMLAttributes<HTMLElement> {
+    src: string;
+    loaded: boolean;
+    broken: boolean;
+    onPhotoLoad: (params: IPhotoLoadedParams) => void;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element | ((photoProps: BrokenElementParams) => JSX.Element);
+}
+export default function Photo({ src, loaded, broken, className, onPhotoLoad, loadingElement, brokenElement, ...restProps }: IPhotoProps): JSX.Element | null;

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

@@ -0,0 +1,54 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Spinner from './components/Spinner';
+import useMountedRef from './hooks/useMountedRef';
+import './Photo.css';
+export default function Photo(_a) {
+    var src = _a.src, loaded = _a.loaded, broken = _a.broken, className = _a.className, onPhotoLoad = _a.onPhotoLoad, loadingElement = _a.loadingElement, brokenElement = _a.brokenElement, restProps = __rest(_a, ["src", "loaded", "broken", "className", "onPhotoLoad", "loadingElement", "brokenElement"]);
+    var mountedRef = useMountedRef();
+    function handleImageLoaded(e) {
+        var _a = e.target, naturalWidth = _a.naturalWidth, naturalHeight = _a.naturalHeight;
+        if (mountedRef.current) {
+            onPhotoLoad({
+                loaded: true,
+                naturalWidth: naturalWidth,
+                naturalHeight: naturalHeight,
+            });
+        }
+    }
+    function handleImageBroken() {
+        if (mountedRef.current) {
+            onPhotoLoad({
+                broken: true,
+            });
+        }
+    }
+    if (src && !broken) {
+        return (_jsxs(_Fragment, { children: [_jsx("img", __assign({ className: "PhotoView__Photo".concat(className ? " ".concat(className) : ''), src: src, onLoad: handleImageLoaded, onError: handleImageBroken, alt: "" }, restProps)), !loaded && (_jsx("span", __assign({ className: "PhotoView__icon" }, { children: loadingElement })) || _jsx(Spinner, { className: "PhotoView__icon" }))] }));
+    }
+    if (brokenElement) {
+        return _jsx("span", __assign({ className: "PhotoView__icon" }, { children: typeof brokenElement === 'function' ? brokenElement({ src: src }) : brokenElement }));
+    }
+    return null;
+}

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

@@ -0,0 +1,18 @@
+.PhotoView__PhotoWrap,
+.PhotoView__PhotoBox {
+  position: absolute;
+  top: 24px;
+  right: 0;
+  bottom: 182px;
+  left: 0;
+  width: 100%;
+  touch-action: none;
+  direction: ltr;
+}
+.PhotoView__PhotoWrap {
+  z-index: 10;
+  overflow: hidden;
+}
+.PhotoView__PhotoBox {
+  transform-origin: left top;
+}

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import './PhotoBox.css';
+import type { BrokenElementParams, DataType, ExposedProperties, PhotoTapFunction, ReachFunction, ReachMoveFunction } from './types';
+export interface PhotoBoxProps {
+    item: DataType;
+    visible: boolean;
+    speed: number;
+    easing: string;
+    wrapClassName?: string;
+    className?: string;
+    style?: object;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element | ((photoProps: BrokenElementParams) => JSX.Element);
+    onPhotoTap: PhotoTapFunction;
+    onMaskTap: PhotoTapFunction;
+    onReachMove: ReachMoveFunction;
+    onReachUp: ReachFunction;
+    onPhotoResize: () => void;
+    expose: (state: ExposedProperties) => void;
+    isActive: boolean;
+}
+export default function PhotoBox({ item: { src, render, width: customWidth, height: customHeight, originRef }, visible, speed, easing, wrapClassName, className, style, loadingElement, brokenElement, onPhotoTap, onMaskTap, onReachMove, onReachUp, onPhotoResize, isActive, expose, }: PhotoBoxProps): JSX.Element;

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

@@ -0,0 +1,302 @@
+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";
+import { useRef } from 'react';
+import useAnimationPosition from './hooks/useAnimationPosition';
+import useContinuousTap from './hooks/useContinuousTap';
+import useDebounceCallback from './hooks/useDebounceCallback';
+import useEventListener from './hooks/useEventListener';
+import useIsomorphicLayoutEffect from './hooks/useIsomorphicLayoutEffect';
+import useMethods from './hooks/useMethods';
+import useMountedRef from './hooks/useMountedRef';
+import useScrollPosition from './hooks/useScrollPosition';
+import useSetState from './hooks/useSetState';
+import Photo from './Photo';
+import './PhotoBox.css';
+import { computePositionEdge, getReachType } from './utils/edgeHandle';
+import getMultipleTouchPosition from './utils/getMultipleTouchPosition';
+import getPositionOnMoveOrScale from './utils/getPositionOnMoveOrScale';
+import getRotateSize from './utils/getRotateSize';
+import getSuitableImageSize from './utils/getSuitableImageSize';
+import isTouchDevice from './utils/isTouchDevice';
+import { limitScale } from './utils/limitTarget';
+import { minStartTouchOffset, scaleBuffer } from './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,
+};
+export default 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 = useSetState(initialState), state = _e[0], updateState = _e[1];
+    var initialTouchRef = useRef(0);
+    var mounted = useMountedRef();
+    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 = useMethods({
+        onScale: function (current) { return onScale(limitScale(current)); },
+        onRotate: function (current) {
+            if (rotate !== current) {
+                expose({ rotate: current });
+                updateState(__assign({ rotate: current }, getSuitableImageSize(naturalWidth, naturalHeight, current)));
+            }
+        },
+    });
+    // 默认为屏幕中心缩放
+    function onScale(current, clientX, clientY) {
+        if (scale !== current) {
+            expose({ scale: current });
+            updateState(__assign(__assign({ scale: current }, getPositionOnMoveOrScale(x, y, width, height, scale, current, clientX, clientY)), (current <= 1 && { x: 0, y: 0 })));
+        }
+    }
+    var handleMove = useDebounceCallback(function (nextClientX, nextClientY, currentTouchLength) {
+        if (currentTouchLength === void 0) { currentTouchLength = 0; }
+        if ((touched || maskTouched) && isActive) {
+            // 通过旋转调换宽高
+            var _a = getRotateSize(rotate, width, height), currentWidth_1 = _a[0], currentHeight_1 = _a[1];
+            // 单指最小缩放下，以初始移动距离来判断意图
+            if (currentTouchLength === 0 && initialTouchRef.current === 0) {
+                var isStillX = Math.abs(nextClientX - CX) <= minStartTouchOffset;
+                var isStillY = Math.abs(nextClientY - CY) <= 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 = computePositionEdge(offsetX + lastX, scale, currentWidth_1, window.innerWidth)[0];
+                var verticalCloseEdge = computePositionEdge(offsetY + lastY, scale, currentHeight_1, window.innerHeight)[0];
+                // 边缘触发检测
+                currentReach = getReachType(initialTouchRef.current, horizontalCloseEdge, verticalCloseEdge, reach);
+                // 接触边缘
+                if (currentReach !== undefined) {
+                    onReachMove(currentReach, nextClientX, nextClientY, scale);
+                }
+            }
+            // 横向边缘触发、背景触发禁用当前滑动
+            if (currentReach === 'x' || maskTouched) {
+                updateState({ reach: 'x' });
+                return;
+            }
+            // 目标倍数
+            var toScale = limitScale(scale + ((currentTouchLength - touchLength) / 100 / 2) * scale, naturalWidth / width, scaleBuffer);
+            // 导出变量
+            expose({ scale: toScale });
+            updateState(__assign({ touchLength: currentTouchLength, reach: currentReach, scale: toScale }, getPositionOnMoveOrScale(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 = useScrollPosition(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 = useContinuousTap(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 = 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);
+                }
+            }
+        }
+    }
+    useEventListener(isTouchDevice ? undefined : 'mousemove', function (e) {
+        e.preventDefault();
+        handleMove(e.clientX, e.clientY);
+    });
+    useEventListener(isTouchDevice ? undefined : 'mouseup', function (e) {
+        handleUp(e.clientX, e.clientY);
+    });
+    useEventListener(isTouchDevice ? 'touchmove' : undefined, function (e) {
+        e.preventDefault();
+        var position = getMultipleTouchPosition(e);
+        handleMove.apply(void 0, position);
+    }, { passive: false });
+    useEventListener(isTouchDevice ? 'touchend' : undefined, function (_a) {
+        var changedTouches = _a.changedTouches;
+        var touch = changedTouches[0];
+        handleUp(touch.clientX, touch.clientY);
+    }, { passive: false });
+    useEventListener('resize', useDebounceCallback(function () {
+        if (loaded && !touched) {
+            updateState(getSuitableImageSize(naturalWidth, naturalHeight, rotate));
+            onPhotoResize();
+        }
+    }, { maxWait: 8 }));
+    useIsomorphicLayoutEffect(function () {
+        if (isActive) {
+            expose(__assign({ scale: scale, rotate: rotate }, fn));
+        }
+    }, [isActive]);
+    function handlePhotoLoad(params) {
+        updateState(__assign(__assign({}, params), (params.loaded && getSuitableImageSize(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 = 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, getMultipleTouchPosition(e));
+    }
+    function handleMouseDown(e) {
+        e.stopPropagation();
+        if (e.button === 0) {
+            handleStart(e.clientX, e.clientY, 0);
+        }
+    }
+    // 计算位置
+    var _l = useAnimationPosition(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 ? undefined : handleMouseDown,
+        onTouchStart: isTouchDevice ? 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 (_jsx("div", __assign({ className: "PhotoView__PhotoWrap".concat(wrapClassName ? " ".concat(wrapClassName) : ''), style: style, onMouseDown: !isTouchDevice && isActive ? handleMaskStart : undefined, onTouchStart: isTouchDevice && isActive ? function (e) { return handleMaskStart(e.touches[0]); } : undefined }, { children: _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 ? (_jsx(Photo, __assign({ src: src, loaded: loaded, broken: broken }, attrs, { onPhotoLoad: handlePhotoLoad, loadingElement: loadingElement, brokenElement: brokenElement }))) : (render && render({ attrs: attrs, scale: currentScale, rotate: rotate })) })) })));
+}

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

@@ -0,0 +1,77 @@
+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));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, KeyboardArrowLeftIcon, KeyboardArrowRightIcon, styled, Typography } from 'fbm-ui';
+import { Stack } from '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 = styled(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 = 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 = 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; });
+    };
+    useEffect(function () {
+        setPage(Math.floor(index / pre));
+    }, [index, images, pre]);
+    return (_jsxs(Box, __assign({ sx: { flexGrow: 1, display: 'flex', alignItems: 'center', px: 7 } }, { children: [_jsx(IconButton, __assign({ onClick: handleBack, disabled: page === 0 }, { children: _jsx(KeyboardArrowLeftIcon, {}) })), _jsx(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 (_jsxs(Stack, __assign({ alignItems: "center", spacing: 1, onClick: function () { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(src, i); } }, { children: [_jsx(Image, { src: src, selected: key === images[index].key }), _jsx(Typography, __assign({ sx: { width: 96, lineHeight: '14px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, variant: "body2", color: "white" }, { children: title }))] }), key));
+                }) })), _jsx(IconButton, __assign({ onClick: handleNext, disabled: page === maxPage - 1 }, { children: _jsx(KeyboardArrowRightIcon, {}) }))] })));
+};
+export default PhotoPage;

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

@@ -0,0 +1,98 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import useMethods from './hooks/useMethods';
+import useSetState from './hooks/useSetState';
+import PhotoContext from './photo-context';
+import PhotoSlider from './PhotoSlider';
+var initialState = {
+    images: [],
+    visible: false,
+    index: 0,
+};
+export default function PhotoProvider(_a) {
+    var children = _a.children, onIndexChange = _a.onIndexChange, onVisibleChange = _a.onVisibleChange, restProps = __rest(_a, ["children", "onIndexChange", "onVisibleChange"]);
+    var _b = useSetState(initialState), state = _b[0], updateState = _b[1];
+    var uniqueIdRef = useRef(0);
+    var images = state.images, visible = state.visible, index = state.index;
+    var methods = useMethods({
+        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 = useMethods({
+        close: function () {
+            updateState({
+                visible: false,
+            });
+            if (onVisibleChange) {
+                onVisibleChange(false, index, state);
+            }
+        },
+        changeIndex: function (nextIndex) {
+            updateState({
+                index: nextIndex,
+            });
+            if (onIndexChange) {
+                onIndexChange(nextIndex, state);
+            }
+        },
+    });
+    var value = useMemo(function () { return (__assign(__assign({}, state), methods)); }, [state, methods]);
+    return (_jsxs(PhotoContext.Provider, __assign({ value: value }, { children: [children, _jsx(PhotoSlider, __assign({ images: images, visible: visible, index: index, onIndexChange: fn.changeIndex, onClose: fn.close }, restProps))] })));
+}