formily自定义组件步骤

  1. connect 桥接组件，antd 组件和 formily的桥接
  2. 定义桥接组件的 Resource� 配置，例如 Tree.Resource
    1. template：组件模板
    2. 物料的 json schema
  3. 定义桥接组件的 Behavior� 属性描述，例如 Tree.Behavior

https://github.com/alibaba/designable/discussions/136
https://zhuanlan.zhihu.com/p/431263711
https://www.yuque.com/aspirantzhang/antdprov5/iwibfb

Formily框架中，调用组件时，会自动注入几个属性

  • value
  • onChange对 Form实例对象上的对应 name表单项的 value进行修改
  • dataSource，比如在Select中，就是通过JSON描述的Enum值
  • onBlur，JSON中的default字段改
  • onFocus

渲染时

场景：用于渲染成 jsx时，只用于 JsonSchema解析时
x-component 对应的组件字符串

编辑时

编辑器交互显示

  • Behavior：组件行为的描述
  • Resource：组件资源的描述
  • template：组件预设模板

    Resource

    designable 提供了两个对象来负责不同的功能模块
  1. Resource：配置组件库的小部件 weigets展示
    1. 职责就是用于代码的生成。在生成代码阶段
    2. 设计器中所有涉及到节点修改的地方，其实都是针对 TreeNode 这个虚拟节点树对象进行操作
    3. 在 designable 底层它会被转换为 Formily Schema
  2. Behavior：配置预览组件在 Canvas 中的操作配置
    1. 比如是否可拖拽、可删除、可复制等功能
    2. 用于定义组件的所有可交互的接口，例如控制与限制拖拽生成阶段的容器与层级关系，比如限定某个组件只能拖拽到固定的视图节点

weigets

disignable组件四种展形态
1. 小部件 widget
2. 预览态 Preview
3. 渲染态 RenderComponent
4. 只读态 Readonly

Behavior

以 Rate组件为例拆分组件
从 components目录下，找一个简单的组件为例，来了解 designable组件的组成
image.png

  1. import React from 'react'
  2. import { Rate as AntdRate } from 'antd'
  3. import { createBehavior, createResource } from '@designable/core'
  4. import { DnFC } from '@designable/react'
  5. import { createFieldSchema } from '../Field'
  6. import { AllSchemas } from '../../schemas'
  7. import { AllLocales } from '../../locales'
  9. export const Rate: DnFC<React.ComponentProps<typeof AntdRate>> = AntdRate
  11. Rate.Behavior = createBehavior({
  12.   name: 'Rate',
  13.   extends: ['Field'],
  14.   // @ts-ignore
  15.   selector: (node) => node.props['x-component'] === 'Rate',
  16.   designerProps: {
  17.     propsSchema: createFieldSchema(AllSchemas.Rate),
  18.   },
  19.   designerLocales: AllLocales.Rate,
  20. })
  22. Rate.Resource = createResource({
  23.   // 展示的图标
  24.   icon: 'RateSource',
  25.   // 预定义的模板，就是拖拽到画布上显示的属性
  26.   elements: [
  27.     {
  28.       componentName: 'Field',
  29.       props: {
  30.         type: 'number',
  31.         title: 'Rate',
  32.         'x-decorator': 'FormItem',
  33.         'x-component': 'Rate',
  34.       },
  35.     },
  36.   ],
  37. })

icon

createResource下的 icon来源
designable/packages/react/src/icons

  • 支持 svg标签
  • 支持 *.png文件 路径引入的
    1. icon: 'RateSource'
    2. icon: <svg></svg>
    3. icon: 'https://img.alicdn.com/imgextra/i1/O1CN01jnfLpK1rFJ4nPj9Pt_!!6000000005601-55-tps-56-56.svg'
    图片 icon样式 image.png
    1. .dn-resource-item-icon {
    2. width: 56px;
    3.   height: 40px;
    4. display: flex;
    5. justify-content: center;
    6. align-items: center;
    7. }

自定义 icon

designzble 自定义 icon参考 designable/packages/react/src/containers/Designer.tsx

  1. import { Engine, GlobalRegistry } from '@designable/core'
  2. import * as icons from '../icons'
  4. GlobalRegistry.registerDesignerIcons(icons)

Select 远程数据

Select组件增加一个远程数据源，实现思路

  1. 自己封装一个带请求的 Select
  2. 选择 Select组件，选择
    1. 响应器规则 - 配置响应器
    2. image.png
    3. 选择动作响应，右侧一个 Async Select
    4. 直接在这里写请求逻辑

image.png

formily自定义 Tree组件

桥接 formily

https://www.yuque.com/xjchenhao/development/dhv90n
https://blog.csdn.net/tianxintiandisheng/article/details/124858824

自定义组件的 Resource & Behavior

image.png

  1. import React from 'react'
  2. import { Tree as AntdTree } from 'antd'
  3. import { TreeProps } from 'antd/lib/tree'
  4. import { connect, mapReadPretty, mapProps, ReactFC } from '@formily/react'
  5. import { PreviewText } from '@formily/antd/lib/preview-text'
  6. import { createBehavior, createResource } from '@designable/core'
  7. import { DnFC } from '@designable/react'
  8. import { LoadingOutlined } from '@ant-design/icons'
  10. import { createFieldSchema } from '../Field'
  11. import { AllSchemas } from '../../schemas'
  12. import { AllLocales } from '../../locales'
  14. // 1 桥接组件
  15. export const AntTree: ReactFC<TreeProps<any, any>> = connect(
  16.   AntdTree,
  17.   mapProps(
  18.     {
  19.       dataSource: 'treeData',
  20.       loading: true,
  21.     },
  22.     (props: any, field) => {
  23.       return {
  24.         ...props,
  25.         suffixIcon:
  26.           field?.['loading'] || field?.['validating'] ? (
  27.             <LoadingOutlined />
  28.           ) : (
  29.             props.suffixIcon
  30.           ),
  31.       }
  32.     }
  33.   ),
  34.   mapReadPretty(PreviewText.Tree)
  35. )
  37. export const Tree: DnFC<React.ComponentProps<typeof AntdTree>> = AntTree
  39. // 行为
  40. // @ts-ignore
  41. Tree.Behavior = createBehavior({
  42.   name: 'Tree',
  43.   extends: ['Field'],
  44.   selector: (node) => {
  45.     // @ts-ignore
  46.     return node.props['x-component'] === 'Tree'
  47.   },
  48.   designerProps: {
  49.     // 组件默认属性配置
  50.     propsSchema: createFieldSchema(AllSchemas.Tree),
  51.   },
  52.   designerLocales: AllLocales.Tree,
  53. })
  55. // 资源
  56. // @ts-ignore
  57. Tree.Resource = createResource({
  58.   icon: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/tree-1.jpg',
  59.   elements: [
  60.     {
  61.       componentName: 'Field',
  62.       props: {
  63.         type: 'string',
  64.         title: 'Tree',
  65.         // 'x-decorator': 'FormItem',
  66.         'x-component': 'Tree',
  67.       },
  68.     },
  69.   ],
  70.   title: 'Tree组件',
  71.   // description?: string | IDesignerMiniLocales
  72.   // thumb?: string
  73.   // span?: number
  74.   // elements?: ITreeNode[]
  75. })