feat(designable): support componentsIcon/componentsSourceIcon

alibaba · Aug 20, 2021 · 5255e0d · 5255e0d
1 parent a8e7a1f
commit 5255e0d
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 0 deletions.
diff --git a/designable/antd/src/components/DesignableField/index.tsx b/designable/antd/src/components/DesignableField/index.tsx
@@ -264,6 +264,8 @@ export const createDesignableField = (
           : '')
       return {
         title: nodeTitle,
+        sourceIcon: realOptions.componentsSourceIcon?.[componentName],
+        icon: realOptions.componentsIcon?.[componentName],
         draggable: true,
         droppable: isObjectNode || isArrayNode || isVoidNode,
         selfRenderChildren:

diff --git a/designable/antd/src/components/DesignableField/types.ts b/designable/antd/src/components/DesignableField/types.ts
@@ -1,8 +1,11 @@
+import React from 'react'
 import { ISchema } from '@formily/react'
 import { ComponentNameMatcher } from '../../shared'
 export interface IDesignableFieldFactoryProps {
   registryName: string
   components?: Record<string, React.JSXElementConstructor<unknown>>
+  componentsIcon?: Record<string, React.ReactNode>
+  componentsSourceIcon?: Record<string, React.ReactNode>
   componentsPropsSchema?: Record<string, ISchema>
   dropFormItemComponents?: ComponentNameMatcher[]
   dropReactionComponents?: ComponentNameMatcher[]

diff --git a/designable/next/src/components/DesignableField/index.tsx b/designable/next/src/components/DesignableField/index.tsx
@@ -263,6 +263,8 @@ export const createDesignableField = (
           : '')
       return {
         title: nodeTitle,
+        sourceIcon: realOptions.componentsSourceIcon[componentName],
+        icon: realOptions.componentsIcon[componentName],
         draggable: true,
         droppable: isObjectNode || isArrayNode || isVoidNode,
         selfRenderChildren:

diff --git a/designable/next/src/components/DesignableField/types.ts b/designable/next/src/components/DesignableField/types.ts
@@ -3,6 +3,8 @@ import { ComponentNameMatcher } from '../../shared'
 export interface IDesignableFieldFactoryProps {
   registryName: string
   components?: Record<string, React.JSXElementConstructor<unknown>>
+  componentsIcon?: Record<string, React.ReactNode>
+  componentsSourceIcon?: Record<string, React.ReactNode>
   componentsPropsSchema?: Record<string, ISchema>
   dropFormItemComponents?: ComponentNameMatcher[]
   dropReactionComponents?: ComponentNameMatcher[]

diff --git a/docs/guide/form-builder.md b/docs/guide/form-builder.md
@@ -205,6 +205,8 @@ interface IDesignableFieldFactoryProps {
   registryName: string //Required, registered name, componentName that identifies DesignableField in the component tree
   components?: Record<string, React.JSXElementConstructor<unknown>> //Custom canvas components, used to pass in x-component/x-decorator
   componentsPropsSchema?: Record<string, ISchema> //Custom canvas component property schema configuration
+  componentsIcon?: Record<string, React.ReactNode> //Custom canvas component's icon
+  componentsSourceIcon?: Record<string, React.ReactNode> //Custom canvas component's drag source icon
   dropFormItemComponents?: ComponentNameMatcher[] //Identify which components do not need to support FormItem
   dropReactionComponents?: ComponentNameMatcher[] //Identify which components do not need to support responder configuration
   selfRenderChildrenComponents?: ComponentNameMatcher[] //Identify which canvas components are rendered by the component itself, and currently internal components such as ArrayTable/FormTab are identified by default

diff --git a/docs/guide/form-builder.zh-CN.md b/docs/guide/form-builder.zh-CN.md
@@ -205,6 +205,8 @@ interface IDesignableFieldFactoryProps {
   registryName: string //必填项，注册名称，标识DesignableField在组件树中的componentName
   components?: Record<string, React.JSXElementConstructor<unknown>> //自定义画布组件，用于传入x-component/x-decorator
   componentsPropsSchema?: Record<string, ISchema> //自定义画布组件属性schema配置
+  componentsIcon?: Record<string, React.ReactNode> //组件Icon
+  componentsSourceIcon?: Record<string, React.ReactNode> //组件拖拽源Icon
   dropFormItemComponents?: ComponentNameMatcher[] //标识哪些组件不需要支持FormItem
   dropReactionComponents?: ComponentNameMatcher[] //标识哪些组件不需要支持响应器配置
   selfRenderChildrenComponents?: ComponentNameMatcher[] //标识哪些画布组件是由组件自身渲染子树，目前内部ArrayTable/FormTab这类组件是默认标识了