> = observer(
- (props) => {
- const node = useTreeNode()
- const nodeId = useNodeIdProps()
- const designer = useDropTemplate('ArrayTable', (source) => {
- const sortHandleNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Column',
- 'x-component-props': {
- title: `Title`,
- },
- },
- children: [
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.SortHandle',
- },
- },
- ],
- })
- const indexNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Column',
- 'x-component-props': {
- title: `Title`,
- },
- },
- children: [
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Index',
- },
- },
- ],
- })
- const columnNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Column',
- 'x-component-props': {
- title: `Title`,
- },
- },
- children: source.map((node) => {
- node.props.title = undefined
- return node
- }),
- })
-
- const operationNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Column',
- 'x-component-props': {
- title: `Title`,
- },
- },
- children: [
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Remove',
- },
- },
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.MoveDown',
- },
- },
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.MoveUp',
- },
- },
- ],
- })
- const objectNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'object',
- },
- children: [sortHandleNode, indexNode, columnNode, operationNode],
- })
- const additionNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- title: 'Addition',
- 'x-component': 'ArrayTable.Addition',
- },
- })
- return [objectNode, additionNode]
- })
- const columns = queryNodesByComponentPath(node, [
- 'ArrayTable',
- '*',
- 'ArrayTable.Column',
- ])
- const additions = queryNodesByComponentPath(node, [
- 'ArrayTable',
- 'ArrayTable.Addition',
- ])
- const defaultRowKey = () => {
- return node.id
- }
- const createColumnId = (props: any) => {
- return createNodeId(
- designer,
- props.className.match(/data-id\:([^\s]+)/)?.[1]
- )
- }
-
- const renderTable = () => {
- if (node.children.length === 0) return
- return (
-
- {
- return (
- |
- {props.children}
- |
- )
- },
- },
- body: {
- cell: (props: any) => {
- return (
-
- {props.children}
- |
- )
- },
- },
- }}
- >
- {columns.map((node, key) => {
- const children = node.children.map((child) => {
- return
- })
- return (
- {
- return (
-
- {children.length > 0 ? children : 'Droppable'}
-
- )
- }}
- />
- )
- })}
- {columns.length === 0 && (
- } />
- )}
-
- {additions.map((child) => {
- return
- })}
-
- )
- }
-
- useDropTemplate('ArrayTable.Column', (source) => {
- return source.map((node) => {
- node.props.title = undefined
- return node
- })
- })
-
- return (
-
- {renderTable()}
- {
- if (
- hasNodeByComponentPath(node, [
- 'ArrayTable',
- '*',
- 'ArrayTable.Column',
- 'ArrayTable.SortHandle',
- ])
- )
- return
- const tableColumn = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Column',
- 'x-component-props': {
- title: `Title`,
- },
- },
- children: [
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.SortHandle',
- },
- },
- ],
- })
- ensureObjectItemsNode(node).prepend(tableColumn)
- },
- },
- {
- title: 'Common.addIndex',
- onClick: () => {
- if (
- hasNodeByComponentPath(node, [
- 'ArrayTable',
- '*',
- 'ArrayTable.Column',
- 'ArrayTable.Index',
- ])
- )
- return
- const tableColumn = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Column',
- 'x-component-props': {
- title: `Title`,
- },
- },
- children: [
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Index',
- },
- },
- ],
- })
- const sortNode = findNodeByComponentPath(node, [
- 'ArrayTable',
- '*',
- 'ArrayTable.Column',
- 'ArrayTable.SortHandle',
- ])
- if (sortNode) {
- sortNode.parent.insertAfter(tableColumn)
- } else {
- ensureObjectItemsNode(node).prepend(tableColumn)
- }
- },
- },
- {
- title: 'Common.addTableColumn',
- onClick: () => {
- const operationNode = findNodeByComponentPath(node, [
- 'ArrayTable',
- '*',
- 'ArrayTable.Column',
- (name) => {
- return (
- name === 'ArrayTable.Remove' ||
- name === 'ArrayTable.MoveDown' ||
- name === 'ArrayTable.MoveUp'
- )
- },
- ])
- const tableColumn = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Column',
- 'x-component-props': {
- title: `Title`,
- },
- },
- })
- if (operationNode) {
- operationNode.parent.insertBefore(tableColumn)
- } else {
- ensureObjectItemsNode(node).append(tableColumn)
- }
- },
- },
- {
- title: 'Common.addOperation',
- onClick: () => {
- const oldOperationNode = findNodeByComponentPath(node, [
- 'ArrayTable',
- '*',
- 'ArrayTable.Column',
- (name) => {
- return (
- name === 'ArrayTable.Remove' ||
- name === 'ArrayTable.MoveDown' ||
- name === 'ArrayTable.MoveUp'
- )
- },
- ])
- const oldAdditionNode = findNodeByComponentPath(node, [
- 'ArrayTable',
- 'ArrayTable.Addition',
- ])
- if (!oldOperationNode) {
- const operationNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Column',
- 'x-component-props': {
- title: `Title`,
- },
- },
- children: [
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.Remove',
- },
- },
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.MoveDown',
- },
- },
- {
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'ArrayTable.MoveUp',
- },
- },
- ],
- })
- ensureObjectItemsNode(node).append(operationNode)
- }
- if (!oldAdditionNode) {
- const additionNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- title: 'Addition',
- 'x-component': 'ArrayTable.Addition',
- },
- })
- ensureObjectItemsNode(node).insertAfter(additionNode)
- }
- },
- },
- ]}
- />
-
- )
- }
-)
-
-ArrayBase.mixin(DesignableArrayTable)
diff --git a/designable/antd/src/components/DesignableArrayTable/styles.less b/designable/antd/src/components/DesignableArrayTable/styles.less
deleted file mode 100644
index a45490e2904..00000000000
--- a/designable/antd/src/components/DesignableArrayTable/styles.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-array-table {
- background-color: @background-color-light;
-}
diff --git a/designable/antd/src/components/DesignableArrayTabs/index.tsx b/designable/antd/src/components/DesignableArrayTabs/index.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/designable/antd/src/components/DesignableContainer/index.tsx b/designable/antd/src/components/DesignableContainer/index.tsx
deleted file mode 100644
index a892319c8c7..00000000000
--- a/designable/antd/src/components/DesignableContainer/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { useNodeIdProps } from '@designable/react'
-import { Droppable } from '../Droppable'
-import './styles.less'
-
-export const createDesignableContainer = (
- Target: React.JSXElementConstructor
-) => {
- return (props: any) => {
- const nodeId = useNodeIdProps()
- if (props.children) {
- return (
-
- {props.children}
-
- )
- }
- return
- }
-}
diff --git a/designable/antd/src/components/DesignableContainer/styles.less b/designable/antd/src/components/DesignableContainer/styles.less
deleted file mode 100644
index e0f5c30388e..00000000000
--- a/designable/antd/src/components/DesignableContainer/styles.less
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-form-container {
- margin: 0 !important;
- padding: 20px;
- border: 1px solid @border-color-split;
-}
diff --git a/designable/antd/src/components/DesignableField/index.tsx b/designable/antd/src/components/DesignableField/index.tsx
deleted file mode 100644
index dd078bee123..00000000000
--- a/designable/antd/src/components/DesignableField/index.tsx
+++ /dev/null
@@ -1,438 +0,0 @@
-import React from 'react'
-import { FormPath } from '@formily/core'
-import { GlobalRegistry, TreeNode } from '@designable/core'
-import { useDesigner, useTreeNode } from '@designable/react'
-import {
- ArrayField,
- Field,
- ObjectField,
- VoidField,
- observer,
- Schema,
- ISchema,
-} from '@formily/react'
-import {
- DataSourceSetter,
- ReactionsSetter,
- ValidatorSetter,
-} from '@formily/designable-setters'
-import { FormTab, FormItem } from '@formily/antd'
-import { isArr, isStr, each, reduce } from '@formily/shared'
-import { FormItemSwitcher } from '../FormItemSwitcher'
-import { DesignableObject } from '../DesignableObject'
-import { createOptions } from './options'
-import { IDesignableFieldFactoryProps } from './types'
-import { includesComponent } from '../../shared'
-import * as defaultSchemas from '../../schemas'
-
-Schema.silent()
-
-const SchemaStateMap = {
- title: 'title',
- description: 'description',
- default: 'value',
- enum: 'dataSource',
- readOnly: 'readOnly',
- writeOnly: 'editable',
- required: 'required',
- 'x-content': 'content',
- 'x-value': 'value',
- 'x-editable': 'editable',
- 'x-disabled': 'disabled',
- 'x-read-pretty': 'readPretty',
- 'x-read-only': 'readOnly',
- 'x-visible': 'visible',
- 'x-hidden': 'hidden',
- 'x-display': 'display',
- 'x-pattern': 'pattern',
-}
-
-const NeedShownExpression = {
- title: true,
- description: true,
- default: true,
- 'x-content': true,
- 'x-value': true,
-}
-
-const isExpression = (val: any) => isStr(val) && /^\{\{.*\}\}$/.test(val)
-
-const filterExpression = (val: any) => {
- if (typeof val === 'object') {
- const isArray = isArr(val)
- const results = reduce(
- val,
- (buf: any, value, key) => {
- if (isExpression(value)) {
- return buf
- } else {
- const results = filterExpression(value)
- if (results === undefined || results === null) return buf
- if (isArray) {
- return buf.concat([results])
- }
- buf[key] = results
- return buf
- }
- },
- isArray ? [] : {}
- )
- return results
- }
- if (isExpression(val)) {
- return
- }
- return val
-}
-
-const toDesignableFieldProps = (
- schema: ISchema,
- components: any,
- nodeIdAttrName: string,
- id: string
-) => {
- const results: any = {}
- each(SchemaStateMap, (fieldKey, schemaKey) => {
- const value = schema[schemaKey]
- if (isExpression(value)) {
- if (!NeedShownExpression[schemaKey]) return
- if (value) {
- results[fieldKey] = value
- return
- }
- } else if (value) {
- results[fieldKey] = filterExpression(value)
- }
- })
- if (!components['FormItem']) {
- components['FormItem'] = FormItem
- }
- const decorator =
- schema['x-decorator'] && FormPath.getIn(components, schema['x-decorator'])
- const component =
- schema['x-component'] && FormPath.getIn(components, schema['x-component'])
- const decoratorProps = schema['x-decorator-props'] || {}
- const componentProps = schema['x-component-props'] || {}
-
- if (decorator) {
- results.decorator = [decorator, { ...decoratorProps }]
- }
- if (component) {
- results.component = [component, { ...componentProps }]
- }
- if (decorator) {
- FormPath.setIn(results['decorator'][1], nodeIdAttrName, id)
- } else if (component) {
- FormPath.setIn(results['component'][1], nodeIdAttrName, id)
- }
- results.title = results.title && (
- {results.title}
- )
- results.description = results.description && (
- {results.description}
- )
- return results
-}
-
-export const createDesignableField = (
- options: IDesignableFieldFactoryProps
-) => {
- const realOptions = createOptions(options)
-
- const tabs = {}
-
- const getFieldPropsSchema = (node: TreeNode): ISchema => {
- const decorator = node.props['x-decorator']
- const component = node.props['x-component']
- const decoratorSchema =
- decorator &&
- (FormPath.getIn(realOptions.componentsPropsSchema, decorator) ||
- FormPath.getIn(defaultSchemas, decorator))
- const componentSchema =
- component &&
- (FormPath.getIn(realOptions.componentsPropsSchema, component) ||
- FormPath.getIn(defaultSchemas, component))
- const TabSchema = (key: string, schema: ISchema) => {
- tabs[key] = tabs[key] || FormTab.createFormTab()
- return {
- type: 'object',
- properties: {
- propsTab: {
- type: 'void',
- 'x-component': 'FormTab',
- 'x-component-props': {
- formTab: tabs[key],
- style: {
- overflow: 'visible',
- },
- },
- properties: {
- propsPane: {
- type: 'void',
- 'x-component': 'FormTab.TabPane',
- 'x-component-props': {
- tab: GlobalRegistry.getDesignerMessage(
- `settings.${key}.tab_property`
- ),
- },
- properties: schema.properties,
- },
- stylePane: {
- type: 'void',
- 'x-component': 'FormTab.TabPane',
- 'x-component-props': {
- tab: GlobalRegistry.getDesignerMessage(
- `settings.${key}.tab_style`
- ),
- },
- properties: {
- style: defaultSchemas.CSSStyle,
- },
- },
- },
- },
- },
- }
- }
- const base = {
- type: 'object',
- properties: {
- name: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- 'x-component-props': {
- defaultValue: node.id,
- },
- '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-display': {
- type: 'string',
- enum: ['visible', 'hidden', 'none', ''],
- 'x-decorator': 'FormItem',
- 'x-component': 'Select',
- 'x-component-props': {
- defaultValue: 'visible',
- },
- 'x-index': 3,
- },
- 'x-pattern': {
- type: 'string',
- enum: ['editable', 'disabled', 'readOnly', 'readPretty', ''],
- 'x-decorator': 'FormItem',
- 'x-component': 'Select',
- 'x-component-props': {
- defaultValue: 'editable',
- },
- 'x-index': 4,
- },
- 'x-component-props':
- componentSchema && TabSchema('x-component-props', componentSchema),
- 'x-decorator-props':
- decoratorSchema && TabSchema('x-decorator-props', decoratorSchema),
- },
- }
-
- if (node.props.type === 'void') {
- if (!includesComponent(node, realOptions.dropReactionComponents)) {
- Object.assign(base.properties, {
- 'x-reactions': {
- 'x-decorator': 'FormItem',
- 'x-index': 5,
- 'x-component': ReactionsSetter,
- },
- })
- }
- if (!includesComponent(node, realOptions.dropFormItemComponents)) {
- Object.assign(base.properties, {
- 'x-decorator': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': FormItemSwitcher,
- 'x-index': 10,
- 'x-reactions': {
- target: '*(title,description)',
- fulfill: {
- state: {
- hidden: '{{$self.value !== "FormItem"}}',
- },
- },
- },
- },
- })
- } else {
- delete base.properties.title
- delete base.properties.description
- }
- } else {
- if (!includesComponent(node, realOptions.dropReactionComponents)) {
- Object.assign(base.properties, {
- 'x-reactions': {
- 'x-decorator': 'FormItem',
- 'x-index': 7,
- 'x-component': ReactionsSetter,
- },
- })
- }
- Object.assign(base.properties, {
- default: {
- 'x-decorator': 'FormItem',
- 'x-component': 'ValueInput',
- 'x-index': 5,
- },
- enum: {
- 'x-decorator': 'FormItem',
- 'x-component': DataSourceSetter,
- 'x-index': 6,
- },
- 'x-validator': {
- type: 'array',
- 'x-component': ValidatorSetter,
- 'x-index': 8,
- },
- required: {
- type: 'boolean',
- 'x-decorator': 'FormItem',
- 'x-component': 'Switch',
- 'x-index': 9,
- },
- })
- }
-
- base['$namespace'] = `namespace.${component}`
-
- return base
- }
-
- const calculateChildrenRestricts = (target: TreeNode, source: TreeNode[]) => {
- const targetComponent = target.props['x-component']
- const restrictChildrenComponents =
- realOptions.restrictChildrenComponents?.[targetComponent]
- if (restrictChildrenComponents?.length) {
- if (
- source.every((node) =>
- includesComponent(node, restrictChildrenComponents, target)
- )
- ) {
- return true
- }
- return false
- }
- return true
- }
-
- const calculateSiblingsRestricts = (target: TreeNode, source: TreeNode[]) => {
- const targetComponent = target.props['x-component']
- const restrictSiblingComponents =
- realOptions.restrictSiblingComponents?.[targetComponent]
- if (restrictSiblingComponents?.length) {
- if (
- source.every((node) =>
- includesComponent(node, restrictSiblingComponents, target)
- )
- ) {
- return true
- }
- return false
- }
- return true
- }
-
- if (!realOptions.registryName) throw new Error('Can not found registryName')
-
- GlobalRegistry.registerDesignerProps({
- [realOptions.registryName]: (node) => {
- const componentName = node.props?.['x-component']
- const message = GlobalRegistry.getDesignerMessage(
- `components.${componentName}`
- )
- const isObjectNode = node.props.type === 'object'
- const isArrayNode = node.props.type === 'array'
- const isVoidNode = node.props.type === 'void'
- const title = typeof message === 'string' ? message : message?.title
- const nodeTitle =
- title ||
- (isObjectNode
- ? GlobalRegistry.getDesignerMessage('components.Object')
- : isVoidNode
- ? GlobalRegistry.getDesignerMessage('components.Void')
- : '')
- const sourceIcon = realOptions.componentsSourceIcon?.[componentName]
- return {
- title: nodeTitle,
- sourceIcon: isObjectNode ? 'ObjectSource' : sourceIcon,
- icon: realOptions.componentsIcon?.[componentName],
- draggable: true,
- droppable: isObjectNode || isArrayNode || isVoidNode,
- selfRenderChildren:
- isArrayNode ||
- includesComponent(node, realOptions.selfRenderChildrenComponents),
- inlineLayout: includesComponent(
- node,
- realOptions.inlineLayoutComponents
- ),
- inlineChildrenLayout: includesComponent(
- node,
- realOptions.inlineChildrenLayoutComponents
- ),
- allowSiblings(target, source) {
- return calculateSiblingsRestricts(target, source)
- },
- allowAppend(target, source) {
- return (
- (target.props.type === 'void' ||
- target.props.type === 'array' ||
- target.props.type === 'object') &&
- calculateChildrenRestricts(target, source)
- )
- },
- propsSchema: getFieldPropsSchema(node),
- }
- },
- })
-
- const DesignableField: React.FC = observer((props) => {
- const designer = useDesigner()
- const node = useTreeNode()
- if (!node) return null
-
- const fieldProps = toDesignableFieldProps(
- props,
- realOptions.components,
- designer.props.nodeIdAttrName,
- node.id
- )
- if (props.type === 'object') {
- return (
-
-
- {props.children}
-
-
- )
- } else if (props.type === 'array') {
- return
- } else if (node.props.type === 'void') {
- return (
-
- {props.children}
-
- )
- }
- return
- })
-
- return DesignableField
-}
diff --git a/designable/antd/src/components/DesignableField/options.ts b/designable/antd/src/components/DesignableField/options.ts
deleted file mode 100644
index 7cbf0ed07c4..00000000000
--- a/designable/antd/src/components/DesignableField/options.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import { IDesignableFieldFactoryProps } from './types'
-import {
- FormItem,
- DatePicker,
- Checkbox,
- Cascader,
- Editable,
- Input,
- NumberPicker,
- Switch,
- Password,
- PreviewText,
- Radio,
- Reset,
- Select,
- Space,
- Submit,
- TimePicker,
- Transfer,
- TreeSelect,
- Upload,
- FormGrid,
- FormLayout,
-} from '@formily/antd'
-import { Card, Slider, Rate } from 'antd'
-import { createDesignableContainer } from '../DesignableContainer'
-import { DesignableFormTab } from '../DesignableFormTab'
-import { DesignableFormCollapse } from '../DesignableFormCollapse'
-import { DesignableArrayTable } from '../DesignableArrayTable'
-import { DesignableArrayCards } from '../DesignableArrayCards'
-import { DesignableText } from '../DesignableText'
-import { TreeNode } from '@designable/core'
-
-const isChildrenComponents =
- (parentName: string, names?: string[]) => (name: string) =>
- Array.isArray(names) && names.length > 0
- ? names.some((key) => {
- return `${parentName}.${key}` === name
- })
- : name.indexOf(`${parentName}.`) > -1
-
-const InlineArrayChildren = [
- 'Column',
- 'Index',
- 'SortHandle',
- 'Remove',
- 'MoveDown',
- 'MoveUp',
-]
-
-const isFormTabChildren = isChildrenComponents('FormTab')
-const isFormCollapseChildren = isChildrenComponents('FormCollapse')
-const isArrayTableInlineChildren = isChildrenComponents(
- 'ArrayTable',
- InlineArrayChildren
-)
-const isArrayCardsInlineChildren = isChildrenComponents(
- 'ArrayCards',
- InlineArrayChildren
-)
-const isObjectNode = (name: string, node: TreeNode) => {
- return node.props['type'] === 'object'
-}
-
-const isNotArrayColumn = (name: string, node: TreeNode) => {
- return node.props['x-component'] !== 'ArrayTable.Column'
-}
-
-const allowDropWithEmpty = (name: string, node: TreeNode, target: TreeNode) => {
- if (target) return target.children.length === 0
- return false
-}
-
-const noChildren = () => false
-
-export const createOptions = (
- options: IDesignableFieldFactoryProps
-): IDesignableFieldFactoryProps => {
- return {
- ...options,
- dropFormItemComponents: [
- ...(options.dropFormItemComponents || []),
- isFormTabChildren,
- isFormCollapseChildren,
- ],
- dropReactionComponents: [
- ...(options.dropReactionComponents || []),
- isFormTabChildren,
- isFormCollapseChildren,
- ],
- selfRenderChildrenComponents: [
- ...(options.selfRenderChildrenComponents || []),
- 'FormTab',
- 'FormCollapse',
- ],
- inlineChildrenLayoutComponents: [
- ...(options.inlineChildrenLayoutComponents || []),
- 'FormItem',
- 'FormGrid',
- 'Space',
- ],
- inlineLayoutComponents: [
- ...(options.inlineLayoutComponents || []),
- isArrayTableInlineChildren,
- isArrayCardsInlineChildren,
- ],
- restrictChildrenComponents: {
- FormTab: [allowDropWithEmpty, 'FormTab.TabPane'],
- FormCollapse: [allowDropWithEmpty, 'FormCollapse.CollapsePanel'],
- ArrayTable: [allowDropWithEmpty, isObjectNode, 'ArrayTable.Addition'],
- 'ArrayTable.Column': [isNotArrayColumn],
- Text: [noChildren],
- },
- restrictSiblingComponents: {
- 'FormTab.TabPane': ['FormTab.TabPane'],
- 'FormCollapse.CollapsePanel': ['FormCollapse.CollapsePanel'],
- 'ArrayTable.Column': ['ArrayTable.Column'],
- },
- componentsSourceIcon: {
- ...options.componentsSourceIcon,
- Space: 'SpaceSource',
- FormGrid: 'GridSource',
- FormTab: 'TabSource',
- FormCollapse: 'CollapseSource',
- ArrayTable: 'ArrayTableSource',
- ArrayCards: 'ArrayCardsSource',
- DatePicker: 'DatePickerSource',
- 'DatePicker.RangePicker': 'DateRangePickerSource',
- 'Checkbox.Group': 'CheckboxGroupSource',
- 'Radio.Group': 'RadioGroupSource',
- Slider: 'SliderSource',
- Rate: 'RateSource',
- TimePicker: 'TimePickerSource',
- 'TimePicker.RangePicker': 'TimeRangePickerSource',
- Cascader: 'CascaderSource',
- TreeSelect: 'TreeSelectSource',
- Select: 'SelectSource',
- 'Input.TextArea': 'TextAreaSource',
- Input: 'InputSource',
- NumberPicker: 'NumberPickerSource',
- Password: 'PasswordSource',
- Transfer: 'TransferSource',
- Switch: 'SwitchSource',
- Upload: 'UploadSource',
- 'Upload.Dragger': 'UploadDraggerSource',
- Card: 'CardSource',
- FormLayout: 'FormLayoutSource',
- Text: 'TextSource',
- Image: 'ImageSource',
- Button: 'ButtonSource',
- Video: 'MediaSource',
- },
- components: {
- ...options.components,
- Space: createDesignableContainer(Space),
- FormGrid: createDesignableContainer(FormGrid),
- FormLayout: createDesignableContainer(FormLayout),
- FormTab: DesignableFormTab,
- FormCollapse: DesignableFormCollapse,
- ArrayTable: DesignableArrayTable,
- ArrayCards: DesignableArrayCards,
- Text: DesignableText,
- FormItem,
- DatePicker,
- Checkbox,
- Cascader,
- Editable,
- Input,
- NumberPicker,
- Switch,
- Password,
- PreviewText,
- Radio,
- Reset,
- Select,
- Submit,
- TimePicker,
- Transfer,
- TreeSelect,
- Upload,
- Card,
- Slider,
- Rate,
- },
- }
-}
diff --git a/designable/antd/src/components/DesignableField/types.ts b/designable/antd/src/components/DesignableField/types.ts
deleted file mode 100644
index abf5d0b9cc0..00000000000
--- a/designable/antd/src/components/DesignableField/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { ISchema } from '@formily/react'
-import { ComponentNameMatcher } from '../../shared'
-export interface IDesignableFieldFactoryProps {
- registryName: string
- components?: Record>
- componentsIcon?: Record
- componentsSourceIcon?: Record
- componentsPropsSchema?: Record
- dropFormItemComponents?: ComponentNameMatcher[]
- dropReactionComponents?: ComponentNameMatcher[]
- selfRenderChildrenComponents?: ComponentNameMatcher[]
- inlineChildrenLayoutComponents?: ComponentNameMatcher[]
- inlineLayoutComponents?: ComponentNameMatcher[]
- restrictChildrenComponents?: Record
- restrictSiblingComponents?: Record
-}
diff --git a/designable/antd/src/components/DesignableForm/index.tsx b/designable/antd/src/components/DesignableForm/index.tsx
deleted file mode 100644
index 9c9fb13d7d4..00000000000
--- a/designable/antd/src/components/DesignableForm/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useMemo } from 'react'
-import { IDesignerProps, GlobalRegistry } from '@designable/core'
-import { createForm } from '@formily/core'
-import { Form, IFormLayoutProps } from '@formily/antd'
-import { observer } from '@formily/react'
-import { usePrefix } from '@designable/react'
-import { Form as FormPropsSchema } from '../../schemas'
-import './styles.less'
-
-export interface IDesignableFormFactoryProps extends IDesignerProps {
- registryName: string
- component?: React.JSXElementConstructor
-}
-
-export const createDesignableForm = (options: IDesignableFormFactoryProps) => {
- const realOptions: IDesignableFormFactoryProps = {
- component: Form,
- droppable: true,
- draggable: false,
- propsSchema: FormPropsSchema,
- ...options,
- defaultProps: {
- labelCol: 6,
- wrapperCol: 12,
- ...options.defaultProps,
- },
- }
-
- const FormComponent = realOptions.component || Form
-
- const DesignableForm: React.FC = observer((props) => {
- const prefix = usePrefix('designable-form')
- const form = useMemo(
- () =>
- createForm({
- designable: true,
- }),
- []
- )
- return (
-
- {props.children}
-
- )
- })
-
- if (!realOptions.registryName) throw new Error('Can not found registryName')
-
- realOptions.title = `components.${realOptions.registryName}`
-
- GlobalRegistry.registerDesignerProps({
- [realOptions.registryName]: realOptions,
- })
-
- return DesignableForm
-}
diff --git a/designable/antd/src/components/DesignableForm/styles.less b/designable/antd/src/components/DesignableForm/styles.less
deleted file mode 100644
index 4aaf7758d29..00000000000
--- a/designable/antd/src/components/DesignableForm/styles.less
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-designable-form {
- .@{ant-prefix}-input,
- .@{ant-prefix}-input-number,
- .@{ant-prefix}-input-affix-wrapper,
- .@{ant-prefix}-cascader-picker,
- .@{ant-prefix}-picker-input,
- .@{ant-prefix}-picker,
- .@{ant-prefix}-cascader-picker-label,
- .@{ant-prefix}-slider,
- .@{ant-prefix}-checkbox,
- .@{ant-prefix}-rate,
- .@{ant-prefix}-switch,
- .@{ant-prefix}-radio,
- .@{ant-prefix}-radio-wrapper,
- .@{ant-prefix}-checkbox-group,
- .@{ant-prefix}-checkbox-wrapper,
- .@{ant-prefix}-radio-group,
- .@{ant-prefix}-upload,
- .@{ant-prefix}-transfer,
- .@{ant-prefix}-select,
- .@{ant-prefix}-select-selector {
- pointer-events: none !important;
-
- input {
- pointer-events: none !important;
- }
- }
-
- .anticon svg {
- pointer-events: none;
- }
-}
diff --git a/designable/antd/src/components/DesignableFormCollapse/index.tsx b/designable/antd/src/components/DesignableFormCollapse/index.tsx
deleted file mode 100644
index 5a271e2bd8d..00000000000
--- a/designable/antd/src/components/DesignableFormCollapse/index.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { Fragment, useState } from 'react'
-import { observer } from '@formily/react'
-import { Collapse } from 'antd'
-import { CollapseProps, CollapsePanelProps } from 'antd/lib/collapse'
-import { useTreeNode, useNodeIdProps, TreeNodeWidget } from '@designable/react'
-import { toArr } from '@formily/shared'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { LoadTemplate } from '../LoadTemplate'
-import { useDropTemplate } from '../../hooks'
-import { matchComponent } from '../../shared'
-
-const parseCollpase = (parent: TreeNode) => {
- const tabs: TreeNode[] = []
- parent.children.forEach((node) => {
- if (matchComponent(node, 'FormCollapse.CollapsePanel')) {
- tabs.push(node)
- }
- })
- return tabs
-}
-
-export const DesignableFormCollapse: React.FC & {
- CollapsePanel?: React.FC
-} = observer((props) => {
- const [activeKey, setActiveKey] = useState([])
- const node = useTreeNode()
- const nodeId = useNodeIdProps()
- const designer = useDropTemplate('FormCollapse', (source) => {
- const panelNode = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'FormCollapse.CollapsePanel',
- 'x-component-props': {
- header: `Unnamed Title`,
- },
- },
- children: source,
- })
-
- setActiveKey(toArr(activeKey).concat(panelNode.id))
- return [panelNode]
- })
- const getCorrectActiveKey = (
- activeKey: string[] | string,
- tabs: TreeNode[]
- ) => {
- if (!tabs.length || !activeKey?.length) {
- if (props.accordion) {
- return tabs[0]?.id
- }
- return tabs.map((item) => item.id)
- }
- if (
- tabs.some((node) =>
- Array.isArray(activeKey)
- ? activeKey.includes(node.id)
- : node.id === activeKey
- )
- )
- return activeKey
- return tabs[tabs.length - 1].id
- }
- const panels = parseCollpase(node)
- const renderCollapse = () => {
- if (!node.children?.length) return
- return (
- {
- setActiveKey(toArr(id))
- }}
- >
- {panels.map((panel) => {
- const props = panel.props['x-component-props'] || {}
- return (
-
- {React.createElement(
- 'div',
- {
- [designer.props.nodeIdAttrName]: panel.id,
- },
- panel.children.length ? (
-
- ) : (
-
- )
- )}
-
- )
- })}
-
- )
- }
- return (
-
- {renderCollapse()}
- {
- const tabPane = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'FormCollapse.CollapsePanel',
- 'x-component-props': {
- header: `Unnamed Title`,
- },
- },
- })
- node.append(tabPane)
- const keys = toArr(activeKey)
- setActiveKey(keys.concat(tabPane.id))
- },
- },
- ]}
- />
-
- )
-})
-
-DesignableFormCollapse.CollapsePanel = (props) => {
- return {props.children}
-}
diff --git a/designable/antd/src/components/DesignableFormTab/index.tsx b/designable/antd/src/components/DesignableFormTab/index.tsx
deleted file mode 100644
index 7bc6a158963..00000000000
--- a/designable/antd/src/components/DesignableFormTab/index.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { Fragment, useState } from 'react'
-import { observer } from '@formily/react'
-import { Tabs } from 'antd'
-import { TabsProps, TabPaneProps } from 'antd/lib/tabs'
-import { useNodeIdProps, useTreeNode, TreeNodeWidget } from '@designable/react'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { LoadTemplate } from '../LoadTemplate'
-import { useDropTemplate } from '../../hooks'
-import { matchComponent } from '../../shared'
-
-const parseTabs = (parent: TreeNode) => {
- const tabs: TreeNode[] = []
- parent.children.forEach((node) => {
- if (matchComponent(node, 'FormTab.TabPane')) {
- tabs.push(node)
- }
- })
- return tabs
-}
-
-const getCorrectActiveKey = (activeKey: string, tabs: TreeNode[]) => {
- if (tabs.length === 0) return
- if (tabs.some((node) => node.id === activeKey)) return activeKey
- return tabs[tabs.length - 1].id
-}
-
-export const DesignableFormTab: React.FC & {
- TabPane?: React.FC
-} = observer((props) => {
- const [activeKey, setActiveKey] = useState()
- const nodeId = useNodeIdProps()
- const node = useTreeNode()
- const designer = useDropTemplate('FormTab', (source) => {
- return [
- new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'FormTab.TabPane',
- 'x-component-props': {
- tab: `Unnamed Title`,
- },
- },
- children: source,
- }),
- ]
- })
- const tabs = parseTabs(node)
- const renderTabs = () => {
- if (!node.children?.length) return
- return (
- {
- setActiveKey(id)
- }}
- >
- {tabs.map((tab) => {
- const props = tab.props['x-component-props'] || {}
- return (
-
- {React.createElement(
- 'div',
- {
- [designer.props.nodeIdAttrName]: tab.id,
- },
- tab.children.length ? (
-
- ) : (
-
- )
- )}
-
- )
- })}
-
- )
- }
- return (
-
- {renderTabs()}
- {
- const tabPane = new TreeNode({
- componentName: 'DesignableField',
- props: {
- type: 'void',
- 'x-component': 'FormTab.TabPane',
- 'x-component-props': {
- tab: `Unnamed Title`,
- },
- },
- })
- node.append(tabPane)
- setActiveKey(tabPane.id)
- },
- },
- ]}
- />
-
- )
-})
-
-DesignableFormTab.TabPane = (props) => {
- return {props.children}
-}
diff --git a/designable/antd/src/components/DesignableObject/index.tsx b/designable/antd/src/components/DesignableObject/index.tsx
deleted file mode 100644
index b894214f3d8..00000000000
--- a/designable/antd/src/components/DesignableObject/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { useNodeIdProps, useTreeNode } from '@designable/react'
-import { Droppable } from '../Droppable'
-
-export const DesignableObject: React.FC = (props) => {
- const node = useTreeNode()
- const nodeId = useNodeIdProps()
- if (node.children.length === 0) return
- return {props.children}
-}
diff --git a/designable/antd/src/components/DesignableText/index.tsx b/designable/antd/src/components/DesignableText/index.tsx
deleted file mode 100644
index 6b08755dbf8..00000000000
--- a/designable/antd/src/components/DesignableText/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { useDesigner } from '@designable/react'
-import cls from 'classnames'
-import './styles.less'
-
-export interface IDesignableTextProps {
- content?: string
- mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
- style?: React.CSSProperties
- className?: string
-}
-
-export const DesignableText: React.FC = (props) => {
- const designer = useDesigner()
- const tagName = props.mode === 'normal' || !props.mode ? 'div' : props.mode
- return React.createElement(
- tagName,
- {
- ...props,
- className: cls(props.className, 'dn-text'),
- [designer.props.contentEditableAttrName]: 'x-component-props.content',
- },
- props.content
- )
-}
diff --git a/designable/antd/src/components/DesignableText/styles.less b/designable/antd/src/components/DesignableText/styles.less
deleted file mode 100644
index a55fac3c947..00000000000
--- a/designable/antd/src/components/DesignableText/styles.less
+++ /dev/null
@@ -1,10 +0,0 @@
-.dn-text {
- &:empty::before {
- content: 'Please Input';
- display: block;
- opacity: 0.6;
- }
- &:focus{
- padding: 4px;
- }
-}
diff --git a/designable/antd/src/components/Droppable/index.tsx b/designable/antd/src/components/Droppable/index.tsx
deleted file mode 100644
index 0802ab99f5e..00000000000
--- a/designable/antd/src/components/Droppable/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { usePrefix, TextWidget } from '@designable/react'
-import { Empty } from 'antd'
-import cls from 'classnames'
-import './styles.less'
-
-export interface IDroppableProps {
- style?: React.CSSProperties
- className?: string
-}
-
-export const Droppable: React.FC = (props: any) => {
- const prefix = usePrefix('droppable')
- return (
- }
- />
- )
-}
diff --git a/designable/antd/src/components/Droppable/styles.less b/designable/antd/src/components/Droppable/styles.less
deleted file mode 100644
index d175c36436a..00000000000
--- a/designable/antd/src/components/Droppable/styles.less
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-droppable {
- margin-left: 0 !important;
- margin-right: 0 !important;
- padding: 20px;
- border: 1px solid @border-color-split;
- color: @text-color;
-}
diff --git a/designable/antd/src/components/FormItemSwitcher/index.tsx b/designable/antd/src/components/FormItemSwitcher/index.tsx
deleted file mode 100644
index 04134856fbd..00000000000
--- a/designable/antd/src/components/FormItemSwitcher/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { Switch } from 'antd'
-
-export interface IFormItemSwitcherProps {
- value?: string
- onChange?: (value: string) => void
-}
-
-export const FormItemSwitcher: React.FC = (props) => {
- return (
- {
- props.onChange(value ? 'FormItem' : undefined)
- }}
- />
- )
-}
diff --git a/designable/antd/src/components/LoadTemplate/index.tsx b/designable/antd/src/components/LoadTemplate/index.tsx
deleted file mode 100644
index 5decd4d1b72..00000000000
--- a/designable/antd/src/components/LoadTemplate/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { Space, Typography, Divider } from 'antd'
-import { usePrefix, TextWidget } from '@designable/react'
-import cls from 'classnames'
-import './styles.less'
-
-export interface ITemplateAction {
- title: React.ReactNode
- tooltip?: React.ReactNode
- icon?: string | React.ReactNode
- onClick: () => void
-}
-
-export interface ILoadTemplateProps {
- className?: string
- style?: React.CSSProperties
- actions?: ITemplateAction[]
-}
-
-export const LoadTemplate: React.FC = (props) => {
- const prefix = usePrefix('load-template')
- return (
-
-
- }>
- {props.actions?.map((action, key) => {
- return (
- {
- e.stopPropagation()
- action?.onClick?.()
- }}
- >
- {action.title}
-
- )
- })}
-
-
-