import type { RendererProps, SchemaClassName } from 'jamis-core'; import type { PropsWithChildren } from 'react'; import type { ActionSchema, BadgeObject, BadgeProps, BaseSchema, SchemaTokenizeableString, SchemaTpl, SchemaUrlPath } from '../types'; export interface GridNavItemSchema extends Omit { /** * 单项点击事件 */ clickAction?: ActionSchema; /** * 跳转地址 */ link?: string; /** * 打开方式 */ blank?: string; /** * 图片地址 */ icon?: SchemaUrlPath; /** * 描述 */ text?: SchemaTpl; /** * 图标最大宽度比例 0-100 */ iconRatio?: number; /** * 角标 */ badge?: BadgeObject; } /** * List 列表展示控件。 */ export interface GridNavSchema extends BaseSchema { /** * 指定为 List 列表展示控件。 */ type: 'grid-nav'; /** * 列表项类名 */ itemClassName?: string; /** * 静态图片列表配置 */ options?: Array; /** * 是否将列表项固定为正方形 */ square?: boolean; /** * 是否将列表项内容居中显示 */ center?: boolean; /** * 是否显示列表项边框 */ border?: boolean; /** * 列表项之间的间距,默认单位为px */ gutter?: number; /** * 图标宽度占比, 1-100 */ iconRatio?: number; /** * 列表项内容排列的方向,可选值为 horizontal 、vertical */ direction?: GridNavDirection; /** * 列数 */ columnNum?: number; /** * 数据源: 绑定当前环境变量 * * @default ${items} */ source?: SchemaTokenizeableString; } export interface GridNavRendererProps extends RendererProps, Omit { handleClick: (item?: GridNavItemSchema) => void; } export type GridNavDirection = 'horizontal' | 'vertical'; export interface GridNavProps extends PropsWithChildren { /** 是否将格子固定为正方形 */ square?: boolean; /** 是否将格子内容居中显示 */ center?: boolean; /** 是否显示边框 */ border?: boolean; /** 格子之间的间距,默认单位为`px` */ gutter?: number; /** 是否调换图标和文本的位置 */ reverse?: boolean; /** 图标占比,默认单位为`%` */ iconRatio?: number; /** 格子内容排列的方向,可选值为 `horizontal` */ direction?: GridNavDirection; /** 列数 */ columnNum?: number; className?: SchemaClassName; itemClassName?: SchemaClassName; style?: React.CSSProperties; } export interface GridNavItemProps { /** 图标右上角徽标 */ badge?: BadgeProps; /** 文字 */ text?: string | React.ReactNode; /** 图标名称或图片链接 */ icon?: string | React.ReactNode; className?: SchemaClassName; style?: React.CSSProperties; contentClassName?: SchemaClassName; contentStyle?: React.CSSProperties; children?: React.ReactNode; onClick?: (event: React.MouseEvent) => void; }