jamis/lib/r-image/Image.types.d.ts

一种支持通过JSON配置方式生成页面的组件库

import type { RendererProps } from 'jamis-core';
import type { CSSProperties } from 'react';
import type { ActionSchema, BaseSchema, ImageThumbProps, SchemaClassName, SchemaTpl, SchemaUrlPath, StaticControlSchemaBase } from '../types';
/**
 * 图片展示控件。
 */
export interface ImageSchema extends BaseSchema {
    /**
     * 指定为图片展示类型
     */
    type: 'image';
    /**
     * 默认图片地址
     */
    defaultImage?: SchemaUrlPath;
    /**
     * 图片标题
     */
    title?: SchemaTpl;
    /**
     * 关联字段名，也可以直接配置 src
     */
    name?: string;
    /**
     * 图片描述信息
     */
    imageCaption?: SchemaTpl;
    /**
     * 图片地址，如果配置了 name，这个属性不用配置。
     */
    src?: SchemaUrlPath;
    /**
     * 大图地址，不设置用 src
     */
    originalSrc?: SchemaUrlPath;
    /**
     * 是否启动放大功能。
     */
    enlargeAble?: boolean;
    /**
     * 是否显示尺寸。
     */
    /**
     * 图片无法显示时的替换文本
     */
    alt?: string;
    /**
     * 高度
     */
    height?: CSSProperties['height'];
    /**
     * 宽度
     */
    width?: CSSProperties['width'];
    /**
     * 外层 css 类名
     */
    className?: SchemaClassName;
    /** 组件内层 css 类名 */
    bodyClassName?: SchemaClassName;
    /**
     * 图片 css 类名
     */
    imageClassName?: 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;
    /**
     * 图片描述
     */
    description?: string;
    clickAction?: ActionSchema;
}
export interface StaticImageSchema extends Omit<ImageSchema, 'type'>, StaticControlSchemaBase {
    type: 'static-image' | 'static-images';
}
export interface ImageFieldProps extends RendererProps, Omit<ImageSchema, ''> {
    className?: string;
    bodyClassName?: string;
    imageClassName?: string;
    thumbClassName?: 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 interface ImagesSchema extends BaseSchema {
    /**
     * 指定为图片集渲染器
     */
    type: '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 StaticImagesSchema extends Omit<ImageSchema, 'type'>, StaticControlSchemaBase {
    type: 'static-images';
}
export interface ImagesProps extends RendererProps, Omit<ImagesSchema, 'type' | 'className'> {
    delimiter: string;
    onEnlarge?: (info: ImageThumbProps & {
        list?: Array<Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>>;
    }) => void;
}