style fixes

patternfly · Oct 31, 2023 · b684708 · b684708
1 parent 39c759a
commit b684708
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 45 deletions.
diff --git a/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx b/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx
@@ -14,7 +14,11 @@ export interface DragButtonProps extends React.HTMLProps<HTMLButtonElement> {
 }
 
 export const DragButton: React.FunctionComponent<DragButtonProps> = ({ className, ...props }: DragButtonProps) => (
-  <button className={css(className, buttonStyles.button, buttonStyles.modifiers.plain)} aria-label="Drag button" {...props}>
+  <button
+    className={css(className, buttonStyles.button, buttonStyles.modifiers.plain)}
+    aria-label="Drag button"
+    {...props}
+  >
     <span className={css(dragButtonStyles.dataListItemDraggableIcon)}>
       <GripVerticalIcon />
     </span>

diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx
@@ -19,11 +19,9 @@ import {
   verticalListSortingStrategy
 } from '@dnd-kit/sortable';
 import { Draggable } from './Draggable';
-import { DragButton } from './DragButton';
 import { DraggableDataListItem } from './DraggableDataListItem';
 import { DraggableDualListSelectorListItem } from './DraggableDualListSelectorListItem';
 import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
-import flexStyles from '@patternfly/react-styles/css/layouts/Flex/flex';
 
 export type DragDropSortDragEndEvent = DragEndEvent;
 export type DragDropSortDragStartEvent = DragStartEvent;
@@ -65,11 +63,11 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
   ...props
 }: DragDropSortProps) => {
   const [activeId, setActiveId] = React.useState<string>(null);
-  const [dragging, setDragging] = React.useState(false);
+  // const [dragging, setDragging] = React.useState(false);
 
-  const itemIds = React.useMemo(() => (items ? Array.from(items, item => item.id as string) : []), [items]);
+  const itemIds = React.useMemo(() => (items ? Array.from(items, (item) => item.id as string) : []), [items]);
 
-  const getItemById = (id: string): DraggableObject => items.find(item => item.id === id);
+  const getItemById = (id: string): DraggableObject => items.find((item) => item.id === id);
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -83,19 +81,63 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
     const oldIndex = itemIds.indexOf(active.id as string);
     const newIndex = itemIds.indexOf(over.id as string);
     const newItems = arrayMove(items, oldIndex, newIndex);
-    setDragging(false);
+    // setDragging(false);
     onDrop(event, newItems, oldIndex, newIndex);
     return newItems;
   };
 
   const handleDragStart = (event: DragStartEvent) => {
     setActiveId(event.active.id as string);
-    setDragging(true);
+    // setDragging(true);
     onDrag(event, itemIds.indexOf(event.active.id as string));
   };
 
+  const getDragOverlay = () => {
+    if (!activeId) {
+      return;
+    }
+    const item = getItemById(activeId);
+
+    let content;
+    switch (variant) {
+      case 'DualListSelectorList':
+        content = (
+          <DraggableDualListSelectorListItem key={item.id} id={item.id} {...item.props}>
+            {item.content}
+          </DraggableDualListSelectorListItem>
+        );
+        break;
+      case 'DataList':
+        content = (
+          <DraggableDataListItem key={item.id} id={item.id} {...item.props}>
+            {item.content}
+          </DraggableDataListItem>
+        );
+        break;
+      default:
+        content = (
+          <Draggable useDragButton={variant === 'defaultWithHandle'} key={item.id} id={item.id} {...item.props}>
+            {item.content}
+          </Draggable>
+        );
+    }
+
+    return (
+      <div
+        className={css(styles.draggable, styles.modifiers.dragging)}
+        style={
+          {
+            '--pf-v5-c-draggable--m-dragging--BackgroundColor': 'var(--pf-v5-global--BackgroundColor--100)'
+          } as React.CSSProperties
+        }
+      >
+        {content}
+      </div>
+    );
+  };
+
   const renderedChildren = (
-    <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+    <SortableContext items={itemIds} strategy={verticalListSortingStrategy} id="droppable">
       {items.map((item: DraggableObject) => {
         switch (variant) {
           case 'DualListSelectorList':
@@ -118,12 +160,7 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
             );
         }
       })}
-      <DragOverlay>
-        <div className={css(styles.draggable, styles.modifiers.dragging, flexStyles.flex)}>
-          <span className={css(`${flexStyles.flex}_item`)}>{variant !== 'default' && <DragButton />}</span>
-          <span className={css(`${flexStyles.flex}_item`)}>{activeId ? getItemById(activeId).content : null}</span>
-        </div>
-      </DragOverlay>
+      <DragOverlay>{activeId && getDragOverlay()}</DragOverlay>
     </SortableContext>
   );
 
@@ -135,15 +172,11 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
       onDragStart={handleDragStart}
       {...props}
     >
-      {children && React.cloneElement(children, {
-        children: renderedChildren,
-        className: `${styles.droppable} ${dragging ? styles.modifiers.dragging : ''}`
-      })}
-      {!children && (
-        <div className={`${styles.droppable} ${dragging ? styles.modifiers.dragging : ''}`}>
-          {renderedChildren}
-        </div>
-      )}
+      {children &&
+        React.cloneElement(children, {
+          children: renderedChildren
+        })}
+      {!children && <div>{renderedChildren}</div>}
     </DndContext>
   );
 };

diff --git a/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx b/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx
@@ -25,7 +25,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
   useDragButton = false,
   ...props
 }: DraggableProps) => {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id
   });
 
@@ -35,16 +35,18 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
   };
 
   return useDragButton ? (
-    <div className={css(styles.draggable, className)} ref={setNodeRef} style={style} {...props}>
-      <DragButton
-        {...attributes}
-        {...listeners}
-      />
+    <div
+      className={css(isDragging && styles.droppable, isDragging && styles.modifiers.dragging, className)}
+      ref={setNodeRef}
+      style={style}
+      {...props}
+    >
+      <DragButton {...attributes} {...listeners} />
       {children}
     </div>
   ) : (
     <div
-      className={css(styles.draggable, className)}
+      className={css(isDragging && styles.droppable, isDragging && styles.modifiers.dragging, className)}
       ref={setNodeRef}
       style={style}
       {...listeners}

diff --git a/packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx b/packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx
@@ -3,6 +3,7 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+import dragStyles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DragButton } from './DragButton';
 import { DataListItemRow, DataListControl } from '@patternfly/react-core';
 
@@ -28,7 +29,7 @@ export const DraggableDataListItem: React.FunctionComponent<DraggableDataListIte
   className,
   ...props
 }: DraggableDataListItemProps) => {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id
   });
 
@@ -38,7 +39,18 @@ export const DraggableDataListItem: React.FunctionComponent<DraggableDataListIte
   };
 
   return (
-    <li id={id} className={css(styles.dataListItem, className)} {...props} ref={setNodeRef} style={style}>
+    <li
+      id={id}
+      className={css(
+        styles.dataListItem,
+        isDragging && dragStyles.droppable,
+        isDragging && dragStyles.modifiers.dragging,
+        className
+      )}
+      {...props}
+      ref={setNodeRef}
+      style={style}
+    >
       <DataListItemRow>
         <DataListControl>
           <DragButton className={css(styles.dataListItemDraggableButton)} {...attributes} {...listeners} />

diff --git a/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx b/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx
@@ -3,14 +3,10 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import dragStyles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DragButton } from './DragButton';
 import { DualListSelectorListContext } from '@patternfly/react-core/dist/esm/components/DualListSelector';
 
-export interface DraggableObject {
-  id?: string;
-  content?: React.ReactNode;
-}
-
 export interface DraggableDualListSelectorListItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside DragDrop */
   children?: React.ReactNode;
@@ -41,8 +37,9 @@ export const DraggableDualListSelectorListItem: React.FunctionComponent<Draggabl
   onOptionSelect,
   ...props
 }: DraggableDualListSelectorListItemProps) => {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-    id
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    animateLayoutChanges: () => false
   });
 
   const { setFocusedOption } = React.useContext(DualListSelectorListContext);
@@ -54,7 +51,12 @@ export const DraggableDualListSelectorListItem: React.FunctionComponent<Draggabl
 
   return (
     <li
-      className={css(styles.dualListSelectorListItem, className)}
+      className={css(
+        styles.dualListSelectorListItem,
+        isDragging && dragStyles.droppable,
+        isDragging && dragStyles.modifiers.dragging,
+        className
+      )}
       key={orderIndex}
       id={id}
       role="presentation"

diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md b/packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md
@@ -2,13 +2,11 @@
 id: Drag and drop
 section: components
 cssPrefix: pf-c-drag-drop
-propComponents: [
-  DragDropSort,
-  DraggableObject
-]
+propComponents: [DragDropSort, DraggableObject]
 hideNavItem: true
 beta: true
 ---
+
 Note: DragDrop lives in its own package at @patternfly/react-drag-drop!'
 
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
@@ -20,13 +18,17 @@ import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pfic
 import { DragDropSort, DraggableObject } from '@patternfly/react-drag-drop';
 
 ## Sorting examples
+
 ### Basic drag and drop sorting
+
 ```ts isBeta file="./BasicSorting.tsx"
+
 ```
 
 ### Basic drag and drop sorting with drag button
 
 ```ts isBeta file="./BasicSortingWithDragButton.tsx"
+
 ```
 
 ### Drag and drop sortable data list
@@ -36,6 +38,7 @@ Draggable data lists used to have their own HTML5-based API for drag and drop, w
 Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
 
 ```ts isBeta file="./DataListDraggable.tsx"
+
 ```
 
 ### Drag and drop sortable dual list selector
@@ -55,4 +58,5 @@ This example only allows reordering the contents of the "chosen" pane with drag
 Note: Keyboard accessibility and screen reader accessibility for the `DragDropSort` component are still in development.
 
 ```ts file="./DualListSelectorDraggable.tsx"
+
 ```