/** ButtonState相关手数据结构*/ 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, //设置按钮的文字，传多个则生成按钮组 primary?: boolean | Array, // 设置按钮为线框模式，默认false size?: CGReactButtonSize, //按钮的大小 } | { type?: "checkBtn" | "checkbox",//check系列 label?: string | "CGReact复选框" | Array,//复选框标签 value?: string | Array,//对应的值，如果不配置则禁用对应的复选框 select?: Array, //仅对checkBtn，checkBox和radio生效，默认选中的值 } | { type?: "radio",//check和radio label?: string | "CGReact单选框" | Array,//单选框标签 value?: string | Array,//对应的值，如果不配置则禁用对应的单选框 select?: string, //选中的值 } | { type?: "switch", //type必须是switch label?: string | "ON|OFF" | "开|关" valueON?: string, //开启的值配置 valueOFF?: string,//关闭的值配置 select?: string, //选中的值 }) & { //公共属性 theme?: CGReactButtonTheme | Array,// 按钮主题样式 icon?: CGReactIconType | Array,//按钮或选择框图标 radius?: boolean, // 设置按钮圆角 fluid?: boolean // 流体按钮，自适应占满一行 disable?: boolean | Array, //设置按钮是否处于激活状态，默认false margin?: number,//按钮间距，只有group才生效 formItem?: CGReactFormItem | boolean,//表单item配置 onClick?: Function | Array // 回调函数，也可以直接配置onClick作为prop参数 }//@ts-ignore ButtonState回调接口 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;//默认选中的值 primary: boolean | Array;//按钮线框模式 size: CGReactButtonSize;//按钮大小 theme: CGReactButtonTheme | Array;// 按钮主题样式 icon: CGReactIconType | Array;//按钮图标 disable: boolean | Array;//按钮禁用 radius: boolean; // 设置按钮圆角 margin: number;//按钮间距，只有group才生效 formItem: CGReactFormItem;//表单item配置 onClick: Function | Array // 回调函数 } /** ButtonProps在CGReactCompProp的基础上以button配置作为data的数据类型*/ type CGReactButtonLayout = { layoutName?: string, //布局的名称属性，渲染为item-name layoutWidth?: number | CGReactLength | CGReactGrid | MediaResponse,//布局宽度，水平方向支持删格系统，只有宽度才需要响应式布局 align?: CGReactAlign, //布局相对于父布局的对其方式，其优先级高于父布局的gravity配置 layoutDebug?: "debug-off" | "only-layout" | "with-content", //用于调试时显示布局的框子默认false不显示，如果没有配置，子Layout会自动同步父Layout的配置 } type CGReactButtonProp = { direction?: "horizontal" | "vertical", //布局的方向属性 data?: CGReactButtonState //使用Button数据类型 onClick?: Function | Array, //事件回调函数 layout?: CGReactButtonLayout //布局定义 children?:any } //参数类型 interface ButtonProps extends CGReactButtonProp, CGReactButtonLayout {} /** 回调接口数据类型，可能在state数据类型中交叉使用*/ interface ButtonConfig //renderButton函数回调接口数据类型 { type: "button" | "submit" | "reset" | "file" | "radio" | "checkBtn" | "checkbox" | "switch", // 按钮类型 disable: boolean, // 按钮是否处于激活状态 icon: CGReactIconType,//按钮图标 theme: CGReactButtonTheme,// 按钮主题样式 radius: boolean, // 设置按钮圆角 margin?: number,//按钮间距 }//按钮基础类配置接口 interface SimpleButtonConfig extends ButtonConfig { type: "button" | "submit" | "reset" | "file", label: string, // 按钮的文字 primary: boolean, // 设置按钮为线框模式 size: CGReactButtonSize, //按钮的大小 onClick: Function // 回调事件 }//普通按钮配置 interface CheckButtonConfig extends ButtonConfig { type: "checkbox" | "checkBtn", label: string, // 按钮的文字 value: string, //checkbox或者radio的值 checked: boolean, // 是否选中状态 }//复选按钮配置 interface RadioButtonConfig extends ButtonConfig { type: "radio", label: string, // 按钮的文字 value: string, //checkbox或者radio的值 checked: boolean, // 是否选中状态 }//单选按钮配置 interface SwitchButtonConfig extends ButtonConfig { type: "switch", labelON: string, labelOFF: string valueON: string, valueOFF: string, checked: boolean, // 是否选中状态 }