feat(json-schema): add silent static method

alibaba · Jun 2, 2021 · f1277ba · f1277ba
1 parent d8af530
commit f1277ba
Show file tree

Hide file tree

Showing 13 changed files with 199 additions and 116 deletions.
diff --git a/designable/antd/package.json b/designable/antd/package.json
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@umijs/plugin-sass": "^1.1.1",
     "dumi": "^1.1.0-rc.8",
-    "@designable/core": "^0.1.2"
+    "@designable/core": "^0.1.4"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 || >=17.0.0",
@@ -40,7 +40,7 @@
     "react": ">=16.8.0 || >=17.0.0",
     "react-dom": ">=16.8.0",
     "react-is": ">=16.8.0 || >=17.0.0",
-    "@designable/core": "^0.1.2"
+    "@designable/core": "^0.1.4"
   },
   "dependencies": {},
   "publishConfig": {

diff --git a/designable/designer/package.json b/designable/designer/package.json
@@ -40,9 +40,9 @@
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.1",
-    "@designable/core": "^0.1.2",
-    "@designable/react": "^0.1.2",
-    "@designable/react-settings-form": "^0.1.2",
+    "@designable/core": "^0.1.4",
+    "@designable/react": "^0.1.4",
+    "@designable/react-settings-form": "^0.1.4",
     "antd": "^4.0.0"
   },
   "peerDependencies": {
@@ -52,9 +52,9 @@
     "react": ">=16.8.0 || >=17.0.0",
     "react-dom": ">=16.8.0",
     "react-is": ">=16.8.0 || >=17.0.0",
-    "@designable/core": "^0.1.2",
-    "@designable/react": "^0.1.2",
-    "@designable/react-settings-form": "^0.1.2"
+    "@designable/core": "^0.1.4",
+    "@designable/react": "^0.1.4",
+    "@designable/react-settings-form": "^0.1.4"
   },
   "dependencies": {},
   "publishConfig": {

diff --git a/designable/designer/playground/main.tsx b/designable/designer/playground/main.tsx
@@ -17,12 +17,20 @@ import {
 } from '@designable/react'
 import { Input, Select, Radio, Checkbox, FormItem } from '@formily/antd'
 import { SettingsForm } from '@designable/react-settings-form'
-import { createDesigner, registry } from '@designable/core'
-import { Space, Button } from 'antd'
+import { createDesigner, registry, TreeNode } from '@designable/core'
+import { Space, Button, Card } from 'antd'
 import { GithubOutlined } from '@ant-design/icons'
 import { SchemaRenderWidget } from '../src'
 import 'antd/dist/antd.less'
 
+const isContainer = (node: TreeNode) => {
+  return (
+    node.props.type === 'void' ||
+    node.props.type === 'array' ||
+    node.props.type === 'object'
+  )
+}
+
 registry.registerDesignerProps({
   Root: {
     title: '表单',
@@ -31,80 +39,85 @@ registry.registerDesignerProps({
       wrapperCol: 12,
     },
   },
-  Field: {
-    draggable: true,
-    propsSchema: {
-      type: 'object',
-      properties: {
-        title: {
-          type: 'string',
-          title: '标题',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        'style.width': {
-          type: 'string',
-          title: '宽度',
-          'x-decorator': 'FormItem',
-          'x-component': 'SizeInput',
-        },
-        'style.height': {
-          type: 'string',
-          title: '高度',
-          'x-decorator': 'FormItem',
-          'x-component': 'SizeInput',
-        },
-        hidden: {
-          type: 'string',
-          title: '是否隐藏',
-          'x-decorator': 'FormItem',
-          'x-component': 'Switch',
-        },
-        default: {
-          title: '默认值',
-          'x-decorator': 'FormItem',
-          'x-component': 'ValueInput',
-        },
-        'style.display': {
-          title: '展示',
-          'x-component': 'DisplayStyleSetter',
-        },
-        'style.background': {
-          title: '背景',
-          'x-component': 'BackgroundStyleSetter',
-        },
-        'style.boxShadow': {
-          title: '阴影',
-          'x-component': 'BoxShadowStyleSetter',
-        },
-        'style.font': {
-          title: '字体',
-          'x-component': 'FontStyleSetter',
-        },
-        'style.margin': {
-          title: '外边距',
-          'x-component': 'BoxStyleSetter',
-        },
-        'style.padding': {
-          title: '内边距',
-          'x-component': 'BoxStyleSetter',
-        },
-        'style.borderRadius': {
-          title: '圆角',
-          'x-component': 'BorderRadiusStyleSetter',
-        },
-        'style.border': {
-          title: '边框',
-          'x-component': 'BorderStyleSetter',
+  SchemaNode: (node) => {
+    return {
+      title: isContainer(node) ? '容器' : '节点',
+      draggable: true,
+      droppable: true,
+      allowAppend: isContainer,
+      propsSchema: {
+        type: 'object',
+        properties: {
+          title: {
+            type: 'string',
+            title: '标题',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+          },
+          'style.width': {
+            type: 'string',
+            title: '宽度',
+            'x-decorator': 'FormItem',
+            'x-component': 'SizeInput',
+          },
+          'style.height': {
+            type: 'string',
+            title: '高度',
+            'x-decorator': 'FormItem',
+            'x-component': 'SizeInput',
+          },
+          hidden: {
+            type: 'string',
+            title: '是否隐藏',
+            'x-decorator': 'FormItem',
+            'x-component': 'Switch',
+          },
+          default: {
+            title: '默认值',
+            'x-decorator': 'FormItem',
+            'x-component': 'ValueInput',
+          },
+          'style.display': {
+            title: '展示',
+            'x-component': 'DisplayStyleSetter',
+          },
+          'style.background': {
+            title: '背景',
+            'x-component': 'BackgroundStyleSetter',
+          },
+          'style.boxShadow': {
+            title: '阴影',
+            'x-component': 'BoxShadowStyleSetter',
+          },
+          'style.font': {
+            title: '字体',
+            'x-component': 'FontStyleSetter',
+          },
+          'style.margin': {
+            title: '外边距',
+            'x-component': 'BoxStyleSetter',
+          },
+          'style.padding': {
+            title: '内边距',
+            'x-component': 'BoxStyleSetter',
+          },
+          'style.borderRadius': {
+            title: '圆角',
+            'x-component': 'BorderRadiusStyleSetter',
+          },
+          'style.border': {
+            title: '边框',
+            'x-component': 'BorderStyleSetter',
+          },
         },
       },
-    },
+    }
   },
 })
 
 registry.registerSourcesByGroup('inputs', [
   {
-    componentName: 'Field',
+    componentName: 'SchemaNode',
     props: {
       title: '输入框',
       type: 'string',
@@ -113,7 +126,7 @@ registry.registerSourcesByGroup('inputs', [
     },
   },
   {
-    componentName: 'Field',
+    componentName: 'SchemaNode',
     props: {
       title: '下拉框',
       type: 'string',
@@ -122,21 +135,43 @@ registry.registerSourcesByGroup('inputs', [
     },
   },
   {
-    componentName: 'Field',
+    componentName: 'SchemaNode',
     props: {
       title: '单选框',
       type: 'string',
       'x-decorator': 'FormItem',
       'x-component': 'Radio.Group',
+      enum: [
+        { label: '选项1', value: 1 },
+        { label: '选项2', value: 2 },
+      ],
     },
   },
   {
-    componentName: 'Field',
+    componentName: 'SchemaNode',
     props: {
-      title: '单选框',
+      title: '复选框',
       type: 'string',
       'x-decorator': 'FormItem',
       'x-component': 'Checkbox.Group',
+      enum: [
+        { label: '选项1', value: 1 },
+        { label: '选项2', value: 2 },
+      ],
+    },
+  },
+])
+
+registry.registerSourcesByGroup('layouts', [
+  {
+    componentName: 'SchemaNode',
+    props: {
+      title: '卡片',
+      type: 'void',
+      'x-component': 'Card',
+      'x-component-props': {
+        title: '卡片',
+      },
     },
   },
 ])
@@ -228,6 +263,11 @@ const App = () => {
                       Select,
                       Radio,
                       Checkbox,
+                      Card: (props) => (
+                        <div {...props}>
+                          <Card {...props} />
+                        </div>
+                      ),
                     }}
                   />
                 </Viewport>

diff --git a/designable/designer/src/widgets/SchemaRenderWidget/SchemaNode.tsx b/designable/designer/src/widgets/SchemaRenderWidget/SchemaNode.tsx
@@ -15,6 +15,8 @@ export interface ISchemaNodeProps {
   node: TreeNode
 }
 
+Schema.silent()
+
 export const SchemaNode: React.FC<ISchemaNodeProps> = observer((props) => {
   const context = useContext(SchemaRenderContext)
   const designer = useDesigner()
@@ -23,14 +25,14 @@ export const SchemaNode: React.FC<ISchemaNodeProps> = observer((props) => {
   if (!node) return null
 
   const getFieldProps = () => {
-    const base = new Schema(node.props)
+    const base = new Schema(node.props).compile()
     const props = base.toFieldProps({
       components: context.components,
     })
     if (props.decorator?.[0]) {
       props.decorator[1] = props.decorator[1] || {}
       FormPath.setIn(props.decorator[1], designer.props.nodeIdAttrName, node.id)
-    } else if (props.component?.[1]) {
+    } else if (props.component?.[0]) {
       props.component[1] = props.component[1] || {}
       FormPath.setIn(props.component[1], designer.props.nodeIdAttrName, node.id)
     }
@@ -50,20 +52,20 @@ export const SchemaNode: React.FC<ISchemaNodeProps> = observer((props) => {
     const props = getFieldProps()
     if (node.props.type === 'object') {
       return (
-        <ObjectField {...props} name={props.name || node.id}>
+        <ObjectField {...props} name={node.id}>
           {renderChildren()}
         </ObjectField>
       )
     } else if (node.props.type === 'array') {
-      return <ArrayField {...props} name={props.name || node.id} />
+      return <ArrayField {...props} name={node.id} />
     } else if (node.props.type === 'void') {
       return (
-        <VoidField {...props} name={props.name || node.id}>
+        <VoidField {...props} name={node.id}>
           {renderChildren()}
         </VoidField>
       )
     }
-    return <Field {...props} name={props.name || node.id} />
+    return <Field {...props} name={node.id} />
   }
   return (
     <TreeNodeContext.Provider value={node}>

diff --git a/designable/designer/src/widgets/SchemaRenderWidget/index.tsx b/designable/designer/src/widgets/SchemaRenderWidget/index.tsx
@@ -26,7 +26,12 @@ export const SchemaRenderWidget: React.FC<ISchemaRenderWidgetProps> = observer(
     )
     if (!tree?.children?.length) return null
     return (
-      <Form {...tree.props} className={prefix} form={form}>
+      <Form
+        {...tree.props}
+        feedbackLayout="terse"
+        className={prefix}
+        form={form}
+      >
         <SchemaRenderContext.Provider value={props}>
           {tree.children.map((node) => {
             return <SchemaNode node={node} key={node.id} />

diff --git a/designable/designer/src/widgets/SchemaRenderWidget/styles.less b/designable/designer/src/widgets/SchemaRenderWidget/styles.less
@@ -1,7 +1,6 @@
 @import '~antd/lib/style/themes/default.less';
 
 .dn-schema-render {
-  padding: 20px 0;
   .@{ant-prefix}-input,
   .@{ant-prefix}-input-affix-wrapper,
   .@{ant-prefix}-select {

diff --git a/designable/next/package.json b/designable/next/package.json
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@umijs/plugin-sass": "^1.1.1",
     "dumi": "^1.1.0-rc.8",
-    "@designable/core": "^0.1.2"
+    "@designable/core": "^0.1.4"
   },
   "peerDependencies": {
     "@alifd/next": "^1.19.0",
@@ -40,7 +40,7 @@
     "react": ">=16.8.0 || >=17.0.0",
     "react-dom": ">=16.8.0",
     "react-is": ">=16.8.0 || >=17.0.0",
-    "@designable/core": "^0.1.2"
+    "@designable/core": "^0.1.4"
   },
   "dependencies": {},
   "publishConfig": {

diff --git a/packages/core/src/models/Form.ts b/packages/core/src/models/Form.ts
@@ -125,7 +125,6 @@ export class Form<ValueType extends object = any> {
   }
 
   protected makeObservable() {
-    if (this.props.controlled) return
     define(this, {
       fields: observable.shallow,
       initialized: observable.ref,