Source: dynamic-data-mapping-form-web/src/main/resources/META-INF/resources/admin/js/components/ManagementToolbar.es.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */

import {useEventListener} from '@liferay/frontend-js-react-web';
import {useConfig} from 'data-engine-js-components-web';
import {useEffect} from 'react';

const toggleFormBuilder = (managementToolbar) => {
	const formBuilderButtons = document.querySelectorAll(
		'.toolbar-group-field .nav-item .lfr-ddm-button'
	);
	const publishIcon = document.querySelector('.publish-icon');

	if (managementToolbar) {
		managementToolbar.classList.remove('hide');
	}

	formBuilderButtons.forEach((formBuilderButton) => {
		formBuilderButton.classList.remove('hide');
	});

	if (publishIcon) {
		publishIcon.classList.remove('hide');
	}

	return () => {
		if (managementToolbar) {
			managementToolbar.classList.add('hide');
		}

		formBuilderButtons.forEach((formBuilderButton) => {
			formBuilderButton.classList.add('hide');
		});

		if (publishIcon) {
			publishIcon.classList.add('hide');
		}
	};
};

const toggleRules = (managementToolbar) => {
	const formBuilderButtons = document.querySelectorAll(
		'.toolbar-group-field .nav-item .lfr-ddm-button'
	);

	managementToolbar.classList.remove('hide');

	formBuilderButtons.forEach((formBuilderButton) => {
		formBuilderButton.classList.add('hide');
	});

	return () => {
		managementToolbar.classList.add('hide');
	};
};

/**
 * This is a fake component that only takes advantage of the React lifecycle
 * to manipulate the visibility of the Management Toolbar, it is currently
 * rendered via JSP and it is necessary to control visibility via JavaScript.
 *
 * Creates a simulation that this component is in React and deals with the
 * visibility of elements in the DOM and events such as click.
 */
export const ManagementToolbar = ({
	onPlusClick,
	onPreviewClick,
	onPublishClick,
	onSaveClick,
	onSettingsClick,
	onShareClick,
	portletNamespace,
	variant = 'builder',
}) => {
	const {published, showPublishAlert} = useConfig();

	useEffect(() => {
		const managementToolbar = document.querySelector(
			`#${portletNamespace}managementToolbar`
		);

		const toggle = variant === 'builder' ? toggleFormBuilder : toggleRules;

		return toggle(managementToolbar);

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	useEffect(() => {
		const button = document.getElementById('addFieldButton');

		if (onPlusClick) {
			button.classList.remove('hide');
		}
		else {
			button.classList.add('hide');
		}
	}, [onPlusClick]);

	useEffect(() => {
		const shareButton = document.querySelector('.lfr-ddm-share-url-button');

		if (showPublishAlert && published) {
			shareButton.removeAttribute('title');
		}
	}, [showPublishAlert, published]);

	useEventListener(
		'click',
		onPlusClick,
		true,
		document.getElementById('addFieldButton')
	);

	useEventListener(
		'click',
		onPreviewClick,
		true,
		document.querySelector('.lfr-ddm-preview-button')
	);

	useEventListener(
		'click',
		onPublishClick,
		true,
		document.querySelector('.lfr-ddm-publish-button')
	);

	useEventListener(
		'click',
		onSaveClick,
		true,
		document.querySelector('.lfr-ddm-save-button')
	);

	useEventListener(
		'click',
		onShareClick,
		true,
		document.querySelector('.lfr-ddm-share-url-button')
	);

	useEventListener(
		'click',
		onSettingsClick,
		true,
		document.querySelector('.lfr-ddm-settings-button')
	);

	return null;
};