import React from 'react'; import { AttachmentFile } from '../AttachmentButton/types'; export type FileMapViewProps = { /** 是否显示"查看更多"按钮 */ showMoreButton?: boolean; /** 文件映射表 */ fileMap?: Map; /** 预览文件回调 */ onPreview?: (file: AttachmentFile) => void; /** 下载文件回调 */ onDownload?: (file: AttachmentFile) => void; /** 点击"查看所有文件"回调,携带当前所有文件列表。返回 true 时组件内部展开所有文件,返回 false 时由外部处理 */ onViewAll?: (files: AttachmentFile[]) => boolean | Promise; /** 自定义更多操作 DOM(优先于 onMore,传入则展示该 DOM,不传则不展示更多按钮) */ renderMoreAction?: (file: AttachmentFile) => React.ReactNode; /** 自定义悬浮动作区 slot(传入则覆盖默认『预览/下载/更多』动作区) */ customSlot?: React.ReactNode | ((file: AttachmentFile) => React.ReactNode); /** 自定义根容器样式(可覆盖布局,如 flexDirection、gap、wrap 等) */ style?: React.CSSProperties; /** 自定义根容器类名 */ className?: string; /** 最多展示的非图片文件数量,传入则开启溢出控制并在超出时显示"查看所有文件"按钮,不传则展示所有文件且不显示按钮 */ maxDisplayCount?: number; placement?: 'left' | 'right'; }; /** * FileMapView 组件 - 文件映射视图组件 * * 该组件用于显示文件列表,支持图片预览、文件下载、文件预览等功能。 * 根据文件类型提供不同的显示方式,图片文件以网格形式显示,其他文件以列表形式显示。 * * @component * @description 文件映射视图组件,显示文件列表和预览功能 * @param {FileMapViewProps} props - 组件属性 * @param {Map} props.fileMap - 文件映射表 * @param {string} [props.className] - 自定义CSS类名 * @param {React.CSSProperties} [props.style] - 自定义样式 * @param {(file: AttachmentFile) => void} [props.onFileClick] - 文件点击回调 * @param {(file: AttachmentFile) => void} [props.onPreview] - 文件预览回调 * @param {(file: AttachmentFile) => void} [props.onDownload] - 文件下载回调 * @param {boolean} [props.collapsible] - 是否可折叠 * @param {number} [props.maxDisplayCount] - 最大显示数量 * * @example * ```tsx * console.log('点击文件', file)} * onPreview={(file) => console.log('预览文件', file)} * onDownload={(file) => console.log('下载文件', file)} * /> * ``` * * @returns {React.ReactElement} 渲染的文件映射视图组件 * * @remarks * - 支持图片文件的网格预览 * - 支持其他文件类型的列表显示 * - 提供文件预览和下载功能 * - 支持文件列表折叠 * - 提供动画效果 * - 自动识别文件类型 * - 支持自定义样式和交互 */ export declare const FileMapView: React.FC;