chore(react): improve theme styles

alibaba · Oct 4, 2021 · 51a0fde · 51a0fde
1 parent 10092b1
commit 51a0fde
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 34 deletions.
diff --git a/formily/antd/src/components/FormGrid/preview.tsx b/formily/antd/src/components/FormGrid/preview.tsx
@@ -55,17 +55,15 @@ export const FormGrid: DnFC<React.ComponentProps<formilyGrid>> & {
 
 FormGrid.GridColumn = observer((props) => {
   return (
-    <DroppableWidget>
-      <div
-        {...props}
-        data-span={props.gridSpan}
-        style={{
-          ...props['style'],
-          gridColumnStart: `span ${props.gridSpan || 1}`,
-        }}
-      >
-        {props.children}
-      </div>
+    <DroppableWidget
+      {...props}
+      data-span={props.gridSpan}
+      style={{
+        ...props['style'],
+        gridColumnStart: `span ${props.gridSpan || 1}`,
+      }}
+    >
+      {props.children}
     </DroppableWidget>
   )
 })

diff --git a/formily/next/src/components/FormGrid/preview.tsx b/formily/next/src/components/FormGrid/preview.tsx
@@ -55,17 +55,15 @@ export const FormGrid: DnFC<React.ComponentProps<formilyGrid>> & {
 
 FormGrid.GridColumn = observer((props) => {
   return (
-    <DroppableWidget>
-      <div
-        {...props}
-        data-span={props.gridSpan}
-        style={{
-          ...props['style'],
-          gridColumnStart: `span ${props.gridSpan || 1}`,
-        }}
-      >
-        {props.children}
-      </div>
+    <DroppableWidget
+      {...props}
+      data-span={props.gridSpan}
+      style={{
+        ...props['style'],
+        gridColumnStart: `span ${props.gridSpan || 1}`,
+      }}
+    >
+      {props.children}
     </DroppableWidget>
   )
 })

diff --git a/packages/react/src/widgets/DroppableWidget/index.tsx b/packages/react/src/widgets/DroppableWidget/index.tsx
@@ -3,29 +3,42 @@ import { TreeNode } from '@designable/core'
 import { observer } from '@formily/reactive-react'
 import { useTreeNode, useNodeIdProps } from '../../hooks'
 import { NodeTitleWidget } from '../NodeTitleWidget'
-import cls from 'classnames'
+import {
+  NodeActionsWidget,
+  INodeActionsWidgetActionProps,
+} from '../NodeActionsWidget'
 import './styles.less'
 
 export interface IDroppableWidgetProps {
   node?: TreeNode
+  actions?: INodeActionsWidgetActionProps[]
   height?: number
   style?: React.CSSProperties
   className?: string
 }
 
 export const DroppableWidget: React.FC<IDroppableWidgetProps> = observer(
-  (props) => {
+  ({ node, actions, height, style, className, ...props }) => {
     const currentNode = useTreeNode()
-    const nodeId = useNodeIdProps(props.node)
-    const target = props.node ?? currentNode
+    const nodeId = useNodeIdProps(node)
+    const target = node ?? currentNode
     const hasChildren = target.children?.length > 0
     return (
-      <div
-        {...nodeId}
-        style={{ ...props.style, minHeight: props.height }}
-        className={cls(hasChildren ? '' : 'dn-droppable', props.className)}
-      >
-        {hasChildren ? props.children : <NodeTitleWidget node={target} />}
+      <div {...nodeId} className={className} style={style}>
+        {hasChildren ? (
+          props.children
+        ) : (
+          <div style={{ height }} className="dn-droppable-placeholder">
+            <NodeTitleWidget node={target} />
+          </div>
+        )}
+        {actions?.length ? (
+          <NodeActionsWidget>
+            {actions.map((action, key) => (
+              <NodeActionsWidget.Action {...action} key={key} />
+            ))}
+          </NodeActionsWidget>
+        ) : null}
       </div>
     )
   }

diff --git a/packages/react/src/widgets/DroppableWidget/styles.less b/packages/react/src/widgets/DroppableWidget/styles.less
@@ -1,8 +1,7 @@
-.dn-droppable {
+.dn-droppable-placeholder {
   min-height: 60px;
   background-color: var(--dn-droppable-bg-color);
   border: 1px dashed var(--dn-droppable-border-color);
-  margin: 2px 0;
   display: flex;
   align-items: center;
   justify-content: center;