refactor(antd/next): improve docs and support x-component/x-decorator…

… ReactComponent style

.umirc.js

@@ -323,7 +323,7 @@ export default {
         title: '场景案例',
         children: [
           {
-            title: '登陆注册',
+            title: '登录注册',
             path: '/zh-CN/guide/scenes/login-register',
           },
           {

designable/antd/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@formily/designable-antd",
   "version": "2.0.0-beta.51",
+  "private": true,
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -40,7 +41,7 @@
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.1",
-    "@designable/react-settings-form": "^0.1.21"
+    "@designable/react-settings-form": "^0.1.27"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 || >=17.0.0",
@@ -51,11 +52,11 @@
     "react-is": ">=16.8.0 || >=17.0.0"
   },
   "dependencies": {
-    "@formily/core": "2.0.0-beta.62",
-    "@formily/react": "2.0.0-beta.62",
-    "@formily/antd": "2.0.0-beta.62",
-    "@designable/core": "^0.1.21",
-    "@designable/react": "^0.1.21"
+    "@formily/core": "2.0.0-beta.63",
+    "@formily/react": "2.0.0-beta.63",
+    "@formily/antd": "2.0.0-beta.63",
+    "@designable/core": "^0.1.27",
+    "@designable/react": "^0.1.27"
   },
   "publishConfig": {
     "access": "public"

designable/antd/playground/main.tsx

@@ -21,7 +21,6 @@ import { createDesigner } from '@designable/core'
 import { Space, Button } from 'antd'
 import { GithubOutlined } from '@ant-design/icons'
 import { createDesignableField, createDesignableForm } from '../src'
-import './sources'
 import 'antd/dist/antd.less'
 
 const DesignableForm = createDesignableForm({

designable/antd/rollup.config.js

@@ -1,9 +1,24 @@
 import baseConfig, {
   removeImportStyleFromInputFilePlugin,
 } from '../../scripts/rollup.base.js'
+import postcss from 'rollup-plugin-postcss'
+import NpmImport from 'less-plugin-npm-import'
 
 export default baseConfig(
   'formily.designable.antd',
   'Formily.Designable.Antd',
-  removeImportStyleFromInputFilePlugin()
+  removeImportStyleFromInputFilePlugin(),
+  postcss({
+    extract: true,
+    minimize: true,
+    // extensions: ['.css', '.less', '.sass'],
+    use: {
+      less: {
+        plugins: [new NpmImport({ prefix: '~' })],
+        javascriptEnabled: true,
+      },
+      sass: {},
+      stylus: {},
+    },
+  })
 )

designable/antd/src/components/DesignableField/index.tsx

@@ -37,8 +37,14 @@ import {
 import * as defaultSchema from '../../schemas'
 import { Card, Slider, Rate } from 'antd'
 import { createFormContainer } from '../FormContainer'
+import { FormItemSwitcher } from '../FormItemSwitcher'
 
 Schema.silent()
+Schema.skipObservable(false)
+
+const transformPath = (path = '') => {
+  return String(path).replace(/\./g, '_o_')
+}
 
 export interface IDesignableFieldProps {
   name?: string
@@ -66,7 +72,7 @@ export const createDesignableField = (options: IDesignableFieldProps = {}) => {
       Radio,
       Reset,
       Select,
-      Space,
+      Space: createFormContainer(Space, true),
       Submit,
       TimePicker,
       Transfer,
@@ -81,7 +87,6 @@ export const createDesignableField = (options: IDesignableFieldProps = {}) => {
   const DesignableField: React.FC<ISchema> = observer((props) => {
     const designer = useDesigner()
     const node = useTreeNode()
-
     if (!node) return null
 
     const getFieldProps = () => {
@@ -128,12 +133,12 @@ export const createDesignableField = (options: IDesignableFieldProps = {}) => {
   })
 
   const createFieldSchema = (node: TreeNode): ISchema => {
+    const decorator = transformPath(node.props['x-decorator'])
+    const component = transformPath(node.props['x-component'])
     const decoratorSchema =
-      realOptions.propsSchemas?.[node.props['x-decorator']] ||
-      defaultSchema[node.props['x-decorator']]
+      realOptions.propsSchemas?.[decorator] || defaultSchema[decorator]
     const componentSchema =
-      realOptions.propsSchemas?.[node.props['x-component']] ||
-      defaultSchema[node.props['x-component']]
+      realOptions.propsSchemas?.[component] || defaultSchema[component]
     const TabSchema = (key: string, schema: ISchema) => {
       return {
         type: 'object',
@@ -177,27 +182,51 @@ export const createDesignableField = (options: IDesignableFieldProps = {}) => {
     const base = {
       type: 'object',
       properties: {
+        name: {
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Input',
+          'x-index': 0,
+        },
+        title: {
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Input',
+          'x-index': 1,
+        },
+        description: {
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Input.TextArea',
+          'x-index': 2,
+        },
+        'x-decorator': {
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': FormItemSwitcher,
+          'x-index': 3,
+        },
         'x-validator': {
           'x-component': 'ValidatorSetter',
-          'x-index': 5,
+          'x-index': 7,
         },
         'x-reactions': {
           'x-component': 'ReactionsSetter',
-          'x-index': 6,
+          'x-index': 8,
         },
         'x-display': {
           type: 'string',
           enum: ['visible', 'hidden', 'none'],
           'x-decorator': 'FormItem',
           'x-component': 'Select',
-          'x-index': 7,
+          'x-index': 9,
         },
         'x-pattern': {
           type: 'string',
           enum: ['editable', 'disabled', 'readOnly', 'readPretty'],
           'x-decorator': 'FormItem',
           'x-component': 'Select',
-          'x-index': 8,
+          'x-index': 10,
         },
         'x-component-props':
           componentSchema && TabSchema('x-component-props', componentSchema),
@@ -211,33 +240,21 @@ export const createDesignableField = (options: IDesignableFieldProps = {}) => {
         ...base,
         properties: {
           ...base.properties,
-          title: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Input',
-            'x-index': 0,
-          },
-          description: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Input.TextArea',
-            'x-index': 1,
-          },
           default: {
             'x-decorator': 'FormItem',
             'x-component': 'ValueInput',
-            'x-index': 2,
+            'x-index': 4,
           },
           enum: {
             type: 'array',
             'x-component': 'DataSourceSetter',
-            'x-index': 3,
+            'x-index': 5,
           },
           required: {
             type: 'boolean',
             'x-decorator': 'FormItem',
             'x-component': 'Switch',
-            'x-index': 4,
+            'x-index': 6,
           },
         },
       }

designable/antd/src/components/DesignableForm/index.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { IDesignerProps, GlobalRegistry } from '@designable/core'
-import { createForm, onFieldUnmount } from '@formily/core'
+import { createForm } from '@formily/core'
 import { Form } from '@formily/antd'
 import { usePrefix } from '@designable/react'
 import { Form as FormPropsSchema } from '../../schemas'
@@ -34,11 +34,6 @@ export const createDesignableForm = (options: IDesignableFormProps = {}) => {
       () =>
         createForm({
           designable: true,
-          effects(form) {
-            onFieldUnmount('*', (field) => {
-              delete form.fields[field.address.toString()]
-            })
-          },
         }),
       []
     )

designable/antd/src/components/DesignableForm/styles.less

@@ -2,8 +2,17 @@
 
 .dn-designable-form {
   .@{ant-prefix}-input,
+  .@{ant-prefix}-input-number,
   .@{ant-prefix}-input-affix-wrapper,
-  .@{ant-prefix}-select {
+  .@{ant-prefix}-cascader-picker,
+  .@{ant-prefix}-picker-input,
+  .@{ant-prefix}-picker,
+  .@{ant-prefix}-cascader-picker-label,
+  .@{ant-prefix}-select,
+  .@{ant-prefix}-select-selector {
     pointer-events: none !important;
+    input {
+      pointer-events: none !important;
+    }
   }
 }

designable/antd/src/components/FormContainer/index.tsx

@@ -5,18 +5,41 @@ import { Empty } from 'antd'
 import cls from 'classnames'
 import './styles.less'
 
+const groupProps = (props: any) => {
+  const keys = Object.keys(props || {})
+  const dataKeys = keys.filter((key) => key.indexOf('data-') > -1)
+  const otherKeys = keys.filter((key) => key.indexOf('data-') === -1)
+  const dataProps = dataKeys.reduce((buf, key) => {
+    buf[key] = props[key]
+    return buf
+  }, {})
+  const otherProps = otherKeys.reduce((buf, key) => {
+    buf[key] = props[key]
+    return buf
+  }, {})
+  return {
+    dataProps,
+    otherProps,
+  }
+}
+
 export const createFormContainer = (
   Target: React.JSXElementConstructor<any>,
   inlineLayout = false
 ) => {
   const Component = (props: any) => {
     const prefix = usePrefix('form-container')
+    const { dataProps, otherProps } = groupProps(props)
     if (props.children) {
-      return <Target {...props}>{props.children}</Target>
+      return (
+        <div {...dataProps} className={prefix + '-wrapper'}>
+          <Target {...otherProps}>{props.children}</Target>
+        </div>
+      )
     }
     return (
       <Empty
-        {...props}
+        {...dataProps}
         className={cls(prefix, props.className)}
         description={GlobalRegistry.getDesignerMessage('droppable')}
       />