Your IP : 18.221.142.39
/**
* Creates a popover modal.
*/
import { useState } from '@wordpress/element';
import { Popover, SearchControl, Icon } from '@wordpress/components';
import { useDispatch, dispatch } from '@wordpress/data';
import { __, sprintf } from '@wordpress/i18n';
import { getBlockTypes } from '@wordpress/blocks';
const PopoverModal = ( {
closePopover,
defaultAllowedQuickSidebarBlocks,
saveOptionToDatabase,
} ) => {
const [ searchTerm, setSearchTerm ] = useState( '' );
const { createNotice } = useDispatch( 'core/notices' );
const [ uniqueId, setUniqueId ] = useState( 0 );
const addedNoticeID = `quick-action-sidebar/add-notices-flow/added-notice/${ uniqueId }`;
const blocks = getBlockTypes();
const closePopup = () => {
// Call the callback function in the parent
closePopover( false );
};
const handleSearchChange = ( newSearchTerm ) =>
setSearchTerm( newSearchTerm );
const handleBlockClick = ( selectedBlock ) => {
// You can handle the selected block here, e.g., add it to the state or perform other actions
const allowedBlocks = [
...defaultAllowedQuickSidebarBlocks,
selectedBlock.name,
];
saveOptionToDatabase( allowedBlocks );
// Increment uniqueId when removing a block
setUniqueId( ( prevUniqueId ) => prevUniqueId + 1 );
createNotice(
'success',
sprintf(
/* translators: abbreviation for units */ __(
'%s Added to Quick Action Bar.',
'sureforms'
),
selectedBlock.title
),
{
type: 'snackbar',
id: addedNoticeID,
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( addedNoticeID );
}, 1000 );
closePopup();
};
const filteredBlocks = blocks.filter( ( block ) =>
block.title.toLowerCase()?.includes( searchTerm.toLowerCase() )
);
// Separate arrays for used and unused items
const usedArray = [];
const unusedArray = [];
// Iterate.
filteredBlocks.forEach( ( item ) => {
if ( defaultAllowedQuickSidebarBlocks?.includes( item.name ) ) {
usedArray.push( item );
} else if ( item.name !== 'srfm/form' ) {
unusedArray.push( item );
}
} );
const isSrfmBlock = ( item ) =>
item?.name?.includes( 'srfm/' ) && ! item.parent;
const isTermMatched = ( item ) =>
item?.title?.toLowerCase()?.includes( searchTerm.toLowerCase() );
const addToSidebar = () => {
return unusedArray.map(
( item, index ) =>
// include all srfm blocks and core/paragraph block
isSrfmBlock( item ) && (
<div
key={ index }
className="srfm-block-wrap"
onClick={ () => handleBlockClick( item ) }
style={ { cursor: 'pointer' } }
>
<div className="srfm-ee-quick-access__sidebar--blocks--block--icon">
<Icon
icon={
item.icon?.src ? item.icon.src : item.icon
}
/>
</div>
<div className="block-title">{ item.title }</div>
</div>
)
);
};
const alreadyPresentInSidebar = () => {
return usedArray.map(
( item, index ) =>
isSrfmBlock( item ) && (
<div key={ index } className="srfm-block-wrap">
<div className="srfm-ee-quick-access__sidebar--blocks--block--icon">
<Icon
icon={
item.icon?.src ? item.icon.src : item.icon
}
/>
</div>
<div className="block-title">{ item.title }</div>
</div>
)
);
};
return (
<Popover
onClose={ closePopup }
placement="right-start"
className="srfm-quick-action-block-popover"
>
<SearchControl
value={ searchTerm }
onChange={ handleSearchChange }
label="Search Blocks"
className="srfm-quick-action-block-popover-search"
/>
<div className="srfm-block-container">
{ unusedArray.some(
( item ) => isSrfmBlock( item ) && isTermMatched( item )
) && (
<div className="block-editor-inserter__panel-header srfm-quick-action-block-popover-header__add-to-quick-action-bar">
<h2 className="block-editor-inserter__panel-title">
{ __( 'Add to Quick Action Bar', 'sureforms' ) }
</h2>
</div>
) }
{ addToSidebar() }
{ usedArray.some(
( item ) => isSrfmBlock( item ) && isTermMatched( item )
) && (
<div className="block-editor-inserter__panel-header srfm-quick-action-block-popover-header__already-present-in-quick-action-bar">
<h2 className="block-editor-inserter__panel-title">
{ __(
'Already Present in Quick Action Bar',
'sureforms'
) }
</h2>
</div>
) }
{ alreadyPresentInSidebar() }
{ ! unusedArray.some(
( item ) => isSrfmBlock( item ) && isTermMatched( item )
) &&
! usedArray.some(
( item ) =>
isSrfmBlock( item ) &&
item.title
.toLowerCase()
.includes( searchTerm.toLowerCase() )
) && (
<div className="block-editor-inserter__no-results">
<p>{ __( 'No results found.', 'sureforms' ) }</p>
</div>
) }
</div>
</Popover>
);
};
export default PopoverModal;