META-INF.resources.js.components.criteria_builder.Conjunction.es.js Maven / Gradle / Ivy

Go to download

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

Liferay Segments 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 ClayDropdown from '@clayui/drop-down';
import ClayIcon from '@clayui/icon';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';

import {SUPPORTED_CONJUNCTIONS} from '../../utils/constants';

function Conjunction({className, conjunctionName, editing, onSelect}) {
	const [active, setActive] = useState(false);

	const classnames = classNames(
		{
			'conjunction-button py-2': editing,
			'conjunction-label': !editing,
		},
		className
	);

	const [activeLabel, setActiveLabel] = useState(
		() =>
			SUPPORTED_CONJUNCTIONS.find(
				(conjunction) =>
					conjunction.name.toLowerCase() ===
					conjunctionName.toLowerCase()
			)?.label
	);

	useEffect(() => {
		const selectedConjunction = SUPPORTED_CONJUNCTIONS.find(
			(conjunction) =>
				conjunction.name.toLowerCase() === conjunctionName.toLowerCase()
		);

		setActiveLabel(selectedConjunction.label);
	}, [conjunctionName]);

	function _handleItemClick(conjunctionName) {
		setActive(false);

		onSelect(conjunctionName);
	}

	return editing ? (
		
					{activeLabel}

					
				
			}
		>
			
				{SUPPORTED_CONJUNCTIONS.map((conjunction) => {
					return (
						 _handleItemClick(conjunction.name)}
						>
							{conjunction.label}
						
					);
				})}
			
		
	) : (
		{activeLabel}
	);
}

Conjunction.propTypes = {
	className: PropTypes.string,
	conjunctionName: PropTypes.string.isRequired,
	editing: PropTypes.bool.isRequired,
	onSelect: PropTypes.func.isRequired,
};

export default Conjunction;