packages/edit-widgets/src/components/layout/unsaved-changes-warning.js - trunk - githubmirror/gutenberg

packages/edit-widgets/src/components/layout/unsaved-changes-warning.js

47 строк1 KB

Marco Ciampini

ESLint: Replace strict config with bulk suppressions (#81248)

07 авг 2026, 14:34

07 авг 2026, 14:347f43eaf

import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { store as editWidgetsStore } from '../../store';

/**
 * Warns the user if there are unsaved changes before leaving the editor.
 *
 * This is a duplicate of the component implemented in the editor package.
 * Duplicated here as edit-widgets doesn't depend on editor.
 *
 * @return {Component} The component.
 */
export default function UnsavedChangesWarning() {
	const isDirty = useSelect( ( select ) => {
		const { getEditedWidgetAreas } = select( editWidgetsStore );
		const editedWidgetAreas = getEditedWidgetAreas();

		return editedWidgetAreas?.length > 0;
	}, [] );

	useEffect( () => {
		/**
		 * Warns the user if there are unsaved changes before leaving the editor.
		 *
		 * @param {Event} event `beforeunload` event.
		 *
		 * @return {string | undefined} Warning prompt message, if unsaved changes exist.
		 */
		const warnIfUnsavedChanges = ( event ) => {
			if ( isDirty ) {
				event.returnValue = __(
					'You have unsaved changes. If you proceed, they will be lost.'
				);
				return event.returnValue;
			}
		};

		window.addEventListener( 'beforeunload', warnIfUnsavedChanges );

		return () => {
			window.removeEventListener( 'beforeunload', warnIfUnsavedChanges );
		};
	}, [ isDirty ] );

	return null;
}