META-INF.resources.js.AddFragmentModal.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 {ClayCardWithInfo} from '@clayui/card';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import {useModal} from '@clayui/modal';
import classNames from 'classnames';
import {useId} from 'frontend-js-components-web';
import PropTypes from 'prop-types';
import React, {useState} from 'react';

import {MultiStepFormModal, MultiStepFormModalStep} from './MultiStepFormModal';
import {FieldTypeSelector} from './fragment-editor/FieldTypeSelector';

function getFieldName(namespace, fieldName) {
	return namespace.concat(fieldName);
}

export default function AddFragmentModal({
	addFragmentEntryURL,
	fieldTypes: initialFieldTypes,
	fragmentTypes,
	namespace,
}) {
	const [name, setName] = useState('');
	const [type, setType] = useState(fragmentTypes[0]);
	const [nameError, setNameError] = useState(null);
	const [selectedFieldTypes, setSelectedFieldTypes] = useState([]);
	const selectFragmentText = useId();

	const [visible, setVisible] = useState(true);
	const {observer, onClose} = useModal({
		onClose: () => setVisible(false),
	});

	const fieldTypes = initialFieldTypes.filter(
		(fieldType) =>
			fieldType.key !== 'stepper' || Liferay.FeatureFlags['LPD-10727']
	);

	return (
		visible && (
			
				
					
						{Liferay.Language.get('select-fragment-type')}
					

					
						{fragmentTypes.map((fragmentType) => (
							
						))}
					

					
				

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

							
						

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

						{nameError && (
							
								
									{nameError}
								
							
						)}
					

					{type.name === 'form' && (
						
					)}
				
			
		)
	);
}

AddFragmentModal.propTypes = {
	addFragmentEntryURL: PropTypes.string.isRequired,
	fieldTypes: PropTypes.array.isRequired,
	fragmentTypes: PropTypes.array.isRequired,
	namespace: PropTypes.string.isRequired,
};

function FragmentTypeCard({active, fragmentType, onSelect}) {
	const {description, name, symbol, title} = fragmentType;

	return (
		 onSelect(fragmentType)}
			radioProps={{
				'aria-label': title,
				'name': 'fragments',
				'value': name,
			}}
			selectableType="radio"
			selected={active}
			stickerProps={null}
			symbol={symbol}
			title={title}
			truncate={false}
		/>
	);
}

FragmentTypeCard.propTypes = {
	active: PropTypes.bool.isRequired,
	fragmentType: PropTypes.object.isRequired,
	onSelect: PropTypes.func.isRequired,
};