META-INF.resources.js.components.DiagramHeader.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.commerce.shop.by.diagram.web

Liferay Commerce Shop by Diagram 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 ClaySlider from '@clayui/slider';
import classNames from 'classnames';
import {ManagementToolbar} from 'frontend-js-components-web';
import {debounce} from 'frontend-js-web';
import React, {useEffect, useState} from 'react';

import {PINS_RADIUS} from '../utilities/constants';

function getLabel(pinsRadius) {
	return Object.values(PINS_RADIUS.OPTIONS).reduce(
		(label, definition) =>
			definition.value === pinsRadius ? definition.label : label,
		Liferay.Language.get('custom')
	);
}

function updateLabel(pinsRadius, updateButtonLabel) {
	const label = getLabel(pinsRadius);

	updateButtonLabel(label);
}

const debouncedUpdateLabel = debounce(updateLabel, 500);

function DiagramHeader({
	dropdownActive,
	pinsRadius,
	setDropdownActive,
	updatePinsRadius,
}) {
	const [buttonLabel, setButtonLabel] = useState(getLabel(pinsRadius));

	const smallActive = pinsRadius === PINS_RADIUS.OPTIONS.small.value;
	const mediumActive = pinsRadius === PINS_RADIUS.OPTIONS.medium.value;
	const largeActive = pinsRadius === PINS_RADIUS.OPTIONS.large.value;

	useEffect(() => {
		debouncedUpdateLabel(pinsRadius, setButtonLabel);
	}, [pinsRadius]);

	return (
		
			
				
					
						{Liferay.Language.get('pin-size')}
					

					
								{buttonLabel}
							
						}
					>
						
							
								
										updatePinsRadius(
											PINS_RADIUS.OPTIONS.small.value
										)
									}
								>
									{PINS_RADIUS.OPTIONS.small.label}
								

								
										updatePinsRadius(
											PINS_RADIUS.OPTIONS.medium.value
										)
									}
								>
									{PINS_RADIUS.OPTIONS.medium.label}
								

								
										updatePinsRadius(
											PINS_RADIUS.OPTIONS.large.value
										)
									}
								>
									{PINS_RADIUS.OPTIONS.large.label}
								

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

										
											
										
									
								
							
						
					
				
			
		
	);
}

export default DiagramHeader;