Skip to content

Commit cd22d65

Browse files
kmcfaulkmcfaul
committed
style fixes
1 parent 21b7941 commit cd22d65

File tree

6 files changed

+102
-45
lines changed

6 files changed

+102
-45
lines changed

‎packages/react-drag-drop/src/components/DragDrop/DragButton.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ export interface DragButtonProps extends React.HTMLProps<HTMLButtonElement> {
1414
}
1515

1616
export const DragButton: React.FunctionComponent<DragButtonProps> = ({ className, ...props }: DragButtonProps) => (
17-
<button className={css(className, buttonStyles.button, buttonStyles.modifiers.plain)} aria-label="Drag button" {...props}>
17+
<button
18+
className={css(className, buttonStyles.button, buttonStyles.modifiers.plain)}
19+
aria-label="Drag button"
20+
{...props}
21+
>
1822
<span className={css(dragButtonStyles.dataListItemDraggableIcon)}>
1923
<GripVerticalIcon />
2024
</span>

‎packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx

Lines changed: 56 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,9 @@ import {
1919
verticalListSortingStrategy
2020
} from '@dnd-kit/sortable';
2121
import { Draggable } from './Draggable';
22-
import { DragButton } from './DragButton';
2322
import { DraggableDataListItem } from './DraggableDataListItem';
2423
import { DraggableDualListSelectorListItem } from './DraggableDualListSelectorListItem';
2524
import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
26-
import flexStyles from '@patternfly/react-styles/css/layouts/Flex/flex';
2725

2826
export type DragDropSortDragEndEvent = DragEndEvent;
2927
export type DragDropSortDragStartEvent = DragStartEvent;
@@ -65,11 +63,11 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
6563
...props
6664
}: DragDropSortProps) => {
6765
const [activeId, setActiveId] = React.useState<string>(null);
68-
const [dragging, setDragging] = React.useState(false);
66+
// const [dragging, setDragging] = React.useState(false);
6967

70-
const itemIds = React.useMemo(() => (items ? Array.from(items, item => item.id as string) : []), [items]);
68+
const itemIds = React.useMemo(() => (items ? Array.from(items, (item) => item.id as string) : []), [items]);
7169

72-
const getItemById = (id: string): DraggableObject => items.find(item => item.id === id);
70+
const getItemById = (id: string): DraggableObject => items.find((item) => item.id === id);
7371

7472
const sensors = useSensors(
7573
useSensor(PointerSensor),
@@ -83,19 +81,63 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
8381
const oldIndex = itemIds.indexOf(active.id as string);
8482
const newIndex = itemIds.indexOf(over.id as string);
8583
const newItems = arrayMove(items, oldIndex, newIndex);
86-
setDragging(false);
84+
// setDragging(false);
8785
onDrop(event, newItems, oldIndex, newIndex);
8886
return newItems;
8987
};
9088

9189
const handleDragStart = (event: DragStartEvent) => {
9290
setActiveId(event.active.id as string);
93-
setDragging(true);
91+
// setDragging(true);
9492
onDrag(event, itemIds.indexOf(event.active.id as string));
9593
};
9694

95+
const getDragOverlay = () => {
96+
if (!activeId) {
97+
return;
98+
}
99+
const item = getItemById(activeId);
100+
101+
let content;
102+
switch (variant) {
103+
case 'DualListSelectorList':
104+
content = (
105+
<DraggableDualListSelectorListItem key={item.id} id={item.id} {...item.props}>
106+
{item.content}
107+
</DraggableDualListSelectorListItem>
108+
);
109+
break;
110+
case 'DataList':
111+
content = (
112+
<DraggableDataListItem key={item.id} id={item.id} {...item.props}>
113+
{item.content}
114+
</DraggableDataListItem>
115+
);
116+
break;
117+
default:
118+
content = (
119+
<Draggable useDragButton={variant === 'defaultWithHandle'} key={item.id} id={item.id} {...item.props}>
120+
{item.content}
121+
</Draggable>
122+
);
123+
}
124+
125+
return (
126+
<div
127+
className={css(styles.draggable, styles.modifiers.dragging)}
128+
style={
129+
{
130+
'--pf-v5-c-draggable--m-dragging--BackgroundColor': 'var(--pf-v5-global--BackgroundColor--100)'
131+
} as React.CSSProperties
132+
}
133+
>
134+
{content}
135+
</div>
136+
);
137+
};
138+
97139
const renderedChildren = (
98-
<SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
140+
<SortableContext items={itemIds} strategy={verticalListSortingStrategy} id="droppable">
99141
{items.map((item: DraggableObject) => {
100142
switch (variant) {
101143
case 'DualListSelectorList':
@@ -118,12 +160,7 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
118160
);
119161
}
120162
})}
121-
<DragOverlay>
122-
<div className={css(styles.draggable, styles.modifiers.dragging, flexStyles.flex)}>
123-
<span className={css(`${flexStyles.flex}_item`)}>{variant !== 'default' && <DragButton />}</span>
124-
<span className={css(`${flexStyles.flex}_item`)}>{activeId ? getItemById(activeId).content : null}</span>
125-
</div>
126-
</DragOverlay>
163+
<DragOverlay>{activeId && getDragOverlay()}</DragOverlay>
127164
</SortableContext>
128165
);
129166

@@ -135,15 +172,11 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
135172
onDragStart={handleDragStart}
136173
{...props}
137174
>
138-
{children && React.cloneElement(children, {
139-
children: renderedChildren,
140-
className: `${styles.droppable} ${dragging ? styles.modifiers.dragging : ''}`
141-
})}
142-
{!children && (
143-
<div className={`${styles.droppable} ${dragging ? styles.modifiers.dragging : ''}`}>
144-
{renderedChildren}
145-
</div>
146-
)}
175+
{children &&
176+
React.cloneElement(children, {
177+
children: renderedChildren
178+
})}
179+
{!children && <div>{renderedChildren}</div>}
147180
</DndContext>
148181
);
149182
};

‎packages/react-drag-drop/src/components/DragDrop/Draggable.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
2525
useDragButton = false,
2626
...props
2727
}: DraggableProps) => {
28-
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
28+
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
2929
id
3030
});
3131

@@ -35,16 +35,18 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
3535
};
3636

3737
return useDragButton ? (
38-
<div className={css(styles.draggable, className)} ref={setNodeRef} style={style} {...props}>
39-
<DragButton
40-
{...attributes}
41-
{...listeners}
42-
/>
38+
<div
39+
className={css(isDragging && styles.droppable, isDragging && styles.modifiers.dragging, className)}
40+
ref={setNodeRef}
41+
style={style}
42+
{...props}
43+
>
44+
<DragButton {...attributes} {...listeners} />
4345
{children}
4446
</div>
4547
) : (
4648
<div
47-
className={css(styles.draggable, className)}
49+
className={css(isDragging && styles.droppable, isDragging && styles.modifiers.dragging, className)}
4850
ref={setNodeRef}
4951
style={style}
5052
{...listeners}

‎packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useSortable } from '@dnd-kit/sortable';
33
import { CSS } from '@dnd-kit/utilities';
44
import { css } from '@patternfly/react-styles';
55
import styles from '@patternfly/react-styles/css/components/DataList/data-list';
6+
import dragStyles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
67
import { DragButton } from './DragButton';
78
import { DataListItemRow, DataListControl } from '@patternfly/react-core';
89

@@ -28,7 +29,7 @@ export const DraggableDataListItem: React.FunctionComponent<DraggableDataListIte
2829
className,
2930
...props
3031
}: DraggableDataListItemProps) => {
31-
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
32+
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
3233
id
3334
});
3435

@@ -38,7 +39,18 @@ export const DraggableDataListItem: React.FunctionComponent<DraggableDataListIte
3839
};
3940

4041
return (
41-
<li id={id} className={css(styles.dataListItem, className)} {...props} ref={setNodeRef} style={style}>
42+
<li
43+
id={id}
44+
className={css(
45+
styles.dataListItem,
46+
isDragging && dragStyles.droppable,
47+
isDragging && dragStyles.modifiers.dragging,
48+
className
49+
)}
50+
{...props}
51+
ref={setNodeRef}
52+
style={style}
53+
>
4254
<DataListItemRow>
4355
<DataListControl>
4456
<DragButton className={css(styles.dataListItemDraggableButton)} {...attributes} {...listeners} />

‎packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,10 @@ import { useSortable } from '@dnd-kit/sortable';
33
import { CSS } from '@dnd-kit/utilities';
44
import { css } from '@patternfly/react-styles';
55
import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
6+
import dragStyles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
67
import { DragButton } from './DragButton';
78
import { DualListSelectorListContext } from '@patternfly/react-core/dist/esm/components/DualListSelector';
89

9-
export interface DraggableObject {
10-
id?: string;
11-
content?: React.ReactNode;
12-
}
13-
1410
export interface DraggableDualListSelectorListItemProps extends React.HTMLProps<HTMLLIElement> {
1511
/** Content rendered inside DragDrop */
1612
children?: React.ReactNode;
@@ -41,8 +37,9 @@ export const DraggableDualListSelectorListItem: React.FunctionComponent<Draggabl
4137
onOptionSelect,
4238
...props
4339
}: DraggableDualListSelectorListItemProps) => {
44-
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
45-
id
40+
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
41+
id,
42+
animateLayoutChanges: () => false
4643
});
4744

4845
const { setFocusedOption } = React.useContext(DualListSelectorListContext);
@@ -54,7 +51,12 @@ export const DraggableDualListSelectorListItem: React.FunctionComponent<Draggabl
5451

5552
return (
5653
<li
57-
className={css(styles.dualListSelectorListItem, className)}
54+
className={css(
55+
styles.dualListSelectorListItem,
56+
isDragging && dragStyles.droppable,
57+
isDragging && dragStyles.modifiers.dragging,
58+
className
59+
)}
5860
key={orderIndex}
5961
id={id}
6062
role="presentation"

‎packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
id: Drag and drop
33
section: components
44
cssPrefix: pf-c-drag-drop
5-
propComponents: [
6-
DragDropSort,
7-
DraggableObject
8-
]
5+
propComponents: [DragDropSort, DraggableObject]
96
hideNavItem: true
107
beta: true
118
---
9+
1210
Note: DragDrop lives in its own package at @patternfly/react-drag-drop!'
1311

1412
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
2018
import { DragDropSort, DraggableObject } from '@patternfly/react-drag-drop';
2119

2220
## Sorting examples
21+
2322
### Basic drag and drop sorting
23+
2424
```ts isBeta file="./BasicSorting.tsx"
25+
2526
```
2627

2728
### Basic drag and drop sorting with drag button
2829

2930
```ts isBeta file="./BasicSortingWithDragButton.tsx"
31+
3032
```
3133

3234
### 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
3638
Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
3739

3840
```ts isBeta file="./DataListDraggable.tsx"
41+
3942
```
4043

4144
### Drag and drop sortable dual list selector
@@ -55,4 +58,5 @@ This example only allows reordering the contents of the "chosen" pane with drag
5558
Note: Keyboard accessibility and screen reader accessibility for the `DragDropSort` component are still in development.
5659

5760
```ts file="./DualListSelectorDraggable.tsx"
61+
5862
```

0 commit comments

Comments
 (0)