Skip to content

Commit

Permalink
Fix Unified Field List drag styles
Browse files Browse the repository at this point in the history
  • Loading branch information
davismcphee committed Sep 9, 2023
1 parent 0aaf693 commit 951fe65
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 1 deletion.
22 changes: 22 additions & 0 deletions packages/kbn-dom-drag-drop/src/drag_drop.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,28 @@ describe('DragDrop', () => {
});
});

test('dragstart sets dragClassName as expected', async () => {
const dndDispatch = jest.fn();
const component = mount(
<ChildDragDropProvider value={[{ ...defaultContextState, dragging: undefined }, dndDispatch]}>
<DragDrop value={value} draggable={true} order={[2, 0, 1, 0]} dragClassName="dragTest">
<button>Hi!</button>
</DragDrop>
</ChildDragDropProvider>
);
const dragDrop = component.find('[data-test-subj="testDragDrop"]').at(0);

expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeNull();
dragDrop.simulate('dragstart', { dataTransfer });
expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeDefined();

act(() => {
jest.runAllTimers();
});

expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeNull();
});

test('drop resets all the things', async () => {
const preventDefault = jest.fn();
const stopPropagation = jest.fn();
Expand Down
17 changes: 17 additions & 0 deletions packages/kbn-dom-drag-drop/src/drag_drop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ interface BaseProps {
* The CSS class(es) for the root element.
*/
className?: string;
/**
* CSS class to apply when the item is being dragged
*/
dragClassName?: string;

/**
* The event handler that fires when an item
Expand Down Expand Up @@ -212,6 +216,7 @@ const removeSelection = () => {
const DragInner = memo(function DragInner({
dataTestSubj,
className,
dragClassName,
value,
children,
dndDispatch,
Expand Down Expand Up @@ -305,6 +310,18 @@ const DragInner = memo(function DragInner({
// so we know we have DraggableProps if we reach this code.
if (e && 'dataTransfer' in e) {
e.dataTransfer.setData('text', value.humanData.label);

// Apply an optional class to the element being dragged so the ghost
// can be styled. We must add it to the actual element for a single
// frame before removing it so the ghost picks up the styling.
const current = e.currentTarget;

if (dragClassName && !current.classList.contains(dragClassName)) {
current.classList.add(dragClassName);
requestAnimationFrame(() => {
current.classList.remove(dragClassName);
});
}
}

// Chrome causes issues if you try to render from within a
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,7 @@ function UnifiedFieldListItemComponent({
button={
<DragDrop
draggable
dragClassName="unifiedFieldListItemButton__dragging"
order={order}
value={value}
onDragStart={closePopover}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@
box-shadow: none;
}

&.domDragDrop-isDraggable:not(:active) {
&:not(.unifiedFieldListItemButton__dragging) {
padding: 0;
background: none;
}
}

0 comments on commit 951fe65

Please sign in to comment.