Feature/schema preview (#694)

alibaba · Mar 13, 2020 · 0081f87 · 0081f87
1 parent ffdfdc2
commit 0081f87
Show file tree

Hide file tree

Showing 14 changed files with 275 additions and 107 deletions.
diff --git a/package.json b/package.json
@@ -156,5 +156,8 @@
   "collective": {
     "type": "opencollective",
     "url": "https://opencollective.com/formily"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.0.2"
   }
 }
diff --git a/packages/antd-components/README.zh-cn.md b/packages/antd-components/README.zh-cn.md
@@ -1948,7 +1948,7 @@ const App = () => (
         maxItems={3}
         type="array"
         x-component="ArrayCards"
-        x-props={{
+        x-component-props={{
           title: '这是卡片标题',
           renderAddition: '这是定制的添加文案',
           renderRemove: '这是定制的删除文案'
@@ -1975,7 +1975,7 @@ const App = () => (
             maxItems={3}
             type="array"
             x-component="ArrayCards"
-            x-props={{ title: '这是卡片标题' }}
+            x-component-props={{ title: '这是卡片标题' }}
           >
             <Field type="object">
               <FormLayout labelCol={6} wrapperCol={8}>
@@ -2040,7 +2040,7 @@ const App = () => (
           maxItems={3}
           type="array"
           x-component="ArrayTable"
-          x-props={{
+          x-component-props={{
             renderExtraOperations() {
               return <div>Hello worldasdasdasdasd</div>
             },
@@ -2427,7 +2427,7 @@ const App = () => {
                 default={10}
                 required
                 name="aa1"
-                x-props={{ style: { width: 80 } }}
+                x-component-props={{ style: { width: 80 } }}
                 description="desc1"
               />
               <Field

diff --git a/packages/antd/src/types.ts b/packages/antd/src/types.ts
@@ -67,12 +67,14 @@ export type IFormItemTopProps = React.PropsWithChildren<
   }
 >
 
-export interface ISchemaFieldAdaptorProps
-  extends Omit<ItemProps, 'labelCol' | 'wrapperCol'>,
-    Partial<ISchemaFieldComponentProps> {
-  labelCol?: number | { span: number; offset?: number }
-  wrapperCol?: number | { span: number; offset?: number }
-}
+export type ISchemaFieldAdaptorProps = Omit<
+  ItemProps,
+  'labelCol' | 'wrapperCol'
+> &
+  Partial<ISchemaFieldComponentProps> & {
+    labelCol?: number | { span: number; offset?: number }
+    wrapperCol?: number | { span: number; offset?: number }
+  }
 
 export type StyledCP<P extends {}> = StyledComponent<
   (props: React.PropsWithChildren<P>) => React.ReactElement,

diff --git a/packages/next-components/README.zh-cn.md b/packages/next-components/README.zh-cn.md
@@ -1938,7 +1938,7 @@ const App = () => (
         maxItems={3}
         type="array"
         x-component="ArrayCards"
-        x-props={{
+        x-component-props={{
           title: '这是卡片标题',
           renderAddition: '这是定制的添加文案',
           renderRemove: '这是定制的删除文案'
@@ -1965,7 +1965,7 @@ const App = () => (
             maxItems={3}
             type="array"
             x-component="ArrayCards"
-            x-props={{ title: '这是卡片标题' }}
+            x-component-props={{ title: '这是卡片标题' }}
           >
             <Field type="object">
               <FormLayout labelCol={6} wrapperCol={8}>
@@ -2030,7 +2030,7 @@ const App = () => (
           maxItems={3}
           type="array"
           x-component="ArrayTable"
-          x-props={{
+          x-component-props={{
             renderExtraOperations() {
               return <div>Hello worldasdasdasdasd</div>
             },
@@ -2416,7 +2416,7 @@ const App = () => {
                 default={10}
                 required
                 name="aa1"
-                x-props={{ style: { width: 80 } }}
+                x-component-props={{ style: { width: 80 } }}
                 description="desc1"
               />
               <Field

diff --git a/packages/next/src/types.ts b/packages/next/src/types.ts
@@ -73,12 +73,14 @@ export type IFormItemTopProps = React.PropsWithChildren<
   }
 >
 
-export interface ISchemaFieldAdaptorProps
-  extends Omit<ItemProps, 'labelCol' | 'wrapperCol'>,
-    Partial<ISchemaFieldComponentProps> {
-  labelCol?: number | { span: number; offset?: number }
-  wrapperCol?: number | { span: number; offset?: number }
-}
+export type ISchemaFieldAdaptorProps = Omit<
+  ItemProps,
+  'labelCol' | 'wrapperCol'
+> &
+  Partial<ISchemaFieldComponentProps> & {
+    labelCol?: number | { span: number; offset?: number }
+    wrapperCol?: number | { span: number; offset?: number }
+  }
 
 export type StyledCP<P extends {}> = StyledComponent<
   (props: React.PropsWithChildren<P>) => React.ReactElement,

diff --git a/packages/react-schema-editor/README.md b/packages/react-schema-editor/README.md
@@ -14,51 +14,169 @@ 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'))"
-        }
+  "type": "object",
+  "properties": {
+    "string": {
+      "type": "string",
+      "x-component": "Input",
+      "title": "String"
+    },
+    "radio": {
+      "type": "string",
+      "x-component": "Radio",
+      "x-component-props": {
+        "options":[
+          "1",
+          "2",
+          "3",
+          "4"
+        ] 
       },
-      "password": {
-        "title": "密码",
-        "type": "string",
-        "x-component": "Input",
-        "x-component-props": {
-          "htmlType": "password",
-          "placeholder": "请输入密码"
-        }
+      "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",
+      "x-component-props" : {
+        options :['Apple', 'Pear', 'Orange']
       },
-      "agreement": {
-        "title": "同意",
-        "type": "string",
-        "x-component": "Checkbox",
-        "x-component-props": {
-          "disabled": "{{!this.field.getValue('username')}}",
-          "defaultChecked": true
-        }
-      }
+      "title": "Checkbox"
+    },
+    "textarea": {
+      "type": "string",
+      "x-component": "Textarea",
+      "title": "TextArea"
+    },
+    "number": {
+      "type": "number",
+      "x-component": "InputNumber",
+      "title": "数字选择"
+    },
+    "boolean": {
+      "type": "boolean",
+      "x-component": "Switch",
+      "title": "开关选择"
+    },
+    "date": {
+      "type": "string",
+      "x-component": "DatePicker",
+      "title": "日期选择"
+    },
+    "daterange": {
+      "type": "object",
+      "x-component": "DateRangePicker",
+      "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",
+      "x-component-props": {
+        fileList:[
+          {
+            uid: '-1',
+            name: 'image.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+          {
+            uid: '-2',
+            name: 'image.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+          {
+            uid: '-3',
+            name: 'image.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+          {
+            uid: '-4',
+            name: 'image.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+          {
+            uid: '-5',
+            name: 'image.png',
+            status: 'error',
+          },
+        ],
+        action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",
+        listType:"picture-card"
+      },
+      "title": "卡片上传文件"
+    },
+    "range": {
+      "type": "number",
+      "x-component": "Range",
+      "title": "范围选择"
+    },
+    "transfer": {
+      "type": "number",
+      "x-component": "Transfer",
+      "x-component-props": {
+        "dataSource":[{
+          "key": "1",
+          "title": "选项1"
+        },{
+          "key": "2",
+          "title": "选项2"
+        }]
+      },
+      "title": "穿梭框"
+    },
+    "rating": {
+      "type": "number",
+      "x-component": "Rate",
+      "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)
+````
diff --git a/packages/react-schema-editor/package.json b/packages/react-schema-editor/package.json
@@ -16,16 +16,18 @@
   },
   "types": "lib/index.d.ts",
   "scripts": {
-    "build": "tsc --declaration"
+    "build": "npm run build-css && tsc --declaration",
+    "build-css": "node-sass src/ -o lib/"
   },
   "dependencies": {
-    "@formily/react-schema-renderer": "^1.0.5",
+    "@ant-design/compatible": "^0.0.1-rc.1",
+    "@formily/antd": "^1.0.5",
+    "antd": "^4.0",
     "lodash": "^4.17.15"
   },
   "devDependencies": {
-    "antd": "^3.x",
     "node-sass": "^4.13.0",
-    "typescript": "^3.5.2"
+    "typescript": "^3.6.2"
   },
   "peerDependencies": {
     "@types/json-schema": "^7.0.3",