META-INF.resources.js.components.ObjectField.Tabs.Advanced.DefaultValueContainer.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.object.web
Liferay Object 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
 */

/* eslint-disable react/jsx-curly-brace-presence */

import ClayAlert from '@clayui/alert';
import ClayButton from '@clayui/button';
import ClayForm from '@clayui/form';
import {
	ExpressionBuilder,
	SidebarCategory,
	Toggle,
} from '@liferay/object-js-components-web';
import classNames from 'classnames';
import {
	ILearnResourceContext,
	LearnMessage,
	LearnResourcesContext,
} from 'frontend-js-components-web';
import React, {useEffect, useState} from 'react';

import {
	getDefaultValueFieldSettings,
	getUpdatedDefaultValueFieldSettings,
	getUpdatedDefaultValueType,
} from '../../../../utils/defaultValues';
import {removeFieldSettings} from '../../../../utils/fieldSettings';
import ListTypeDefaultValueSelect from '../../DefaultValueFields/ListTypeDefaultValueSelect';
import {ObjectFieldErrors} from '../../ObjectFieldFormBase';
interface DefaultValueContainerProps {
	creationLanguageId: Liferay.Language.Locale;
	errors: ObjectFieldErrors;
	learnResources: ILearnResourceContext;
	modelBuilder?: boolean;
	onSubmit?: (values?: Partial) => void;
	setValues: (value: Partial) => void;
	sidebarElements: SidebarCategory[];
	values: Partial;
}

export interface InputAsValueFieldComponentProps {
	creationLanguageId: Liferay.Language.Locale;
	defaultValue?: ObjectFieldSettingValue;
	error?: string;
	label: string;
	onSubmit?: (values?: Partial) => void;
	placeholder?: string;
	required?: boolean;
	setValues: (values: Partial) => void;
	values: Partial;
}

type InputAsValueFieldComponents = {
	[key in ObjectFieldBusinessTypeName]: React.FC;
};

const InputAsValueFieldComponents: Partial = {
	Picklist: ListTypeDefaultValueSelect,
};

export function DefaultValueContainer({
	creationLanguageId,
	errors,
	learnResources,
	modelBuilder = false,
	onSubmit,
	setValues,
	sidebarElements,
	values,
}: DefaultValueContainerProps) {
	const {defaultValue, defaultValueType} =
		getDefaultValueFieldSettings(values);

	const [defaultValueToggleEnabled, setDefaultValueToggleEnabled] = useState(
		!!defaultValueType && !!defaultValue
	);

	const [defaultValueTypeSelection, setDefaultValueTypeSelection] = useState(
		defaultValueType || 'inputAsValue'
	);

	useEffect(() => {
		if (values.state) {
			setDefaultValueToggleEnabled(true);
			setDefaultValueTypeSelection('inputAsValue');
		}

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [values]);

	const handleToggle = (toggled: boolean) => {
		if (!toggled) {
			setValues({
				objectFieldSettings: removeFieldSettings(
					['defaultValueType', 'defaultValue'],
					values
				),
			});

			if (onSubmit) {
				onSubmit({
					...values,
					objectFieldSettings: removeFieldSettings(
						['defaultValueType', 'defaultValue'],
						values
					),
				});
			}
		}
		else {
			setValues({
				objectFieldSettings: getUpdatedDefaultValueType(
					values,
					'inputAsValue'
				),
			});
		}
		setDefaultValueToggleEnabled(toggled);
	};

	const InputAsValueFieldComponent =
		InputAsValueFieldComponents[
			values.businessType as keyof InputAsValueFieldComponents
		];

	return (
		
			{!values.state && (
				
					{Liferay.Language.get(
						'enter-a-value-or-use-expressions-to-set-default-values'
					)}
					 
					
						
					
				
			)}

			{!values.state && (
				
					 {
							handleToggle(toggled);
						}}
						toggled={defaultValueToggleEnabled}
					/>
				
			)}

			{defaultValueToggleEnabled && !values.state && (
				
					 {
							setDefaultValueTypeSelection('inputAsValue');
							setValues({
								objectFieldSettings: getUpdatedDefaultValueType(
									values,
									'inputAsValue'
								),
							});
						}}
						size="sm"
					>
						{Liferay.Language.get('input-as-value')}
					

					 {
							setDefaultValueTypeSelection('expressionBuilder');
							setValues({
								objectFieldSettings: getUpdatedDefaultValueType(
									values,
									'expressionBuilder'
								),
							});
						}}
						size="sm"
					>
						{Liferay.Language.get('expression-builder')}
					
				
			)}

			{defaultValueToggleEnabled &&
				defaultValueTypeSelection === 'inputAsValue' &&
				InputAsValueFieldComponent && (
					
				)}

			{defaultValueToggleEnabled &&
				defaultValueTypeSelection === 'expressionBuilder' && (
					 {
							event.stopPropagation();

							if (onSubmit) {
								onSubmit();
							}
						}}
						onChange={({target: {value}}) => {
							setValues({
								objectFieldSettings:
									getUpdatedDefaultValueFieldSettings(
										values,
										value,
										'expressionBuilder'
									),
							});
						}}
						onOpenModal={() => {
							const parentWindow = Liferay.Util.getOpener();

							parentWindow.Liferay.fire(
								'openExpressionBuilderModal',
								{
									eventSidebarElements: sidebarElements,
									onSave: (script: string) => {
										setValues({
											objectFieldSettings:
												getUpdatedDefaultValueFieldSettings(
													values,
													script,
													'expressionBuilder'
												),
										});

										if (onSubmit) {
											onSubmit({
												...values,
												objectFieldSettings:
													getUpdatedDefaultValueFieldSettings(
														values,
														script,
														'expressionBuilder'
													),
											});
										}
									},
									placeholder: `<#-- ${Liferay.Language.get(
										'create-a-condition-to-set-the-default-value'
									)} -->`,
									required: false,
									source:
										defaultValueType ===
											'expressionBuilder' && defaultValue
											? defaultValue
											: '',
									validateExpressionURL: '',
								}
							);
						}}
						placeholder={Liferay.Language.get(
							'create-an-expression'
						)}
						required
						value={
							defaultValueType === 'expressionBuilder'
								? (defaultValue as string)
								: ''
						}
					/>
				)}
		
	);
}