META-INF.resources.js.ddm_template_editor.components.ElementsSidebarPanel.js Maven / Gradle / Ivy

Go to download

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

Liferay Template Web

There is a newer version: 1.0.95

/**
 * 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 ClayEmptyState from '@clayui/empty-state';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, {useContext, useMemo, useState} from 'react';

import {AppContext} from './AppContext';
import {ButtonList} from './ButtonList';
import {CollapsableButtonList} from './CollapsableButtonList';

const SEARCH_INPUT_ID = 'ddm_template_editor_Sidebar-SearchInputId';

export function ElementsSidebarPanel({className}) {
	const {
		inputChannel,
		templateVariableGroups: initialTemplateVariableGroups,
	} = useContext(AppContext);

	const templateVariableGroups = useMemo(
		() =>
			initialTemplateVariableGroups.map((group) => ({
				...group,
				items: group.items.map((item) =>
					item.repeatable ? {...item, label: `${item.label}*`} : item
				),
			})),
		[initialTemplateVariableGroups]
	);

	const onButtonClick = (item) => inputChannel.sendData(item.content);

	const [searchValue, setSearchValue] = useState('');

	const filteredItems = useMemo(() => {
		const slugify = (str) => str.toLowerCase().replace(/\s/g, '');
		const query = slugify(searchValue);

		if (query) {
			return templateVariableGroups
				.map(({items}) =>
					items.filter((item) => slugify(item.label).includes(query))
				)
				.reduce((a, b) => a.concat(b), []);
		}
		else {
			return null;
		}
	}, [searchValue, templateVariableGroups]);

	return (
		
			
				{Liferay.Language.get('elements')}
			

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

				
					
						
								setSearchValue(event.target.value)
							}
							placeholder={`${Liferay.Language.get('search')}...`}
							value={searchValue}
						/>

						
							{searchValue ? (
								 setSearchValue('')}
									symbol={searchValue ? 'times' : 'search'}
									title={Liferay.Language.get('clear')}
								/>
							) : (
								
							)}
						
					
				
			

			{filteredItems ? (
				filteredItems.length !== 0 ? (
					
				) : (
					
				)
			) : (
				templateVariableGroups.map(({items, label}) => (
					
				))
			)}
		
	);
}

ElementsSidebarPanel.propTypes = {
	className: PropTypes.string,
};