jamis/lib/r-nav/GridNav.types.d.ts

一种支持通过JSON配置方式生成页面的组件库

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<BaseSchema, 'type'> {
    /**
     * 单项点击事件
     */
    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<GridNavItemSchema>;
    /**
     * 是否将列表项固定为正方形
     */
    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<GridNavSchema, 'type' | 'className'> {
    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;
}