META-INF.resources.page_editor.app.components.ZoomAlert.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.layout.content.page.editor.web

Liferay Layout Content Page Editor Web

The newest version!

/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayAlert from '@clayui/alert';
import React, {useEffect, useRef, useState} from 'react';

export default function ZoomAlert() {
	const [showZoomAlert, setShowZoomAlert] = useState(false);
	const alertRef = useRef();

	useEffect(() => {
		const onChange = (event) => {
			setShowZoomAlert(event.matches);
		};

		const mediaQuery = window.matchMedia('(max-width: 576px)');

		if (mediaQuery.matches) {
			setShowZoomAlert(true);
		}

		mediaQuery.addEventListener('change', onChange);

		return () => mediaQuery.removeEventListener('change', onChange);
	}, []);

	useEffect(() => {
		if (showZoomAlert) {
			const height = alertRef.current?.getBoundingClientRect().height;

			document.body.style.setProperty(
				'--zoom-alert-height',
				`${height}px`
			);
		}
		else {
			document.body.style.setProperty('--zoom-alert-height', '0px');
		}
	}, [showZoomAlert]);

	return (
		showZoomAlert && (
			
				 setShowZoomAlert(false)}
				>
					{Liferay.Language.get(
						'this-editor-is-not-optimized-for-mobile-or-400-zooming'
					)}
				
			
		)
	);
}