META-INF.resources.js.layout.look_and_feel.ThemeSpritemapCETsConfiguration.tsx Maven / Gradle / Ivy

Go to download
/**
 * 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 {ClayButtonWithIcon} from '@clayui/button';
import ClayForm, {ClayInput} from '@clayui/form';
import {openSelectionModal} from 'frontend-js-web';
import React, {useState} from 'react';

export default function ThemeSpritemapCETsConfiguration({
	isReadOnly,
	portletNamespace,
	selectThemeSpritemapCETEventName,
	themeSpritemapCET = {cetExternalReferenceCode: '', name: ''},
	themeSpritemapCETSelectorURL,
}: IProps) {
	const [extensionName, setExtensionName] = useState(themeSpritemapCET.name);
	const [cetExternalReferenceCode, setCETExternalReferenceCode] = useState(
		themeSpritemapCET.cetExternalReferenceCode
	);

	const onClick = () => {
		if (isReadOnly) {
			return true;
		}

		openSelectionModal<{value: string}>({
			onSelect: (selectedItem) => {
				const item = JSON.parse(selectedItem.value);

				setCETExternalReferenceCode(item.cetExternalReferenceCode);
				setExtensionName(item.name);
			},
			selectEventName: selectThemeSpritemapCETEventName,
			title: Liferay.Language.get(
				'select-theme-spritemap-client-extension'
			),
			url: themeSpritemapCETSelectorURL,
		});
	};

	return (
		<>
			
				{Liferay.Language.get(
					'to-add-or-edit-the-existing-spritemap-simply-copy-paste-and-make-changes-as-needed-to-your-registered-extension'
				)}
			

			
				{Liferay.Language.get(
					'use-this-client-extension-to-fully-replace-the-default-spritemap-contained-in-the-theme'
				)}
			
			

			
				
					{Liferay.Language.get('theme-spritemap-client-extension')}
				

				
					
						
					

					
						{extensionName ? (
							<>
								

								 {
										setExtensionName('');
										setCETExternalReferenceCode('');
									}}
									symbol="trash"
								/>
							
						) : (
							
						)}
					
				
			
		
	);
}

interface IProps {
	isReadOnly: boolean;
	portletNamespace: string;
	selectThemeSpritemapCETEventName: string;
	themeSpritemapCET: {
		cetExternalReferenceCode?: string;
		name?: string;
	};
	themeSpritemapCETSelectorURL: string;
}