cgreact-layui/types/cgreact-type-select.ts

CGReact基于Layui样式的组件库

/** SelectState相关数据结构*/
type CGReactSelectOption = {//选项是选项label到值value的映射
    [label: string]: string | undefined | { //有可能是option组的情况,配置为嵌套的object
        [label: string]: string | undefined // 配置undefined会禁用对应的option
    }
};//普通选择框的选项配置
type CGReactSelectState = ({
    type?: "select", //普通的select类型
    label?: string | "请选择" | Array<string | "请选择" | "请选择A" | "请选择B" | "请选择C">,//标签作为placeholder渲染
    option?: CGReactSelectOption | Array<CGReactSelectOption>, //普通select的选项，配置一个则整个数组都生效
    select?: string | Array<string> //选中的值
} | {
    type?: "year" | "month" | "date" | "time" | "date-time",//时间选择器配置类型，支持多种模式
    label?: string | "选择时间" | [string | "开始时间", string | "结束时间"],//时间选择框的提示文字
    value?: Date | [Date, Date],//选中时间或者时间起止点
    format?: string | "yyyy-MM-dd" | "HH:mm:ss" | "yyyy-MM-dd HH:mm", //时间格式字符串，如yyyy-MM-dd，选择结果会以格式字符串现实，默认值根据type有所不同
    start?: Date, //开始时间限制
    end?: Date,//结束时间限制
} | {
    type?: "address",//地址选择类型
    label?: [string | "选择省" | undefined, string | "选择市" | undefined, string | "选择区" | undefined, string | "选择街道" | undefined],//可以配置undefined则对应的级别选择不出现
    select?: string,//value为regionCode
} | {
    type?: "color", //颜色选择器
    label?: string | "选择一个颜色",//颜色选择提示
    select?: string,//颜色值比如#ffeeff
}) & {//公共属性配置
    disable?: boolean | Array<boolean>, //select是否处于激活状态，默认false
    width?: number | number[],// 输入框长度配置
    formItem?: CGReactFormItem | boolean//表单行配置
};// @ts-ignore select的数据结构
interface SelectState extends CGReactSelectState
{
    // this.state回调接口数据类型
    type: string;
    option: object;
    label: string | Array<string>;
    select: string | Date | Array<string> | [Date, Date];
    disable: boolean | Array<boolean>;
    format: string;
    start: Date;
    end: Date;
    width: number | number[];
}

/** SelectProps在CGReactCompProp的基础上以input配置作为data的数据类型*/
type CGReactSelectLayout = {
    layoutName?: string, //布局的名称属性，渲染为item-name
    layoutWidth?: number | CGReactLength | CGReactGrid | MediaResponse,//布局宽度，水平方向支持删格系统，只有宽度才需要响应式布局
    align?: CGReactAlign, //布局相对于父布局的对其方式，其优先级高于父布局的gravity配置
    layoutDebug?: "debug-off" | "only-layout" | "with-content", //用于调试时显示布局的框子默认false不显示，如果没有配置，子Layout会自动同步父Layout的配置
}
type CGReactSelectProp = {
    data?: CGReactSelectState, //使用Input数据类型
    layout?:CGReactSelectLayout,
    value?: string,// 选择框的值
};//参数类型
interface SelectProp extends CGReactSelectProp,CGReactSelectLayout {}

/** 回调接口数据类型，可能在state数据类型中交叉使用*/
interface SelectConfig //renderSelect函数回调接口数据类型
{
    type: "select" | "year" | "month" | "date" | "time" | "date-time" | "address" | "color",
    label: string, //input框的提示文字
    select: string | Date, //当前选中的值
    disable: boolean, //input是否处于激活状态，默认false
    width: number,//长度配置
}//基础类配置数据结构
interface OptionSelectItem
{
    label: string, //选项的标签
    value: string, //选项的表单值
    checked: boolean, //选项当前是否选中
    disable: boolean, //选项是否禁用
    group: boolean, //是否为选项组的标签
} //input的选项数据结构
interface OptionSelectConfig extends SelectConfig
{
    type: "select", // type为普通选择
    select: string,//当前选择的值
    option: Array<OptionSelectItem>,
}// 普通select的数据结构
interface TimeSelectConfig extends SelectConfig
{
    type: "year" | "month" | "date" | "time" | "date-time", //支持多种时间选择的样式
    select: Date,//当前选择的时间
    start: Date,// 允许选择的开始时间，undefined则无限制
    end: Date,//允许选择的结束时间，undefined则无限制
    format: string,//时间字符串格式化
}//时间选择数据结构