cgreact-core/types/cgreact-type-button.ts

未发表！CGReact前端Web研发框架核心包

/** ButtonState相关手数据结构*/
import {FormItem} from "./cgreact-type-form";
import {LayoutState} from "./cgreact-type-layout";
import {IconType} from "./cgreact-type-icon";

/** 按钮数据类型定义*/
type CGReactButtonTheme = "default" | "normal" | "warm" | "danger" | "black"; //主题配置选项
type CGReactButtonSize = "default" | "large" | "small" | "mini"; //大小配置选项
type CGReactButtonState = ({//Button或者ButtonGroup的配置，当label有多个（数组）时渲染ButtonGroup
    type?: "button" | "submit" | "reset" | "file", //默认是button
    label?: string | "CGReact按钮" | Array<string | "按钮A" | "按钮B" | "按钮C">, //设置按钮的文字，传多个则生成按钮组
    primary?: boolean | Array<boolean>, // 设置按钮为线框模式，默认false
    size?: CGReactButtonSize, //按钮的大小
} | {
    type?: "checkBtn" | "checkbox",//check系列
    label?: string | "CGReact复选框" | Array<string | "复选框A" | "复选框B" | "复选框C">,//复选框标签
    value?: string | Array<string>,//对应的值，如果不配置则禁用对应的复选框
    select?: Array<string>, //仅对checkBtn，checkBox和radio生效，默认选中的值
} | {
    type?: "radio",//check和radio
    label?: string | "CGReact单选框" | Array<string | "单选框A" | "单选框B" | "单选框C">,//单选框标签
    value?: string | Array<string>,//对应的值，如果不配置则禁用对应的单选框
    select?: string, //选中的值
} | {
    type?: "switch", //type必须是switch
    label?: string | "ON|OFF" | "开|关"
    valueON?: string, //开启的值配置
    valueOFF?: string,//关闭的值配置
    select?: string, //选中的值
}) & {
    //公共属性
    theme?: CGReactButtonTheme | Array<CGReactButtonTheme>,// 按钮主题样式
    icon?: IconType | Array<IconType>,//按钮或选择框图标
    radius?: boolean, // 设置按钮圆角
    fluid?: boolean // 流体按钮，自适应占满一行
    disable?: boolean | Array<boolean>, //设置按钮是否处于激活状态，默认false
    margin?: number,//按钮间距，只有group才生效
    formItem?: FormItem | boolean,//表单item配置
    onClick?: Function | Array<Function> // 回调函数，也可以直接配置onClick作为prop参数
}//@ts-ignore ButtonState回调接口
export interface ButtonState extends CGReactButtonState
{
    valueOFF: any;
    valueON: any;
    // this.state回调接口数据类型
    type: "button" | "submit" | "reset" | "file" | "radio" | "checkBtn" | "checkbox" | "switch", // 按钮类型
    label: string | string[];//按钮标签
    value: string | string[];//对应的表单值
    select: string | Array<string>;//默认选中的值
    primary: boolean | Array<boolean>;//按钮线框模式
    size: CGReactButtonSize;//按钮大小
    theme: CGReactButtonTheme | Array<CGReactButtonTheme>;// 按钮主题样式
    icon: IconType | Array<IconType>;//按钮图标
    disable: boolean | Array<boolean>;//按钮禁用
    radius: boolean; // 设置按钮圆角
    margin: number;//按钮间距，只有group才生效
    formItem: FormItem;//表单item配置
    onClick: Function | Array<Function> // 回调函数
}

/** 按钮参数类型定义*/
type CGReactButtonProp = {
    direction?: "horizontal" | "vertical", //布局的方向属性
    data?: CGReactButtonState //使用Button数据类型
    onClick?: Function | Array<Function>, //事件回调函数
    layout?: LayoutState //布局定义
    children?: any
} //参数类型
export interface ButtonProps extends CGReactButtonProp, LayoutState {}

/** 回调接口数据类型，可能在state数据类型中交叉使用*/
export interface ButtonConfig //renderButton函数回调接口数据类型
{
    type: "button" | "submit" | "reset" | "file" | "radio" | "checkBtn" | "checkbox" | "switch", // 按钮类型
    disable: boolean, // 按钮是否处于激活状态
    icon: IconType,//按钮图标
    theme: CGReactButtonTheme,// 按钮主题样式
    radius: boolean, // 设置按钮圆角
    margin?: number,//按钮间距
}//按钮基础类配置接口
export interface SimpleButtonConfig extends ButtonConfig
{
    type: "button" | "submit" | "reset" | "file",
    label: string, // 按钮的文字
    primary: boolean, // 设置按钮为线框模式
    size: CGReactButtonSize, //按钮的大小
    onClick: Function // 回调事件
}//普通按钮配置
export interface CheckButtonConfig extends ButtonConfig
{
    type: "checkbox" | "checkBtn",
    label: string, // 按钮的文字
    value: string, //checkbox或者radio的值
    checked: boolean, // 是否选中状态
}//复选按钮配置
export interface RadioButtonConfig extends ButtonConfig
{
    type: "radio",
    label: string, // 按钮的文字
    value: string, //checkbox或者radio的值
    checked: boolean, // 是否选中状态
}//单选按钮配置
export interface SwitchButtonConfig extends ButtonConfig
{
    type: "switch",
    labelON: string,
    labelOFF: string
    valueON: string,
    valueOFF: string,
    checked: boolean, // 是否选中状态
}