style fixes

patternfly · Oct 31, 2023 · c601bb0 · c601bb0
1 parent 7fbc4ba
commit c601bb0
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"
+
 ```