META-INF.resources.js.SmallImage.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.journal.web
Liferay Journal Web
There is a newer version: 5.0.181
/**
 * 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 ClayButton from '@clayui/button';
import ClayForm, {ClayInput, ClaySelectWithOption} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import {openSelectionModal, sub} from 'frontend-js-web';
import React, {useRef, useState} from 'react';

const SMALL_IMAGE_SOURCES = {
	documentsAndMedia: 2,
	none: 1,
	url: 3,
	userComputer: 4,
};

const SMALL_IMAGE_SOURCE_OPTIONS = [
	{label: Liferay.Language.get('no-image'), value: SMALL_IMAGE_SOURCES.none},
	{label: Liferay.Language.get('from-url'), value: SMALL_IMAGE_SOURCES.url},
	{
		label: Liferay.Language.get('from-your-computer'),
		value: SMALL_IMAGE_SOURCES.userComputer,
	},
	{
		label: Liferay.Language.get('from-documents-and-media'),
		value: SMALL_IMAGE_SOURCES.documentsAndMedia,
	},
];

export default function SmallImage({
	itemSelectorURL,
	portletNamespace,
	previewURL: initialPreviewURL,
	smallImageId: initialSmallImageId,
	smallImageName: initialSmallImageName,
	smallImageSource: initialSmallImageSource,
	smallImageURL: initialSmallImageURL,
}) {
	const [previewURL, setPreviewURL] = useState(initialPreviewURL);
	const [smallImageId, setSmallImageId] = useState(initialSmallImageId);
	const [smallImageName, setSmallImageName] = useState(initialSmallImageName);
	const [smallImageSource, setSmallImageSource] = useState(
		initialSmallImageSource
	);
	const [smallImageURL, setSmallImageURL] = useState(initialSmallImageURL);

	const fileInputRef = useRef();

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

				setSmallImageId(item.fileEntryId);
				setSmallImageName(item.title);
			},
			selectEventName: `${portletNamespace}selectImage`,
			title: Liferay.Language.get('select-image'),
			url: itemSelectorURL,
		});
	};

	return (
		
			
				
					{Liferay.Language.get('image-source')}
				

				 {
						setSmallImageSource(parseInt(event.target.value, 10));
						setSmallImageName('');
						setPreviewURL('');
					}}
					options={SMALL_IMAGE_SOURCE_OPTIONS}
					value={smallImageSource}
				/>
			

			{previewURL ? (
				
					
				
			) : null}

			{smallImageSource === SMALL_IMAGE_SOURCES.userComputer ? (
				
					
						{Liferay.Language.get('image')}
					

					
						
							
									setSmallImageName(
										event.target.files?.[0]?.name || ''
									)
								}
								ref={fileInputRef}
								type="file"
							/>

							
						

						
							 fileInputRef.current?.click()}
								size="sm"
								title={sub(
									smallImageName
										? Liferay.Language.get('change-x')
										: Liferay.Language.get('select-x'),
									Liferay.Language.get('image')
								)}
							>
								
							
						
					
				
			) : null}

			{smallImageSource === SMALL_IMAGE_SOURCES.url ? (
				
					
						{Liferay.Language.get('image-url')}
					

					
							setSmallImageURL(event.target.value)
						}
						placeholder={Liferay.Language.get('url')}
						sizing="sm"
						value={smallImageURL}
					/>
				
			) : null}

			{smallImageSource === SMALL_IMAGE_SOURCES.documentsAndMedia ? (
				
					
						{Liferay.Language.get('image')}
					

					
						
							

							
						

						
							 openItemSelector()}
								size="sm"
								title={sub(
									smallImageName
										? Liferay.Language.get('change-x')
										: Liferay.Language.get('select-x'),
									Liferay.Language.get('image')
								)}
							>
								
							
						
					
				
			) : null}
		
	);
}