jamis

import type { PickClassStyleType, RendererProps, Schema, SchemaBoolean, SchemaClassName, SchemaExpression } from 'jamis-core'; import type { CSSProperties, PropsWithChildren } from 'react'; import type { ActionSchema, BaseSchema, FormHorizontal, RenderSlotBodyType, SchemaCollection, SchemaFunction, SchemaIcon, SchemaObject } from '../types'; export type TabsRendererEvent = 'change' | 'closeTab' | 'addTab'; export type TabsRendererAction = 'changeActiveKey' | 'addTab' | 'addOrActiveTab' | 'closeTab'; /** * 选项卡控件。 * */ export interface TabsSchema extends BaseSchema { type: 'tabs'; /** * 选项卡成员。当配置了 source 时，选项卡成员，将会根据目标数据进行渲染 */ tabs: TabSchema[]; /** * 关联已有数据，选项卡直接根据目标数据重复。 */ source?: string; /** * 类名 * @deprecated 请使用`slots.className` */ tabsClassName?: SchemaClassName; /** * 展示形式 */ tabsMode?: TabsMode; /** * 内容类名 * @deprecated 请使用`slots.className` */ contentClassName?: SchemaClassName; /** * 工具栏类名 * @deprecated 请使用`slots.className` */ toolbarClassName?: SchemaClassName; /** * 链接外层类名 * @deprecated 请使用`slots.className` */ linksClassName?: SchemaClassName; /** * 卡片是否只有在点开的时候加载？ */ mountOnEnter?: boolean; /** * 卡片隐藏的时候是否销毁卡片内容 */ unmountOnExit?: boolean; /** * 可以在右侧配置点其他功能按钮。 */ toolbar?: ActionSchema | SchemaCollection; /** * 配置子表单项默认的展示方式。 */ subFormMode?: 'normal' | 'inline' | 'horizontal'; /** * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。 */ subFormHorizontal?: FormHorizontal; /** * 是否支持新增 */ addable?: boolean; /** * 自定义增加按钮文案 */ addBtnText?: string; /** * 是否支持删除 */ closable?: boolean; closableOn?: SchemaBoolean; /** * 是否可刷新 */ refreshable?: boolean; refreshableOn?: boolean; /** * 是否支持拖拽 */ draggable?: boolean; /** * 是否显示提示 */ showTip?: boolean; /** * tooltip 提示的类名 * @deprecated 请使用`slots.className` */ showTipClassName?: string; /** * 是否可编辑标签名 */ editable?: boolean; /** * 是否导航支持内容溢出滚动。属性废弃，为了兼容暂且保留 */ scrollable?: boolean; /** * 编辑器模式，侧边的位置 */ sidePosition?: 'left' | 'right'; /** * 默认激活的选项卡，hash值或索引值，支持使用表达式 */ activeKey?: SchemaExpression | number; /** 支持表达式激活的tab key */ activeKeyExpr?: string | number; /** * 超过多少个时折叠按钮 */ collapseOnExceed?: number; /** * 折叠按钮文字 */ collapseBtnLabel?: string; /** * 内容体的样式类 * @deprecated 请使用`slots.className` */ panelClassName?: SchemaClassName; /** * 每个link的样式类 * @deprecated 请使用`slots.className` */ linkClassName?: SchemaClassName; /** * 标题项 `.cxd-Tabs-link > a`元素的样式类 * @deprecated 请使用`slots.className` */ linkChildClassName?: SchemaClassName; /** * @deprecated 使用`onEvent.change`来代替 */ onSelect?: SchemaFunction | ((key: number | string, props: TabsProps) => void); } export interface TabSchema extends Omit<BaseSchema, 'type' | 'className'> { /** * Tab 标题 */ title?: string | SchemaObject; /** * `.cxd-Tabs-pane`元素的样式类 */ className?: SchemaClassName; /** * 内容 * @deprecated 用 body 属性 */ tab?: SchemaCollection; /** * `.cxd-Tabs-link`元素的样式类 * @deprecated 请使用`slots.className` */ tabClassName?: SchemaClassName; /** * 内容 */ body?: SchemaCollection; /** * @deprecated 请使用body */ controls?: SchemaCollection; /** * 徽标 */ badge?: number; /** * 和url中的querystring对应 */ qs?: string; /** * 设置以后将跟url的hash对应 */ hash?: string; /** * 按钮图标 */ icon?: SchemaIcon; iconPosition?: 'left' | 'right'; /** * @deprecated 请使用`slots.className` */ iconClassName?: SchemaClassName; /** * 设置以后内容每次都会重新渲染 */ reload?: boolean; /** * 点开时才加载卡片内容 */ mountOnEnter?: boolean; /** * 卡片隐藏就销毁卡片节点。 */ unmountOnExit?: boolean; /** * 配置子表单项默认的展示方式 */ mode?: 'normal' | 'inline' | 'horizontal'; /** * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比 */ horizontal?: FormHorizontal; /** * 是否可关闭，优先级高于 tabs 的 closable */ closable?: boolean; closableOn?: SchemaBoolean; /** * 是否可刷新 */ refreshable?: boolean; refreshableOn?: boolean; /** * 是否禁用 */ disabled?: boolean; } export interface TabsProps extends RendererProps, Omit<TabsSchema, 'className' | 'contentClassName' | 'activeKey'> { activeKey?: string | number; location?: any; tabRender?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element; } export interface TabSource extends TabSchema { ctx?: any; /** 内部使用的tab的唯一标识, 要考虑到删除tab的场景 */ __tabId?: string; } export type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong' | 'tiled' | 'sidebar'; export interface IDragInfo { nodeId: string; } export interface TabComponentProps extends PropsWithChildren, PickClassStyleType { title?: string | React.ReactNode; icon?: string; iconPosition?: 'left' | 'right'; disabled?: boolean | string; eventKey: string | number; tab?: Schema; style?: CSSProperties; className?: SchemaClassName; activeKey?: string | number; reload?: boolean; mountOnEnter?: boolean; unmountOnExit?: boolean; toolbar?: React.ReactNode; } export interface TabsCompProps extends PropsWithChildren, PickClassStyleType { mode?: TabsMode; tabsMode?: TabsMode; additionBtns?: React.ReactNode; activeKey?: string | number; tabsClassName?: SchemaClassName; contentClassName?: SchemaClassName; linksClassName?: SchemaClassName; linksContainerClassName?: SchemaClassName; className?: SchemaClassName; tabs?: Array<TabComponentProps>; toolbar?: React.ReactNode; addable?: boolean; closable?: boolean; refreshable?: boolean; draggable?: boolean; showTip?: boolean; showTipClassName?: SchemaClassName; scrollable?: boolean; editable?: boolean; sidePosition?: 'left' | 'right'; addBtnText?: string; collapseOnExceed?: number; collapseBtnLabel?: string; popOverContainer?: any; style?: CSSProperties; panelClassName?: SchemaClassName; linkClassName?: SchemaClassName; /** `.cxd-Tabs-link > a`元素的样式类 */ linkChildClassName?: SchemaClassName; tabRender?: (tab: TabComponentProps, props?: TabsCompProps) => JSX.Element; onSelect?: (key: string | number) => void; onAdd?: () => void; onRefreshTab?: (index: number) => void; onEdit?: (index: number, text: string) => void; onDragChange?: (e: any) => void; onClose?: (key: string | number) => void; renderSlotBody?: RenderSlotBodyType; }