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

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.fragment.web
Liferay Fragment 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 ClayButton from '@clayui/button';
import ClayForm from '@clayui/form';
import ClayModal from '@clayui/modal';
import {fetch, navigate, openToast} from 'frontend-js-web';
import PropTypes from 'prop-types';
import React, {useRef, useState} from 'react';

function isValid(element) {
	return Array.from(element.querySelectorAll('*')).every(
		(child) => !child.reportValidity || child.reportValidity()
	);
}

export function MultiStepFormModal({
	children,
	className,
	observer,
	onClose,
	onFormError,
	size,
	submitLabel = Liferay.Language.get('submit'),
	submitURL,
	title,
}) {
	const [currentStepIndex, setCurrentStepIndex] = useState(0);
	const [currentStepElement, setCurrentStepElement] = useState(null);

	const maxSteps = React.Children.count(children);

	const isPreviousButtonEnabled = currentStepIndex > 0;
	const isNextButtonEnabled = currentStepIndex < maxSteps - 1;

	const formRef = useRef(null);

	const handlePreviousStepButtonClick = () => {
		setCurrentStepIndex((previousIndex) => previousIndex - 1);
	};

	const handleNextStepButtonClick = () => {
		if (isValid(currentStepElement)) {
			setCurrentStepIndex((previousIndex) => previousIndex + 1);
		}
	};

	const handleFormSubmit = (event) => {
		event.preventDefault();

		if (!isValid(currentStepElement)) {
			return;
		}

		const formData = new FormData(formRef.current);

		fetch(submitURL, {
			body: formData,
			method: 'POST',
		})
			.then((response) => response.json())
			.then(({error, redirectURL}) => {
				if (error) {
					onFormError(error);
				}
				if (redirectURL) {
					navigate(redirectURL);
				}
			})
			.catch(() => {
				openToast({
					message: Liferay.Language.get(
						'an-unexpected-error-occurred'
					),
					type: 'danger',
				});
			});
	};

	const mapChild = (child, index) => {
		const isActive = index === currentStepIndex;

		return React.cloneElement(child, {
			isActive,
			ref: isActive ? setCurrentStepElement : () => {},
		});
	};

	return (
		
			{title && {title}}

			
				
					{React.Children.map(children, mapChild)}
				
			

			
						
							{isPreviousButtonEnabled
								? Liferay.Language.get('previous')
								: Liferay.Language.get('cancel')}
						

						
							{isNextButtonEnabled
								? Liferay.Language.get('next')
								: submitLabel}
						
					
				}
			/>
		
	);
}

MultiStepFormModal.propTypes = {
	className: PropTypes.string,
	observer: PropTypes.object.isRequired,
	onClose: PropTypes.func.isRequired,
	size: PropTypes.string,
	submitLabel: PropTypes.string,
	submitURL: PropTypes.string.isRequired,
	title: PropTypes.string,
};

export const MultiStepFormModalStep = React.forwardRef(
	({children, isActive}, ref) => {
		return (
			
				{children}
			
		);
	}
);

MultiStepFormModalStep.propTypes = {
	isActive: PropTypes.bool,
};