首页  思维导图  详情

formily代码结构

2021-08-24 22:34:30   18  举报





AI智能生成

formily代码结构

学习笔记

代码

作者其他创作

大纲/内容

左侧导航栏：CompositePanel.DragSourceWidget

拖拽组件：Component

输入控件：inputs

布局控件：Layouts

自增控件：Arrays

展示控件：Displays

大纲树组件：OutlinedTree

历史记录：History

中心工作区：Workspace

顶部操作：ToolbarPanel

操作区域：ViewportPanel.ViewPanel

拖拽面板：type="DESIGNABLE"

json树编辑控件：type="JSONTREE"

代码树：type="MARKUP"

表单预览：type="PREVIEW" PreviewWidget

配置面板：SettingsPanel.SettingsForm

const node = useCurrentNode(currentWorkspaceId)
配置项：node?.designerProps?.propsSchema
配置项数据：node?.props
渲染配置面板

PreviewWidget：核心表单渲染

const form = useMemo(() => createForm(), [])

const { form: formProps, schema } = transformToSchema(props.tree, {
    designableFormName: 'Root',
    designableFieldName: 'DesignableField',
  })

@formily/core

@designable/formily

transformToSchema

@designable/react

useDesigner
const designer = useDesigner()

@formily/antd

// 适配其拖拽组件
export const A: ComposedA = connect(
antdA as A,
mapProps()
)

const SchemaField = createSchemaField({
components: {
...
},
})

designable/antd/src/schemas

designable/antd/src/sources

保存/提交
ActionsWidget.tsx

获取提交结果：
const submit = async (designer: Engine) => {
    const fr = formRef.formRef.current.getForm();
    await fr.validate('dk822gxacmz');
    console.log(fr.values)
  };

获取表单配置：
const config = transformToSchema(designer.getCurrentTree(), {
        designableFieldName: 'DesignableField',
        designableFormName: 'Root',
      })

初始化

designer.setCurrentTree(
      transformToTreeNode(formilySchema), {
        designableFieldName: 'DesignableField',
        designableFormName: 'Root',
      })
    )

新增组件步骤

配置数组新增
designable/antd/src/sources
{
    componentName: 'DesignableField',
    props: {
      title: 'MtdInput',
      type: 'string',
      'x-decorator': 'FormItem',
      'x-component': 'MtdInput',
    },
},

描述语言配置
designable/antd/src/locales/zh-CN.ts：
MtdInput: { title: 'mtd输入框', TextArea: 'mtd多行文本' }

配置面板
designable/antd/src/schemas

拖拽面板注册
designable/antd/src/components/DesignableField/options.ts：
import { MtdInput } from '@formily/antd'
const SchemaField = createSchemaField({
components: { MtdInput }
})

表单注册
designable/antd/playground/widgets/PreviewWidget.tsx：
import { MtdInput } from '@formily/antd'
const SchemaField = createSchemaField({
components: { MtdInput }
})