META-INF.resources.js.components.CheckboxMultiSelect.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.frontend.data.set.admin.web

Liferay Frontend Data Set Admin Web

There is a newer version: 1.0.6

/**
 * 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 {ClayCheckbox} from '@clayui/form';
import ClayMultiSelect from '@clayui/multi-select';
import React from 'react';

type TItem = {
	key?: string;
	label?: string;
	value?: string;
	[propName: string]: any;
};

type TItems = Array;

interface IProps extends React.ComponentProps {
	items: TItems;
	onItemsChange: Exclude<
		React.ComponentProps['onItemsChange'],
		undefined
	>;
	sourceItems: TItems;
	value: Exclude<
		React.ComponentProps['value'],
		undefined
	>;
}

const isChecked = (items: TItems, item: TItem) => {
	return !!items.find((val) => val.value === item.value);
};

function CheckboxMultiSelect({
	items,
	onItemsChange,
	sourceItems,
	value,
	...otherProps
}: IProps) {
	const toggleItemChecked = (item: TItem) => {
		if (!isChecked(items, item)) {
			onItemsChange([
				...items,
				sourceItems.find(
					(entry) => item.value === entry.value
				) as TItems[0],
			]);
		}
		else {
			onItemsChange(items.filter((entry) => item.value !== entry.value));
		}
	};

	return (
		
			{(item: any) => (
				 {
						event.preventDefault();

						toggleItemChecked(item);
					}}
					textValue={item.label}
				>
					
						
							 {
									event.stopPropagation();

									toggleItemChecked(item);
								}}
							/>
						

						
							{item.label}
						
					
				
			)}
		
	);
}

export default CheckboxMultiSelect;