@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/image-picker/style/index.less

@@ -0,0 +1,170 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-image-picker {
+    .use-var(font-size, image-picker-font-size);
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .container() {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        left: 0;
+    }
+    &-image {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 100%;
+        .use-var(border-radius, image-picker-border-radius);
+        overflow: hidden;
+        &-container {
+            .container()
+        }
+        .@{prefix}-image {
+            height: 100%;
+            width: 100%;
+        }
+        &-mask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+        }
+    }
+    &-add {
+        .use-var(background-color, image-picker-add-background);
+        .use-var(border-radius, image-picker-border-radius);
+        position: relative;
+        width: 100%;
+        height: 100%;
+        padding-top: 100%;
+        &-container {
+            .container();
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            .use-var(font-size, image-picker-add-text-font-size);
+            .use-var(color, image-picker-add-text-color);
+        }
+        &-icon {
+            .use-var(font-size, image-picker-add-icon-font-size);
+            .use-var(color, image-picker-add-icon-color);
+            svg {
+                display: block;
+            }
+        }
+        &-disabled {
+            pointer-events: none;
+        }
+        &-disabled &-icon {
+            .use-var(opacity, image-picker-disabled-opacity);
+        }
+        input {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+        }
+    }
+    &-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+        &-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(font-size, image-picker-close-font-size);
+            .use-var(width, image-picker-close-width);
+            .use-var(height, image-picker-close-height);
+            .use-var(color, image-picker-close-color);
+            .use-var(background, image-picker-close-background);
+            .use-var(border-radius, image-picker-close-border-radius);
+        }
+    }
+    &-error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .use-var(background, image-picker-error-background);
+        .use-var(color, image-picker-error-color);
+        .use-var(font-size, image-picker-font-size);
+    }
+}
+
+.@{prefix}-image-picker-disabled {
+    pointer-events: none;
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-image-picker {
+    &-add {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-image-picker-add-background);
+      }
+      &-container {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-image-picker-add-text-color);
+        }
+      }
+      &-icon {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-image-picker-add-icon-color);
+        }
+      }
+    }
+    &-close {
+      &-icon {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-image-picker-close-color);
+        }
+      }
+    }
+    &-error {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-image-picker-error-color);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/image-picker/type.d.ts

@@ -0,0 +1,115 @@
+import { InputHTMLAttributes } from 'react';
+import { ImageProps } from '../image';
+import { UploadCommonProps, CommonFileItem } from '../uploader/upload/type';
+export interface ImagePickItem extends CommonFileItem {
+    /**
+     * 图片地址
+     * @en Image Url
+     */
+    url: string;
+}
+export interface ImagePickerProps extends Omit<UploadCommonProps<ImagePickItem>, 'files'> {
+    /**
+     * 自定义类名
+     * @en Custom className
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 已选择图片列表
+     * @en selected images list
+     */
+    images: ImagePickItem[];
+    /**
+     * 可以选择的文件类型
+     * @en Available File Types
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * 是否支持多选
+     * @en Whether To Support Multiple Selection
+     */
+    multiple?: boolean;
+    /**
+     * 图片选取模式 Image selection mode [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+     * @en Whether To Support Multiple Selection [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+     */
+    capture?: InputHTMLAttributes<unknown>['capture'];
+    /**
+     * 一行展示图片张数
+     * @en The Number Of Pictures Displayed In A Row
+     * @default 3
+     */
+    columns?: number;
+    /**
+     * 格子间的间距
+     * @en spacing between grids
+     * @default 8
+     */
+    gutter?: number;
+    /**
+     * 是否隐藏删除Icon
+     * @en Whether to hide delete Icon
+     * @default false
+     */
+    hideDelete?: boolean;
+    /**
+     * 是否隐藏选择Icon
+     * @en Whether to hide Select Icon
+     * @default false
+     */
+    hideSelect?: boolean;
+    /**
+     * 是否总是展示选择Icon，默认情况下当图片数量超出limit值时会自动隐藏选择Icon
+     * @en Whether to always show Select Icon
+     * @default false
+     */
+    alwaysShowSelect?: boolean;
+    /**
+     * 禁用选择和删除图片
+     * @en Disable Select & Delete Image
+     */
+    disabled?: boolean;
+    /**
+     * 自定义删除图标
+     * @en Defined Delete Icon
+     */
+    deleteIcon?: React.ReactNode;
+    /**
+     * 自定义选择图标
+     * @en Defined Select Icon
+     */
+    selectIcon?: React.ReactNode;
+    /**
+     * 透传给图片的属性
+     * @en Attributes passed through to the image
+     */
+    imageProps?: Partial<ImageProps>;
+    /**
+     * 自定义上传失败展示
+     * @en Defined upload failed display
+     */
+    renderError?: (index?: number) => React.ReactNode | React.ReactNode;
+    /**
+     * 自定义上传中展示
+     * @en Defined uploading display
+     */
+    renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
+    /**
+     * 选图点击事件
+     * @en Select icon click event
+     */
+    onSelectClick?: () => void;
+}
+export interface ImagePickerRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}

package/esnext/image-picker/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/image-preview/index.d.ts

@@ -0,0 +1,296 @@
+import React, { ReactNode } from 'react';
+import { CarouselProps } from '../carousel';
+import { ImageProps } from '../image';
+export * from './methods';
+export interface PreviewImageProps {
+    /**
+     * 图片地址
+     * @en Image resource
+     */
+    src: string;
+    /**
+     * 图片布局方式，preview-y为宽度撑满高度溢出滚动，preview-x为高度撑满宽度溢出滚动
+     * @en Image layout, preview-y is overflow scrolling with full width and height, preview-x is overflow scrolling with full width and height
+     */
+    fit?: 'preview-y' | 'preview-x';
+    /**
+     * 过渡图url
+     * @en Transition image url
+     */
+    fallbackSrc?: string;
+    /**
+     * 过渡图到原图放大动效完成后，移除过渡图的延迟时间(ms)，一般当原图过大时有调整需求
+     * @en After the transition image to the original image enlargement effect is completed, the delay time (ms) before the transition image is removed
+     * @default 30
+     */
+    transitionEndDelay?: number;
+    /**
+     * 缩略图填充方式（backgroundPosition），默认top center
+     * @en Thumbnail fill mode (backgroundPosition), default value is top center
+     */
+    thumbPosition?: string;
+    /**
+     * 自定义DOM
+     * @en Custom dom
+     */
+    extraNode?: ReactNode;
+}
+export interface ImagePreviewProps extends Pick<CarouselProps, 'animateDurationSlide' | 'showIndicator' | 'hideSingleIndicator' | 'indicatorPos' | 'percentToChange' | 'distanceToChange' | 'speedToChange' | 'swipeable' | 'offsetBetween' | 'renderExtra'> {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 图片信息数组
+     * @en Image List
+     */
+    images: PreviewImageProps[];
+    /**
+     * 打开时展示的index，在images范围内会展示弹窗，否则隐藏弹窗
+     * @en The index displayed when it is opened, the popup will be displayed within the scope of images, otherwise the popup will be hidden
+     */
+    openIndex: number;
+    /**
+     * 是否可循环滑动
+     * @en Whether it can be swiped circularly
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * 图片布局方式，preview-y为宽度撑满高度溢出滚动，preview-x为高度撑满宽度溢出滚动
+     * @en Image layout, preview-y is overflow scrolling with full width and height, preview-x is overflow scrolling with full width and height
+     * @default "preview-y"
+     */
+    fit?: PreviewImageProps['fit'];
+    /**
+     * 打开和关闭时的过渡动画
+     * @en Transition animation on opening and closing
+     * @default 300
+     */
+    displayDuration?: number;
+    /**
+     * 是否在原图加载完成后将过渡图动画替换为原图动画
+     * @en Whether to replace the transition image animation with the original image animation after the original image is loaded
+     */
+    replaceFallbackWhenLoaded?: boolean;
+    /**
+     * 图片不可选中，屏蔽系统默认事件
+     * @en The image cannot be selected, and the system default event is blocked
+     * @default true
+     */
+    noselect?: boolean;
+    /**
+     * 图片横向间距
+     * @en Horizontal spacing of images
+     */
+    spaceBetween?: number;
+    /**
+     * 自定义展示加载中内容
+     * @en Custom display loading content
+     */
+    loadingArea?: ReactNode;
+    /**
+     * 自定义展示加载失败内容
+     * @en Custom display loading failure content
+     */
+    errorArea?: ReactNode;
+    /**
+     * 是否展示图片加载中提示
+     * @en Whether to display the image loading prompt
+     * @default true
+     */
+    showLoading?: boolean;
+    /**
+     * 是否展示图片加载失败提示
+     * @en Whether to display the image loading failure prompt
+     * @default true
+     */
+    showError?: boolean;
+    /**
+     * 失败时自动重试次数
+     * @en Number of automatic retries on failure
+     */
+    retryTime?: number;
+    /**
+     * 是否直接渲染<img>标签，不走加载图片流程
+     * @en Whether to render the <img> tag directly without going through the image loading process
+     */
+    staticLabel?: boolean;
+    /**
+     * 长图滚动变化曲线
+     * @en Scrolling change curve of long image
+     */
+    scrollBezier?: [number, number, number, number];
+    /**
+     * 只加载当前页相邻的n个内容，为0时会销毁所有相邻内容
+     * @en Only load n content adjacent to the current page, when it is 0, all adjacent content will be destroyed
+     * @default 1
+     */
+    lazyloadCount?: number;
+    /**
+     * 当图片滚动到边缘时，继续滑动是否关闭预览
+     * @en When the image is scrolled to the edge, whether to close the preview when continuing to swipe
+     * @default true
+     */
+    swipeToClose?: boolean;
+    /**
+     * 轮播索引位置
+     * @en Carousel indicator position
+     * @default "start"
+     */
+    indicatorPos?: CarouselProps['indicatorPos'];
+    /**
+     * 渲染自定义元素，如自定义关闭按钮
+     * @en Render custom elements such as custom close buttons
+     */
+    extra?: ReactNode;
+    /**
+     * 图片捏合时最小缩放倍数，松手后仍会恢复到1的状态，默认为0.7
+     * @en The minimum zoom factor when the image is pinched, it will still return to the state of 1 after letting go, the default is 0.7
+     */
+    getMinScale?: (image: HTMLImageElement | null, imageIndex: number) => number;
+    /**
+     * 图片最大缩放倍数，默认根据图片尺寸调节
+     * @en The maximum zoom factor of the image, the default is adjusted according to the picture size
+     */
+    getMaxScale?: (image: HTMLImageElement | null, imageIndex: number) => number;
+    /**
+     * 当双击图片时，图片应缩放的倍数
+     * @en The zoom factor of the image when double-clicking the image
+     */
+    getDoubleClickScale?: (currentScale: number, maxScale: number, image: HTMLImageElement | null, imageIndex: number) => number;
+    /**
+     * 获取挂载容器
+     * @en Get mounted container
+     */
+    getContainer?: () => HTMLElement;
+    /**
+     * 自定义索引内容
+     * @en Custom indicator content
+     */
+    renderIndicator?: CarouselProps['renderIndicator'];
+    /**
+     * 获取缩略图定位
+     * @en Get the thumbnail image Positioning
+     */
+    getThumbBounds?: (index: number) => ClientRect;
+    /**
+     * 索引发生改变时回调
+     * @en Callback when index changes
+     */
+    onChange?: CarouselProps['onChange'];
+    /**
+     * 索引切换，动画完成后触发
+     * @en Callback after animation is completed when the index toggles
+     */
+    onAfterChange?: (index: number) => void;
+    /**
+     * 关闭弹窗
+     *  @en close popup
+     */
+    close: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | TouchEvent) => void;
+    /**
+     * 关闭弹窗回调（动画执行完成后）
+     * @en Callback when closing the popup (after the animation is completed)
+     */
+    onClose?: () => void;
+    /**
+     * 点击图片回调，如果返回true则阻止关闭弹窗
+     * @en Callback when clicking the image, if it returns true, it will prevent the popup from closing
+     */
+    onImageClick?: (index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => boolean | void;
+    /**
+     * 双击图片回调
+     * @en Callback when double clicking the image
+     */
+    onImageDoubleClick?: (index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * 长按图片回调
+     * @en Callback when long pressing image
+     */
+    onImageLongTap?: (index: number, image: HTMLImageElement | null, e: TouchEvent) => void;
+    /**
+     * 弹窗内容touchstart事件
+     * @en Popup content touchstart event
+     */
+    onTouchStart?: (e: TouchEvent, index: number) => void | boolean;
+    /**
+     * 弹窗内容touchmove事件
+     * @en Popup content touchmove event
+     */
+    onTouchMove?: (e: TouchEvent, index: number) => void | boolean;
+    /**
+     * 弹窗内容touchend / touchcancel事件
+     * @en Popup content touchend / touchcancel events
+     */
+    onTouchEnd?: (e: TouchEvent, index: number) => void | boolean;
+}
+export interface ImagePreviewRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 原生图片 DOM 列表
+     * @en Native image DOM array
+     */
+    imageDoms: (HTMLImageElement | null)[];
+}
+export interface PreviewImageStatus {
+    firstLoaded?: boolean;
+    loaded?: boolean;
+    animated?: boolean;
+    originWidth?: number;
+    originHeight?: number;
+    originTop?: number;
+    originLeft?: number;
+    hasOverflow?: boolean;
+}
+export interface PreviewTransImageInfo {
+    src: string;
+    fit: PreviewImageProps['fit'];
+    index: number;
+    movingImage: HTMLImageElement;
+    onLoad: ImageProps['onLoad'];
+    onError: ImageProps['onError'];
+}
+export declare function methodsGenerator<P extends ImagePreviewProps>(Comp: React.FunctionComponent<P>): {
+    /**
+     * 打开图片预览
+     * @desc {en} Open image preview
+     * @param {ImagePreviewProps} config configuration
+     * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
+     */
+    open: (config: Pick<P, Exclude<keyof P, "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        close: () => void;
+        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
+    };
+};
+declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>> & {
+    /**
+     * 打开图片预览
+     * @desc {en} Open image preview
+     * @param {ImagePreviewProps} config configuration
+     * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
+     */
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "offsetBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "renderExtra" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        close: () => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "offsetBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "renderExtra" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
+    };
+};
+/**
+ * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
+ * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 图片预览
+ * @name_en ImagePreview
+ */
+export default _default;