Feature/schema preview

package.json

@@ -156,5 +156,8 @@
   "collective": {
     "type": "opencollective",
     "url": "https://opencollective.com/formily"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.0.2"
   }
 }

packages/react-schema-editor/README.md

@@ -14,51 +14,150 @@ import { SchemaEditor } from './src'
 
 function SchemaEditorDemo() {
   const [schema, setSchema] = React.useState({
-    title: '动态表单示例',
-    type: 'object',
-    "properties": {
-      "username": {
-        "title": "用户名",
-        "type": "string",
-        "x-component-props": {
-          "placeholder": "请输入用户名",
-          "onChange": "function(value) \n{console.log('input onChange', value, this.field, this.field.getValue('note'))"
-        }
-      },
-      "password": {
-        "title": "密码",
-        "type": "string",
-        "x-component": "Input",
-        "x-component-props": {
-          "htmlType": "password",
-          "placeholder": "请输入密码"
-        }
+  "type": "object",
+  "properties": {
+    "string": {
+      "type": "string",
+      "x-component": "Input",
+      "title": "String"
+    },
+    "radio": {
+      "type": "string",
+      "x-component": "Radio",
+      "enum": [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      "title": "Radio"
+    },
+    "select": {
+      "type": "string",
+      "x-component": "Select",
+      "x-component-props": {
+        "options": [{
+            label: 'Jack',
+            key: 'jack',
+            value: 'jack',
+          },{
+            label: 'Rose',
+            key: 'rose',
+            value: 'rose',
+          },{
+            label: 'Others',
+            key: 'others',
+            value: 'others',
+          }]
       },
-      "note": {
-        "title": "备注",
-        "type": "string",
-        "x-component": "TextArea",
-        "x-component-props": {
-          "placeholder": "something"
+      "title": "Select"
+    },
+    "checkbox": {
+      "type": "string",
+      "x-component": "Checkbox",
+      "enum": [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      "title": "Checkbox"
+    },
+    "textarea": {
+      "type": "string",
+      "x-component": "Textarea",
+      "title": "TextArea"
+    },
+    "number": {
+      "type": "number",
+      "x-component": "NumberPicker",
+      "title": "数字选择"
+    },
+    "boolean": {
+      "type": "boolean",
+      "x-component": "switch",
+      "title": "开关选择"
+    },
+    "date": {
+      "type": "string",
+      "x-component": "DatePicker",
+      "title": "日期选择"
+    },
+    "daterange": {
+      "type": "array<date>",
+      "x-component": "DateRangePicker",
+      "default": [
+        "2018-12-19",
+        "2018-12-19"
+      ],
+      "title": "日期范围"
+    },
+    "year": {
+      "type": "string",
+      "x-component": "YearPicker",
+      "title": "年份"
+    },
+    "month": {
+      "type": "string",
+      "x-component": "MonthPicker",
+      "title": "月份"
+    },
+    "time": {
+      "type": "string",
+      "x-component": "TimePicker",
+      "title": "时间"
+    },
+    "week": {
+      "type": "string",
+      "x-component": "WeekPicker",
+      "title": "周"
+    },
+    "upload": {
+      "type": "array",
+      "x-component": "Upload",
+      "title": "卡片上传文件"
+    },
+    "upload2": {
+      "type": "array",
+      "x-component": "Upload",
+      "title": "拖拽上传文件"
+    },
+    "upload3": {
+      "type": "array",
+      "x-component": "Upload",
+      "title": "普通上传文件"
+    },
+    "range": {
+      "type": "number",
+      "x-component": "Range",
+      "title": "范围选择"
+    },
+    "transfer": {
+      "type": "number",
+      "x-component": "Transfer",
+      "enum": [
+        {
+          "key": 1,
+          "title": "选项1"
+        },
+        {
+          "key": 2,
+          "title": "选项2"
         }
-      },
-      "agreement": {
-        "title": "同意",
-        "type": "string",
-        "x-component": "Checkbox",
-        "x-component-props": {
-          "disabled": "{{!this.field.getValue('username')}}",
-          "defaultChecked": true
-        }
-      }
+      ],
+      "title": "穿梭框"
+    },
+    "rating": {
+      "type": "number",
+      "x-component": "Rating",
+      "title": "等级"
     }
-  })
+  }
+})
 
   // return <div>Hello</div>
   return <SchemaEditor schema={schema} onChange={setSchema} />
 }
 
 ReactDOM.render(<SchemaEditorDemo />, document.getElementById('root'))
-```
-
-![](https://gw.alicdn.com/tfs/TB1Oo7hq4D1gK0jSZFKXXcJrVXa-1367-755.gif)
+````

packages/react-schema-editor/package.json

@@ -19,11 +19,14 @@
     "build": "tsc --declaration"
   },
   "dependencies": {
+    "@ant-design/compatible": "^0.0.1-rc.1",
+    "@formily/antd": "^1.0.4",
+    "@formily/antd-components": "^1.0.4",
     "@formily/react-schema-renderer": "^1.0.4",
     "lodash": "^4.17.15"
   },
   "devDependencies": {
-    "antd": "^3.x",
+    "antd": "^4.0",
     "node-sass": "^4.13.0",
     "typescript": "^3.5.2"
   },

packages/react-schema-editor/src/components/FieldEditor.tsx

@@ -1,14 +1,9 @@
 import React from 'react'
 import _ from 'lodash'
-import {
-  Form,
-  Button,
-  Checkbox,
-  Input,
-  InputNumber,
-  Select,
-  AutoComplete
-} from 'antd'
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Button, Checkbox, Input, InputNumber, Select, AutoComplete } from 'antd';
 import {
   getFieldTypeData,
   getInputTypeData,
@@ -247,7 +242,7 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
               />
             </FormItem>
             <FormItem
-              label={index === 0 ? '输入方式' : null}
+              label={index === 0 ? '输入方式' : ' '}
               {...formItemLayout}
               className="field-group-form-item"
             >
@@ -354,25 +349,25 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
             >
               <Button
                 type="primary"
-                icon="minus"
+                icon={<MinusOutlined />}
                 size="small"
                 onClick={() => {
                   handleMinusClick(property)
                 }}
               />
             </FormItem>
           </div>
-        )
+        );
       })}
       <Button
         disabled={_.includes(componentProps, BLANK_PROPERTY_VALUE)}
         type="primary"
-        icon="plus"
+        icon={<PlusOutlined />}
         size="small"
         onClick={handlePlusClick}
       />
     </div>
-  )
+  );
 }
 
 const FieldEditor: React.FC<IFieldEditorProps> = ({

packages/react-schema-editor/src/components/SchemaCode.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Tooltip, Icon} from 'antd';
+import {Tooltip} from 'antd';
+import {DownloadOutlined, CopyOutlined} from '@ant-design/icons';
 import MonacoEditor from 'react-monaco-editor'
 import { ISchemaCodeProps } from '../utils/types'
 import {copySchema, downloadSchema} from '../utils/schemaTools'
@@ -25,10 +26,10 @@ export const SchemaCode: React.FC<ISchemaCodeProps> = ({
     return (
       <div style={{ height: '30px', lineHeight: '30px', padding: '3px 30px', textAlign: 'right', background: '#1890ff' }}>
         <Tooltip placement="left" title="复制协议">
-          <Icon type="copy" onClick={() => {copySchema(schema)}} style={styles.icon} />
+          <CopyOutlined onClick={() => {copySchema(schema)}} style={styles.icon} />
         </Tooltip>
         <Tooltip placement="left" title="下载协议">
-          <Icon type="download" onClick={()=> {downloadSchema(schema)}} style={styles.icon} />
+          <DownloadOutlined onClick={()=> {downloadSchema(schema)}} style={styles.icon} />
         </Tooltip>
       </div>
   )};
@@ -40,7 +41,7 @@ export const SchemaCode: React.FC<ISchemaCodeProps> = ({
         height={500}
         language="json"
         theme="vs-dark"
-        onChange={(schema) => onChange(JSON.parse(schema))}
+        onChange={(schema) => onChange(schema)}
         value={schema}
       />
     </div>

packages/react-schema-editor/src/components/SchemaPreview.tsx

@@ -1,11 +1,43 @@
 import * as React from 'react'
 import { ISchemaPreviewProps } from '../utils/types'
+import { SchemaForm } from '@formily/antd'
 import {
-  SchemaForm,
-} from '@formily/react-schema-renderer'
+  Input,
+  Radio,
+  Checkbox,
+  Select,
+  DatePicker,
+  NumberPicker,
+  TimePicker,
+  Upload,
+  Switch,
+  Range,
+  Transfer,
+  Rating
+} from '@formily/antd-components';
+
+const components = {
+  Input,
+  Radio: Radio.Group,
+  Checkbox: Checkbox.Group,
+  TextArea: Input.TextArea,
+  NumberPicker,
+  Select,
+  Switch,
+  DatePicker,
+  DateRangePicker: DatePicker.RangePicker,
+  YearPicker: DatePicker.YearPicker,
+  MonthPicker: DatePicker.MonthPicker,
+  WeekPicker: DatePicker.WeekPicker,
+  TimePicker,
+  Upload,
+  Range,
+  Rating,
+  Transfer
+}
 
 export const SchemaPreview: React.FC<ISchemaPreviewProps> = ({ schema }) => {
-  return <SchemaForm schema={schema}></SchemaForm>
+  return <SchemaForm schema={schema} labelCol={5} wrapperCol={14} components={components}></SchemaForm>
 }
 
 SchemaPreview.displayName = 'SchemaPreview';