Feature/schema preview

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

@@ -41,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';

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

@@ -1,5 +1,14 @@
 import React from 'react'
-import { Tree, Icon, Menu, Dropdown } from 'antd'
+
+import {
+  DeleteOutlined,
+  DeploymentUnitOutlined,
+  FileOutlined,
+  FolderOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+
+import { Tree, Menu, Dropdown } from 'antd';
 import { ISchemaTreeProps } from '../utils/types'
 import { getFieldTypeData } from '../utils/fieldEditorHelpers';
 import * as fp from 'lodash/fp'
@@ -165,17 +174,17 @@ export const SchemaTree: React.FC<ISchemaTreeProps> = ({
     const disableChildNode = !fieldSchema || fieldSchema.type === 'string'
     return (
       <Menu onClick={handleMenuClick}>
-        <SubMenu key='node' title={<><Icon type='plus'></Icon>添加节点 </>}>
+        <SubMenu key='node' title={<><PlusOutlined></PlusOutlined>添加节点 </>}>
           {getSubMenus()}
         </SubMenu>
-        <SubMenu key='child' title={<><Icon type='plus'></Icon>添加子节点 </>} disabled={disableChildNode}>
+        <SubMenu key='child' title={<><PlusOutlined></PlusOutlined>添加子节点 </>} disabled={disableChildNode}>
           {getSubMenus()}
         </SubMenu>
         <Menu.Item key='delete'>
-          <Icon type='delete'></Icon>删除节点
+          <DeleteOutlined></DeleteOutlined>删除节点
         </Menu.Item>
       </Menu>
-    )
+    );
   }
 
   return (
@@ -214,7 +223,7 @@ const TreeNodeBySchema: React.FC<{
   switch (schema.type) {
     case 'object':
       return (
-        <TreeNode icon={<Icon type="folder" />} {...currentTreeLevelProps}>
+        <TreeNode active icon={<FolderOutlined />} {...currentTreeLevelProps}>
           {schema.properties &&
             Object.keys(schema.properties).map(key =>
               TreeNodeBySchema({
@@ -223,11 +232,12 @@ const TreeNodeBySchema: React.FC<{
               })
             )}
         </TreeNode>
-      )
+      );
     case 'array':
       return (
         <TreeNode
-          icon={<Icon type="deployment-unit" />}
+          active
+          icon={<DeploymentUnitOutlined />}
           {...currentTreeLevelProps}
         >
           {schema.items &&
@@ -236,11 +246,11 @@ const TreeNodeBySchema: React.FC<{
               path: path.concat('items')
             })}
         </TreeNode>
-      )
+      );
     default:
   }
 
-  return <TreeNode icon={<Icon type="file" />} {...currentTreeLevelProps} />
+  return <TreeNode active icon={<FileOutlined />} {...currentTreeLevelProps} />;
 }
 
 function getUniqueKeyFromObjectKeys(key: string, keys: string[], count = -1) {