META-INF.resources.js.modals.ImportAndOverrideDataDefinitionModal.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
The newest version!
/**
 * 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 ImportAndOverrideDataDefinitionModal = ({portletNamespace}) => {
	const [visible, setVisible] = useState(false);
	const [importAndOverrideStructureURL, setImportAndOverrideStructureURL] =
		useState('');
	const inputFileRef = useRef();
	const importAndOverrideDataDefinitionModalComponentId = `${portletNamespace}importAndOverrideDataDefinitionModal`;
	const importAndOverrideDataDefinitionFormId = `${portletNamespace}importAndOverrideDataDefinitionForm`;
	const jsonFileInputId = `${portletNamespace}jsonFile`;
	const [{fileName, inputFile, inputFileValue}, setFile] = useState({
		fileName: '',
		inputFile: null,
		inputFileValue: '',
	});
	const {observer, onClose} = useModal({
		onClose: () => {
			setVisible(false);
			setFile({
				fileName: '',
				inputFile: null,
				inputFileValue: '',
			});
		},
	});

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

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

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

			
				
					
						{Liferay.Language.get(
							'there-are-content-references-to-this-structure.-you-may-lose-data-if-a-field-name-is-renamed-or-removed'
						)}
					

					
						
							{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;
};

ImportAndOverrideDataDefinitionModal.propTypes = {
	importAndOverrideDDMStructureURL: PropTypes.string,
	portletNamespace: PropTypes.string,
};

export default ImportAndOverrideDataDefinitionModal;