refactor: split next version

packages/builder/config/webpack.config.dev.js

@@ -23,6 +23,7 @@ const env = getClientEnvironment(publicUrl)
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
 module.exports = {
+  mode: 'development',
   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
   devtool: 'cheap-module-source-map',
@@ -196,16 +197,16 @@ module.exports = {
     ]
   },
   plugins: [
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(env.raw),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml
     }),
+    // Makes some environment variables available in index.html.
+    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In development, this will be an empty string.
+    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),    
     // Add module names to factory functions so they appear in browser profiler.
     new webpack.NamedModulesPlugin(),
     // Makes some environment variables available to the JS code, for example:

packages/builder/package.json

@@ -18,7 +18,6 @@
     "npm": ">=3.0.0"
   },
   "dependencies": {
-    "@alifd/next": "^1.13.1",
     "@uform/react": "^0.1.0-alpha.14",
     "@uform/utils": "^0.1.0-alpha.3",
     "@uform/validator": "^0.1.0-alpha.3",
@@ -48,29 +47,35 @@
   "gitHead": "f513fc2dcca781b3f7aa588c4419bce20cba2d8b",
   "devDependencies": {
     "@alifd/next": "^1.13.1",
+    "@alife/next": "^0.19.72",
+    "@babel/core": "^7.3.4",
     "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-proposal-decorators": "^7.3.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
     "@uform/next": "^0.1.0-alpha.14",
     "autoprefixer": "7.1.6",
+    "babel-loader": "^8.0.5",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "css-loader": "0.28.7",
     "eslint-loader": "1.9.0",
     "file-loader": "1.1.5",
-    "html-webpack-plugin": "2.29.0",
+    "html-webpack-plugin": "^4.0.0-beta.5",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",
     "raf": "3.4.0",
-    "react-dev-utils": "^5.0.1",
+    "react": "^16.8.3",
+    "react-dev-utils": "^7.0.3",
+    "react-dom": "^16.8.3",
     "react-test-renderer": "^16.8.3",
     "redux-mock-store": "^1.5.3",
     "style-loader": "0.19.0",
     "url-loader": "0.6.2",
-    "webpack": "3.8.1",
+    "webpack": "^4.29.6",
     "webpack-dev-server": ">=3.1.11"
   }
 }

packages/builder/src/components/globalBtnList/index.js

@@ -27,7 +27,7 @@ export default (props) => {
       title: preview ? '返回编辑' : '预览',
       props: {
         onClick: () => {
-          this.props.changePreview(!this.props.preview)
+          props.changePreview(!props.preview)
         }
       },
       iconType: 'eye',
@@ -44,8 +44,8 @@ export default (props) => {
           onSubmit &&
             typeof onSubmit === 'function' &&
             onSubmit({
-              schema: wrapSubmitSchema(this.props.initSchemaData),
-              globalCfg: this.props.gbConfig
+              schema: wrapSubmitSchema(props.initSchemaData),
+              globalCfg: props.gbConfig
             })
         }
       },
@@ -60,7 +60,7 @@ export default (props) => {
       title: codemode ? '关闭源码' : '源码',
       props: {
         onClick: () => {
-          _changeCodeMode(!this.props.codemode)
+          _changeCodeMode(!props.codemode)
         }
       },
       iconUrl: globalBtnIconUrlWithTheme.code,

packages/builder/src/components/preview/fieldMiddleware.js

@@ -2,7 +2,7 @@ import React from 'react'
 import cls from 'classnames'
 import { registerFieldMiddleware } from '../../utils/baseForm'
 
-export default (FormConsumer) => {
+export default (FormConsumer, that) => {
   const hasRegisted = window.__hasRegisted__ || false
   if (hasRegisted) {
     return false
@@ -24,9 +24,9 @@ export default (FormConsumer) => {
         comp['x-props']._extra.__key__ === 'layout'
       const layoutDragProps = isLayoutWrapper
         ? {
-          onDragOver: ev => this.onDragOver(ev, 'layout'),
-          onDragLeave: ev => this.onDragLeave(ev, 'layout'),
-          onDrop: ev => this.onDrop(ev, null, 'layout', id)
+          onDragOver: ev => that.onDragOver(ev, 'layout'),
+          onDragLeave: ev => that.onDragLeave(ev, 'layout'),
+          onDrop: ev => that.onDrop(ev, null, 'layout', id)
         }
         : {}
 
@@ -43,7 +43,7 @@ export default (FormConsumer) => {
             <a
               onClick={ev => {
                 ev.preventDefault()
-                this.onMouseClick(id, comp, 'layout')
+                that.onMouseClick(id, comp, 'layout')
               }}
               href='javascript:;'
               className='preview-line-layer-layout'
@@ -65,8 +65,8 @@ export default (FormConsumer) => {
               size='small'
               href='javascript:;'
               onClick={() => {
-                this.props.changeComponent()
-                this.deleteComponent(id)
+                that.props.changeComponent()
+                that.deleteComponent(id)
               }}
               title='删除'
             >
@@ -86,10 +86,10 @@ export default (FormConsumer) => {
         <div key={id} className={'comp-item'}>
           <div
             className='preview-line-bar'
-            onDragOver={this.onDragOver}
-            onDragLeave={this.onDragLeave}
+            onDragOver={that.onDragOver}
+            onDragLeave={that.onDragLeave}
             onDrop={ev =>
-              this.onDrop(
+              that.onDrop(
                 ev,
                 id,
                 props.schemaPath.length > 1 ? 'layout' : '',
@@ -105,23 +105,23 @@ export default (FormConsumer) => {
             )}
             name={title}
             draggable
-            onDragStart={ev => this.onDragStart(ev, id, 'move')}
+            onDragStart={ev => that.onDragStart(ev, id, 'move')}
           >
             {React.createElement(Field, { ...props })}
             <div
               className='preview-line-layer'
               onClick={ev => {
                 ev.preventDefault()
-                this.onMouseClick(id, comp)
+                that.onMouseClick(id, comp)
               }}
             />
             <a
               className='preview-line-del'
               type='delete'
               size='small'
               onClick={() => {
-                this.props.changeComponent()
-                this.deleteComponent(id)
+                that.props.changeComponent()
+                that.deleteComponent(id)
               }}
             >
               删除

packages/builder/src/components/preview/index.js

@@ -30,7 +30,7 @@ class Preview extends Component {
   }
 
   componentDidMount() {
-    registerPreviewFieldMiddleware(FormConsumer)
+    registerPreviewFieldMiddleware(FormConsumer, this)
   }
 
   onMouseClick = (id, comp, type) => {

packages/builder/src/components/props/accordList.js

@@ -82,10 +82,15 @@ export default class extends React.Component {
   }
 
   render() {
-    const { Accordtion } = this.props.UI
+    const { Accordion, version: UIVersion } = this.props.UI
 
-    return (
-      <Accordtion
+    return UIVersion == '1.x' ? (
+      <Accordion
+        dataSource={this.state.accordionList}
+        defaultExpandedKeys={['1']}
+      />
+    ) : (
+      <Accordion
         dataSource={this.state.accordionList}
         onChange={(status, list) => {
           this.setState({

packages/builder/src/components/props/dataSourceEditor/index.js

@@ -16,7 +16,7 @@ class Component extends React.Component {
   }
 
   render() {
-    const { fieldStore = {}, value } = this.props
+    const { fieldStore = {}, value, UI } = this.props
 
     return (
       <div
@@ -25,6 +25,7 @@ class Component extends React.Component {
         }}
       >
         <DataSourceEditor
+          UI={UI}
           fieldStore={fieldStore}
           value={value}
           onChange={this.handleFieldAttrChange()}

packages/builder/src/components/props/editors/fieldAttrEditors/dataSourceEditor.js

@@ -149,13 +149,7 @@ class DataSourceEditor extends Component {
     const xProps = fieldStore['x-props'] || {}
     const { requestOptions = {} } = xProps
     const { data } = requestOptions
-    const { Form, Input, Radio, Tab } = UI
-
-    const { Group: RadioGroup } = Radio
-    const { TabPane } = Tab
-
-    this.RadioGroup = RadioGroup
-    this.TabPane = TabPane
+    const { Form, Input, Radio, Tab, RadioGroup, TabPane, version: UIVersion } = UI
 
     const dataSource = [
       {
@@ -174,6 +168,12 @@ class DataSourceEditor extends Component {
       })
     }
 
+    const tabProps = {}
+    tabProps[UIVersion == '1.x' ? 'shape' : 'type'] = 'text'
+
+    const formItemProps = {}
+    formItemProps[UIVersion == '1.x' ? 'validateState' : 'validateStatus'] = error ? 'error' : 'success'
+
     return (
       <Form.Item labelCol={LABEL_COL} className={this.props.className}>
         <RadioGroup
@@ -183,14 +183,15 @@ class DataSourceEditor extends Component {
         />
         {dataSourceType === 'local' ? (
           <Form.Item
-            validateStatus={error ? 'error' : 'success'}
+            {...formItemProps}
             extra={<span style={{ color: 'red' }}>{error}</span>}
           >
-            <Tab type='text' size='small'>
+            <Tab {...tabProps} size='small'>
               <TabPane tab='可视化' key='visual'>
                 <DataSourceEnum
                   dataSource={defaultSource}
                   onChange={this.handleEnumValueChange}
+                  UI={UI}
                 />
               </TabPane>
               <TabPane tab='源码' key='code'>
@@ -211,7 +212,7 @@ class DataSourceEditor extends Component {
         ) : null}
         {dataSourceType === 'remote' ? (
           <Form.Item
-            validateStatus={error ? 'error' : 'success'}
+            {...formItemProps}
             extra={<span style={{ color: 'red' }}>{error}</span>}
           >
             <Input

packages/builder/src/components/props/editors/fieldAttrEditors/dataSourceEnum.js

@@ -32,6 +32,12 @@ class Component extends React.Component {
   renderItemRow = (item = {}, idx) => {
     const { value = '', label = '' } = item
     const { UI } = this.props
+    const btnProps = {}
+    if (UI.version == '1.x') {
+      btnProps.text = true
+    } else {
+      btnProps.shape = 'text'
+    }
     return (
       <div className='source-row' key={`${idx}`}>
         <ul>
@@ -52,7 +58,7 @@ class Component extends React.Component {
         </ul>
         <UI.Button
           className='ashbin-btn'
-          shape='text'
+          {...btnProps}
           onClick={() => this.handleDeleteItem(idx)}
         >
           <UI.Icon type='ashbin' />

packages/builder/src/components/props/propsSetting.js

@@ -140,6 +140,7 @@ class PropsSetting extends Component {
           UI
         }
       }
+
       finalSchema[configItem.name] = {
         ...configItem,
         'x-props': newXprops

packages/builder/src/demo/index.js

@@ -4,34 +4,44 @@ import SchemaForm from '@uform/next'
 import Index from '../index'
 import {
   Button,
-  Collapse,
+  Accordion,
   Message,
   Upload,
   Input,
   Select,
   DatePicker,
   Icon,
   Checkbox,
-  NumberPicker
-} from '@alifd/next'
+  NumberPicker,
+  Radio,
+  Form,
+  Tab
+} from '@alife/next'
 
 // style
-import '@alifd/next/dist/next.css'
+// import '@alifd/next/dist/next.css'
+import '@alife/next/dist/next.min.css'
 
 const renderSchema = {}
 
 const props = {
   UI: {
+    version: '0.x',
     Button,
-    Accordtion: Collapse,
+    Accordion,
     Toast: Message,
     Upload,
     Input,
     Select,
     Icon,
     DatePicker,
     Checkbox,
-    NumberPicker
+    NumberPicker,
+    Radio,
+    RadioGroup: Radio.Group,
+    TabPane: Tab.TabPane,
+    Form,
+    Tab
   },
   // 主题： dark/light,默认dark
   // themeStyle: 'light',

packages/builder/src/style.js

@@ -134,7 +134,10 @@ export default styled.div`
       background: none;
     }
   }
-  .next-accordion-section {
+  .next-collapse-panel:not(:first-child) {
+    border-top: none;
+  }
+  .next-accordion-section, .next-collapse-panel {
     position: relative;
     &::after {
       content: "";
@@ -154,11 +157,14 @@ export default styled.div`
   }
   .next-accordion-section-content, .next-collapse-panel-content {
     background: none;
-    .next-form-left .next-form-item-label, .next-radio-group .next-radio-label {
+    .next-form .next-form-item-label, .next-radio-group .next-radio-label {
       color: ${props => props.theme.whiteColor};
       font-size: 12px;
     }
   }
+  .next-collapse .next-collapse-panel-icon {
+    color: ${props => props.theme.whiteColor};
+  }
   .next-accordion .next-accordion-icon:before {
     color: ${props => props.theme.whiteColor};
   }