cmp-props-editor

组件平台使用的属性编辑器，根据组件的属性配置，动态创建对应的控件来编辑属性值，属性命名需要遵守下文的命名规范。

组件命名规范是自定义的规范，主要是以属性的后缀名进行区分，比如后缀是Color，采用颜色选择器，后缀是Image，采用图片选择框，具体支持的后缀，下面的规范会列出。

使用

npm install cmp-props-editor --save

import PropsEditor form 'cmp-props-editor';
import 'cmp-props-editor/dist/props-editor.css;

编辑器的属性说明

编辑器提供了如下属性，用于分析组件的属性，创建组件，属性如下：

• cmpType 传入React组件的类型，类型是function
• cmpProps 组件的预定义的属性值，如果没有，从cmpType的默认属性defaultProps值获取
• onChange 提供onChange事件，返回属性编辑器修改后的属性集

组件属性命名规范

组件是通过规范属性的后缀名来区分对应的编辑控件的，主要支持如下的后缀：

• Text 普通文本
• Image 图片链接
• Color 颜色
• Box 内边距/外边距，包括：top，right，bottom，left
• Bg 背景色 backgroundColor,backgroundImage,backgroundRepeat,backgroundPosition
• Border 边框,包括：borderWidth，borderStyle，borderColor
• List 选择列表
• 其他 普通文本框

如果不使用后缀，也可以在propsMap中自定义，设置type为后缀名即可。

说明，针对类型object的属性，建议自定义编辑器支持。

组件书写规范

组件需要提供三个静态类型提供支持:

• propTypes React自带的定义
• defaultProps 默认属性值
• propsMap 属性的定义，包括中文名，或复杂配置

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class CmpTest extends Component {
    state = {  }
    static propTypes={
        title:PropTypes.string,
        logoImage:PropTypes.string,
        backgroundColor:PropTypes.string,
        overflow:PropTypes.string
    }
    static defaultProps={
        title:'测试标题',
        logoImage:'',
        backgroundColor:'#fff',
        overflow:'visible'
    }
    //配置属性的中文名称或者自定义配置
    static propsMap={
        title:'标题',
        logoImage:'Logo链接',
        backgroundColor:'背景色',
        overflow: {
            type: 'List',
            name: '溢出(overflow)',
            hidden:false,
            value: {
                'visible': '默认',
                'hidden': 'hidden',
                'scroll': 'scroll',
                'auto': 'auto',
                'inherit': 'inherit'
            }
        },

    }
    render() {
        let me=this;
        return (
            <div>
                {
                    JSON.stringify(me.props,null,4)
                }
            </div>
        );
    }
}
export default CmpTest;

propsMap如果设置为字符串，表示该属性的显示名称，如果设置为对象，表示对该属性的配置，例如

backgroundColor：'背景色'

和

backgroundColor:{
    type:'Color',
    name:'背景色'
}

的效果是一样的，都是启用Color选择器。

属性编辑器使用

import React, { Component } from 'react';
import PropsEditor from '../src/props-editor';
import CmpText from './cmp-test';

class Index extends Component {
    state = {
        cmpProps: {}
    }
    onPropsChange(cmpProps) {
        this.setState({
            cmpProps
        })
    }
    render() {
        let me = this;
        let {
            cmpProps
        } = me.state;
        return (
            <div>
                <PropsEditor cmpType={CmpText} cmpProps={cmpProps} onChange={me.onPropsChange} />
                <CmpText {...cmpProps} />
            </div>
        );
    }
}

export default Index;