import React, { FC } from 'react';
import './index.scss';
/**
* PntImage 文案集合
* @description 所有内部展示文案均可通过 texts prop 自定义,用于多语言场景
*/
export interface PntImageTexts {
/** 上传中占位文案(仅上传预览模式生效) */
uploading?: string;
/** 图片加载中占位文案(纯预览模式生效,透传给 tdesign Image loading) */
loading?: string;
/** 图片加载失败占位文案(纯预览模式生效,透传给 tdesign Image error) */
loadFailed?: string;
}
export interface PntImageProps {
/**
* 图片地址
* @description 图片的完整 URL 地址;为空则展示 defaultImg 或内置 uploadImg
*/
src: string | undefined;
/**
* alt 文本
* @description 图片加载失败时的替代文本,纯预览模式必传以提升可访问性
*/
alt?: string;
/**
* 默认图片
* @description src 为空时展示的占位图;不传则使用内置的 uploadImg
*/
defaultImg?: string;
/**
* 快捷尺寸(正方形)
* @description 预设尺寸:`small`=36px、`medium`=60px、`large`=136px;默认 `large`
* 若 `style` 中显式指定了 width/height,则以 style 为准;非正方形场景请使用 `style`
*/
size?: 'small' | 'medium' | 'large';
/**
* 自定义样式
* @description 一般用于控制图片宽高;其中 width/height 优先级高于 size
*/
style?: React.CSSProperties;
/**
* 上传中状态
* @description 当为 true 时显示上传中 loading 占位,阻止其他操作;仅在上传预览模式(传入 onRemove)生效
*/
loading?: boolean;
/**
* 删除回调
* @description 传入即启用「上传预览模式」,mask 含预览 + 删除按钮;不传则为「纯预览模式」
* @param e - 事件对象
*/
onRemove?: (e: any) => void;
/**
* attach 容器
* @description 弹窗场景下需要透传给 tdesign ImageViewer 的 attach,避免预览浮层被父容器裁剪
*/
container?: HTMLElement | (() => HTMLElement);
/**
* 多语言文案
* @description 传入即覆盖默认中文文案;仅对应字段会覆盖,未传字段仍用默认值
*/
texts?: PntImageTexts;
}
/**
* PntImage 业务图片组件
* @description 统一覆盖「上传图片预览」和「纯图片预览」两种业务场景,避免业务侧维护两套组件
*
* 模式判定:传入 `onRemove` 即为上传预览模式,否则为纯预览模式
*
* @example
* ```tsx
* // 上传预览模式
*
*
* // 纯预览模式
*
* ```
*
* @returns {ReactElement} 业务图片组件
*/
declare const PntImage: FC;
export default PntImage;