feat: control empty DropZone height with minEmptyHeight prop

measuredco · Nov 20, 2024 · 342105e · 342105e
1 parent 41294a5
commit 342105e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
@@ -1,4 +1,5 @@
 import {
+  CSSProperties,
   useCallback,
   useContext,
   useEffect,
@@ -39,6 +40,7 @@ function DropZoneEdit({
   disallow,
   style,
   className,
+  minEmptyHeight = 128,
   dragRef,
   collisionAxis,
 }: DropZoneProps) {
@@ -237,7 +239,7 @@ function DropZoneEdit({
         hoveringOverArea,
         isEnabled,
         isAreaSelected,
-        hasChildren: contentWithPreview.length > 0,
+        hasChildren: content.length > 0,
       })}${className ? ` ${className}` : ""}`}
       ref={(node) => {
         ref.current = node;
@@ -246,7 +248,12 @@ function DropZoneEdit({
 
         if (dragRef) dragRef(node);
       }}
-      style={style}
+      style={
+        {
+          ...style,
+          "--min-empty-height": `${minEmptyHeight}px`,
+        } as CSSProperties
+      }
     >
       {isRootZone && DEBUG && (
         <>

diff --git a/packages/core/components/DropZone/styles.module.css b/packages/core/components/DropZone/styles.module.css
@@ -4,7 +4,7 @@
 
   position: relative;
   height: 100%;
-  min-height: 128px;
+  min-height: var(--min-empty-height);
   outline-offset: -2px;
   width: 100%;
 }
@@ -14,7 +14,7 @@
 }
 
 .DropZone:empty {
-  min-height: 128px;
+  min-height: var(--min-empty-height);
 }
 
 .DropZone--hasChildren:not(.DropZone--userIsDragging) {

diff --git a/packages/core/components/DropZone/types.ts b/packages/core/components/DropZone/types.ts
@@ -6,6 +6,7 @@ export type DropZoneProps = {
   allow?: string[];
   disallow?: string[];
   style?: CSSProperties;
+  minEmptyHeight?: number;
   className?: string;
   dragRef?: ((element: Element | null) => void) | null;
   collisionAxis?: DragAxis;