META-INF.resources.js.style-book-editor.Sidebar.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.style.book.web
Liferay Style Book 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 ClayAlert from '@clayui/alert';
import ClayButton from '@clayui/button';
import ClayDropDown, {Align} from '@clayui/drop-down';
import React, {useEffect, useMemo, useRef, useState} from 'react';

import FrontendTokenSet from './FrontendTokenSet';
import {config} from './config';
import {useFrontendTokensValues} from './contexts/StyleBookEditorContext';

export default React.memo(function Sidebar() {
	const sidebarRef = useRef();

	return (
		
			
				

				{config.frontendTokenDefinition.frontendTokenCategories ? (
					<>
						
						
					
				) : (
					
						{Liferay.Language.get(
							'this-theme-does-not-include-a-token-definition'
						)}
					
				)}
			
		
	);
});

function UpdateStyle({sidebarRef}) {
	const frontendTokensValues = useFrontendTokensValues();

	useEffect(() => {
		if (sidebarRef.current) {
			sidebarRef.current.removeAttribute('style');

			Object.values(frontendTokensValues).forEach(
				({cssVariableMapping, value}) => {
					sidebarRef.current.style.setProperty(
						`--${cssVariableMapping}`,
						value
					);
				}
			);
		}
	}, [frontendTokensValues, sidebarRef]);

	return null;
}

function ThemeInformation() {
	return (
		
			
				{IsValidFrontendTokenDefinition() ? (
					config.isPrivateLayoutsEnabled ? (
						Liferay.Language.get(
							'this-token-definition-belongs-to-the-theme-set-for-public-pages'
						)
					) : (
						Liferay.Language.get(
							'this-token-definition-belongs-to-the-theme-set-for-pages'
						)
					)
				) : (
					
						{Liferay.Language.get(
							'the-current-theme-does-not-support-editing-style-book-values'
						)}
					
				)}
			

			
				
					{`${Liferay.Language.get('theme')}: `}
				

				{config.themeName}
			
		
	);
}

function IsValidFrontendTokenDefinition() {
	const frontendTokensValues = useFrontendTokensValues();
	const frontendThemeValues = config.frontendTokens;

	return Object.keys(frontendTokensValues).every(
		(tokenValue) => frontendThemeValues[tokenValue]
	);
}

function FrontendTokenCategories() {
	const frontendTokensValues = useFrontendTokensValues();

	const frontendTokenCategories =
		config.frontendTokenDefinition.frontendTokenCategories;
	const [active, setActive] = useState(false);
	const [selectedCategory, setSelectedCategory] = useState(
		frontendTokenCategories[0]
	);

	const tokenValues = useMemo(() => {
		const nextTokenValues = {...config.frontendTokens};

		for (const [name, {value}] of Object.entries(frontendTokensValues)) {
			nextTokenValues[name] = {
				...nextTokenValues[name],
				value: value || nextTokenValues[name].defaultValue,
			};
		}

		return nextTokenValues;
	}, [frontendTokensValues]);

	return (
		<>
			{selectedCategory && (
				
							{selectedCategory.label}
						
					}
				>
					
						{frontendTokenCategories.map(
							(frontendTokenCategory, index) => (
								 {
										setSelectedCategory(
											frontendTokenCategory
										);
										setActive(false);
									}}
								>
									{frontendTokenCategory.label}
								
							)
						)}
					
				
			)}

			{selectedCategory?.frontendTokenSets.map(
				({frontendTokens, label, name}, index) => (
					
				)
			)}
		
	);
}