choerodon-ui

/// <reference types="lodash" /> import React, { MouseEventHandler, ReactElement, ReactNode } from 'react'; import PropTypes from 'prop-types'; import { DraggableProps, DraggableRubric, DraggableStateSnapshot, DroppableProps, DropResult, ResponderProvided } from 'react-beautiful-dnd'; import Column, { ColumnProps } from './Column'; import TableRow, { TableRowProps } from './TableRow'; import TableHeaderCell, { TableHeaderCellProps } from './TableHeaderCell'; import DataSet from '../data-set/DataSet'; import Record from '../data-set/Record'; import Field from '../data-set/Field'; import { TransportProps } from '../data-set/Transport'; import TableStore from './TableStore'; import TableHeader from './TableHeader'; import { PaginationProps } from '../pagination/Pagination'; import { SpinProps } from '../spin'; import DataSetComponent, { DataSetComponentProps } from '../data-set/DataSetComponent'; import TableFooter from './TableFooter'; import { ColumnLock, DragColumnAlign, HighLightRowType, ScrollPosition, SelectionMode, TableAutoHeightType, TableButtonType, TableCommandType, TableEditMode, TableHeightType, TableMode, TablePaginationPosition, TableQueryBarType } from './enum'; import ToolBar from './query-bar/TableToolBar'; import FilterBar from './query-bar/TableFilterBar'; import AdvancedQueryBar from './query-bar/TableAdvancedQueryBar'; import ProfessionalBar from './query-bar/TableProfessionalBar'; import DynamicFilterBar from './query-bar/TableDynamicFilterBar'; import { ButtonProps } from '../button/Button'; export declare type TableButtonProps = ButtonProps & { afterClick?: MouseEventHandler<any>; children?: ReactNode; }; /** * 表头汇总栏hook */ export declare type SummaryBarHook = (props: SummaryBarProps) => { label: ReactNode | string; value: ReactNode | string; }; export declare type Buttons = TableButtonType | [TableButtonType, TableButtonProps] | ReactElement<TableButtonProps>; export declare type Suffixes = 'filter' | ReactElement; export declare type SummaryBar = Field | SummaryBarHook; export interface SummaryBarProps { dataSet: DataSet; summaryFieldsLimit: number; } export interface TableQueryBarHookProps { dataSet: DataSet; queryDataSet?: DataSet; buttons: ReactElement<ButtonProps>[]; queryFields: ReactElement<any>[]; queryFieldsLimit: number; summaryFieldsLimit: number; pagination?: ReactElement<PaginationProps>; summaryBar?: ReactElement<any>; onQuery?: () => void; onReset?: () => void; } export interface expandedRowRendererProps { dataSet: DataSet; record: Record; } export interface expandIconProps { prefixCls?: string; expanded: boolean; onExpand: Function; record: Record; expandable: boolean; needIndentSpaced: boolean; } export interface onRowProps { dataSet: DataSet; record: Record; index: number; expandedRow: boolean; } export declare type TableQueryBarHook = (props: TableQueryBarHookProps) => ReactNode; export declare type Commands = TableCommandType | [TableCommandType, TableButtonProps] | ReactElement<TableButtonProps>; export declare const buttonsEnumType: PropTypes.Requireable<TableButtonType>; export interface TablePaginationConfig extends PaginationProps { position?: TablePaginationPosition; } export declare type SpinIndicator = ReactElement<any>; export interface TableSpinConfig extends SpinProps { spinning?: boolean; indicator?: SpinIndicator; } export interface DynamicFilterBarConfig { searchCode: string; searchText?: string; suffixes?: Suffixes[]; tableFilterAdapter?: TransportProps; } export interface Instance { tbody: React.ReactElement; headtr: React.ReactElement; } /** * DraggableRubric 可以获取拖动起来item的index和id从列表获取信息 */ export interface DragTableHeaderCellProps extends TableHeaderCellProps { rubric: DraggableRubric; } export interface DragTableRowProps extends TableRowProps { rubric: DraggableRubric; } export interface RowRenderIcon { record: Record; } export interface ColumnRenderIcon { column: ColumnProps; dataSet: DataSet; snapshot?: DraggableStateSnapshot; } export interface DragRender { droppableProps?: DroppableProps; draggableProps?: DraggableProps; renderClone?: ((dragRenderProps: DragTableRowProps) => ReactElement<any>) | ((dragRenderProps: DragTableHeaderCellProps) => ReactElement<any>); renderIcon?: ((rowRenderIcon: RowRenderIcon) => ReactElement<any>) | ((columnRenderIcon: ColumnRenderIcon) => ReactElement<any>); } export interface Customized { columns: object; heightType?: TableHeightType; height?: number; heightDiff?: number; } export declare const instance: (wrapperClassName: string, prefixCls?: string | undefined) => Instance; export interface TableProps extends DataSetComponentProps { columns?: ColumnProps[]; /** * 表头 */ header?: ReactNode | ((records: Record[]) => ReactNode); /** * 表脚 */ footer?: ReactNode | ((records: Record[]) => ReactNode); /** * 是否显示边框 * @default true */ border?: boolean; /** * 是否自动聚焦 * @default true */ autoFocus?: boolean; /** * 数据源 */ dataSet: DataSet; /** * 选择记录的模式 */ selectionMode?: SelectionMode; /** * 在其他模式下是不是要是要rowbox */ alwaysShowRowBox?: boolean; /** * 显示选择提示 */ showSelectionTips?: boolean; /** * 设置行属性 * @param {onRowProps} props * @return {Object} 行属性 */ onRow?: (props: onRowProps) => object; /** * @deprecated * 请使用 onRow */ rowRenderer?: (record: Record, index: number) => object; /** * 功能按钮 * 可选值：`add` `delete` `remove` `save` `query` `reset` `expandAll` `collapseAll` `export` 或自定义按钮 * 给内置按钮加属性：buttons={[['add', { color: 'red' }], ...]} */ buttons?: Buttons[]; /** * 自定义查询字段组件 * @example * { age: <NumberField /> } * * 默认会根据queryDataSet中定义的field类型自动匹配组件，匹配类型如下 * lovCode => Lov * lookupCode => Select * type:number => NumberField * type:date => DatePicker * type:dateTime => DatePicker[mode=dateTime] * type:week => DatePicker[mode=week] * default => TextField */ queryFields?: { [key: string]: ReactElement<any>; }; /** * 头部显示的查询字段的数量，超出限制的查询字段放入弹出窗口 * @default 1 */ queryFieldsLimit?: number; /** * 显示查询条 * 可选值: `advancedBar` `normal` `bar` `none` `professionalBar` `filterBar` * @default 'normal' */ queryBar?: TableQueryBarType | TableQueryBarHook; /** * 显示汇总条 * @default 'normal' */ summaryBar?: SummaryBar[]; /** * 头部显示的汇总字段的数量，超出限制的查询字段放入弹出窗口 * @default 3 */ summaryFieldsLimit?: number; /** * 是否使用拖拽选择 * @default false */ useMouseBatchChoose?: boolean; /** * @deprecated * 请使用 queryBar="none" */ showQueryBar?: boolean; /** * 行高 * @default 31 */ rowHeight?: number | 'auto'; /** * 默认行是否展开，当dataSet没有设置expandField时才有效 * @default false; */ defaultRowExpanded?: boolean; /** * 通过点击行来展开子行 */ expandRowByClick?: boolean; /** * 展开行渲染器 */ expandedRowRenderer?: (props: expandedRowRendererProps) => ReactNode; /** * 自定义展开图标 */ expandIcon?: (props: expandIconProps) => ReactNode; /** * 展开图标所在列索引 */ expandIconColumnIndex?: number; /** * 展示树形数据时，每层缩进的宽度 */ indentSize?: number; /** * 数据过滤 * 返回值 true - 显示 false - 不显示 * @param {Record} record 记录 * @return {boolean} */ filter?: (record: Record) => boolean; /** * 表格展示的模式 * tree需要配合dataSet的`idField`和`parentField`来展示 * 可选值: `list` `tree` */ mode?: TableMode; /** * 表格编辑的模式 * 可选值: `cell` `inline` * @default cell */ editMode?: TableEditMode; /** * queryBar为bar时，直接输入的过滤条件的字段名 */ filterBarFieldName?: string; /** * queryBar为bar时输入框的占位符 */ filterBarPlaceholder?: string; /** * 分页导航条属性 */ pagination?: TablePaginationConfig | false; /** * 高亮行 */ highLightRow?: boolean | HighLightRowType; /** * 勾选高亮行 */ selectedHighLightRow?: boolean; /** * 奇偶行 */ parityRow?: boolean; /** * 可调整列宽 */ columnResizable?: boolean; /** * 可调整列显示 */ columnHideable?: boolean; /** * 可编辑列标题 */ columnTitleEditable?: boolean; /** * 显示原始值 */ pristine?: boolean; /** * 点击展开图标时触发 */ onExpand?: (expanded: boolean, record: Record) => void; /** * 加载条属性 */ spin?: TableSpinConfig | false; /** * 虚拟滚动 */ virtual?: boolean; /** * 虚拟单元格 */ virtualCell?: boolean; /** * 虚拟滚动是否显示加载 */ virtualSpin?: boolean; /** * 是否开启自适应高度 */ autoHeight?: boolean | { type: TableAutoHeightType; diff: number; }; /** * 是否开启宽度双击最大值 */ autoMaxWidth?: boolean; /** * 是否单独处理column footer */ autoFootHeight?: boolean; /** * 设置drag框体位置 */ dragColumnAlign?: DragColumnAlign; /** * 开启列拖拽 */ columnDraggable?: boolean; /** * 开启行拖拽 */ rowDraggable?: boolean; /** * 拖拽触发事件 */ onDragEnd?: (dataSet: DataSet, columns: ColumnProps[], resultDrag: DropResult, provided: ResponderProvided) => void; /** * 拖拽触发事件位置切换前回调 */ onDragEndBefore?: (dataSet: DataSet, columns: ColumnProps[], resultDrag: DropResult, provided: ResponderProvided) => DropResult | boolean | void; /** * 渲染列拖拽 */ columnsDragRender?: DragRender; /** * 渲染行拖拽 */ rowDragRender?: DragRender; /** * 是否开启回车跳转下一行编辑 */ editorNextKeyEnterDown?: boolean; /** * 是否开启关闭快捷键（只关闭新加组合快捷键） */ keyboard?: boolean; /** * 筛选条属性配置 */ dynamicFilterBar?: DynamicFilterBarConfig; /** * 异步树 */ treeAsync?: boolean; /** * 树节点展开时，加载数据钩子 */ treeLoadData?: ({ record, dataSet }: { record: any; dataSet: any; }) => Promise<any>; /** * 树形结构下queryBar触发查询,自动展开树形结构 */ treeQueryExpanded?: boolean; /** * 显示行号 */ rowNumber?: boolean | ((props: { record?: Record | null; dataSet?: DataSet | null; text: string; pathNumbers: number[]; }) => ReactNode); /** * 个性化编码 */ customizedCode?: string; /** * 是否显示个性化设置入口按钮 */ customizable?: boolean; /** * @deprecated * 同 columnDraggable */ dragColumn?: boolean; /** * @deprecated * 同 rowDraggable */ dragRow?: boolean; /** * 客户端导出一次查询数量配置 */ clientExportQuantity?: number; /** * 可以修改由于样式导致的虚拟高度和rowHeight不一致 */ virtualRowHeight?: number; } export default class Table extends DataSetComponent<TableProps> { static displayName: string; static Column: typeof Column; static FilterBar: typeof FilterBar; static AdvancedQueryBar: typeof AdvancedQueryBar; static ProfessionalBar: typeof ProfessionalBar; static DynamicFilterBar: typeof DynamicFilterBar; static ToolBar: typeof ToolBar; static TableRow: typeof TableRow; static TableHeaderCell: typeof TableHeaderCell; static propTypes: { id: PropTypes.Requireable<string>; size: PropTypes.Requireable<import("../core/enum").Size>; suffixCls: PropTypes.Requireable<string>; prefixCls: PropTypes.Requireable<string>; title: PropTypes.Requireable<PropTypes.ReactNodeLike>; disabled: PropTypes.Requireable<boolean>; hidden: PropTypes.Requireable<boolean>; autoFocus: PropTypes.Requireable<boolean>; style: PropTypes.Requireable<object>; className: PropTypes.Requireable<string>; tabIndex: PropTypes.Requireable<number>; lang: PropTypes.Requireable<string>; spellCheck: PropTypes.Requireable<boolean>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; onBlur: PropTypes.Requireable<(...args: any[]) => any>; onClick: PropTypes.Requireable<(...args: any[]) => any>; onDoubleClick: PropTypes.Requireable<(...args: any[]) => any>; onMouseUp: PropTypes.Requireable<(...args: any[]) => any>; onMouseDown: PropTypes.Requireable<(...args: any[]) => any>; onMouseMove: PropTypes.Requireable<(...args: any[]) => any>; onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>; onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>; onMouseOver: PropTypes.Requireable<(...args: any[]) => any>; onMouseOut: PropTypes.Requireable<(...args: any[]) => any>; onContextMenu: PropTypes.Requireable<(...args: any[]) => any>; onKeyDown: PropTypes.Requireable<(...args: any[]) => any>; onKeyUp: PropTypes.Requireable<(...args: any[]) => any>; onKeyPress: PropTypes.Requireable<(...args: any[]) => any>; dataSet: PropTypes.Requireable<object>; columns: PropTypes.Requireable<any[]>; /** * 表头 */ header: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>; /** * 表脚 */ footer: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>; /** * 是否显示边框 * @default true */ border: PropTypes.Requireable<boolean>; /** * 功能按钮 * 可选值：`add` `delete` `remove` `save` `query` `expandAll` `collapseAll` 或自定义按钮 */ buttons: PropTypes.Requireable<PropTypes.ReactNodeLike[]>; /** * 自定义查询字段组件 * 默认会根据queryDataSet中定义的field类型自动匹配组件，匹配类型如下 * lovCode => Lov * lookupCode => Select * type:number => NumberField * type:date => DatePicker * type:dateTime => DatePicker[mode=dateTime] * type:week => DatePicker[mode=week] * default => TextField */ queryFields: PropTypes.Requireable<object>; /** * 头部显示的查询字段的数量，超出限制的查询字段放入弹出窗口 * @default 1 */ queryFieldsLimit: PropTypes.Requireable<number>; /** * 头部显示的汇总字段的数量，超出限制的查询字段放入弹出窗口 * @default 3 */ summaryFieldsLimit: PropTypes.Requireable<number>; /** * 显示查询条 * @default true */ queryBar: PropTypes.Requireable<((...args: any[]) => any) | TableQueryBarType>; useMouseBatchChoose: PropTypes.Requireable<boolean>; /** * 行高 * @default 30 */ rowHeight: PropTypes.Requireable<string | number>; alwaysShowRowBox: PropTypes.Requireable<boolean>; defaultRowExpanded: PropTypes.Requireable<boolean>; expandRowByClick: PropTypes.Requireable<boolean>; indentSize: PropTypes.Requireable<number>; filter: PropTypes.Requireable<(...args: any[]) => any>; mode: PropTypes.Requireable<TableMode>; editMode: PropTypes.Requireable<TableEditMode>; filterBarFieldName: PropTypes.Requireable<string>; filterBarPlaceholder: PropTypes.Requireable<string>; highLightRow: PropTypes.Requireable<boolean | HighLightRowType>; selectedHighLightRow: PropTypes.Requireable<boolean>; parityRow: PropTypes.Requireable<boolean>; autoMaxWidth: PropTypes.Requireable<boolean>; /** * 设置drag框体位置 */ dragColumnAlign: PropTypes.Requireable<DragColumnAlign>; /** * 开启列拖拽，但是无法使用宽度拖拽 */ columnDraggable: PropTypes.Requireable<boolean>; /** * 开启行拖拽 */ rowDraggable: PropTypes.Requireable<boolean>; columnsDragRender: PropTypes.Requireable<object>; expandIcon: PropTypes.Requireable<(...args: any[]) => any>; rowDragRender: PropTypes.Requireable<object>; onDragEndBefore: PropTypes.Requireable<(...args: any[]) => any>; /** * 新增的组合键开关闭 */ keyboard: PropTypes.Requireable<boolean>; /** * 是否单独处理column footer */ autoFootHeight: PropTypes.Requireable<boolean>; /** * 客户端查询导出，查询数目设置 */ clientExportQuantity: PropTypes.Requireable<number>; /** * 可以修改由于样式导致的虚拟高度和rowHeight不一致 */ virtualRowHeight: PropTypes.Requireable<number>; }; static defaultProps: { suffixCls: string; tabIndex: number; selectionMode: SelectionMode; queryFields: {}; defaultRowExpanded: boolean; expandRowByClick: boolean; indentSize: number; summaryFieldsLimit: number; filterBarFieldName: string; virtual: boolean; virtualSpin: boolean; autoHeight: boolean; autoMaxWidth: boolean; autoFootHeight: boolean; clientExportQuantity: number; }; tableStore: TableStore; nextFrameActionId?: number; scrollId?: number; resizeLine: HTMLDivElement | null; tableHeadWrap: HTMLDivElement | null; tableBodyWrap: HTMLDivElement | null; tableFootWrap: HTMLDivElement | null; fixedColumnsBodyLeft: HTMLDivElement | null; fixedColumnsBodyRight: HTMLDivElement | null; tableHeader: TableHeader | null; tableFooter: TableFooter | null; lastScrollLeft: number; scrollPosition: ScrollPosition; refSpin: HTMLDivElement | null; wrapperWidth: number[]; wrapperWidthTimer?: number; get currentRow(): HTMLTableRowElement | null; get firstRow(): HTMLTableRowElement | null; get lastRow(): HTMLTableRowElement | null; saveVirtualSpinRef(node: HTMLDivElement | null): void; saveResizeRef(node: HTMLDivElement | null): void; saveTableHeader(tableHeader: TableHeader | null): void; saveTableFooter(tableFooter: TableFooter | null): void; useFocusedClassName(): boolean; handleResize(width?: number): void; handleWindowResize(): void; handleDataSetLoad(): void; handleDataSetCreate({ record, dataSet }: { record: any; dataSet: any; }): void; handleKeyDown(e: any): void; focusRow(row: HTMLTableRowElement | null): Record | void; handleKeyDownHome(e: any): Promise<void>; handleKeyDownEnd(e: any): Promise<void>; handleKeyDownCTRLS(e: any): Promise<void>; handleKeyDownCTRLN(e: any): Promise<void>; handleKeyDownCTRLD(e: any): Promise<void>; handleKeyDownCTRLDELETE(e: any): Promise<void>; handleKeyDownUp(e: any): Promise<void | Record>; handleKeyDownDown(e: any): Promise<void | Record>; handleKeyDownDownShift(e: any): Promise<void>; handleKeyDownUpShift(e: any): Promise<void>; handleKeyDownRight(e: any): void; handleKeyDownLeft(e: any): void; getOtherProps(): Pick<Pick<any, string | number | symbol>, string | number | symbol>; getClassName(): string | undefined; getWrapperProps(props?: {}): any; /** * 获取传入的 Spin props */ getSpinProps(): { spinning?: boolean | undefined; indicator?: SpinIndicator | undefined; prefixCls?: string | undefined; className?: string | undefined; style?: React.CSSProperties | undefined; size?: import("../core/enum").Size | undefined; tip?: string | undefined; delay?: number | undefined; wrapperClassName?: string | undefined; dataSet?: DataSet | undefined; id?: string | undefined; disabled?: boolean | undefined; tabIndex?: number | undefined; title?: React.ReactNode; autoFocus?: boolean | undefined; onFocus?: ((event: React.FocusEvent<any>) => void) | undefined; onBlur?: ((event: React.FocusEvent<any>) => void) | undefined; onClick?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onClickCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onDoubleClick?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onDoubleClickCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onContextMenu?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onContextMenuCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseUp?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseUpCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseDown?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseDownCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseMove?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseMoveCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseEnter?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseEnterCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseLeave?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseLeaveCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseOver?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseOverCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseOut?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onMouseOutCapture?: ((event: React.MouseEvent<any, MouseEvent>) => void) | undefined; onKeyDown?: ((event: React.KeyboardEvent<any>) => void) | undefined; onKeyUp?: ((event: React.KeyboardEvent<any>) => void) | undefined; onKeyPress?: ((event: React.KeyboardEvent<any>) => void) | undefined; key?: string | number | undefined; suffixCls?: string | undefined; elementClassName?: string | undefined; hidden?: boolean | undefined; lang?: import("../locale-context/enum").Lang | undefined; spellCheck?: boolean | undefined; }; handleDragMouseUp(): void; componentWillMount(): void; componentDidMount(): void; componentWillReceiveProps(nextProps: any, nextContext: any): void; componentWillUnmount(): void; connect(): void; disconnect(): void; processDataSetListener(flag: boolean): void; render(): JSX.Element; reorderDataSet(startIndex: number, endIndex: number): void; handleDragEnd(resultDrag: DropResult, provided: ResponderProvided): void; handleBodyScroll(e: React.SyntheticEvent): void; /** * 滚动结束隐藏spin */ setSpin: (() => void) & import("lodash").Cancelable; handleBodyScrollTop(e: any, currentTarget: any): void; handleBodyScrollLeft(e: any, currentTarget: any): void; setScrollPositionClassName(target?: any): void; setScrollPosition(position: ScrollPosition): void; renderTable(hasHeader: boolean, hasBody: boolean, hasFooter: boolean, lock?: ColumnLock | boolean): ReactNode; getHeader(): ReactNode; getFooter(): ReactNode | undefined; getPagination(position: TablePaginationPosition): ReactElement<PaginationProps> | undefined; getTable(lock?: ColumnLock | boolean): ReactNode; getLeftFixedTable(): ReactNode; getRightFixedTable(): ReactNode | undefined; getTableBody(lock?: ColumnLock | boolean): ReactNode; getTableHeader(lock?: ColumnLock | boolean): ReactNode; getTableFooter(lock?: ColumnLock | boolean): ReactNode; getStyleHeight(): number | undefined; syncSizeInFrame(width?: number): void; getContentHeight(): any; syncSize(width?: number): void; initDefaultExpandedRows(): void; handleHeightTypeChange(immediate?: boolean): void; getWidth(): number; }