@apdesign/web-react 1.0.0

package/es/Image/interface.d.ts

@@ -0,0 +1,274 @@
+import { CSSProperties, ReactNode, HTMLAttributes, ImgHTMLAttributes, ReactElement, SyntheticEvent } from 'react';
+/**
+ * @title Image
+ */
+export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'className'> {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 图片获取地址
+     * @en Image path
+     */
+    src?: string;
+    /**
+     * @zh 图片显示宽度
+     * @en Image width
+     */
+    width?: string | number;
+    /**
+     * @zh 图片显示高度
+     * @en Image height
+     */
+    height?: string | number;
+    /**
+     * @zh 标题
+     * @en Image title
+     */
+    title?: string;
+    /**
+     * @zh 描述
+     * @en Image description
+     */
+    description?: string;
+    /**
+     * @zh 额外操作
+     * @en Extra operations
+     */
+    actions?: ReactNode[];
+    /**
+     * @zh 底部显示的位置
+     * @en The position of footer
+     * @defaultValue inner
+     */
+    footerPosition?: 'inner' | 'outer';
+    /**
+     * @zh 是否开启简洁模式
+     * @en Whether to enable simple mode
+     */
+    simple?: boolean;
+    /**
+     * @zh 加载过渡效果，为 true 显示默认加载效果
+     * @en Load transition effect, set `true` to show the default loading effect
+     */
+    loader?: boolean | ReactNode;
+    /**
+     * @zh loader 的样式，将覆盖默认过渡效果
+     * @en The style of the loader, will override the default transition effect
+     */
+    loaderClassName?: string | string[];
+    /**
+     * @zh error 状态下显示的内容
+     * @en Content displayed in error state
+     */
+    error?: ReactNode;
+    /**
+     * @zh 是否开启预览
+     * @en Whether to enable preview
+     * @defaultValue true
+     */
+    preview?: boolean;
+    /**
+     * @zh 预览的配置项 （所有选项都是可选的）[ImagePreviewProps](#imagepreview)
+     * @en Preview options (all options are optional) [ImagePreviewProps](#imagepreview)
+     */
+    previewProps?: PartialImagePreviewProps;
+    /**
+     * @zh 使用 `Image.PreviewGroup`包裹时的预览索引，一般不用指定，当多图预览顺序出现问题时，可手动指定当前 `image` 的预览顺序
+     * @en Use `Image.PreviewGroup` to wrap the preview index. Generally, you don't need to specify it. When there is a problem with the preview order of multiple images, you can manually specify the preview order of the current `image`
+     * @version 2.23.0
+     */
+    index?: number;
+    /**
+     * @zh 开启懒加载 [Intersection_Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+     * @en lazyload loading [Intersection_Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+     * @version 2.47.0
+     */
+    lazyload?: boolean | IntersectionObserverInit;
+    /**
+     * @zh 图片加载完成时触发
+     * @en Triggered when the image is loaded
+     */
+    onLoad?: (ev: SyntheticEvent<HTMLImageElement>) => void;
+    /**
+     * @zh 图片加载失败时触发
+     * @en Triggered when image loading fails
+     */
+    onError?: (ev: SyntheticEvent<HTMLImageElement>) => void;
+}
+/**
+ * @title Image.Preview
+ */
+export interface ImagePreviewProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 图片获取地址, 在 Image 中默认是 Image 的 src
+     * @en Image path, The default in Image is the src of Image
+     */
+    src: string;
+    /**
+     * @zh 图片属性，透传至预览弹窗中的 `img` 标签上
+     * @en Image props, passthrough to the `img` tag in the preview modal
+     * @version 2.39.0
+     */
+    imgAttributes?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'>;
+    /**
+     * @zh 自定义图片预览区域的额外节点
+     * @en Additional nodes add to the image preview area
+     * @version 2.53.0
+     */
+    extra?: ReactNode;
+    /**
+     * @zh 是否可见，受控属性
+     * @en Whether is visible
+     */
+    visible?: boolean;
+    /**
+     * @zh 默认是否可见，非受控
+     * @en Whether visible by default
+     */
+    defaultVisible?: boolean;
+    /**
+     * @zh 触发 toolbar 切换为 simple 模式的宽度
+     * @en The width that triggers the toolbar to switch to simple mode
+     * @defaultValue 316
+     */
+    breakPoint?: number;
+    /**
+     * @zh 点击 mask 是否触发关闭
+     * @en Whether click mask to close
+     * @defaultValue true
+     */
+    maskClosable?: boolean;
+    /**
+     * @zh 是否显示关闭按钮
+     * @en Whether display close button
+     * @defaultValue true
+     * @version 2.16.0
+     */
+    closable?: boolean;
+    /**
+     * @zh 额外操作，[ImagePreviewActionProps](#imagepreviewactionprops)
+     * @en Extra operations, [ImagePreviewActionProps](#imagepreviewactionprops)
+     */
+    actions?: ImagePreviewActionProps[];
+    /**
+     * @zh 控制条的布局
+     * @en The layout of the control bar
+     * @defaultValue ['fullScreen', 'rotateRight', 'rotateLeft', 'zoomIn', 'zoomOut', 'originalSize', 'extra']
+     */
+    actionsLayout?: string[];
+    /**
+     * @zh 在预览缩放时会使用当前数组中的缩放百分比。若不包含 `100%`，则会自动添加在最相邻的位置。
+     * @en The zoom percentage in the current array is used when previewing zooms. If `100%` is not included, the `100%` scale will be automatically added in the most adjacent position.
+     * @defaultValue [25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500];
+     * @version 2.30.0
+     */
+    scales?: number[];
+    /**
+     * @zh 切换可见状态触发的事件
+     * @en Callback when visibility changes
+     */
+    onVisibleChange?: (visible: boolean, preVisible: boolean) => void;
+    /**
+     * @zh 弹出层挂载的节点
+     * @en Get popup's parent node
+     * @defaultValue () => document.body
+     * @version 2.16.0
+     */
+    getPopupContainer?: () => HTMLElement;
+    /**
+     * @zh  按 `ESC` 键关闭预览
+     * @en Whether to enable pressing `ESC` to close the preview.
+     * @defaultValue true
+     * @version 2.24.0
+     */
+    escToExit?: boolean;
+    /**
+     * @zh 自定义 IMG 元素的渲染
+     * @en Rendering of custom IMG elements
+     * @version 2.58.0
+     */
+    imageRender?: (originalNode: ReactElement) => ReactNode;
+    /**
+     * @zh 开启位置修正
+     * @en Enable position correction
+     * @defaultValue true
+     * @version 2.61.0
+     */
+    resetTranslate?: boolean;
+}
+export declare type PartialImagePreviewProps = Partial<ImagePreviewProps>;
+/**
+ * @title Image.PreviewGroup
+ * @zh 从 `v2.14.0` 开始支持
+ * @en Start from `v2.14.0`
+ */
+export interface ImagePreviewGroupProps extends Omit<PartialImagePreviewProps, 'src'> {
+    /**
+     * @zh 图片列表 （设置了本属性之后，将不再收集 Image 子组件的图片信息）
+     * @en Image path list（After setting this property, the information of the `Image` sub-component will no longer be collected)
+     */
+    srcList?: string[];
+    /**
+     * @zh 当前展示的图片的下标 (受控属性)
+     * @en The index of current image (controlled prop)
+     */
+    current?: number;
+    /**
+     * @zh 第一张展示的图片的下标
+     * @en The default index of first image
+     */
+    defaultCurrent?: number;
+    /**
+     * @zh 是否无限循环
+     * @en Whether to loop infinitely
+     */
+    infinite?: boolean;
+    /**
+     * @zh 是否渲染图片列表，用于提前加载图片
+     * @en Whether to render the image list for loading images in advance
+     * @version 2.58.0
+     */
+    forceRender?: boolean;
+    /**
+     * @zh 切换图片触发的事件
+     * @en Callback when image switches
+     */
+    onChange?: (index: number) => void;
+}
+/**
+ * @title ImagePreviewActionProps
+ * @zh `<Image.Preview>` 中类型 `ImagePreviewActionProps` 详细参数。
+ * @en Detailed parameters of type `ImagePreviewActionProps` in `<Image.Preview>`.
+ */
+export interface ImagePreviewActionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * @zh 唯一标识
+     * @en Unique identifier
+     */
+    key: string;
+    /**
+     * @zh 内容
+     * @en content
+     */
+    content: ReactNode;
+    /**
+     * @zh
+     * 因为 content 只能定义内容，所以提供这个函数用于支持自定义外围元素，需要注意的是设置了 `getContainer`, 显示 `name` 的 `Tooltip` 将失效。
+     * @en
+     * Because content can only specify content, this function is provided to support custom peripheral elements.
+     * Note that if `getContainer` is set, the `Tooltip` displaying `name` will be invalid
+     */
+    getContainer?: (actionElement: ReactNode) => ReactNode;
+    /**
+     * @zh 名称
+     * @en name
+     */
+    name?: string;
+    /**
+     * @zh 是否禁用
+     * @en Whether disabled
+     */
+    disabled?: boolean;
+}

package/es/Image/interface.js

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

package/es/Image/previewGroupContext.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { ImagePreviewProps } from './interface';
+export interface PreviewUrl {
+    url: string;
+    preview: boolean;
+}
+export declare type PreviewUrlMap = Map<number, PreviewUrl>;
+export declare type UnRegisterPreviewUrl = (id: number) => void;
+export declare type UnRegisterPreviewProps = (id: number) => void;
+export declare type RegisterPreviewUrl = (id: number, url: string, preview: boolean) => UnRegisterPreviewUrl;
+export declare type RegisterPreviewProps = (id: number, previewProps?: Partial<ImagePreviewProps>) => UnRegisterPreviewProps;
+export interface PreviewGroupContextProps {
+    previewGroup: boolean;
+    previewUrlMap: Map<number, string>;
+    previewPropsMap: Map<number, Partial<ImagePreviewProps>>;
+    infinite?: boolean;
+    currentIndex: number;
+    setCurrentIndex: (current: number) => void;
+    setPreviewUrlMap: (map: PreviewUrlMap) => void;
+    registerPreviewUrl: RegisterPreviewUrl;
+    registerPreviewProps: RegisterPreviewProps;
+    visible: boolean;
+    handleVisibleChange: (visible: boolean, preVisible?: boolean) => void;
+}
+export declare const PreviewGroupContext: import("react").Context<PreviewGroupContextProps>;

package/es/Image/previewGroupContext.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+export var PreviewGroupContext = createContext({
+    previewGroup: false,
+    previewUrlMap: new Map(),
+    previewPropsMap: new Map(),
+    infinite: true,
+    currentIndex: 0,
+    setCurrentIndex: function () { return null; },
+    setPreviewUrlMap: function () { return null; },
+    registerPreviewUrl: function () { return null; },
+    registerPreviewProps: function () { return null; },
+    visible: false,
+    handleVisibleChange: function () { return null; },
+});

package/es/Image/style/css.js

@@ -0,0 +1,2 @@
+import '../../style/index.css';
+import './index.css';

package/es/Image/style/image.less

@@ -0,0 +1,226 @@
+@image-prefix-cls: ~'@{prefix}-image';
+
+.@{image-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  border-radius: @image-radius;
+  vertical-align: middle;
+
+  &-img {
+    vertical-align: middle;
+    border-radius: inherit;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px @image-color-box-shadow;
+    }
+  }
+
+  &-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-footer {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+
+    &-block {
+      flex: auto;
+    }
+  }
+
+  &-caption {
+    &-title {
+      font-size: @image-font-size-title;
+      font-weight: @image-font-weight-title;
+    }
+
+    &-description {
+      font-size: @image-font-size-description;
+    }
+  }
+
+  &-actions {
+    padding-left: @image-spacing-actions-left;
+
+    &-list {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    &-item {
+      font-size: @image-font-size-actions-item;
+      line-height: 1;
+      margin-left: @image-spacing-actions-item-left;
+      border-radius: @image-radius-actions-item;
+      padding: @image-padding-actions-item-vertical @image-padding-actions-item-horizontal;
+      cursor: pointer;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &-trigger {
+        padding: @image-spacing-actions-trigger-item-vertical
+          @image-spacing-actions-trigger-item-horizontal;
+        display: inline-block;
+      }
+    }
+  }
+
+  &-with-footer-inner {
+    .@{image-prefix-cls}-footer {
+      background: @image-color-footer_inner-bg;
+      color: @image-color-footer_inner-text;
+      box-sizing: border-box;
+      padding: @image-padding-footer_inner_vertical @image-padding-footer_inner_horizontal;
+      align-items: center;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      border-bottom-right-radius: inherit;
+      border-bottom-left-radius: inherit;
+    }
+
+    .@{image-prefix-cls}-caption {
+      &-title {
+        color: @image-color-title_footer_inner-text;
+      }
+
+      &-description {
+        color: @image-color-description_footer_inner-text;
+      }
+    }
+
+    .@{image-prefix-cls}-actions {
+      &-item {
+        &:hover {
+          background: @image-color-actions-item_footer_inner_hover-bg;
+        }
+      }
+    }
+  }
+
+  &-with-footer-outer {
+    .@{image-prefix-cls}-footer {
+      color: @image-color-footer_outer-text;
+      margin-top: @image-spacing-footer-top;
+    }
+
+    .@{image-prefix-cls}-caption {
+      &-title {
+        color: @image-color-title_footer_outer-text;
+      }
+
+      &-description {
+        color: @image-color-description_footer_outer-text;
+      }
+    }
+
+    .@{image-prefix-cls}-actions {
+      &-item {
+        &:hover {
+          background: @image-color-actions-item_footer_outer_hover-bg;
+        }
+      }
+    }
+  }
+
+  &-with-preview:hover {
+    cursor: zoom-in;
+  }
+
+  &-error {
+    width: 100%;
+    height: 100%;
+    background-color: @image-color-error-bg;
+    color: @image-color-error-text;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &-icon {
+      width: @image-font-size-error-icon;
+      height: @image-font-size-error-icon;
+      max-width: 100%;
+      max-height: 100%;
+
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-alt {
+      font-size: @image-font-size-error-text;
+      line-height: @image-line-height-error-text;
+      text-align: center;
+      padding: (@image-spacing-error-padding / 2) @image-spacing-error-padding;
+    }
+  }
+
+  &-loader {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: @image-color-loader-bg;
+
+    &-spin {
+      font-size: @image-font-size-loader-spin;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      color: @image-color-loader-spin-text;
+      left: 50%;
+      top: 50%;
+      text-align: center;
+
+      &-text {
+        color: @image-color-loader-spin-text-text;
+        font-size: @image-font-size-loader-spin-text;
+      }
+    }
+  }
+
+  &-simple {
+    &.@{image-prefix-cls}-with-footer-inner {
+      .@{image-prefix-cls}-footer {
+        padding: @image-spacing-footer_inner_simple-vertical
+          @image-spacing-footer_inner_simple-horizontal;
+      }
+    }
+  }
+
+  &-before-load,
+  &-loading,
+  &-loading-error {
+    .@{image-prefix-cls}-img {
+      visibility: hidden;
+    }
+  }
+
+  &-trigger {
+    .@{image-prefix-cls}-actions {
+      &-list {
+        flex-direction: column;
+      }
+
+      &-item {
+        color: @image-color-actions-item_trigger-text;
+        margin-left: 0;
+
+        &:hover {
+          background: @image-color-actions-item_trigger_hover-bg;
+        }
+      }
+    }
+  }
+}

package/es/Image/style/index.css

@@ -0,0 +1 @@
+.arco-image-trigger{padding:6px 4px;background:var(--color-bg-5);border:1px solid var(--color-neutral-3);border-radius:4px}.arco-image-trigger .arco-trigger-arrow{border:1px solid var(--color-neutral-3);background-color:var(--color-bg-5)}.arco-image{position:relative;display:inline-block;border-radius:var(--border-radius-small);vertical-align:middle}.arco-image-img{vertical-align:middle;border-radius:inherit}.arco-image-img:focus-visible{box-shadow:0 0 0 2px rgb(var(--primary-6))}.arco-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.arco-image-footer{width:100%;max-width:100%;display:flex}.arco-image-footer-block{flex:auto}.arco-image-caption-title{font-size:16px;font-weight:500}.arco-image-caption-description{font-size:14px}.arco-image-actions{padding-left:12px}.arco-image-actions-list{display:flex;justify-content:flex-end;align-items:center}.arco-image-actions-item{font-size:14px;line-height:1;margin-left:12px;border-radius:var(--border-radius-small);padding:0 0;cursor:pointer}.arco-image-actions-item:first-child{margin-left:0}.arco-image-actions-item-trigger{padding:5px 4px;display:inline-block}.arco-image-with-footer-inner .arco-image-footer{background:linear-gradient(360deg,rgba(0,0,0,.3) 0,rgba(0,0,0,0) 100%);color:var(--color-white);box-sizing:border-box;padding:9px 16px;align-items:center;position:absolute;left:0;bottom:0;border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.arco-image-with-footer-inner .arco-image-caption-title{color:var(--color-white)}.arco-image-with-footer-inner .arco-image-caption-description{color:var(--color-white)}.arco-image-with-footer-inner .arco-image-actions-item:hover{background:rgba(0,0,0,.5)}.arco-image-with-footer-outer .arco-image-footer{color:var(--color-neutral-8);margin-top:4px}.arco-image-with-footer-outer .arco-image-caption-title{color:var(--color-text-1)}.arco-image-with-footer-outer .arco-image-caption-description{color:var(--color-neutral-6)}.arco-image-with-footer-outer .arco-image-actions-item:hover{background:var(--color-neutral-2)}.arco-image-with-preview:hover{cursor:zoom-in}.arco-image-error{width:100%;height:100%;background-color:var(--color-neutral-1);color:var(--color-neutral-4);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center}.arco-image-error-icon{width:60px;height:60px;max-width:100%;max-height:100%}.arco-image-error-icon>svg{width:100%;height:100%}.arco-image-error-alt{font-size:12px;line-height:1.6667;text-align:center;padding:8px 16px}.arco-image-loader{width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--color-neutral-1)}.arco-image-loader-spin{font-size:32px;transform:translate(-50%,-50%);position:absolute;color:rgb(var(--primary-6));left:50%;top:50%;text-align:center}.arco-image-loader-spin-text{color:var(--color-neutral-6);font-size:16px}.arco-image-simple.arco-image-with-footer-inner .arco-image-footer{padding:12px 16px}.arco-image-before-load .arco-image-img,.arco-image-loading .arco-image-img,.arco-image-loading-error .arco-image-img{visibility:hidden}.arco-image-trigger .arco-image-actions-list{flex-direction:column}.arco-image-trigger .arco-image-actions-item{color:var(--color-neutral-8);margin-left:0}.arco-image-trigger .arco-image-actions-item:hover{background:var(--color-neutral-2)}.arco-image-preview{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1001}.arco-image-preview-hide{display:none}.arco-image-preview-mask,.arco-image-preview-wrapper{position:absolute;width:100%;height:100%;top:0;left:0}.arco-image-preview-mask{background-color:var(--color-mask-bg)}.arco-image-preview-img-container{width:100%;height:100%;text-align:center}.arco-image-preview-img-container::before{content:'';width:0;height:100%;vertical-align:middle;display:inline-block}.arco-image-preview-img-container .arco-image-preview-img{max-width:100%;max-height:100%;display:inline-block;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:-webkit-grab;cursor:grab}.arco-image-preview-img-container .arco-image-preview-img.arco-image-preview-img-moving{cursor:-webkit-grabbing;cursor:grabbing}.arco-image-preview-scale-value{padding:7px 10px;box-sizing:border-box;font-size:12px;color:var(--color-white);background-color:rgba(255,255,255,.08);line-height:initial;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.arco-image-preview-toolbar{background-color:var(--color-bg-2);border-radius:var(--border-radius-medium);display:flex;align-items:flex-start;padding:4px 16px;position:absolute;bottom:46px;left:50%;transform:translateX(-50%)}.arco-image-preview-toolbar-action{font-size:14px;color:var(--color-neutral-8);border-radius:var(--border-radius-small);background-color:transparent;cursor:pointer;display:flex;align-items:center}.arco-image-preview-toolbar-action:not(:last-of-type){margin-right:0}.arco-image-preview-toolbar-action:hover{background-color:var(--color-neutral-2);color:rgb(var(--primary-6))}.arco-image-preview-toolbar-action-disabled,.arco-image-preview-toolbar-action-disabled:hover{color:var(--color-text-4);background-color:transparent;cursor:not-allowed}.arco-image-preview-toolbar-action-name{font-size:12px;padding-right:12px}.arco-image-preview-toolbar-action-content{padding:13px;line-height:1}.arco-image-preview-toolbar-simple{padding:4px 4px}.arco-image-preview-toolbar-simple .arco-image-preview-toolbar-action{margin-right:0}.arco-image-preview-trigger.arco-image-trigger{padding:12px 16px}.arco-image-preview-trigger.arco-image-trigger .arco-image-preview-toolbar-action{text-align:left;margin-right:0}.arco-image-preview-trigger.arco-image-trigger .arco-image-preview-toolbar-action:not(:last-of-type){margin-bottom:0}.arco-image-preview-loading{color:rgb(var(--primary-6));background-color:#232324;font-size:18px;padding:10px;width:48px;height:48px;border-radius:var(--border-radius-medium);box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.arco-image-preview-close-btn{width:32px;height:32px;line-height:32px;background:rgba(0,0,0,.5);color:var(--color-white);text-align:center;border-radius:50%;position:absolute;right:36px;top:36px;cursor:pointer;font-size:14px}.arco-image-preview-arrow-left,.arco-image-preview-arrow-right{display:flex;align-items:center;justify-content:center;position:absolute;width:32px;height:32px;border-radius:50%;color:var(--color-white);background-color:rgba(255,255,255,.3);cursor:pointer;z-index:2}.arco-image-preview-arrow-left>svg,.arco-image-preview-arrow-right>svg{color:var(--color-white);font-size:16px}.arco-image-preview-arrow-left:hover,.arco-image-preview-arrow-right:hover{background-color:rgba(255,255,255,.5)}.arco-image-preview-arrow-left{left:20px;top:50%;transform:translateY(-50%)}.arco-image-preview-arrow-right{top:50%;transform:translateY(-50%);right:20px}.arco-image-preview-arrow-disabled{cursor:not-allowed;background-color:rgba(255,255,255,.2);color:rgba(255,255,255,.3)}.arco-image-preview-arrow-disabled>svg{color:rgba(255,255,255,.3)}.arco-image-preview-arrow-disabled:hover{background-color:rgba(255,255,255,.2)}.fadeImage-appear,.fadeImage-enter{opacity:0}.fadeImage-appear-active,.fadeImage-enter-active{opacity:1;transition:opacity .4s cubic-bezier(.3,1.3,.3,1)}.fadeImage-exit{opacity:1}.fadeImage-exit-active{opacity:0;transition:opacity .4s cubic-bezier(.3,1.3,.3,1)}.arco-image-rtl{direction:rtl}.arco-image-rtl .arco-image-actions-item{margin-left:0;margin-right:12px}.arco-image-rtl .arco-image-actions-item:first-child{margin-right:0}

package/es/Image/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/Image/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/Image/style/index.less

@@ -0,0 +1,6 @@
+@import '../../style/theme/default.less';
+@import './token.less';
+@import './trigger.less';
+@import './image.less';
+@import './preview.less';
+@import './rtl.less';