META-INF.resources.js.modals.ImportDataDefinitionModal.js Maven / Gradle / Ivy

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.177
/**
 * 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 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;