kitking-cms-ie8 v0.0.58-beta

TOC

更新日志：

kitking cms ie8 API Introduction

base

formConfigFactory

表单配置文件操作工厂方法，主要服务于 KitForm 配置，针对配置做修改操作。

    @example
    import {FormConfigFactory} from 'kitking-cms-ie8';
    const formConfigFactory = new FormConfigFactory(kitFormConfig);
    formConfigFactory.qeuryIds('id').setDisabled(true);

KitForm 配置说明

property

• qeuryIds

  @description 通过配置文件id值，筛选配置，返回一个新的FormConfigFactory，通过链式调用，操作筛选后的配置； @params ids: array | string @retruen new FormConfigFactory(config)

    function qeuryIds(ids): FormConfigFactory;

• setDisabled

  @description 设置KitForm组件的disabled的状态 @params disabled: boolean @retruen FormConfigFactory

    function setDisabled(disabled): FormConfigFactory;

• setVisible

  @description 设置KitForm组件的是否显示状态。注意：隐藏状态，组件render生效，但不显示到页面； @params visible: boolean @retruen FormConfigFactory

    function setVisible(visible): FormConfigFactory;

• setComponentProps

  @description 设置组件props参数 @params callback: componentPropsCallback @retruen FormConfigFactory

    @example
    formConfigFactory.setComponentProps(componentProp => {
       return {
            onChange：this.handleChange
       }
    });

    function setComponentProps(callback): FormConfigFactory;

• componentPropsCallback

  @description 修改组件prop回调方法; 返回对应组件扩展的prop配置; @params componentProp: object @retruen object

    function componentPropsCallback(componentProp): object;

• setWarpperProps

  @description 设置FormItem 组件 prop @params callback: warpperPropsCallback @retruen FormConfigFactory

    @example
    formConfigFactory.setWarpperProps(warpperProp => {
       return {
            labelCol：{span: 3, offset: 12}
       }
    });

    function setWarpperProps(callback): FormConfigFactory;

• warpperPropsCallback

  @description 修改FormItem prop回调方法; 返回对应组件扩展的FormItem prop配置; @params warpperProp: object @retruen object

    function warpperPropsCallback(warpperProp): object;

• setRules

  @description 设置组件 getFieldProps options.rules 校验规则; @params callback: rulesCallback @retruen FormConfigFactory

    @example
    formConfigFactory.setRules(rule => {
       return {
                required: true,
                whitespace: true,
                message: '请再次输入密码'
            };
    });

    function setRules(callback): FormConfigFactory;

• rulesCallback

  @description 修改组件 prop回调方法; 返回对应组件扩展校验规则; @params rule: array @retruen object | array

    function rulesCallback(rule): object | array;

• Chain calls

  链式调用，类似 jQuery 方式; 设置 id 为 name 的组件为 disabled 状态，可以类似以下调用方式：

    import {FormConfigFactory} from 'kitking-cms-ie8';
    const formConfigFactory = new FormConfigFactory(kitFormConfig);

    ...

    render(){
        formConfigFactory.qeuryIds('name').setDisabled(true);
        const config = formConfigFactory.getConfig();
        return <KitForm config={config}/>;
    }

ieDetection

@description

    浏览器识别,目前针对ie8 和 ie9 识别，其他情况返回'modern browser';
__*@return*__
    detection: 'ie8' | 'ie9' | 'modern browser';

    @example
    import {ieDetection} from 'kitking-cms-ie8';
    if(ieDetection() === 'ie8')

ie8-polyfill

dict

组件(components)

KitForm

• formConfig

    formConfigs: PropTypes.array,

    @example
    [
        {
            id: '', // form内唯一id， 与后端字段匹配
            dict: '', // 是否需要特殊字典、select、checkbox、radio组件自动查找字典
            label: '', // label文字
            newLineStart: false, // 是否为新的一行
            visible: true, // 是否显示 整个组件
            detail: true, // 详情模式（详情和 disabled的区别是：有无必选项星号显示）
            initialValue: '', // 初始值

            component: 'Input' || customComponent, // 内置组件或自定义组件
            componentProps: {}, // 表单组件的 props 属性，参考 ant design 组件/自定义组件文档
            formItemProps: {
                // FormItem 组件的 props 属性，参考 ant design 组件
                labelCol: {
                    span: '',
                    offset: ''
                },
                wrapperCol: {
                    span: '',
                    offset: ''
                }
            },
            colProps: {
                // Col 组件 Props 的属性，参考 ant design 组件
                span: ''
            },
            rules: [] // 规则显示，参考 ant design 组件
        }
    ];

• form

    form: PropTypes.object,

• colLength

     colLength: PropTypes.number,

• onSubmit

KitNotFound

404 页面

KitSearch

• config

    {
        formConfigs:PropTypes.array.isRequired,
        cardProps: PropTypes.object,
        colLength: PropTypes.number,
        operator: PropTypes.element,
        callback: PropTypes.func
    }

KitSidebar

• config

    {
        menuConfigs: PropTypes.array.isRequired,
        onSelect: PropTypes.func,
        getBreadcrumb: PropTypes.func,
        location: PropTypes.object
    }

KitTable

• config

    {
        dataSource: ,// 数据源
        columns: ,//列配置
        pagination: ,//翻页器
        selectOperation: {//选择操作栏
            show: PropTypes.bool,
            btnCallback: PropTypes.func,
            btnText: PropTypes.string,
            infoRender: PropTypes.func
        },
         // 列选择
        rowSelection: PropTypes.shape({
            type: PropTypes.string,
            selectedRowKeys: PropTypes.array,
            onChange: PropTypes.func,
            getCheckboxProps: PropTypes.func,
            onSelect: PropTypes.func,
            onSelectAll: PropTypes.func
        }),
        // 边框设置
        bordered: PropTypes.bool,
        // 加载动画
        loading: PropTypes.bool
    }

kitCard

kitModal

弹窗

• config

    {
        title: PropsType.string,// 头部文本显示 默认为空字符串
        confirmLoading: PropsType.bool,// 确定按钮loading状态 默认为 false
        maskClosable: PropsType.bool, // 点击蒙层是否允许关闭 默认为 false
        onOk: PropsType.func, // 点击‘确定’回调方法
        onCancel: PropsType.func, // 点击‘取消’回调方法
        extra: PropsTypr.array, //按钮扩展，包含React.Element
        extraPlacement: PropsType.array, //扩展按钮的方向 接收 left 和 right
        mode: PropsType.string //按钮默认展示模式 接收 alert(单按钮模式) 和 confirm(默认) *单按钮时不处理扩展按钮，单按钮时使用okText更改文字，onOk回调方法
    }

kitTableOperator

表格操作按钮组

• btnConfigs

    btnConfigs: PropTypes.array,// 按钮配置项 btnsConfig
    @example
    [
        {
            text: '', //按钮名称
            onClick: () => {}, //按钮点击事件
            isDisplay: true //是否显示隐藏
        },
        {
            textRender: '', //气泡确认框按钮名称
            popconfirm: {
                onConfirm //气泡确认框确定按钮事件
                titleRender: '' //气泡确认框标题
            }
        }
    ];