grid-component-editor/types/index.ts

延长loading超时时间；转义伪类中文，防止乱码

import { FunctionComponent, ComponentClass, } from 'react'
import { CoreProps, Layout } from 'react-grid-layout';

export type EditorMode = 'edit' | 'display'
export type ThemeType = 'dark' | 'light' | undefined
export type RegisterComType = 'control' | 'display'
export type CSSVar = '--color-primary' | '--text-color-primary' | '--bdcolor-input' | '--bgcolor-primary'
export type RequestType = 'dataSource' | 'dataset' | 'engine' | 'schema' | 'save' | 'option'

export type ReducerType = "INIT" | "COMPONENT" | "DELETE_COMPONENT" |
    "CUR_FOCUS_INDEX" | "GLOBALCONFIG" | "FULL_UPDATE" |
    "FETCH_DATA" | "FETCH_DATAS" | "U_COM" | "U_COM_PROP" |
    'FETCH_OPTION' | 'RECALL' | 'RESET'

export type GridProp = {
    mode: EditorMode
    title?: string
    onRequest?<T extends any>(type: RequestType, param?: any, customUrl?: string): Promise<T> // 基于type 
    onTheme?(theme: ThemeType)
    config: {
        registerComponents: Record<string, RegisterComponent>
    }
} & Pick<IState, 'globalConfig' | 'components'>


export type PropVal = string | number | boolean | Function
// 注册组件
export type RegisterComponent = {
    el: FunctionComponent | ComponentClass
    type: RegisterComType
    label: string
    category: string
    icon: string
    props: Record<string, PropVal>
    eventProps?: string[]
    configurableProps: Record<string, {
        label: string
        value: PropVal
        type: 'text' | 'boolean' | 'number' | 'option'
        placeholder?: string
        options?: {
            label: string,
            value: PropVal
        }[]
    }>
}
export type Query = {
    [key: string]: any
    modelId?: number
    tableName?: string
    aggStatus?: boolean
    limit?: number
    measure: [fieldName: string, fieldType: string][]
    dimensions: [fieldName: string, fieldType: string][]
    aggregator: {}
    filter?: Record<string, any>
    queryType?: RegisterComType
    filterField?: string
}
export type EditorComponent = Layout & {
    name: string,
    type: RegisterComType,
    props: Record<string, any>,
    query: Query //存放组件关联的请求数据或者基于组件type控制数据 
    eventProps?: string[]
}

export type OptoinalEditorCom = Partial<Omit<EditorComponent, 'i'>> & { i: string }



export interface IState {
    curFocusIndex: string,
    globalConfig: CoreProps & { theme?: ThemeType }
    components: Record<string, EditorComponent>,
    snapshotIndex: number
    preview: boolean,
}

export type Dispatch = <T extends ReducerType>(type: T, payload: any) => {}

export type IContext = Pick<IState, 'curFocusIndex' | 'components' | 'globalConfig'> & {
    dispatch: Dispatch
    curFocusCom: EditorComponent,
    requestFunc: (type: RequestType, param?: any) => (Promise<any> | void) | null
}


export type ReducerPayload = {
    INIT: any
    COMPONENT: any
    DELETE_COMPONENT: any
    CUR_FOCUS_INDEX: any
    GLOBALCONFIG: any
    FULL_UPDATE: any
    U_COM: { i: string } & Partial<Omit<EditorComponent, 'i'>>
    U_COM_PROP: any
    FETCH_OPTION: any
    RECALL: any
    RESET: any
    FETCH_DATA: Pick<EditorComponent, 'i' | 'query'>
    FETCH_DATAS: Pick<EditorComponent, 'i'>
}

// 简化之后dispath
export type Action = { type: ReducerType, payload?: any }