@arco-design/mobile-react 2.19.0

package/cjs/image/style/css/index.css

@@ -0,0 +1,172 @@
+.arco-image {
+  display: inline-block;
+  position: relative;
+}
+.arco-image.preview {
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.arco-image.preview .image-container,
+.arco-image.preview .image-loading-container .image-loading,
+.arco-image.preview .image-error-container .image-retry-load {
+  background-color: transparent;
+}
+.arco-image.preview .image-container::after {
+  border-color: transparent;
+}
+.arco-image .image-bottom-overlap,
+.arco-image .image-top-overlap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.arco-image .image-bottom-overlap {
+  z-index: 0;
+  overflow: hidden;
+}
+.arco-image .image-placeholder {
+  background-color:  #f7f8fa ;
+  width: 100%;
+  height: 100%;
+}
+.arco-image .image-top-overlap {
+  z-index: 10;
+}
+.arco-image .image-loading-container,
+.arco-image .image-error-container {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  z-index: 2;
+  font-size:  0.32rem ;
+}
+.arco-image .image-container {
+  position: relative;
+  font-size: 0;
+  opacity: 0;
+  z-index: 1;
+}
+.arco-image .image-container.static-label,
+.arco-image .image-container.loaded,
+.arco-image .image-container.error {
+  opacity: 1;
+}
+.arco-image .image-container.animate {
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-timing-function:  cubic-bezier(0.39, 0.575, 0.565, 1) ;
+          transition-timing-function:  cubic-bezier(0.39, 0.575, 0.565, 1) ;
+}
+.arco-image .image-container .bordered {
+  box-shadow: 0 0 0 1PX #e5e6eb inset;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .arco-image .image-container .bordered {
+    box-shadow: 0 0 0 0.5PX #e5e6eb inset;
+  }
+}
+.ios .arco-image .image-container .bordered,
+.arco-image .image-container .bordered.ios {
+  box-shadow: none;
+  border: 0.5PX solid #e5e6eb;
+}
+.arco-image .image-container,
+.arco-image .image-container img {
+  width: inherit;
+  height: inherit;
+  min-width: inherit;
+  min-height: inherit;
+  max-width: inherit;
+  max-height: inherit;
+}
+.arco-image .image-container .preview-fit-contain-y {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.arco-image .image-container .preview-fit-contain-x {
+  height: 100%;
+  width: auto;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.arco-image .image-error-container .image-retry-load {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  background-color:  rgba(0, 0, 0, 0.6) ;
+  font-size:  0.32rem ;
+  color:  #e6e8eb ;
+}
+.arco-image .image-loading-container .image-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  color:  #e6e8eb ;
+  background-color:  rgba(0, 0, 0, 0.6) ;
+}
+.arco-image .image-loading-container .image-loading .bg-color-with-config {
+  background: #e6e8eb;
+}
+.arco-image .image-loading-container .image-loading .stop-color-with-config {
+  stop-color: #e6e8eb;
+}
+.arco-image .image-loading-container .image-loading .fill-color-with-config {
+  fill: #e6e8eb;
+}
+.arco-image .image-loading-container .image-loading .stroke-color-with-config {
+  stroke: #e6e8eb;
+}

package/cjs/image/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../loading/style/css';
+import './index.css';

package/cjs/image/style/css/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("../../../loading/style/css");
+
+require("./index.css");

package/cjs/image/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../loading/style';
+import './index.less';

package/cjs/image/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("../../loading/style");
+
+require("./index.less");

package/cjs/image/style/index.less

@@ -0,0 +1,144 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-image {
+    display: inline-block;
+    position: relative;
+
+    &.preview {
+        transition: all .3s ease-in-out;
+
+        .image-container,
+        .image-loading-container .image-loading,
+        .image-error-container .image-retry-load {
+            background-color: transparent;
+        }
+
+        .image-container::after {
+            border-color: transparent;
+        }
+    }
+
+    .image-bottom-overlap,
+    .image-top-overlap {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .image-bottom-overlap {
+        z-index: 0;
+        overflow: hidden;
+    }
+
+    .image-placeholder {
+        .use-var(background-color, image-placeholder-background);
+        width: 100%;
+        height: 100%;
+    }
+
+    .image-top-overlap {
+        z-index: 10;
+    }
+
+    .image-loading-container,
+    .image-error-container {
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        .use-var(font-size, image-inner-font-size);
+    }
+
+    .image-container {
+        position: relative;
+        font-size: 0;
+        opacity: 0;
+        z-index: 1;
+
+        &.static-label,
+        &.loaded,
+        &.error {
+            opacity: 1;
+        }
+
+        &.animate {
+            transition-property: opacity;
+            .use-var(transition-timing-function, image-transition-function);
+        }
+
+        .bordered {
+            .hairline-var(line-color);
+        }
+
+        &,
+        & img {
+            width: inherit;
+            height: inherit;
+            min-width: inherit;
+            min-height: inherit;
+            max-width: inherit;
+            max-height: inherit;
+        }
+
+        .preview-fit-contain-y {
+            width: 100%;
+            height: auto;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .preview-fit-contain-x {
+            height: 100%;
+            width: auto;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    .image-error-container {
+
+        .image-retry-load {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(background-color, image-mask-background);
+            .use-var(font-size, image-retry-font-size);
+            .use-var(color, image-retry-icon-color);
+        }
+    }
+
+    .image-loading-container {
+
+        .image-loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(color, image-loading-icon-color);
+            .use-var(background-color, image-mask-background);
+            .set-loading-color-var(image-loading-icon-color);
+        }
+    }
+}

package/cjs/image-preview/demo/style/css/mobile.css

@@ -0,0 +1,31 @@
+#demo-image-preview {
+  padding-bottom: 0.54rem;
+}
+#demo-image-preview .arcodesign-mobile-demo-content {
+  padding: 0 0.24rem;
+  background: transparent;
+}
+#demo-image-preview .arco-cell {
+  border-radius: 0.16rem;
+  overflow: hidden;
+}
+#demo-image-preview .image-fit-demo {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+          flex-direction: row;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+}
+#demo-image-preview .image-fit-demo .arco-image {
+  width: 2.18rem;
+  height: 2.18rem;
+  border-radius: 2px;
+  overflow: hidden;
+}

package/cjs/image-preview/demo/style/mobile.less

@@ -0,0 +1,25 @@
+@import '../../../../style/mixin.less';
+
+#demo-image-preview {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        .rem(padding, 0, 12);
+        background: transparent;
+    }
+    .@{prefix}-cell {
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+    .image-fit-demo {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .@{prefix}-image {
+            .rem(width, 109);
+            .rem(height, 109);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+    }
+}

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

@@ -0,0 +1,288 @@
+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;
+    /**
+     * 缩略图填充方式（backgroundPosition），默认top center
+     * @en Thumbnail fill mode (backgroundPosition), default value is top center
+     */
+    thumbPosition?: string;
+}
+export interface ImagePreviewProps extends Pick<CarouselProps, 'animateDurationSlide' | 'showIndicator' | 'hideSingleIndicator' | 'indicatorPos' | 'percentToChange' | 'distanceToChange' | 'speedToChange' | 'swipeable'> {
+    /**
+     * 自定义样式
+     * @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'];
+    /**
+     * 图片捏合时最小缩放倍数，松手后仍会恢复到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">>) => {
+        close: () => void;
+        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void; /**
+         * 是否可循环滑动
+         * @en Whether it can be swiped circularly
+         * @default false
+         */
+    };
+};
+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<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
+        close: () => void;
+        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
+         * 是否可循环滑动
+         * @en Whether it can be swiped circularly
+         * @default false
+         */
+    };
+};
+/**
+ * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
+ * @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;