feat(refactor): perfect test suites and add builder demo in docs (#100)

* refactor: 拖拽组件替换成react-dnd

* refactor: 调整交互

* test: update test cases

* fix: 修复拖拽bug

* chore: build

* refactor: 完善测试用例

Author: cnt1992

docs/SUMMARY.md

@@ -53,3 +53,4 @@
      - [国际化](./Examples/antd/International.md)
 - [知乎专栏](https://zhuanlan.zhihu.com/uform)
 - [GitHub](https://github.com/alibaba/uform)
+- [PlayGround DEMO](../packages/builder/src/demo/index-1-x.js)

packages/builder/package.json

@@ -7,9 +7,6 @@
     "type": "git",
     "url": "git+https://github.com/alibaba/uform.git"
   },
-  "scripts": {
-    "start": "node scripts/start.js"
-  },
   "bugs": {
     "url": "https://github.com/alibaba/uform/issues"
   },
@@ -28,6 +25,8 @@
     "@uform/utils": "^0.1.15",
     "@uform/validator": "^0.1.15",
     "classnames": "^2.2.5",
+    "immutability-helper": "^3.0.0",
+    "lodash.flow": "^3.5.0",
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.1",
     "lodash.pick": "^4.4.0",
@@ -37,6 +36,7 @@
     "moment": "^2.24.0",
     "prop-types": "^15.6.1",
     "react-dnd": "^7.4.1",
+    "react-dnd-html5-backend": "^7.4.0",
     "react-powerplug": "^1.0.0",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
@@ -46,7 +46,8 @@
     "uuid": "^3.2.1"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npm.alibaba-inc.com"
   },
   "gitHead": "4d068dad6183e8da294a4c899a158326c0b0b050",
   "devDependencies": {

packages/builder/src/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 import cls from 'classnames'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
@@ -16,11 +16,13 @@ import isEqual from 'lodash.isequal'
 import AppStyle from './style'
 
 // components
-import FieldList from './components/fields/index'
-import Preview from './components/preview/index'
-import generateGlobalBtnList from './components/globalBtnList/index'
+import {
+  FieldList,
+  Preview,
+  GlobalBtnList,
+  PropsSetting
+} from './components/index'
 
-import PropsSetting from './components/props/propsSetting'
 import { SchemaForm, Field } from './utils/baseForm'
 import defaultGlobalCfgList from './configs/supportGlobalCfgList'
 
@@ -33,6 +35,8 @@ class App extends Component {
       systemError: false,
       accordionList: []
     }
+    this.appRef = createRef(null)
+    this.appHeaderRef = createRef(null)
   }
 
   generateGlobalCfgList = () => {
@@ -63,10 +67,11 @@ class App extends Component {
         }}
         defaultValue={this.props.gbConfig}
         labelAlign='left'
+        labelCol={10}
         labelTextAlign='right'
       >
         {globalCfgList.map(props => (
-          <Field {...props} key={props.name} x-item-props={{ labelCol: 10 }} />
+          <Field {...props} key={props.name} />
         ))}
       </SchemaForm>
     )
@@ -93,7 +98,7 @@ class App extends Component {
       list.unshift({
         title: '全局配置',
         content: this.renderGlobalConfig(),
-        expanded: true
+        expanded: false
       })
     }
     return list
@@ -115,6 +120,17 @@ class App extends Component {
     this.setState({
       accordionList: this.getAccordionList()
     })
+
+    const appDom = this.appRef.current
+    const appHeaderDom = this.appHeaderRef.current
+
+    if (appDom.offsetTop !== 0) {
+      document.querySelector(
+        '.schamaform-content'
+      ).style.height = `${window.innerHeight -
+        appDom.offsetTop -
+        appHeaderDom.offsetHeight}px`
+    }
   }
 
   componentWillUnmount() {
@@ -125,12 +141,12 @@ class App extends Component {
     })
   }
 
-  componentWillReceiveProps(nextProps) {
-    let oldProperties = {}
-    if (this.props.schema && this.props.schema.properties) {
-      oldProperties = this.props.schema.properties
-    }
-    const { schema = {}, globalCfg = {}, initSchema: _initSchema } = nextProps
+  componentDidUpdate(prevProps) {
+    const oldProperties =
+      prevProps.schema && prevProps.schema.properties
+        ? prevProps.schema.properties
+        : {}
+    const { schema = {}, globalCfg = {}, initSchema: _initSchema } = this.props
 
     const { properties = {} } = schema
 
@@ -205,21 +221,20 @@ class App extends Component {
     }
   }
 
-  renderGlobalBtnList() {
-    return generateGlobalBtnList(this.props)
-  }
-
   render() {
     const { initSchemaData, renderEngine } = this.props
     const { Accordion, version: UIVersion } = this.props.UI
 
-    const contentHeight = window.innerHeight - 64
+    const contentHeight = window.innerHeight
 
     return this.state.systemError ? (
       <p>系统发生异常</p>
     ) : (
-      <AppStyle className={cls('schemaform-app', this.props.className)}>
-        <div className='schemaform-header'>
+      <AppStyle
+        ref={this.appRef}
+        className={cls('schemaform-app', this.props.className)}
+      >
+        <div ref={this.appHeaderRef} className='schemaform-header'>
           <a
             href='javascript:;'
             className='schemaform-back'
@@ -231,7 +246,7 @@ class App extends Component {
           </a>
           <h1>编辑表单</h1>
           <div className='schemaform-header-btns'>
-            {this.renderGlobalBtnList()}
+            <GlobalBtnList {...this.props} />
           </div>
         </div>
         <div className='schamaform-content' style={{ height: contentHeight }}>
@@ -253,7 +268,7 @@ class App extends Component {
             {UIVersion === '1.x' ? (
               <Accordion
                 dataSource={this.state.accordionList}
-                defaultExpandedKeys={['0', '1']}
+                defaultExpandedKeys={['1']}
               />
             ) : (
               <Accordion
@@ -336,8 +351,7 @@ const mapDispatchToProps = dispatch => ({
   initSchema: data => dispatch(initSchema(data)),
   changeCodeMode: codemode => dispatch(changeCodeMode(codemode)),
   changeComponent: componentId => dispatch(changeComponent(componentId)),
-  editComponent: (id, propsData, containerId) =>
-    dispatch(editComponent(id, propsData, containerId))
+  editComponent: (...args) => dispatch(editComponent(...args))
 })
 
 class StyledAppComp extends React.Component {

packages/builder/src/__tests__/actions/index.spec.js

@@ -1,20 +1,20 @@
 import * as actions from '../../actions/index'
 
 describe('test actions', () => {
-  test('changeLayoutId action', () => {
-    expect(actions.changeLayoutId('111')).toEqual({
-      type: 'CHANGE_LAYOUTID',
-      data: {
-        id: '111'
-      }
-    })
-  })
-
+  // addComponent actions
   test('addComponent action', () => {
-    expect(actions.addComponent({
-      type: 'string',
-      title: '111'
-    }, '222', '333', 'layout', '444')).toEqual({
+    expect(
+      actions.addComponent(
+        {
+          type: 'string',
+          title: '111'
+        },
+        '222',
+        '333',
+        'layout',
+        '444'
+      )
+    ).toEqual({
       type: 'ADD_COMPONENT',
       data: {
         id: '333',
@@ -41,50 +41,57 @@ describe('test actions', () => {
   })
 
   test('editComponent action', () => {
-    expect(actions.editComponent('111', {
-      __id__: 222
-    }, '333')).toEqual({
+    expect(
+      actions.editComponent('111', {
+        __id__: 222
+      })
+    ).toEqual({
       type: 'EDIT_COMPONENT',
       data: {
         id: '111',
         propsData: {
           __id__: 222
-        },
-        containerId: '333'
+        }
       }
     })
   })
 
   test('deleteComponent action', () => {
-    expect(actions.deleteComponent('111')).toEqual({
+    expect(actions.deleteComponent(['111'])).toEqual({
       type: 'DELETE_COMPONENT',
       data: {
-        id: '111'
+        id: ['111']
       }
     })
   })
 
   test('showComponentProps action', () => {
-    expect(actions.showComponentProps('111', {
-      type: 'string',
-      title: '222'
-    }, '333')).toEqual({
+    expect(
+      actions.showComponentProps(
+        ['111'],
+        {
+          type: 'string',
+          title: '222'
+        }
+      )
+    ).toEqual({
       type: 'SHOW_COMPONENT_PROPS',
       data: {
-        id: '111',
+        id: ['111'],
         comp: {
           type: 'string',
           title: '222'
-        },
-        containerId: '333'
+        }
       }
     })
   })
 
   test('editComponentProps action', () => {
-    expect(actions.editComponentProps('111', {
-      __id__: '222'
-    })).toEqual({
+    expect(
+      actions.editComponentProps('111', {
+        __id__: '222'
+      })
+    ).toEqual({
       type: 'EDIT_COMPONENT_PROPS',
       data: {
         id: '111',
@@ -123,9 +130,11 @@ describe('test actions', () => {
   })
 
   test('changeGbConfig action', () => {
-    expect(actions.changeGbConfig({
-      aaa: 1
-    })).toEqual({
+    expect(
+      actions.changeGbConfig({
+        aaa: 1
+      })
+    ).toEqual({
       type: 'CHANGE_GB_CONFIG',
       data: {
         aaa: 1
@@ -134,9 +143,11 @@ describe('test actions', () => {
   })
 
   test('initSchema action', () => {
-    expect(actions.initSchema({
-      aaa: 1
-    })).toEqual({
+    expect(
+      actions.initSchema({
+        aaa: 1
+      })
+    ).toEqual({
       type: 'INIT_SCHEMA',
       data: {
         aaa: 1

packages/builder/src/__tests__/index.spec.js

@@ -10,6 +10,6 @@ test('shoud correct render APP', () => {
   }
   renderer.render(<Index {..._props} />)
   const result = renderer.getRenderOutput()
-  const matchProps = result.props.children.props.children.props
+  const matchProps = result.props.children.props
   expect(matchProps).toHaveProperty('renderEngine')
 })