{ /* Right side: Spinner, Preview, Save Changes, Dropdown */ }
{
( screenData.isSaving || screenData.previewIsLoading ) && (
)
}
{
tp.screenOptions.currentUserCanPreviewTable && (
{ noticeUI }
{ confirmDeleteModalIsOpen && (
setConfirmDeleteModalIsOpen( false ) }
/>
) }
);
};
// A copy of the section to be used for the bottom buttons, with keyboard shortcuts.
const HeaderBarWithKeyboardShortcutsWithNotices = withNotices( ( props ) => {
const noticesStoreDispatch = useDispatch( noticesStore );
const saveChangesCallback = ( event ) => {
event.preventDefault();
// Blur the focussed element to make sure that all `change` and `blur` events were triggered.
document.activeElement.blur(); // eslint-disable-line @wordpress/no-global-active-element
// Don't save changes directly, but trigger a save on the next render.
props.updateScreenData( { triggerSaveChanges: true } );
};
/*
* Save changes when the `triggerSaveChanges` screen data option is set.
* This ensures that the save function receives the latest data, after all `change` and `blur` events were triggered.
*/
useEffect( () => {
if ( props.screenData.triggerSaveChanges ) {
props.updateScreenData( { triggerSaveChanges: false } );
saveTableChanges( { ...props, noticesStoreDispatch } );
}
}, [ props, noticesStoreDispatch ] );
const openNavigationDropdownCallback = ( event ) => {
event.preventDefault();
props.updateScreenData( { quickNavigationDropdownIsOpen: ! props.screenData.quickNavigationDropdownIsOpen } );
};
const shortcuts = {
'mod+s': saveChangesCallback,
'mod+j': openNavigationDropdownCallback,
};
if ( tp.screenOptions.currentUserCanPreviewTable ) {
const showPreviewCallback = ( event ) => {
event.preventDefault();
// Blur the focussed element to make sure that all `change` and `blur` events were triggered.
document.activeElement.blur(); // eslint-disable-line @wordpress/no-global-active-element
// Don't load the preview directly, but trigger it on the next render.
props.updateScreenData( { triggerPreview: true } );
};
/*
* Trigger the preview when the `triggerPreview` screen data option is set.
* This ensures that the save function receives the latest data, after all `change` and `blur` events were triggered.
*/
useEffect( () => {
if ( props.screenData.triggerPreview ) {
props.updateScreenData( { triggerPreview: false } );
showPreview( props );
}
}, [ props ] );
shortcuts[ 'mod+p' ] = showPreviewCallback;
}
return (
<>
);
} );
initializeReactComponentInPortal(
'header-bar',
'edit',
HeaderBarWithKeyboardShortcutsWithNotices,
);
import { Context as TemplatesContext } from '../context/templates';
import useScreenshot, { SCREENSHOT_STATUS_SUCCEED, SCREENSHOT_STATUS_FAILED } from 'modules/screenshots/app/assets/js/hooks/use-screenshot';
/**
* Wrapper function that was made to take screenshots specific for template.
* it will capture a screenshot and update the templates context with the new screenshot.
*
* @param {any} templateType
*/
export default function useTemplatesScreenshot( templateType = null ) {
const { updateTemplateItemState, templates } = React.useContext( TemplatesContext );
const templatesForScreenshot = Object.values( templates ).filter(
( template ) => shouldScreenshotTemplate( template, templateType ),
);
// Start to capture screenshots.
const screenshot = useScreenshot( templatesForScreenshot );
// Update the thumbnail url when screenshot created.
React.useEffect( () => {
screenshot.posts
.filter( ( post ) => post.status === SCREENSHOT_STATUS_SUCCEED )
.forEach( ( post ) => updateTemplateItemState( post.id, { thumbnail: post.imageUrl } ) );
}, [ screenshot.succeed ] );
// Update the screenshot url that was failed.
// When the user will hit the route on the second time it will avoid trying to take another screenshot.
React.useEffect( () => {
screenshot.posts
.filter( ( post ) => post.status === SCREENSHOT_STATUS_FAILED )
.forEach( ( post ) => updateTemplateItemState( post.id, { screenshot_url: null } ) );
}, [ screenshot.failed ] );
return screenshot;
}
/**
* Filter handler.
* will remove all the drafts and private and also will filter by template type if exists.
*
* @param {any} template
* @param {any} templateType
* @return {boolean} should screenshot template
*/
function shouldScreenshotTemplate( template, templateType = null ) {
if ( templateType ) {
return false;
}
return 'publish' === template.status &&
! template.thumbnail &&
template.screenshot_url;
}