META-INF.resources.js.components.modals.CreationModal.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.layout.js.components.web
Liferay Layout JS Components 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 {useIsMounted} from '@clayui/core/lib/hooks';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import ClayModal, {useModal} from '@clayui/modal';
import {fetch, navigate, sub} from 'frontend-js-web';
import React, {useRef, useState} from 'react';

interface Props {
	buttonLabel: string;
	descriptionInputValue: string;
	formSubmitURL: string;
	heading: string;
	nameInputValue: string;
	onCloseModal: () => void;
	portletNamespace: string;
}

function CreationModal({
	buttonLabel = Liferay.Language.get('save'),
	descriptionInputValue: initialDescriptionInputValue,
	formSubmitURL,
	heading,
	nameInputValue: initialNameInputValue,
	onCloseModal,
	portletNamespace,
}: Props) {
	const [descriptionInputValue, setDescriptionInputValue] = useState(
		initialDescriptionInputValue || ''
	);
	const [error, setError] = useState('');
	const isMounted = useIsMounted();
	const [loading, setLoading] = useState(false);
	const [nameInputError, setNameInputError] = useState('');
	const [nameInputValue, setNameInputValue] = useState(
		initialNameInputValue || ''
	);

	const {observer, onClose} = useModal({
		onClose: () => {
			onCloseModal();
		},
	});

	const formRef = useRef();
	const handleSubmit = (event: any) => {
		event.preventDefault();

		if (!nameInputValue) {
			setError(
				sub(
					Liferay.Language.get('the-x-field-is-empty'),
					Liferay.Language.get('name')
				)
			);
			setNameInputError(Liferay.Language.get('this-field-is-required'));

			return;
		}

		if (!formRef.current) {
			return;
		}

		const formData = new FormData(formRef.current);

		fetch(formSubmitURL, {
			body: formData,
			method: 'POST',
		})
			.then((response) => response.json())
			.then((responseContent) => {
				if (isMounted()) {
					if (responseContent.error) {
						setLoading(false);

						setNameInputError(responseContent.error);
					}
					else {
						onClose();

						if (responseContent.redirectURL) {
							navigate(responseContent.redirectURL);
						}
					}
				}
			})
			.catch((error) => {
				setNameInputError(error.message);
			});
	};

	return (
		
			{heading}

			
				
					{error && (
						
							{error}
						
					)}

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

							
								
							
						

						 {
								if (event.target.value) {
									setError('');
									setNameInputError('');
								}
								else {
									setNameInputError(
										Liferay.Language.get(
											'this-field-is-required'
										)
									);
								}

								setNameInputValue(event.target.value);
							}}
							required
							value={nameInputValue}
						/>

						{nameInputError && (
							
								{nameInputError}
							
						)}
					

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

					
							setDescriptionInputValue(event.target.value)
						}
						value={descriptionInputValue}
					/>
				
			

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

						
							{loading && (
								
							)}

							{buttonLabel}
						
					
				}
			/>
		
	);
}

export default CreationModal;