chore(Drag and drop): Updated example for multi list to use flex (#10692

) * chore(Drag and drop): Updated example for multilist to use flex so that target list will maintain size when empty * remove null check
patternfly · Jul 16, 2024 · ae4d6f3 · ae4d6f3
1 parent 7d2ad5c
commit ae4d6f3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/react-core/src/components/DragDrop/Draggable.tsx b/packages/react-core/src/components/DragDrop/Draggable.tsx
@@ -117,7 +117,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       index
     };
     const dest =
-      hoveringDroppableId !== null && hoveringIndex !== null
+      hoveringDroppableId !== null
         ? {
             droppableId: hoveringDroppableId,
             index: hoveringIndex

diff --git a/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx b/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
+import { DragDrop, Draggable, Droppable, Flex } from '@patternfly/react-core';
 
 interface ItemType {
   id: string;
@@ -85,19 +85,19 @@ export const DragDropMultipleLists: React.FunctionComponent = () => {
 
   return (
     <DragDrop onDrop={onDrop}>
-      <Split hasGutter>
+      <Flex alignItems={{ default: 'alignItemsStretch' }} flexWrap={{ default: 'nowrap' }}>
         {Object.entries(items).map(([key, subitems]) => (
-          <SplitItem key={key} style={{ flex: 1 }}>
-            <Droppable zone="multizone" droppableId={key}>
+          <Flex key={key} fullWidth={{ default: 'fullWidth' }} alignItems={{ default: 'alignItemsStretch' }}>
+            <Droppable zone="multizone" droppableId={key} style={{ flexGrow: '1' }}>
               {(subitems as ItemType[]).map(({ id, content }) => (
                 <Draggable key={id} style={{ padding: '8px' }}>
                   {content}
                 </Draggable>
               ))}
             </Droppable>
-          </SplitItem>
+          </Flex>
         ))}
-      </Split>
+      </Flex>
     </DragDrop>
   );
 };