@beisen/grid-page-builder

Grid Page Builder接入文档

名词解释： 功能组件：功能组件就是拖拽到工作区的组件 属性组件：在编辑的时候点击功能组件，在左右就会显示出组件可编辑的属性列表，每一个列表项其实就是一个组件，这个组件就是属性组件，支持自定义开发。

内置可编辑属性

组件内置属性

    'title': 标题,
    'border': 边框,
    'width': 宽度,
    'height': 高度,
    'padding': 内边距,
    'margin': 外边距,
    'hidden': 隐藏

页面内置属性

    'background': 背景,
    'toTop': 返回顶部

API

onBeforeCreateComponent(type, payload, pageData) 在创建Component之前的回调，如果return false 测不生成组件

onCreateComponent (component, data) 创建component元数据时的回调

componentListData 左侧组件列表数据描述

defaultProps 默认页面或者组件属性的设置，属性来自内置属性

replaceComponent(domNode, props) 渲染组件的时候用来替换组件，第一个参数是组件渲染时的节点，第二个参数是渲染组件时的数据

**getEditProps(type, id)**当点击组件时获取组件的可编辑属性的回调，type为组件的类型，id为组件实例的id,适用于组件编辑属性没有绑定到组件定义上

defaultProps={{
  component:['title', 'border']
}}

Component Class

getEditProps 获取此组件的可编辑属性列表，与propsComponent相关联

基本接入代码示例

import React, {Component} from 'react';
import GridWorkspace, {TubState} from '@beisen/grid-page-builder';
import '@beisen/grid-page-builder/style.css'
import templates from 'components/uibuilder/PageTemplates';
import components from 'components/uibuilder/ElementCollection';
import propsComponents from 'components/uibuilder/PropsCollection';
import {v1} from 'uuid';

export default class Grid extends Component {

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

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

  handleSave = (tubState) => {
      //点击完保存按钮后的回调
      //window.localStorage.uibuilder = JSON.stringify(tubState);
  }

  renderComponent = (Comp /* */) => {
    //自定义渲染方法，可以用此方法更新组件渲染的格式
    return <div>1111<Comp data={editableData} {...mergeProps} /></div>
  }

  genId(data){
    //生成id的方法，如果不提供此方法，grip-page-builder会使用uuid的v1方法来生成uid
    return v1();
  }

  render() {
    return (
        <GridWorkspace
          renderComponent={this.renderComponent}
          tubState={this.state.tubState} //TubState实例，用来管理编辑器的数据
          components={components} //全部组件列表**未分组**
          propsComponents={propsComponents} //属性组件列表
          templates={templates} //模板列表
          onChange={this.handleChange} //当产生编辑动作时的回调，用来更新tubState
          onSave={this.handleSave} //点击保存按钮的回调，可以拿到当前的编辑器状态的数据对象
          genUID={this.genId} //生成id的方法，可以不提供，默认使用uuid的v1方法生成uid
          />
    );
  }
}

如何对组件列表进行分组

生成一套如下面示例代码所示格式的数据，并且使用availableComponents传递给page Builder

注意数据中components列表中对应的data字段，这里的的数据会作为参数传递给被实例的对应类型的组件 所以，可以用来做为初始化数据

// ....Component

render() {
    return (
      <GridWorkspace
        ....
        availableComponents={this.genAvailableComponent()} //使用此属性对组件列表进行分组
        />
    );
  }

genAvailableComponent(){
    return  [{
      name: 'Group1',
      id: v1(),
      components: [{
        name: 'ITalentWiget',
        id: v1(),
        data: {
          a: 1,
          b: 2,
          url: 'https://res.mail.qq.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png'
        }
      }, {
        name: 'FeedTask',
        id: v1(),
        displayName: '初始数据图标',
        data: {
          a: 3,
          b: 4
        }
      }]
    }, {
      name: 'Group1',
      id: v1(),
      components: [{
        name: 'ITalentWiget',
        id: v1(),
        data: {
          a: 1,
          b: 2,
          url: 'https://res.mail.qq.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png'
        }
      }, {
        name: 'FeedTask',
        id: v1(),
        displayName: '初始数据图标2',
        data: {
          a: 3,
          b: 4
        }
      }]
    }]
  }

如何设置组件列表中的图标

1.对组件设置静态属性diaplayName和icon

2.availableComponents属性中对components中的元素设置diaplayTitle和icon属性

3.在开发组件的时候render方法中当mode=1的时候提供自定义的图标模板

如果使用矢量图标建议

关于组件尺寸

grid-page-builder弱化了grid的概念，会为每一个组件生成一个grid做为容器，所以组件建议的尺寸是宽100%, 高100%，这样在调整grid 尺寸的时候，组件的尺寸会跟着变化

当布局为grid类型并且在组件列表项中添加以下配置，可以对组件的尺寸做出限制

  gridSizeLimit: {
      maxH: 20,
      minH: 10,
      maxW: 6,
      minW:3,
    },
    gridInitSize: {
      w: 6,
      h: 20
    },

组件选中状态

使用tubState.setSelect(id)可以对选中指定组件