/**
* BnB layout: “Show all photos” control on the last featured thumbnail.
*
* @package
*/
import { useCallback } from '@wordpress/element';
import { __, _n, sprintf } from '@wordpress/i18n';
import { useSelector } from 'react-redux';
import { openModulaGalleryLightboxAtRoot } from '../lightbox/lightboxOpenFacade';
import { galleryUsesFancyboxLightbox } from '../utils/resolveGalleryItemLink';
function BnbGridIcon() {
return (
);
}
/**
* @param {object} props
* @param {number} props.moreCount Hidden image count (beyond the five featured tiles).
* @param {object} props.config Gallery config from the store.
*/
export default function BnbShowAllPhotosButton({ moreCount, config }) {
const items = useSelector(
(state) => state.items.filteredItems ?? state.items.items
);
const settings = useSelector((state) => state.gallery.settings || {});
const onOpenLightbox = useCallback(
(event) => {
event.preventDefault();
event.stopPropagation();
const host = event.currentTarget.closest(
'.modula-gallery-react-host'
);
if (!host) {
return;
}
// BnB hides all but the featured tiles, so the "Show all photos"
// action is the only way to view the rest — always open the
// lightbox, even when the gallery link mode is "no-link".
// Keep hybrid mode so linked tiles stay out of the Fancybox set.
const lightboxConfig = galleryUsesFancyboxLightbox(config?.lightbox)
? config
: { ...config, lightbox: 'fancybox' };
openModulaGalleryLightboxAtRoot(host, lightboxConfig, 0, {
items,
settings,
openedViaKeyboard: false,
galleryHostEl: host,
});
},
[config, items, settings]
);
if (moreCount < 1) {
return null;
}
const countLabel = sprintf(
/* translators: %d: number of additional gallery images not shown in the BnB grid. */
_n(
'(%d more image)',
'(%d more images)',
moreCount,
'modula-best-grid-gallery'
),
moreCount
);
return (
);
}