feat(react): support normalize DroppableWidget

alibaba · Sep 28, 2021 · 729410a · 729410a
1 parent 04b2ec3
commit 729410a
Show file tree

Hide file tree

Showing 27 changed files with 132 additions and 154 deletions.
diff --git a/formily/antd/src/common/Container/index.tsx b/formily/antd/src/common/Container/index.tsx
@@ -1,24 +1,18 @@
 import React from 'react'
 import { observer } from '@formily/reactive-react'
-import { useNodeIdProps, useTreeNode, useDesigner } from '@designable/react'
-import { Droppable } from '../Droppable'
+import { DroppableWidget } from '@designable/react'
 import './styles.less'
 
 export const Container: React.FC = observer((props) => {
-  const node = useTreeNode()
-  const nodeId = useNodeIdProps()
-  if (node.children.length === 0) return <Droppable {...nodeId} />
-  return <div {...nodeId}>{props.children}</div>
+  return <DroppableWidget>{props.children}</DroppableWidget>
 })
 
 export const withContainer = (Target: React.JSXElementConstructor<any>) => {
-  return ({ ...props }: any) => {
-    const designer = useDesigner()
-    delete props[designer.props.nodeIdAttrName]
+  return (props: any) => {
     return (
-      <Container>
+      <DroppableWidget>
         <Target {...props} />
-      </Container>
+      </DroppableWidget>
     )
   }
 }
diff --git a/formily/antd/src/common/Droppable/index.tsx b/formily/antd/src/common/Droppable/index.tsx
diff --git a/formily/antd/src/common/Droppable/styles.less b/formily/antd/src/common/Droppable/styles.less
diff --git a/formily/antd/src/common/LoadTemplate/styles.less b/formily/antd/src/common/LoadTemplate/styles.less
@@ -6,8 +6,8 @@
   justify-content: center;
   width: 100%;
   overflow: hidden;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
   &-actions {
     position: relative;
     padding: 0 20px;
@@ -18,7 +18,7 @@
       height: 0;
       width: 300%;
       top: 50%;
-      border-bottom: 2px dashed @border-color-split;
+      border-bottom: 1px dashed @border-color-split;
       right: 100%;
     }
     &::after {
@@ -28,7 +28,7 @@
       height: 0;
       width: 300%;
       top: 50%;
-      border-bottom: 2px dashed @border-color-split;
+      border-bottom: 1px dashed @border-color-split;
       left: 100%;
     }
   }

diff --git a/formily/antd/src/components/ArrayCards/preview.tsx b/formily/antd/src/components/ArrayCards/preview.tsx
@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react'
 import { Card, CardProps } from 'antd'
-import { Droppable } from '../../common/Droppable'
 import { TreeNode, createResource } from '@designable/core'
 import {
   useTreeNode,
   TreeNodeWidget,
+  DroppableWidget,
   useNodeIdProps,
   DnFC,
 } from '@designable/react'
@@ -84,7 +84,7 @@ export const ArrayCards: DnFC<CardProps> = observer((props) => {
     return [objectNode, additionNode]
   })
   const renderCard = () => {
-    if (node.children.length === 0) return <Droppable />
+    if (node.children.length === 0) return <DroppableWidget />
     const additions = queryNodesByComponentPath(node, [
       'ArrayCards',
       'ArrayCards.Addition',
@@ -135,7 +135,7 @@ export const ArrayCards: DnFC<CardProps> = observer((props) => {
                   <TreeNodeWidget key={node.id} node={node} />
                 ))
               ) : (
-                <Droppable />
+                <DroppableWidget />
               )}
             </div>
           </Card>

diff --git a/formily/antd/src/components/ArrayCards/styles.less b/formily/antd/src/components/ArrayCards/styles.less
@@ -1,5 +1,5 @@
 @import '~antd/lib/style/themes/default.less';
 
 .dn-array-cards {
-  background-color: @background-color-light;
+  background-color: @component-background;
 }
diff --git a/formily/antd/src/components/ArrayTable/preview.tsx b/formily/antd/src/components/ArrayTable/preview.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Table, TableProps } from 'antd'
-import { Droppable } from '../../common/Droppable'
 import { TreeNode, createBehavior, createResource } from '@designable/core'
 import {
   useTreeNode,
   TreeNodeWidget,
+  DroppableWidget,
   useNodeIdProps,
   DnFC,
 } from '@designable/react'
@@ -170,7 +170,7 @@ export const ArrayTable: DnFC<TableProps<any>> = observer((props) => {
   }
 
   const renderTable = () => {
-    if (node.children.length === 0) return <Droppable />
+    if (node.children.length === 0) return <DroppableWidget />
     return (
       <ArrayBase disabled>
         <Table
@@ -219,7 +219,7 @@ export const ArrayTable: DnFC<TableProps<any>> = observer((props) => {
             )
           })}
           {columns.length === 0 && (
-            <Table.Column render={() => <Droppable />} />
+            <Table.Column render={() => <DroppableWidget />} />
           )}
         </Table>
         {additions.map((child) => {

diff --git a/formily/antd/src/components/ArrayTable/styles.less b/formily/antd/src/components/ArrayTable/styles.less
@@ -1,5 +1,5 @@
 @import '~antd/lib/style/themes/default.less';
 
 .dn-array-table {
-  background-color: @background-color-light;
+  background-color: @component-background;
 }
diff --git a/formily/antd/src/components/FormCollapse/preview.tsx b/formily/antd/src/components/FormCollapse/preview.tsx
@@ -6,11 +6,11 @@ import { TreeNode, createBehavior, createResource } from '@designable/core'
 import {
   useTreeNode,
   useNodeIdProps,
+  DroppableWidget,
   TreeNodeWidget,
   DnFC,
 } from '@designable/react'
 import { toArr } from '@formily/shared'
-import { Droppable } from '../../common/Droppable'
 import { LoadTemplate } from '../../common/LoadTemplate'
 import { useDropTemplate } from '../../hooks'
 import { createVoidFieldSchema } from '../Field'
@@ -72,7 +72,7 @@ export const FormCollapse: DnFC<CollapseProps> & {
   }
   const panels = parseCollapse(node)
   const renderCollapse = () => {
-    if (!node.children?.length) return <Droppable {...props} />
+    if (!node.children?.length) return <DroppableWidget />
     return (
       <Collapse {...props} activeKey={getCorrectActiveKey(activeKey, panels)}>
         {panels.map((panel) => {
@@ -102,7 +102,7 @@ export const FormCollapse: DnFC<CollapseProps> & {
                 panel.children.length ? (
                   <TreeNodeWidget node={panel} />
                 ) : (
-                  <Droppable />
+                  <DroppableWidget />
                 )
               )}
             </Collapse.Panel>

diff --git a/formily/antd/src/components/FormGrid/preview.tsx b/formily/antd/src/components/FormGrid/preview.tsx
@@ -1,14 +1,17 @@
 import React from 'react'
 import { FormGrid as FormilyGird } from '@formily/antd'
 import { TreeNode, createBehavior, createResource } from '@designable/core'
-import { DnFC, useTreeNode, useNodeIdProps } from '@designable/react'
+import {
+  DnFC,
+  useTreeNode,
+  useNodeIdProps,
+  DroppableWidget,
+} from '@designable/react'
 import { observer } from '@formily/reactive-react'
-import { Droppable } from '../../common/Droppable'
 import { LoadTemplate } from '../../common/LoadTemplate'
 import { createFieldSchema } from '../Field'
 import { AllSchemas } from '../../schemas'
 import { AllLocales } from '../../locales'
-import cls from 'classnames'
 import './styles.less'
 
 type formilyGrid = typeof FormilyGird
@@ -18,7 +21,7 @@ export const FormGrid: DnFC<React.ComponentProps<formilyGrid>> & {
 } = observer((props) => {
   const node = useTreeNode()
   const nodeId = useNodeIdProps()
-  if (node.children.length === 0) return <Droppable {...props} />
+  if (node.children.length === 0) return <DroppableWidget {...props} />
   const totalColumns = node.children.reduce(
     (buf, child) => buf + (child.props?.['x-component-props']?.gridSpan ?? 1),
     0
@@ -51,19 +54,18 @@ export const FormGrid: DnFC<React.ComponentProps<formilyGrid>> & {
 
 FormGrid.GridColumn = observer((props) => {
   return (
-    <div
-      {...props}
-      className={cls(props['className'], {
-        'dn-grid-column': !props.children,
-      })}
-      data-span={props.gridSpan}
-      style={{
-        ...props['style'],
-        gridColumnStart: `span ${props.gridSpan || 1}`,
-      }}
-    >
-      {props.children}
-    </div>
+    <DroppableWidget>
+      <div
+        {...props}
+        data-span={props.gridSpan}
+        style={{
+          ...props['style'],
+          gridColumnStart: `span ${props.gridSpan || 1}`,
+        }}
+      >
+        {props.children}
+      </div>
+    </DroppableWidget>
   )
 })
 

diff --git a/formily/antd/src/components/FormTab/preview.tsx b/formily/antd/src/components/FormTab/preview.tsx
@@ -7,9 +7,9 @@ import {
   useNodeIdProps,
   useTreeNode,
   TreeNodeWidget,
+  DroppableWidget,
   DnFC,
 } from '@designable/react'
-import { Droppable } from '../../common/Droppable'
 import { LoadTemplate } from '../../common/LoadTemplate'
 import { useDropTemplate } from '../../hooks'
 import { createVoidFieldSchema } from '../Field'
@@ -56,7 +56,7 @@ export const FormTab: DnFC<TabsProps> & {
   })
   const tabs = parseTabs(node)
   const renderTabs = () => {
-    if (!node.children?.length) return <Droppable />
+    if (!node.children?.length) return <DroppableWidget />
     return (
       <Tabs
         {...props}
@@ -92,7 +92,7 @@ export const FormTab: DnFC<TabsProps> & {
                 tab.children.length ? (
                   <TreeNodeWidget node={tab} />
                 ) : (
-                  <Droppable />
+                  <DroppableWidget node={tab} />
                 )
               )}
             </Tabs.TabPane>

diff --git a/formily/next/src/common/Container/index.tsx b/formily/next/src/common/Container/index.tsx
@@ -1,25 +1,21 @@
 import React from 'react'
 import { observer } from '@formily/reactive-react'
-import { useNodeIdProps, useTreeNode, useDesigner } from '@designable/react'
-import { Droppable } from '../Droppable'
+import { useNodeIdProps, useTreeNode, DroppableWidget } from '@designable/react'
 import './styles.less'
 
 export const Container: React.FC = observer((props) => {
   const node = useTreeNode()
   const nodeId = useNodeIdProps()
-  if (node.children.length === 0) return <Droppable {...nodeId} />
+  if (node.children.length === 0) return <DroppableWidget {...nodeId} />
   return <div {...nodeId}>{props.children}</div>
 })
 
 export const withContainer = (Target: React.JSXElementConstructor<any>) => {
-  return ({ ...props }: any) => {
-    const designer = useDesigner()
-    // 原始 props 可能被冻结了，delete 会报错
-    delete props[designer.props.nodeIdAttrName]
+  return (props: any) => {
     return (
-      <Container>
+      <DroppableWidget>
         <Target {...props} />
-      </Container>
+      </DroppableWidget>
     )
   }
 }
diff --git a/formily/next/src/common/Droppable/index.tsx b/formily/next/src/common/Droppable/index.tsx
diff --git a/formily/next/src/common/Droppable/styles.less b/formily/next/src/common/Droppable/styles.less
diff --git a/formily/next/src/components/ArrayCards/preview.tsx b/formily/next/src/components/ArrayCards/preview.tsx
@@ -1,11 +1,11 @@
 import React, { Fragment } from 'react'
 import { Card } from '@alifd/next'
 import { CardProps } from '@alifd/next/types/card'
-import { Droppable } from '../../common/Droppable'
 import { TreeNode, createResource } from '@designable/core'
 import {
   useTreeNode,
   TreeNodeWidget,
+  DroppableWidget,
   useNodeIdProps,
   DnFC,
 } from '@designable/react'
@@ -85,7 +85,7 @@ export const ArrayCards: DnFC<CardProps> = observer((props) => {
     return [objectNode, additionNode]
   })
   const renderCard = () => {
-    if (node.children.length === 0) return <Droppable />
+    if (node.children.length === 0) return <DroppableWidget />
     const additions = queryNodesByComponentPath(node, [
       'ArrayCards',
       'ArrayCards.Addition',
@@ -137,7 +137,7 @@ export const ArrayCards: DnFC<CardProps> = observer((props) => {
                   <TreeNodeWidget key={node.id} node={node} />
                 ))
               ) : (
-                <Droppable />
+                <DroppableWidget />
               )}
             </div>
           </Card>

diff --git a/formily/next/src/components/ArrayCards/styles.less b/formily/next/src/components/ArrayCards/styles.less
@@ -1,5 +1,5 @@
 @import '~antd/lib/style/themes/default.less';
 
 .dn-array-cards {
-  background-color: @background-color-light;
+  background-color: @component-background;
 }