amis 2.0.0-rc.10 → 2.0.0-rc.16

package/esm/renderers/Image.d.ts

@@ -0,0 +1,415 @@
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { ThemeProps } from 'amis-core';
+import { LocaleProps } from 'amis-core';
+import { BaseSchema, SchemaClassName, SchemaTpl, SchemaUrlPath } from '../Schema';
+/**
+ * 图片展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/image
+ */
+export interface ImageSchema extends BaseSchema {
+    /**
+     * 指定为图片展示类型
+     */
+    type: 'image' | 'static-image';
+    /**
+     * 默认图片地址
+     */
+    defaultImage?: SchemaUrlPath;
+    /**
+     * 图片标题
+     */
+    title?: SchemaTpl;
+    /**
+     * 关联字段名，也可以直接配置 src
+     */
+    name?: string;
+    /**
+     * 图片描述信息
+     */
+    imageCaption?: SchemaTpl;
+    /**
+     * 图片地址，如果配置了 name，这个属性不用配置。
+     */
+    src?: SchemaUrlPath;
+    /**
+     * 大图地址，不设置用 src
+     */
+    originalSrc?: SchemaUrlPath;
+    /**
+     * 是否启动放大功能。
+     */
+    enlargeAble?: boolean;
+    /**
+     * 是否显示尺寸。
+     */
+    /**
+     * 图片无法显示时的替换文本
+     */
+    alt?: string;
+    /**
+     * 高度
+     */
+    height?: number;
+    /**
+     * 宽度
+     */
+    width?: number;
+    /**
+     * 图片 css 类名
+     */
+    imageClassName?: SchemaClassName;
+    /**
+     * 外层 css 类名
+     */
+    className?: SchemaClassName;
+    /**
+     * 图片缩率图外层 css 类名
+     */
+    thumbClassName?: SchemaClassName;
+    caption?: SchemaTpl;
+    /**
+     * 图片展示模式，默认为缩略图模式、可以配置成原图模式
+     */
+    imageMode?: 'thumb' | 'original';
+    /**
+     * 预览图模式
+     */
+    thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
+    /**
+     * 预览图比率
+     */
+    thumbRatio?: '1:1' | '4:3' | '16:9';
+    /**
+     * 链接地址
+     */
+    href?: SchemaTpl;
+    /**
+     * 是否新窗口打开
+     */
+    blank?: boolean;
+    /**
+     * 链接的 target
+     */
+    htmlTarget?: string;
+}
+export interface ImageThumbProps extends LocaleProps, ThemeProps, Omit<ImageSchema, 'type' | 'className'> {
+    onEnlarge?: (info: ImageThumbProps) => void;
+    index?: number;
+    onLoad?: React.EventHandler<any>;
+    overlays?: JSX.Element;
+}
+export declare class ImageThumb extends React.Component<ImageThumbProps> {
+    handleEnlarge(): void;
+    render(): JSX.Element;
+}
+declare const ThemedImageThumb: {
+    new (props: Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+        locale?: string | undefined;
+        translate?: ((str: string, ...args: any[]) => string) | undefined;
+    }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }, keyof ThemeProps> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<{
+        new (props: Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }): {
+            ref: any;
+            /**
+             * 图片无法显示时的替换文本
+             */
+            childRef(ref: any): void; /**
+             * 图片无法显示时的替换文本
+             */
+            getWrappedInstance(): any;
+            render(): JSX.Element;
+            context: any; /**
+             * 宽度
+             */
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            shouldComponentUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        displayName: string;
+        contextType: React.Context<string>;
+        ComposedComponent: React.ComponentType<typeof ImageThumb>;
+    } & import("hoist-non-react-statics").NonReactStatics<typeof ImageThumb, {}> & {
+        ComposedComponent: typeof ImageThumb;
+    }>;
+} & import("hoist-non-react-statics").NonReactStatics<{
+    new (props: Omit<ImageThumbProps, keyof LocaleProps> & {
+        locale?: string | undefined;
+        translate?: ((str: string, ...args: any[]) => string) | undefined;
+    }): {
+        ref: any;
+        /**
+         * 图片无法显示时的替换文本
+         */
+        childRef(ref: any): void; /**
+         * 图片无法显示时的替换文本
+         */
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any; /**
+         * 宽度
+         */
+        setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof ImageThumb>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof ImageThumb, {}> & {
+    ComposedComponent: typeof ImageThumb;
+}, {}> & {
+    ComposedComponent: {
+        new (props: Omit<ImageThumbProps, keyof LocaleProps> & {
+            locale?: string | undefined;
+            translate?: ((str: string, ...args: any[]) => string) | undefined;
+        }): {
+            ref: any;
+            /**
+             * 图片无法显示时的替换文本
+             */
+            childRef(ref: any): void; /**
+             * 图片无法显示时的替换文本
+             */
+            getWrappedInstance(): any;
+            render(): JSX.Element;
+            context: any; /**
+             * 宽度
+             */
+            setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            shouldComponentUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<ImageThumbProps, keyof LocaleProps> & {
+                locale?: string | undefined;
+                translate?: ((str: string, ...args: any[]) => string) | undefined;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        displayName: string;
+        contextType: React.Context<string>;
+        ComposedComponent: React.ComponentType<typeof ImageThumb>;
+    } & import("hoist-non-react-statics").NonReactStatics<typeof ImageThumb, {}> & {
+        ComposedComponent: typeof ImageThumb;
+    };
+};
+export default ThemedImageThumb;
+export declare const imagePlaceholder = "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E";
+export interface ImageFieldProps extends RendererProps {
+    className?: string;
+    imageClassName?: string;
+    placeholder: string;
+    description?: string;
+    enlargeTitle?: string;
+    enlargeCaption?: string;
+    imageMode?: 'thumb' | 'original';
+    thumbMode: 'w-full' | 'h-full' | 'contain' | 'cover';
+    thumbRatio: '1:1' | '4:3' | '16:9';
+    originalSrc?: string;
+    enlargeAble?: boolean;
+    onImageEnlarge?: (info: {
+        src: string;
+        originalSrc: string;
+        title?: string;
+        caption?: string;
+        thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
+        thumbRatio?: '1:1' | '4:3' | '16:9';
+    }, target: any) => void;
+}
+export declare class ImageField extends React.Component<ImageFieldProps, object> {
+    static defaultProps: Pick<ImageFieldProps, 'defaultImage' | 'thumbMode' | 'thumbRatio' | 'placeholder'>;
+    handleEnlarge({ src, originalSrc, title, caption, thumbMode, thumbRatio }: ImageThumbProps): void;
+    handleClick(e: React.MouseEvent<HTMLElement>): void;
+    render(): JSX.Element;
+}
+export declare class ImageFieldRenderer extends ImageField {
+}

package/esm/renderers/Image.js

@@ -0,0 +1,120 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __rest, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { autobind, themeable, localeable, handleAction, filter, getPropValue, Renderer } from 'amis-core';
+import { Icon } from 'amis-ui';
+
+var ImageThumb = /** @class */ (function (_super) {
+    __extends(ImageThumb, _super);
+    function ImageThumb() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ImageThumb.prototype.handleEnlarge = function () {
+        var _a = this.props, onEnlarge = _a.onEnlarge, rest = __rest(_a, ["onEnlarge"]);
+        onEnlarge && onEnlarge(rest);
+    };
+    ImageThumb.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, className = _a.className, imageClassName = _a.imageClassName, thumbClassName = _a.thumbClassName, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio, height = _a.height, width = _a.width, src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, href = _a.href, _b = _a.blank, blank = _b === void 0 ? true : _b, htmlTarget = _a.htmlTarget, onLoad = _a.onLoad, enlargeAble = _a.enlargeAble, __ = _a.translate, overlays = _a.overlays, imageMode = _a.imageMode;
+        var enlarge = enlargeAble || overlays ? (React.createElement("div", { key: "overlay", className: cx('Image-overlay') },
+            enlargeAble ? (React.createElement("a", { "data-tooltip": __('Image.zoomIn'), "data-position": "bottom", target: "_blank", onClick: this.handleEnlarge },
+                React.createElement(Icon, { icon: "view", className: "icon" }))) : null,
+            overlays)) : null;
+        var image = (React.createElement("div", { className: cx('Image', imageMode === 'original' ? 'Image--original' : 'Image--thumb', className) },
+            imageMode === 'original' ? (React.createElement("div", { className: cx('Image-origin', thumbMode ? "Image-origin--".concat(thumbMode) : ''), style: { height: height, width: width } },
+                React.createElement("img", { onLoad: onLoad, className: cx('Image-image', imageClassName), src: src, alt: alt }),
+                enlarge)) : (React.createElement("div", { className: cx('Image-thumbWrap') },
+                React.createElement("div", { className: cx('Image-thumb', thumbClassName, thumbMode ? "Image-thumb--".concat(thumbMode) : '', thumbRatio
+                        ? "Image-thumb--".concat(thumbRatio.replace(/:/g, '-'))
+                        : ''), style: { height: height, width: width } },
+                    React.createElement("img", { onLoad: onLoad, className: cx('Image-image', imageClassName), src: src, alt: alt })),
+                enlarge)),
+            title || caption ? (React.createElement("div", { key: "caption", className: cx('Image-info') },
+                title ? (React.createElement("div", { className: cx('Image-title'), title: title }, title)) : null,
+                caption ? (React.createElement("div", { className: cx('Image-caption'), title: caption }, caption)) : null)) : null));
+        if (href) {
+            image = (React.createElement("a", { href: href, target: htmlTarget || (blank ? '_blank' : '_self'), className: cx('Link', className), title: title }, image));
+        }
+        return image;
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ImageThumb.prototype, "handleEnlarge", null);
+    return ImageThumb;
+}(React.Component));
+var ThemedImageThumb = themeable(localeable(ImageThumb));
+var imagePlaceholder = "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E";
+var ImageField = /** @class */ (function (_super) {
+    __extends(ImageField, _super);
+    function ImageField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ImageField.prototype.handleEnlarge = function (_a) {
+        var src = _a.src, originalSrc = _a.originalSrc, title = _a.title, caption = _a.caption, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio;
+        var _b = this.props, onImageEnlarge = _b.onImageEnlarge, enlargeTitle = _b.enlargeTitle, enlargeCaption = _b.enlargeCaption;
+        onImageEnlarge &&
+            onImageEnlarge({
+                src: src,
+                originalSrc: originalSrc || src,
+                title: enlargeTitle || title,
+                caption: enlargeCaption || caption,
+                thumbMode: thumbMode,
+                thumbRatio: thumbRatio
+            }, this.props);
+    };
+    ImageField.prototype.handleClick = function (e) {
+        var clickAction = this.props.clickAction;
+        if (clickAction) {
+            handleAction(e, clickAction, this.props);
+        }
+    };
+    ImageField.prototype.render = function () {
+        var _a;
+        var _b = this.props, className = _b.className, defaultImage = _b.defaultImage, imageCaption = _b.imageCaption, title = _b.title, data = _b.data, imageClassName = _b.imageClassName, thumbClassName = _b.thumbClassName, height = _b.height, width = _b.width, cx = _b.classnames, src = _b.src, href = _b.href, thumbMode = _b.thumbMode, thumbRatio = _b.thumbRatio, placeholder = _b.placeholder, originalSrc = _b.originalSrc, enlargeAble = _b.enlargeAble, imageMode = _b.imageMode;
+        var finnalSrc = src ? filter(src, data, '| raw') : '';
+        var value = finnalSrc || getPropValue(this.props) || defaultImage || imagePlaceholder;
+        var finnalHref = href ? filter(href, data, '| raw') : '';
+        return (React.createElement("div", { className: cx('ImageField', imageMode === 'original'
+                ? 'ImageField--original'
+                : 'ImageField--thumb', className), onClick: this.handleClick }, value ? (React.createElement(ThemedImageThumb, { imageClassName: imageClassName, thumbClassName: thumbClassName, height: height, width: width, src: value, href: finnalHref, title: filter(title, data), caption: filter(imageCaption, data), thumbMode: thumbMode, thumbRatio: thumbRatio, originalSrc: (_a = filter(originalSrc, data, '| raw')) !== null && _a !== void 0 ? _a : value, enlargeAble: enlargeAble && value !== defaultImage, onEnlarge: this.handleEnlarge, imageMode: imageMode })) : (React.createElement("span", { className: "text-muted" }, placeholder))));
+    };
+    ImageField.defaultProps = {
+        defaultImage: imagePlaceholder,
+        thumbMode: 'contain',
+        thumbRatio: '1:1',
+        placeholder: '-'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ImageField.prototype, "handleEnlarge", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ImageField.prototype, "handleClick", null);
+    return ImageField;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(ImageFieldRenderer, _super);
+    function ImageFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ImageFieldRenderer = __decorate([
+        Renderer({
+            type: 'image'
+        })
+    ], ImageFieldRenderer);
+    return ImageFieldRenderer;
+})(ImageField));
+
+export { ImageField, ImageThumb, ThemedImageThumb as default, imagePlaceholder };

package/esm/renderers/Images.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { ImageThumbProps } from './Image';
+import { BaseSchema, SchemaClassName, SchemaUrlPath } from '../Schema';
+/**
+ * 图片集展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/images
+ */
+export interface ImagesSchema extends BaseSchema {
+    /**
+     * 指定为图片集渲染器
+     */
+    type: 'images' | 'static-images';
+    /**
+     * 默认图片地址
+     */
+    defaultImage?: SchemaUrlPath;
+    /**
+     * 列表为空时显示
+     */
+    placeholder?: string;
+    /**
+     * 配置值的连接符
+     * @default ,
+     */
+    delimiter?: string;
+    /**
+     * 预览图模式
+     */
+    thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
+    /**
+     * 预览图比率
+     */
+    thumbRatio?: '1:1' | '4:3' | '16:9';
+    /**
+     * 关联字段名，也可以直接配置 src
+     */
+    name?: string;
+    value?: any;
+    source?: string;
+    options?: Array<any>;
+    /**
+     * 图片地址，默认读取数据中的 image 属性，如果不是请配置 ,如  ${imageUrl}
+     */
+    src?: string;
+    /**
+     * 大图地址，不设置用 src 属性，如果不是请配置，如：${imageOriginUrl}
+     */
+    originalSrc?: string;
+    /**
+     * 是否启动放大功能。
+     */
+    enlargeAble?: boolean;
+    /**
+     * 是否显示尺寸。
+     */
+    showDimensions?: boolean;
+    /**
+     * 外层 CSS 类名
+     */
+    className?: SchemaClassName;
+    /**
+     * 列表 CSS 类名
+     */
+    listClassName?: SchemaClassName;
+}
+export interface ImagesProps extends RendererProps, Omit<ImagesSchema, 'type' | 'className'> {
+    delimiter: string;
+    onEnlarge?: (info: ImageThumbProps & {
+        list?: Array<Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>>;
+    }) => void;
+}
+export declare class ImagesField extends React.Component<ImagesProps> {
+    static defaultProps: Pick<ImagesProps, 'className' | 'delimiter' | 'defaultImage' | 'placehoder' | 'thumbMode' | 'thumbRatio'>;
+    list: Array<any>;
+    handleEnlarge(info: ImageThumbProps): void;
+    render(): JSX.Element;
+}
+export declare class ImagesFieldRenderer extends ImagesField {
+}