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

package/esm/services/ai-ability.d.ts

@@ -1,4 +1,4 @@
-export declare const PostQuestionCollectionList: <R>() => import("axios").AxiosPromise<R>;
+export declare const PostQuestionCollectionList: <R>(data: any) => import("axios").AxiosPromise<R>;
 export declare const PostQuestionCollectionDelete: <R>(token: string) => import("axios").AxiosPromise<R>;
 interface workPlaceItem {
     name: string;

package/esm/services/ai-ability.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { GET, POST } from "../utils/request";
 // 考察能力列表
-export var PostQuestionCollectionList = function () { return POST({ url: '/standard/b/questionCollection/list' }); };
+export var PostQuestionCollectionList = function (data) { return POST({ url: '/standard/b/questionCollection/list', data: data }); };
 // 删除考察能力
 export var PostQuestionCollectionDelete = function (token) { return POST({ url: 'standard/b/questionCollection/delete', data: { token: token } }); };
 export var PostQuestionCollectionUpsert = function (data) {

package/esm/store/ai-question/ai-analysis-store.js

@@ -72,7 +72,6 @@ export var useAiAnalysisStore = (_a = createStore(function () {
             ];
         });
         var resAiAbilities = update(data, { $splice: $splice });
-        console.log('resAiAbilities', resAiAbilities);
         setAiAbilities(resAiAbilities);
     }, []);
     /**

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

@@ -0,0 +1,60 @@
+"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 Spinner_1 = __importDefault(require("./components/Spinner"));
+var useMountedRef_1 = __importDefault(require("./hooks/useMountedRef"));
+require("./Photo.css");
+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 = (0, useMountedRef_1.default)();
+    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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", __assign({ className: "PhotoView__Photo".concat(className ? " ".concat(className) : ''), src: src, onLoad: handleImageLoaded, onError: handleImageBroken, alt: "" }, restProps)), !loaded && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "PhotoView__icon" }, { children: loadingElement })) || (0, jsx_runtime_1.jsx)(Spinner_1.default, { className: "PhotoView__icon" }))] }));
+    }
+    if (brokenElement) {
+        return (0, jsx_runtime_1.jsx)("span", __assign({ className: "PhotoView__icon" }, { children: typeof brokenElement === 'function' ? brokenElement({ src: src }) : brokenElement }));
+    }
+    return null;
+}
+exports.default = Photo;

package/lib/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/lib/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/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 {};