介绍

此项目是把原来的 Talent UI Builder中的核心的功能分离了出来，方便不同的项目进行接入

使用说明

安装到项目中

npm install @beisen/tub --save

Class

export default Workspace;
export {UIBuilderState, Workspace, Viewer};

Workspace [ReactComponent]

编辑器

Viewer [ReactComponent]

渲染器

TubState [static class]

数据

示例代码

编辑器

//引入Tub
import Workspace, {Tub} from '@beisen/tub';
//引入样式
import '@beisen/tub/style.css';

//组件代码
class Home extends Component {

  constructor(props, contents){
    super();
    this.state = {tubState: TubState.create()};
  }

  handleChange(tubState){
     this.setState({tubState})
  }

  render() {
    return (
        <Workspace 
          components={components}
          propsComponents={propsComponents}
          templates={templates}
          previewUrl="#/view"
          onChange={::this.handleChange}
          onSave={::this.handleSave}
          />
          
    );
  }
}

渲染器

import {Viewer, UIBuilderState} from '@beisen/tub';
import '@beisen/tub/style.css';

export default class View extends Component{
    constructor(props){
        super(props)
        let data = JSON.parse(window.localStorage.uibuilder)
        this.state = {
            tubState: TubState.create(data)
        }
    }

    renderComponent(Comp,data, mergeProps){
        return <Comp data={data} {...mergeProps}/>
    }

    componentWillReceiveProps(nextProps){
        this.setState({
            tubState: tubState.setContent(nextProps.data)
        });
    }
    
    render(){
        return <Viewer  
                tubState={this.state.tubState}
                components={Elements} 
                templates={PageTemplate}
                renderComponent={::this.renderComponent}
                onChange={(tubState) => {this.setState({tubState})}}
            />
    }
}

参数说明

components [object] Workspace & Viewer

供拖拽的组件列表

项目代码示例

import Text from './Text';
import LinkList from './LinkList';
import Form from './Form';
import Header from './Header';
import DataTable from './DataTable';
import ImgSlider from './ImgSlider';
import VideoPlayer from './Video';
import ButtonGroup from './ButtonGroup';
import MoChart from './MoChart';
import Charts from './Charts'
import MoFilters from './MoFilters';

export default {
    ButtonGroup,
    DataTable,  
    LinkList, 
    Form, 
    Header, 
    MoChart,  
    ImgSlider, 
    Text, 
    VideoPlayer,
    Charts, 
    MoFilters,
};

propsComponents [object] Workspace

给组件提供属性编辑的组件列表

templates [object] Workspace & Viewer

页面可用的模板列表

tubState [instance of TubState] Workspace & Viewer

通过 UIBuilderState 创建state的key, UI Builder编辑的结果可以用这个key取出来

previewUrl [string] Workspace

预览结果的地址，因为模拟设备需要使用iframe来模拟尺寸，所以需要在本地部署一个viewer来展示编辑的结果

onSave [function] Workspace

点击保存按钮的时候执行的回调

onChange [function] Workspace & Viewer

renderComponent function Workspace & Viewer

定义

 function renderComponent(Comp){
	/* 自定义的组件渲染方法
	 * @Comp, 用来渲染的组件
	 * 请注意 data属性是用来接收editableData的属性，请不要覆盖此属性
	*/
	//示例
	return <Comp />
}

关于模板

在Tub中，模板是Workspace和Viewer都支持的一属性，是用来渲染创建的页面的公共内容的。开发者可以以开发组件的方式开发出一个模板，并通过this.props.children指定自定义布局的区域。

除了模板有固定的可配置的属性外，还支持getEditProps方法，为模板定制可配置的属性。方法同组件配置可编辑属性。 详情参见项目中的examples

示例代码

关于属性编辑

在使用UI Builder编辑器的时候需要传入components和propComponents

components是展示的组件， propComponents是对组件进行编辑的组件

在对开发一个components组件时，需要定义一个静态属性， 下面是一个最简单的components, 只有一个可编辑属性

展示组件的示例代码

class Text extends Component {
   
    static getEditProps(){
        return [
            {
                pType: 'PropsText', //propComponent 类型
                name: '编辑内容', //在属性编辑面板的显示名字
                key: 'value', //编辑结果存储的key,
                defaultValue: 'text' //此字段的默认值
            }
        ]
    }
    
    render() {
        let {mode, data/*数据*/ } = this.props;
        if(mode===1){
            return <div>Text Preview</div>
        }else{
            return <div>{data.value/*从数据中取编辑结果的字段*/ || 'Text'}</div>
        }
    }
}

export default Text;

编辑属性组件的代码

import React, {Component, PropTypes} from 'react';
import './Text.scss'
import {Input} from 'components/common/form'

class PropsText extends Component {

    handleSave(val) {
    		//this.props.update方法所有属性编辑组件都可以使用，表示应用编辑结果
        let {update} = this.props; 
        update(val) 果
    }

    render() {
    		/*
    			因为一个属性编辑组件只对应展示组件中的一个属性字段，所以数据统一放在this.props.data中
    		*/
    		let {data} = this.props;
        return <Input value={data} placeholder='空白内容'
            onChange={this.handleSave.bind(this) } />
    }
}

export default PropsText;

组件通信机制

流程