META-INF.resources.js.SeparatorFields.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.friendly.url.web

Liferay Friendly URL 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 {ClayButtonWithIcon} from '@clayui/button';
import ClayForm, {ClayInput} from '@clayui/form';
import classNames from 'classnames';
import {useId} from 'frontend-js-components-web';
import {sub} from 'frontend-js-web';
import React, {useRef, useState} from 'react';

type Errors = {
	errorMessage?: string;
	fields?: Record;
};

type Field = {
	defaultValue: string;
	label: string;
	name: string;
	value: string;
};

type FieldsProps = {
	errors: Errors;
	fields: Field[];
	url: string;
};

export default function SeparatorFields({errors, fields, url}: FieldsProps) {
	return (
		<>
			{fields.map((field) => (
				
			))}
		
	);
}

type FieldProps = {
	errors: Errors;
	field: Field;
	url: string;
};

function Field({errors, field, url}: FieldProps) {
	const descriptionId = useId();
	const ref = useRef(null);

	const {defaultValue, label, name} = field;
	const error = errors.fields?.[name];

	const [value, setValue] = useState(field.value);

	return (
		
			
				{label}
			

			{url}

			
				{sub(
					Liferay.Language.get('this-will-work-as-a-suffix-for-x'),
					url
				)}
			

			
				
					
						/
					
				

				
					 setValue(event.target.value)}
						ref={ref}
						value={value}
					/>
				

				{value !== defaultValue ? (
					
						 {
								setValue(defaultValue);

								ref.current?.focus();
							}}
							symbol="restore"
							title={Liferay.Language.get(
								'reset-to-default-value'
							)}
						/>
					
				) : null}
			

			{error ? (
				
					
						

						{error}
					
				
			) : null}
		
	);
}