Skip to content

Commit

Permalink
fix: add cleanup after sorting
Browse files Browse the repository at this point in the history
  • Loading branch information
Soare-Robert-Daniel committed Aug 28, 2023
1 parent 8a878de commit 31a9972
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 2 deletions.
18 changes: 17 additions & 1 deletion src/blocks/components/image-grid/GridList.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { useRef, useState } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -23,6 +23,7 @@ const GridList = ({
const [ selectedItems, setSelectedItems ] = useState([]);
const [ isSorting, setIsSorting ] = useState( false );
const [ sortingItemKey, setSortingItemKey ] = useState( null );
const containerRef = useRef( null );

const handleUpdateBeforeSortStart = ({ index }) => {
return new Promise( resolve => {
Expand Down Expand Up @@ -50,6 +51,20 @@ const GridList = ({
setSortingItemKey( null );
setSelectedItems([]);
onSelectImages( newItems );

// Remove all extra nodes that react-sortable-hoc adds to the DOM but doesn't remove after sorting is done.
document.querySelectorAll( '.o-images-grid-component__image' ).forEach( node => {
if ( ! containerRef.current?.container.contains?.( node ) ) {

// Hide the node until it can be removed to prevent a flash of unstyled content.
node.style.display = 'none';
setTimeout( () => {

// Remove the node after a short delay to allow the transition to finish.
node.remove();
}, 250 );
}
});
};

const handleItemSelect = item => {
Expand Down Expand Up @@ -96,6 +111,7 @@ const GridList = ({
onSortEnd={ onSortEnd }
distance={ 3 }
axis="xy"
ref={ containerRef }
/>
);
};
Expand Down
4 changes: 3 additions & 1 deletion src/blocks/components/image-grid/SortableList.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,14 @@ const SortableList = SortableContainer( ({
selectedItems,
isSorting,
sortingItemKey,
open
open,
ref
}) => {
return (
<div
className={ className }
tabIndex="0"
ref={ ref }
>
{ items.map( ( item, index ) => {
const isSelected = selectedItems.includes( item );
Expand Down

0 comments on commit 31a9972

Please sign in to comment.