/**
* Creates a single draggable block.
*/
import { useState, useRef } from '@wordpress/element';
import { Icon, Draggable, Popover } from '@wordpress/components';
import { dispatch, useDispatch, select } from '@wordpress/data';
import { __, sprintf } from '@wordpress/i18n';
import svgIcons from '@Svg/svgs.json';
import parse from 'html-react-parser';
const DraggableBlock = ( props ) => {
const {
block,
id,
create,
blockInsertionPoint,
getSelectedBlockClientId,
getSelectedBlockAllowedBlocks,
getBlockRootClientId,
defaultAllowedQuickSidebarBlocks,
updateDefaultAllowedQuickSidebarBlocks,
saveOptionToDatabase,
} = props;
const [ hovering, setHovering ] = useState( false );
const isDragging = useRef( false );
const { createNotice } = useDispatch( 'core/notices' );
const [ uniqueId, setUniqueId ] = useState( 0 );
const removedNoticeID = `quick-action-sidebar/remove-notices-flow/removed-notice/${ uniqueId }`;
const remove = parse( svgIcons.remove );
const handleMouseOver = () => {
setHovering( true );
};
const handleMouseOut = () => {
setHovering( false );
};
const handleOnClick = ( e, selectedBlock ) => {
let clientId = getBlockRootClientId || '';
let insertionPoint = blockInsertionPoint;
if (
getSelectedBlockAllowedBlocks &&
getSelectedBlockAllowedBlocks.includes( selectedBlock )
) {
insertionPoint =
select( 'core/block-editor' ).getSelectedBlock().innerBlocks
.length;
clientId = getSelectedBlockClientId;
}
if ( e?.target?.classList?.contains( 'block-title-svg' ) ) {
isDragging.current = false;
return;
}
dispatch( 'core/block-editor' ).insertBlocks(
create( selectedBlock.name ),
insertionPoint,
clientId
);
};
// Removes the specified element from an array.
const removeElementFromArray = (
arrayFromWhichElementNeedToRemove,
elementToRemove
) =>
arrayFromWhichElementNeedToRemove.filter(
( element ) => element !== elementToRemove
);
const handleRemoveBlock = ( elementToRemove ) => {
const updatedArray = removeElementFromArray(
defaultAllowedQuickSidebarBlocks,
elementToRemove.name
);
updateDefaultAllowedQuickSidebarBlocks( updatedArray );
saveOptionToDatabase( updatedArray );
// Increment uniqueId when removing a block
setUniqueId( ( prevUniqueId ) => prevUniqueId + 1 );
createNotice(
'success',
sprintf(
/* translators: abbreviation for units */ __(
'%s Removed from Quick Action Bar.',
'sureforms'
),
elementToRemove.title
),
{
type: 'snackbar',
id: removedNoticeID,
isDismissible: true,
}
);
// Set a timeout to remove the notice after a specific duration (e.g., 600 milliseconds)
setTimeout( () => {
// Remove the notice by ID
dispatch( 'core/notices' ).removeNotice( removedNoticeID );
}, 1000 );
};
const hoverPopover = (
<Popover
placement="right"
key={ id }
className="srfm-ee-quick-access__sidebar--blocks--block--icon--name"
>
<div className="block-title">
<div
onClick={ () => {
handleRemoveBlock( block );
} }
className="srfm-ee-quick-access__sidebar--blocks--block--name"
>
{ remove }
</div>
{ block.title && block.title }
</div>
</Popover>
);
const separatedArray = block.name.split( '/' );
const slug = separatedArray[ 0 ];
const blockName = separatedArray[ 1 ];
return (
<div id={ `draggable-box__${ slug }--${ blockName }` }>
<Draggable
elementId={ `draggable-box__${ slug }--${ blockName }` }
__experimentalTransferDataType="wp-blocks"
transferData={ {
type: 'inserter',
blocks: [ create( block.name ) ],
} }
>
{ ( { onDraggableStart, onDraggableEnd } ) => (
<div
className="srfm-ee-quick-access__sidebar--blocks--block"
key={ id }
onClick={ ( e ) => {
handleOnClick( e, block );
} }
draggable
onDragStart={ ( event ) => {
isDragging.current = true;
if ( onDraggableStart ) {
onDraggableStart( event );
}
} }
onDragEnd={ ( event ) => {
isDragging.current = false;
if ( onDraggableEnd ) {
onDraggableEnd( event );
}
} }
onMouseOver={ handleMouseOver }
onMouseOut={ handleMouseOut }
onFocus={ handleMouseOver }
onBlur={ handleMouseOut }
>
<div className="srfm-ee-quick-access__sidebar--blocks--block--icon">
<Icon
icon={
block.icon?.src
? block.icon.src
: block.icon
}
/>
</div>
{ hovering && hoverPopover }
</div>
) }
</Draggable>
</div>
);
};
export default DraggableBlock;