META-INF.resources.js.modals.ImportDataDefinitionModal.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 ClayAlert from '@clayui/alert';
import ClayButton from '@clayui/button';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayModal, {useModal} from '@clayui/modal';
import PropTypes from 'prop-types';
import React, {useEffect, useRef, useState} from 'react';

const ImportDataDefinitionModal = ({
	importDataDefinitionURL,
	nameMaxLength,
	portletNamespace,
}) => {
	const [visible, setVisible] = useState(false);
	const inputFileRef = useRef();
	const [name, setName] = useState('');
	const importDataDefinitionModalComponentId = `${portletNamespace}importDataDefinitionModal`;
	const importDataDefinitionFormId = `${portletNamespace}importDataDefinitionForm`;
	const jsonFileInputId = `${portletNamespace}jsonFile`;
	const nameInputId = `${portletNamespace}name`;
	const [{fileName, inputFile, inputFileValue}, setFile] = useState({
		fileName: '',
		inputFile: null,
		inputFileValue: '',
	});
	const {observer, onClose} = useModal({
		onClose: () => {
			setVisible(false);
			setFile({
				fileName: '',
				inputFile: null,
				inputFileValue: '',
			});
			setName('');
		},
	});

	useEffect(() => {
		Liferay.component(
			importDataDefinitionModalComponentId,
			{
				open: () => {
					setVisible(true);
				},
			},
			{
				destroyOnNavigate: true,
			}
		);

		return () =>
			Liferay.destroyComponent(importDataDefinitionModalComponentId);
	}, [importDataDefinitionModalComponentId, setVisible]);

	return visible ? (
		
			
				{Liferay.Language.get('import-structure')}
			

			
				
					
						{Liferay.Language.get(
							'the-import-process-will-run-in-the-background-and-may-take-a-few-minutes'
						)}
					

					
						
							{Liferay.Language.get('name')}
						

						 setName(event.target.value)}
							type="text"
							value={name}
						/>
					

					
						
							{Liferay.Language.get('json-file')}
						

						
							
								
							

							
								 inputFileRef.current.click()}
								>
									{Liferay.Language.get('select')}
								
							

							{inputFile && (
								
									 {
											setFile({
												fileName: '',
												inputFile: null,
												inputFileValue: '',
											});
										}}
									>
										{Liferay.Language.get('clear')}
									
								
							)}
						
					

					 {
							const [inputFile] = target.files;
							setFile({
								fileName: inputFile.name,
								inputFile,
								inputFileValue: target.value,
							});
						}}
						ref={inputFileRef}
						type="file"
						value={inputFileValue}
					/>
				
			

			
						
							{Liferay.Language.get('cancel')}
						

						
							{Liferay.Language.get('import')}
						
					
				}
			/>
		
	) : null;
};

ImportDataDefinitionModal.propTypes = {
	importDataDefinitionURL: PropTypes.string,
	nameMaxLength: PropTypes.string,
	portletNamespace: PropTypes.string,
};

export default ImportDataDefinitionModal;