@cloudbase/weda-ui 3.11.11 → 3.12.1

package/dist/web/components/form/uploader/uploader.pc.d.ts

@@ -12,12 +12,15 @@ interface TempFileProps {
 export declare function UploaderPCInner(props: PropsType): JSX.Element;
 export interface TcbImageProps {
     fileID?: string;
+    allFile?: TempFileProps[];
     tempFile?: TempFileProps;
+    index?: number;
     isZoom?: boolean;
     onError?: (e: unknown) => void;
     imgTypeCls?: string;
-    preivewIcon?: string;
+    previewIcon?: string;
     actions?: React.ReactNode;
+    portalContainer?: HTMLElement;
 }
 export declare const TcbImage: (props: TcbImageProps) => JSX.Element;
 export interface PropsType extends H5UploaderProps {
@@ -26,6 +29,10 @@ export interface PropsType extends H5UploaderProps {
     btnTitle?: string;
     uploadPath?: string;
     readOnly?: boolean;
+    popupContainer?: HTMLElement;
+    onChange?: (value: string | string[]) => void;
+    onError?: (error: Error) => void;
+    onSuccess?: (value: string | string[]) => void;
 }
 export declare function encodeConvert(src: any): any;
 export {};

package/dist/web/components/form/uploader/uploader.pc.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Upload, Icon, ErrorTip, ImagePreview, ConfigProvider, } from 'tea-component';
+import { Upload, Icon, ErrorTip, ConfigProvider } from 'tea-component';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
 import { toBase64Uri } from '../../../utils/file2base64';
 import { isNil } from '../../../utils/lodash';
 import { errorHandler } from '../../../utils/error';
 import { WdIcon } from '../../wd-icon';
 import { useUploader } from './useUploadFile';
+import { ImagePreview } from '../../wd-image/ImagePreview';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -20,7 +21,7 @@ export const IMAGE_TYPES = [
     'image/gif',
 ];
 export function UploaderPCInner(props) {
-    const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, acceptTypes = IMAGE_TYPES, events, single = false, disabled = false, onChange, imgTypeCls, readOnly, sourceType, callbacks, } = props;
+    const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, acceptTypes = IMAGE_TYPES, events, single = false, disabled = false, onChange, imgTypeCls, readOnly, sourceType, callbacks, popupContainer: portalContainer, } = props;
     const { tempFile, uploading, upload, getTempFile } = useUploader(props);
     const handleChange = (allFile = [], isDelete = false) => {
         var _a;
@@ -83,8 +84,7 @@ export function UploaderPCInner(props) {
                 if (typeof ret === 'boolean') {
                     shouldUploadToCos = ret;
                 }
-                else if (Array.isArray(ret) &&
-                    ret.every((item) => item instanceof File)) {
+                else if (Array.isArray(ret) && ret.every((item) => item instanceof File)) {
                     fileList = ret;
                 }
                 else if (!isNil(ret)) {
@@ -114,13 +114,11 @@ export function UploaderPCInner(props) {
     const extraProps = {};
     //是否支持多选
     extraProps['multiple'] = !single;
-    extraProps['accept'] =
-        acceptTypes.length === 0 ? IMAGE_TYPES : Array.from(new Set(acceptTypes));
+    extraProps['accept'] = acceptTypes.length === 0 ? IMAGE_TYPES : Array.from(new Set(acceptTypes));
     tips && (extraProps['title'] = tips);
     maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
     const hasActions = !uploading && !readOnly && !(disabled || sourceType === 'camera');
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [tempFile === null || tempFile === void 0 ? void 0 : tempFile.map((d) => (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsx(TcbImage, { tempFile: d, imgTypeCls: imgTypeCls, isZoom: true, preivewIcon: "td:browse", actions: hasActions && (_jsx(WdIcon, { className: `${CLASS_PREFIX}__image-actions-delete`, name: "td:delete", onClick: () => deleteHandle(d), size: "sm" })) }) }, d.key))), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && tempFile.length < 1 && _jsx("div", { children: "-" }), sourceType === 'camera' || (disabled && !readOnly) ? (_jsx("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] }) })) : (((!single && tempFile.length < maxUploadCount) ||
-                            (single && tempFile.length < 1 && !uploading)) &&
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [tempFile === null || tempFile === void 0 ? void 0 : tempFile.map((d, index) => (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsx(TcbImage, { index: index, allFile: tempFile, tempFile: d, imgTypeCls: imgTypeCls, isZoom: true, previewIcon: "td:browse", portalContainer: portalContainer, actions: hasActions && (_jsx(WdIcon, { className: `${CLASS_PREFIX}__image-actions-delete`, name: "td:delete", onClick: () => deleteHandle(d), size: "sm" })) }) }, d.key))), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && tempFile.length < 1 && _jsx("div", { children: "-" }), sourceType === 'camera' || (disabled && !readOnly) ? (_jsx("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] }) })) : (((!single && tempFile.length < maxUploadCount) || (single && tempFile.length < 1 && !uploading)) &&
                             !readOnly && (
                         // single 模式时，当数组为空且不在上传文件过程中时显示
                         _jsx(Upload, { ...extraProps, beforeUpload: beforeHandle, children: _jsxs("li", { 
@@ -132,13 +130,13 @@ export function UploaderPCInner(props) {
                                 className: `_weda-fn-upload-result__item _weda-fn-upload-result__item--upload ${imgTypeCls}`, children: [imgTypeCls, _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] })] }) })))] })] }) }));
 }
 export const TcbImage = (props) => {
-    const { fileID, tempFile = { progress: 100, loading: false, realUrl: null, tempUrl: null }, isZoom, imgTypeCls, preivewIcon, actions, ...rest } = props;
+    const { fileID, tempFile = { progress: 100, loading: false, realUrl: null, tempUrl: null }, isZoom, imgTypeCls, previewIcon, actions, allFile = [], index, portalContainer, ...rest } = props;
     const { progress, loading, realUrl, tempUrl } = tempFile;
     const fileCloudID = (realUrl !== null && realUrl !== void 0 ? realUrl : tempUrl) || fileID;
     const [isError, setIsError] = React.useState(false);
     const { data: src, error: requestError } = useTempUrl(fileCloudID);
     const encodeSrc = encodeConvert(src);
-    const renderImg = () => {
+    const renderImg = (open) => {
         if (isError || requestError)
             return _jsx(ErrorTip, {});
         if (!src)
@@ -146,28 +144,32 @@ export const TcbImage = (props) => {
         return (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "uploaderpc_imgStyle", className: `${CLASS_PREFIX}__image ${imgTypeCls}`, ...rest, src: encodeURI(encodeSrc), onError: (e) => {
                         setIsError(true);
                         (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
+                    }, onClick: () => {
+                        if (open) {
+                            open();
+                        }
                     } }), loading && (_jsxs("div", { className: "_weda-fn-upload-result__status loading_bac", children: [_jsx(Icon, { type: "loading" }), _jsxs("div", { className: "wedatea2td-mt-1n wedatea2td-fz-reset", children: [progress, "%"] })] }))] }));
     };
     if (!isZoom)
         return renderImg();
+    const previewImageList = allFile.map((i) => i.realUrl || i.tempUrl);
     const previewProps = {
-        key: fileCloudID,
+        index,
         'data-testid': 'uploaderpc_imgStyle',
         className: `${CLASS_PREFIX}__image ${imgTypeCls}`,
-        ...rest,
-        previewSrc: encodeURI(encodeSrc),
-        onError: (e) => {
-            setIsError(true);
-            (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
-        },
+        src: encodeURI(encodeSrc),
+        previewImageList,
+        portalContainer,
     };
-    if (preivewIcon || actions) {
+    if (previewIcon || actions) {
         return (_jsx(ImagePreview, { ...previewProps, children: (open) => {
-                return (_jsxs(_Fragment, { children: [renderImg(), _jsxs("div", { className: `_weda-fn-upload-result__op ${imgTypeCls} ${CLASS_PREFIX}__image-actions`, children: [preivewIcon && (_jsx(WdIcon, { name: preivewIcon, onClick: open, className: `${CLASS_PREFIX}__image-actions-open`, size: "sm" })), actions && (_jsxs("span", { className: `${CLASS_PREFIX}__image-actions-separator`, children: [' ', "|", ' '] })), actions] })] }));
+                return (_jsxs(_Fragment, { children: [renderImg(), _jsxs("div", { className: `_weda-fn-upload-result__op ${imgTypeCls} ${CLASS_PREFIX}__image-actions`, children: [previewIcon && (_jsx(WdIcon, { name: previewIcon, onClick: open, className: `${CLASS_PREFIX}__image-actions-open`, size: "sm" })), actions && _jsx("span", { className: `${CLASS_PREFIX}__image-actions-separator`, children: "|" }), actions] })] }));
             } }));
     }
     else {
-        return _jsx(ImagePreview, { ...previewProps, src: encodeURI(encodeSrc) });
+        return (_jsx(ImagePreview, { ...previewProps, children: (open) => {
+                return renderImg(open);
+            } }));
     }
 };
 //兼容私有化下载链接encodeURIComponent被编码情况

package/dist/web/components/uploaderView/index.d.ts

@@ -5,7 +5,7 @@ import './style';
  * 图片上传-展示组件
  */
 export default function UploaderView({ srcList, // 兼容 cloud:和https: 协议，兼容 字符串和字符串数组
-alt, gutter, height, width, events, isZoom, isEmptyPlace, className, id, style, }: PropsType): JSX.Element;
+alt, gutter, height, width, events, isZoom, isEmptyPlace, className, id, style, popupContainer: portalContainer, }: PropsType): JSX.Element;
 export interface PropsType extends CommonPropsType {
     srcList?: string[] | string;
     alt?: string;
@@ -14,4 +14,11 @@ export interface PropsType extends CommonPropsType {
     height?: number;
     width?: number;
     isEmptyPlace?: boolean;
+    popupContainer?: HTMLElement;
+    events?: {
+        load?: ({ success, error }: {
+            success: string[];
+            error: string[];
+        }) => void;
+    };
 }

package/dist/web/components/uploaderView/index.js

@@ -9,7 +9,7 @@ const CLASS_PREFIX = 'g-uploader-view';
  * 图片上传-展示组件
  */
 export default function UploaderView({ srcList, // 兼容 cloud:和https: 协议，兼容 字符串和字符串数组
-alt = '[加载失败]', gutter = 8, height = 100, width = 100, events = emptyObject, isZoom = true, isEmptyPlace = true, className, id, style, }) {
+alt = '[加载失败]', gutter = 8, height = 100, width = 100, events = emptyObject, isZoom = true, isEmptyPlace = true, className, id, style, popupContainer: portalContainer, }) {
     const cls = classNames({
         [CLASS_PREFIX]: true,
         [className]: className,
@@ -26,10 +26,9 @@ alt = '[加载失败]', gutter = 8, height = 100, width = 100, events = emptyObj
         marginBottom: gutter,
         height: height,
         width: width,
+        cursor: isZoom ? 'zoom-in' : 'auto',
     };
-    const values = []
-        .concat(srcList)
-        .filter((d) => typeof d === 'string' && d !== '');
+    const values = [].concat(srcList).filter((d) => typeof d === 'string' && d !== '');
     return (_jsx("div", { className: cls, id: id, style: style, children: _jsxs("div", { className: `${CLASS_PREFIX}__image-list`, children: [values.map((d, i) => {
                     const imgProps = {
                         fileID: d,
@@ -38,6 +37,8 @@ alt = '[加载失败]', gutter = 8, height = 100, width = 100, events = emptyObj
                         isZoom,
                         onLoad: () => setSuccessList((list) => [...list, d]),
                         onError: () => setErrorList((list) => [...list, d]),
+                        portalContainer,
+                        allFile: values === null || values === void 0 ? void 0 : values.map((d) => ({ realUrl: d })),
                     };
                     return (_jsx("div", { className: `${CLASS_PREFIX}__image-box`, style: boxStyle, title: d, children: _jsx(TcbImage, { ...imgProps }) }, `${d}-${i}`));
                 }), values.length === 0 && isEmptyPlace && (_jsx("div", { className: `${CLASS_PREFIX}__image-box`, style: boxStyle, children: _jsx("img", { className: `${CLASS_PREFIX}__image`, alt: "\u6682\u65E0\u56FE\u7247" }) }))] }) }));

package/dist/web/components/wd-form-item/wd-form-item.js

@@ -66,9 +66,9 @@ export function WdFormItem(props) {
     const Message = validateErrorMsg && (_jsx("p", { className: `${item}__help`, children: _jsx("span", { className: `${classPrefix}-g-text-${validateState} ${root}__error`, children: textToString(validateErrorMsg) }) }));
     if (!visible)
         return null;
-    return (_jsxs("div", { className: cls, id: isRoot ? id : null, style: style, children: [_jsx("div", { className: itemWrap, children: LabelContainer ? (_jsx(LabelContainerComp, { LabelContainer: LabelContainer, isRoot: isRoot, isH5: isH5, Label: Label, Item: Item })) : (_jsxs(_Fragment, { children: [Label, Item] })) }), Message, Help] }));
+    return (_jsxs("div", { className: cls, id: isRoot ? id : null, style: style, children: [_jsx("div", { className: itemWrap, children: LabelContainer ? (_jsx(LabelContainerComp, { LabelContainer: LabelContainer, isRoot: isRoot, isH5: isH5, Label: Label, Item: Item, mode: props === null || props === void 0 ? void 0 : props.mode })) : (_jsxs(_Fragment, { children: [Label, Item] })) }), Message, Help] }));
 }
-const LabelContainerComp = ({ isRoot, isH5, Label, Item, LabelContainer }) => {
+const LabelContainerComp = ({ isRoot, isH5, Label, Item, LabelContainer, mode, }) => {
     const showLabel = isRoot && !isH5;
-    return (_jsxs(_Fragment, { children: [showLabel && Label, _jsx(LabelContainer, { isRoot: isRoot, Label: Label, Item: Item })] }));
+    return (_jsxs(_Fragment, { children: [showLabel && Label, _jsx(LabelContainer, { isRoot: isRoot, Label: Label, Item: Item, mode: mode })] }));
 };

package/dist/web/components/wd-form-item/wd-input-wrap.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useMemo } from 'react';
+import { useRef, useMemo, useState } from 'react';
 import { useConfig } from '../../utils/config-context';
 import classNames from '../../utils/classnames';
 import { useSize, convertIconSize } from '../../utils/hooks/useFormLegacy';
@@ -16,6 +16,7 @@ export const WdInputWrap = (props) => {
     const { classPrefix } = useConfig();
     const size = useSize(props);
     const iconSize = convertIconSize(size);
+    const [isFocus, setIsFocus] = useState(false);
     const root = `${classPrefix}-${classRoot}`;
     const inputWrap = `${classPrefix}-form-input-wrap`;
     const contentCls = `${inputWrap}__content`;
@@ -29,11 +30,16 @@ export const WdInputWrap = (props) => {
         [`${inputWrap}--no-radius-left`]: before,
         [`${inputWrap}--no-radius-right`]: after,
         [`${inputWrap}--no-radius`]: before && after,
+        'is-focused': isFocus,
     });
     const propsStartWithOn = useMemo(() => {
         return filterPropsWithOn(rest);
     }, [rest]);
     if (readOnly)
         return _jsx(_Fragment, { children: children });
-    return (_jsxs("div", { className: cls, ref: wrapRef, onFocus: () => { var _a, _b; return (_b = (_a = wrapRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('is-focused'); }, onBlur: () => { var _a, _b; return (_b = (_a = wrapRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('is-focused'); }, ...propsStartWithOn, children: [prefixType && (_jsx("div", { className: prefixCls, children: _jsx(WdIcon, { size: iconSize, name: prefixIcon, type: prefixType, src: prefixSrc, className: prefixIconCls }) })), _jsx("div", { className: contentCls, children: children }), hasClearIcon && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, className: `${classPrefix}-icon__trigger`, name: "td:close-circle-filled", onMouseDown: onClear }) })), !hasClearIcon && suffixType && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, name: suffixIcon, type: suffixType, src: suffixSrc, className: suffixIconCls }) }))] }));
+    return (_jsxs("div", { className: cls, ref: wrapRef, onFocus: () => {
+            setIsFocus(true);
+        }, onBlur: () => {
+            setIsFocus(false);
+        }, ...propsStartWithOn, children: [prefixType && (_jsx("div", { className: prefixCls, children: _jsx(WdIcon, { size: iconSize, name: prefixIcon, type: prefixType, src: prefixSrc, className: prefixIconCls }) })), _jsx("div", { className: contentCls, children: children }), hasClearIcon && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, className: `${classPrefix}-icon__trigger`, name: "td:close-circle-filled", onMouseDown: onClear }) })), !hasClearIcon && suffixType && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, name: suffixIcon, type: suffixType, src: suffixSrc, className: suffixIconCls }) }))] }));
 };

package/dist/web/components/wd-form-obj/base-form-obj.js

@@ -27,7 +27,7 @@ const classRoot = 'form-obj';
  */
 const getValueName = (operateName, currentName) => operateName.replace(new RegExp(`^${currentName}(\\.)?`), '');
 const LabelContainer = (props) => {
-    const { Label, Item } = props || {};
+    const { Label, Item, mode } = props || {};
     const cardRef = React.createRef();
     const [iconName, setIconName] = useState('chevronup');
     const headerSlot = (_jsxs(_Fragment, { children: [_jsx(WdIcon, { name: iconName, events: {
@@ -35,6 +35,9 @@ const LabelContainer = (props) => {
                         setIconName(iconName === 'chevrondown' ? 'chevronup' : 'chevrondown');
                     },
                 } }), Label] }));
+    if (mode === 'custom' || mode === 'table') {
+        return _jsx(_Fragment, { children: Item });
+    }
     return (_jsx(WdCard, { ref: cardRef, className: iconName === 'chevrondown' ? 'wd-card-content__hidden' : '', showContent: true, headerSlot: headerSlot, contentSlot: Item, events: { tap: () => { } } }));
 };
 export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {

package/dist/web/components/wd-image/ImagePreview.d.ts

@@ -0,0 +1 @@
+export declare const ImagePreview: (props: any) => JSX.Element;

package/dist/web/components/wd-image/ImagePreview.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import React, { useState, useMemo } from 'react';
+import { useGesture } from '@use-gesture/react';
+import { Portal } from '../common/portal';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
+import { WdIcon } from '../wd-icon';
+const ASPECT_RATIO = 1;
+export const ImagePreview = (props) => {
+    const { portalContainer, isStopPropagation = false, maskClosable = false, src, style = {}, children, previewImageList = [], index = 0, } = props;
+    // cloud 或者 https
+    const [currentImg, setCurrentImg] = useSyncValue(previewImageList[index], isObjectEqual);
+    const [visible, setVisible] = useState(false);
+    const platform = usePlatform();
+    const [translateX, setTranslateX] = React.useState(0);
+    const [translateY, setTranslateY] = React.useState(0);
+    const [previewScale, setPreviewScale] = React.useState(ASPECT_RATIO);
+    const [rotate, setRotate] = React.useState(0);
+    const { data: realSrc } = useTempUrl(currentImg);
+    const previewStyle = platform === 'h5'
+        ? {
+            touchAction: 'none',
+            backgroundImage: `url('${realSrc || src}')`,
+            transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
+            ...style,
+        }
+        : {
+            touchAction: 'none',
+            backgroundImage: `url('${realSrc || src}')`,
+            transform: `rotate(${rotate}deg)`,
+            ...style,
+        };
+    const { classPrefix } = useConfig();
+    React.useEffect(() => {
+        // 防止触发浏览器的放大缩小
+        const handler = (e) => e.preventDefault();
+        document.addEventListener('gesturestart', handler);
+        document.addEventListener('gesturechange', handler);
+        return () => {
+            document.removeEventListener('gesturestart', handler);
+            document.removeEventListener('gesturechange', handler);
+        };
+    }, []);
+    const onMaskClick = (e) => {
+        if (isStopPropagation) {
+            e.stopPropagation();
+        }
+        if (maskClosable) {
+            setVisible(false);
+        }
+    };
+    const bind = useGesture({
+        onClick: ({ event }) => {
+            // 防止冒泡出发关闭预览
+            event.stopPropagation();
+            if (maskClosable) {
+                setVisible(false);
+            }
+        },
+        onPinch: ({ offset }) => {
+            const [s] = offset;
+            setPreviewScale(s);
+        },
+        onDrag: ({ offset, event }) => {
+            event.stopPropagation();
+            const [x, y] = offset;
+            setTranslateX(x);
+            setTranslateY(y);
+        },
+    }, {
+        drag: {
+            delay: true,
+            preventDefault: true,
+            from: () => [translateX, translateY],
+        },
+        pinch: {
+            scaleBounds: { min: 0.6, max: 5 },
+            pointer: {
+                touch: true,
+            },
+        },
+    });
+    const child = useMemo(() => {
+        return children(() => {
+            setVisible(true);
+            // 重置
+            setPreviewScale(ASPECT_RATIO);
+            setRotate(0);
+            setTranslateX(0);
+            setTranslateY(0);
+            setCurrentImg(previewImageList[index]);
+        });
+    }, [children, index, previewImageList, setCurrentImg]);
+    return (_jsxs(_Fragment, { children: [child, visible && (_jsx(Portal, { type: "div", portalContainer: portalContainer, children: _jsx("div", { "data-testid": "portal-container", style: { zIndex: 1001, position: 'relative' }, className: `${classPrefix}-image-preview-container`, children: _jsxs("div", { className: `${classPrefix}-image-mask`, onClick: onMaskClick, children: [_jsx("div", { onClick: (e) => {
+                                    if (isStopPropagation) {
+                                        e.stopPropagation();
+                                    }
+                                    setVisible(false);
+                                }, className: `${classPrefix}-image-mask__close-btn`, children: _jsx("i", { className: `${classPrefix}-image-mask__icon-close` }) }), _jsx("div", { ...bind(), className: `${classPrefix}-image-preview`, style: previewStyle }), platform === 'pc' && (_jsxs("div", { className: `${classPrefix}-image-preview-toolbar`, children: [(previewImageList === null || previewImageList === void 0 ? void 0 : previewImageList.length) > 1 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "wd-icon-wrap wd-event-tap", children: _jsx(WdIcon, { name: 'td:chevron-left', size: "sm", events: {
+                                                        tap: () => {
+                                                            const index = previewImageList.findIndex((i) => i === currentImg);
+                                                            const currentIndex = index === 0 ? previewImageList.length - 1 : index - 1;
+                                                            setCurrentImg(previewImageList[currentIndex]);
+                                                            setRotate(0);
+                                                        },
+                                                    } }) }), _jsx("span", { className: "wd-icon-wrap wd-event-tap", children: _jsx(WdIcon, { name: 'td:chevron-right', size: "sm", events: {
+                                                        tap: () => {
+                                                            const index = previewImageList.findIndex((i) => i === currentImg);
+                                                            const currentIndex = index === previewImageList.length - 1 ? 0 : index + 1;
+                                                            setCurrentImg(previewImageList[currentIndex]);
+                                                            setRotate(0);
+                                                        },
+                                                    } }) })] })), _jsx("span", { className: "wd-icon-wrap wd-event-tap", children: _jsx(WdIcon, { name: 'td:anticlockwise', size: "sm", events: {
+                                                tap: (arg, { originEvent: e }) => {
+                                                    e.stopPropagation();
+                                                    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                                                    setRotate(rotate - 90);
+                                                },
+                                            } }) })] }))] }) }) }))] }));
+};

package/dist/web/components/wd-image/image.d.ts

@@ -5,6 +5,7 @@ interface ImageInnerPropsType extends Except<PropsType, 'fit'> {
     objectFit: React.CSSProperties['objectFit'];
     isError: boolean;
     setIsError: React.Dispatch<React.SetStateAction<boolean>>;
+    portalContainer?: HTMLElement;
 }
-export declare function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, id, isStopPropagation, }: ImageInnerPropsType): JSX.Element;
+export declare function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, id, isStopPropagation, portalContainer, }: ImageInnerPropsType): JSX.Element;
 export {};

package/dist/web/components/wd-image/image.js

@@ -1,171 +1,59 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { usePlatform } from '../../utils/platform';
-import { useGesture } from '@use-gesture/react';
-import { useConfig } from '../../utils/config-context';
-import { useRef } from 'react';
-import { Portal } from '../common/portal';
+import { ImagePreview } from './ImagePreview';
 const ASPECT_RASIO = 1;
 const OFFSET_RASIO = 0.5;
-const SCALE_RASIO_PC = 0.8;
-const SCALE_RASIO_H5 = 1;
-export function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, id, isStopPropagation, }) {
-    var _a;
-    const { classPrefix } = useConfig();
+const SCALE_RADIO_PC = 0.8;
+const SCALE_RADIO_H5 = 1;
+export function ImageInner(_a) {
+    var _b;
+    var { objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, id, isStopPropagation, portalContainer = (_b = document.getElementById('root')) !== null && _b !== void 0 ? _b : document.body, } = _a;
     const platform = usePlatform();
-    const [imgShow, setImgShow] = React.useState(false);
-    const onMaskClick = (e) => {
-        if (isStopPropagation) {
-            e.stopPropagation();
-        }
-        if (maskClosable) {
-            setImgShow(false);
-        }
-    };
-    const portalContainer = useRef((_a = document.getElementById('root')) !== null && _a !== void 0 ? _a : document.body);
     const [showHeight, setShowHeight] = React.useState(0);
     const [showWidth, setShowWidth] = React.useState(0);
     const realWidth = React.useRef(0);
     const realHeight = React.useRef(0);
     const [offsetHeight, setOffsetHeight] = React.useState(0);
     const [offsetWidth, setOffsetWidth] = React.useState(0);
-    const [translateX, setTranslateX] = React.useState(0);
-    const [translateY, setTranslateY] = React.useState(0);
-    const [previewScale, setPreviewScale] = React.useState(ASPECT_RASIO);
-    React.useEffect(() => {
-        // 防止触发浏览器的放大缩小
-        const handler = (e) => e.preventDefault();
-        document.addEventListener('gesturestart', handler);
-        document.addEventListener('gesturechange', handler);
-        return () => {
-            document.removeEventListener('gesturestart', handler);
-            document.removeEventListener('gesturechange', handler);
-        };
-    }, []);
-    const bind = useGesture({
-        onClick: ({ event }) => {
-            // 防止冒泡出发关闭预览
-            event.stopPropagation();
-            if (maskClosable) {
-                setImgShow(false);
-            }
-        },
-        onPinch: ({ offset }) => {
-            const [s] = offset;
-            setPreviewScale(s);
-        },
-        onDrag: ({ offset, event }) => {
-            event.stopPropagation();
-            const [x, y] = offset;
-            setTranslateX(x);
-            setTranslateY(y);
-        },
-    }, {
-        drag: {
-            delay: true,
-            preventDefault: true,
-            from: () => [translateX, translateY],
-        },
-        pinch: {
-            scaleBounds: { min: 0.6, max: 5 },
-            pointer: {
-                touch: true,
-            },
-        },
-    });
-    if (platform === 'h5' || !imgPreview || isError) {
-        return (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "wd-image", id: id, style: {
-                        objectFit,
-                        ...style,
-                    }, className: `${className} wd-h5-image`, alt: alt, src: src, onLoad: (e) => {
-                        const img = e.target;
-                        const { naturalHeight, naturalWidth } = img;
-                        realHeight.current = naturalHeight;
-                        realWidth.current = naturalWidth;
-                        setIsError(false);
-                        events.load && events.load({}, { originEvent: e });
-                    }, onError: (e) => {
-                        setIsError(true);
-                        events.error && events.error({}, { originEvent: e });
-                    }, onClick: (e) => {
-                        if (isStopPropagation) {
-                            e.stopPropagation();
-                        }
-                        if (imgPreview && !isError) {
-                            setTranslateX(0);
-                            setTranslateY(0);
-                            setPreviewScale(ASPECT_RASIO);
-                            const windowHeight = window.innerHeight;
-                            const windowWidth = window.innerWidth;
-                            const widthRasio = (windowWidth * SCALE_RASIO_H5) / realWidth.current;
-                            const heightRasio = (windowHeight * SCALE_RASIO_H5) / realHeight.current;
-                            const scale = Math.min(widthRasio, heightRasio, ASPECT_RASIO) || ASPECT_RASIO;
-                            setOffsetHeight((windowHeight - realHeight.current * scale) * OFFSET_RASIO);
-                            setOffsetWidth((windowWidth - realWidth.current * scale) * OFFSET_RASIO);
-                            setShowHeight(realHeight.current * scale);
-                            setShowWidth(realWidth.current * scale);
-                            setImgShow(true);
-                        }
-                        events.tap && events.tap({}, { originEvent: e });
-                    }, loading: lazyLoad ? 'lazy' : undefined }), imgShow && (_jsx(Portal, { type: "div", portalContainer: portalContainer, children: _jsx("div", { "data-testid": "portal-container", style: { zIndex: 1001, position: 'relative' }, className: `${classPrefix}-image-preview-container`, children: _jsxs("div", { className: `${classPrefix}-image-mask`, onClick: onMaskClick, children: [_jsx("div", { onClick: (e) => {
-                                        if (isStopPropagation) {
-                                            e.stopPropagation();
-                                        }
-                                        setImgShow(false);
-                                    }, className: `${classPrefix}-image-mask__close-btn`, children: _jsx("i", { className: `${classPrefix}-image-mask__icon-close` }) }), _jsx("div", { ...bind(), className: `${classPrefix}-image-preview`, style: {
-                                        touchAction: 'none',
-                                        backgroundImage: `url('${src}')`,
-                                        transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
-                                        width: showWidth,
-                                        height: showHeight,
-                                        marginTop: offsetHeight,
-                                        marginLeft: offsetWidth,
-                                    } })] }) }) }))] }));
-    }
-    else {
-        return (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "wd-image", id: id, style: {
-                        objectFit,
-                        cursor: 'zoom-in',
-                        ...style,
-                    }, className: `${className} wd-pc-image`, alt: alt, src: src, onLoad: (e) => {
-                        const img = e.target;
-                        const { naturalHeight, naturalWidth } = img;
-                        realHeight.current = naturalHeight;
-                        realWidth.current = naturalWidth;
-                        setIsError(false);
-                        events.load && events.load({}, { originEvent: e });
-                    }, onError: (e) => {
-                        setIsError(true);
-                        events.error && events.error({}, { originEvent: e });
-                    }, loading: lazyLoad ? 'lazy' : undefined, onClick: (e) => {
-                        if (isStopPropagation) {
-                            e.stopPropagation();
-                        }
-                        if (imgPreview && !isError) {
-                            const windowHeight = window.innerHeight;
-                            const windowWidth = window.innerWidth;
-                            const widthRasio = (windowWidth * SCALE_RASIO_PC) / realWidth.current;
-                            const heightRasio = (windowHeight * SCALE_RASIO_PC) / realHeight.current;
-                            const scale = Math.min(widthRasio, heightRasio, ASPECT_RASIO) || ASPECT_RASIO;
-                            setOffsetHeight((windowHeight - realHeight.current * scale) * OFFSET_RASIO);
-                            setOffsetWidth((windowWidth - realWidth.current * scale) * OFFSET_RASIO);
-                            setShowHeight(realHeight.current * scale);
-                            setShowWidth(realWidth.current * scale);
-                            setImgShow(true);
-                        }
-                        events.tap && events.tap({}, { originEvent: e });
-                    } }), imgShow && (_jsx(Portal, { type: "div", portalContainer: portalContainer, children: _jsx("div", { "data-testid": "portal-container", style: { zIndex: 1001, position: 'relative' }, className: `${classPrefix}-image-preview-container`, children: _jsxs("div", { className: `${classPrefix}-image-mask`, onClick: onMaskClick, children: [_jsx("div", { onClick: (e) => {
-                                        if (isStopPropagation) {
-                                            e.stopPropagation();
-                                        }
-                                        setImgShow(false);
-                                    }, className: `${classPrefix}-image-mask__close-btn`, children: _jsx("i", { className: `${classPrefix}-image-mask__icon-close` }) }), _jsx("div", { ...bind(), className: `${classPrefix}-image-preview`, style: {
-                                        touchAction: 'none',
-                                        backgroundImage: `url('${src}')`,
-                                        width: showWidth,
-                                        height: showHeight,
-                                        marginTop: offsetHeight,
-                                        marginLeft: offsetWidth,
-                                    } })] }) }) }))] }));
-    }
+    const SCALE_RADIO = platform === 'h5' ? SCALE_RADIO_H5 : SCALE_RADIO_PC;
+    const previewStyle = {
+        width: showWidth,
+        height: showHeight,
+        marginTop: offsetHeight,
+        marginLeft: offsetWidth,
+    };
+    return (_jsx(ImagePreview, { portalContainer: portalContainer, maskClosable: maskClosable, style: previewStyle, src: src, children: (open) => {
+            return (_jsx("img", { "data-testid": "wd-image", id: id, style: {
+                    objectFit,
+                    ...style,
+                }, className: `${className}`, alt: alt, src: src, onLoad: (e) => {
+                    const img = e.target;
+                    const { naturalHeight, naturalWidth } = img;
+                    realHeight.current = naturalHeight;
+                    realWidth.current = naturalWidth;
+                    setIsError(false);
+                    events.load && events.load({}, { originEvent: e });
+                }, onError: (e) => {
+                    setIsError(true);
+                    events.error && events.error({}, { originEvent: e });
+                }, onClick: (e) => {
+                    if (isStopPropagation) {
+                        e.stopPropagation();
+                    }
+                    events.tap && events.tap({}, { originEvent: e });
+                    if (imgPreview && !isError) {
+                        const windowHeight = window.innerHeight;
+                        const windowWidth = window.innerWidth;
+                        const widthRasio = (windowWidth * SCALE_RADIO) / realWidth.current;
+                        const heightRasio = (windowHeight * SCALE_RADIO) / realHeight.current;
+                        const scale = Math.min(widthRasio, heightRasio, ASPECT_RASIO) || ASPECT_RASIO;
+                        setOffsetHeight((windowHeight - realHeight.current * scale) * OFFSET_RASIO);
+                        setOffsetWidth((windowWidth - realWidth.current * scale) * OFFSET_RASIO);
+                        setShowHeight(realHeight.current * scale);
+                        setShowWidth(realWidth.current * scale);
+                        open();
+                    }
+                }, loading: lazyLoad ? 'lazy' : undefined }));
+        } }));
 }

package/dist/web/components/wd-image/index.d.ts

@@ -3,6 +3,7 @@ import type { CommonPropsType } from '../../types';
 import type { DataType } from '../../../configs/components/image';
 export interface PropsType extends CommonPropsType, DataType {
     isStopPropagation?: boolean;
+    popupContainer?: HTMLElement;
 }
 import '../style';
 declare const _default: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<unknown>>;