import React, { CSSProperties } from 'react'; /** * 问题 * - 多选拖拽不支持 * - image 没有跟着滚动条横向滚动 ❤ * - 非一屏模式 行分组不应该吸顶 ❤ * - 非一屏模式 列的高过高 一个列有多个状态 不好拖拽 * - 列收起来之后 拖拽image区域对不上 ❤ * - 默认分组 不在最后一个 ❤ * - 切换行分组 清空收起行 ❤ * - 支持自适应列宽 ❤ */ interface Column { title: string; color?: string; fieldVal: string[]; } interface CardItem { [name: string]: any; } interface TaskboardProps { className?: string | string[]; style?: CSSProperties; imageStyle?: CSSProperties; /** * 是否固定高度 默认true (如果固定高度,将内部滚动) */ isFixedHeight?: boolean; /** * 是否固定宽度 默认false (不固定宽度情况下 列宽度最小不能小于设置的 columnsMinWidth) */ isFixedWidth?: boolean; /** * 列按照什么字段分组 */ columnFieldKey: string; /** * 列信息 */ columns: Column[]; /** * 列最小宽度 (默认225) */ columnsMinWidth?: number; /** * 横向是否撑满 列不足的时候 列宽变大 直到撑满,(默认不撑满) */ isFullRow?: boolean; /** * Y轴整体滚动,如果配置false,则列里面单独滚动 (默认true) */ togetherScroll?: boolean; /** * 行数据 */ data: CardItem[]; /** * 选中的key */ selectKey?: string; /** * card 唯一标识 */ rowKey: string; /** * 泳道字段 (行分组) */ swimlaneField?: string; /** * 卡片最小高度 */ cardMinHeight?: number; /** * 头部高度 默认40 */ headerHeight?: number; /** * 渲染card内容 */ renderCard: (item: CardItem) => React.ReactElement; /** * 渲染泳道标题 */ renderSwimlaneHead?: (value: string) => React.ReactNode; /** * 渲染镜像列 */ renderImageColumn?: (value: string, columnFieldKey: string) => React.ReactNode; /** * 改变card状态 */ onChange: (key: string, status: string, column: any) => void; /** * 改变选择的key */ changeSelectKey?: (key: string, card: CardItem) => void; } declare const Taskboard: React.FC; export default Taskboard;