import React, { ReactNode } from 'react'; import { Tabs } from "antd"; import XBaseLayout, { XBaseLayoutProps } from "../base/XBaseLayout"; import TabPanel from "./tab/TabPanel"; export interface XTabsItem { key?: string; title: React.ReactNode; children?: React.ReactNode; forceRender?: boolean; closable?: boolean; closeIcon?: React.ReactNode; badgeCount?: React.ReactNode; /** * 展示封顶的数字值 */ overflowCount?: number; } export interface XTabsProps extends XBaseLayoutProps { /** *激活 */ activeKey?: number | string; /** *id字段 */ idField: string; /** *标题字段 * @defaultValue title */ titleField: string; /** *标题渲染 * @param item tab页对象 */ titleRender: (item: object) => React.ReactNode; /** * 页签位置 */ tabPosition?: 'top' | 'right' | 'bottom' | 'left'; /** * tab页标题显示样式 */ type?: 'line' | 'card' | 'editable-card'; /** * tab页是否可以关闭 */ closable?: boolean; /** * tab页列表 */ items: string[] | XTabsItem[]; /** * 扩展操作列 */ extraButtons?: React.ReactNode; /** * 切换面板的回调 * @param key * @param item * @param tab */ onTabChange?: (key: any, item: any, tab: any) => void; /** * 添加事件 * @param tab */ onAdd?: (tab: any) => {}; /** * 删除事件 * @param key * @param item * @param tab */ onRemove?: (key: any, item: any, tab: any) => void; /** * 是否可滑动 */ swipeable?: boolean; /** * tab页标题宽度 */ titleWidth?: "full" | "auto"; /** * 展示封顶的数字值 */ overflowCount?: number; } /** * 可以切换的卡片页面 * @name 卡片页 * @groupName 折叠显示 */ export default class XTabs extends XBaseLayout { static ComponentName: string; static TabPosition: { top: string; right: string; bottom: string; left: string; }; static Panel: typeof TabPanel; static TabPanel: typeof Tabs.TabPane; static Tabs: typeof Tabs; static defaultProps: { idField: string; titleField: string; tabPosition: string; overflowCount: number; items: any[]; type: string; onTabChange: any; titleRender: any; swipeable: boolean; lazyChildren: boolean; styleType: string; hasBox: boolean; showBorder: any; overflow: string; boxStyle: {}; width: string; height: string; visible: boolean; grid: number[]; gridSpan: number[]; parent: string; pureRender: boolean; dataSourceUrl: string; filterData: {}; mustHasFilter: boolean; }; mapItems: {}; constructor(props: XTabsProps); /** * 设置tab页 * @param items tab页列表 */ SetItems(items: any[]): void; /** * 设置tab页 * @param items tab页列表 */ SetPages(items: any[], activeKey: any): void; shouldComponentUpdate(nextProps: any, nextState: any): boolean; formatItems(items: any[]): any[]; /** * 设置数量 * @param itemKey * @param count * @constructor */ SetItemBadgeCount(itemKey: string, count: React.ReactNode): void; /** * 添加tab * @param key 关键字 * @param title 标题 * @param content 内容 * @param closable 是否可以关闭 * @param item 对象 */ AddPanel(key: string, title: string | ReactNode, content: string | ReactNode, closable: boolean, item: object): void; /** * 获取tab页对象 */ GetMapItems(): {}; /** * 获取激活key */ GetActiveKey(): any; /** * 设置激活key */ SetActiveKey(key: string): void; onEditEvent: (key: any, action: any) => void; DeletePage(item: any): void; onTabChangeEvent: (key: any) => void; renderLayout(): React.JSX.Element; }