@eightshift/frontend-libs/scripts/components/repeater/sortable-item.js

A collection of useful frontend utility modules. powered by Eightshift

import { __ } from '@wordpress/i18n';
import { Button as GutenbergButton } from '@wordpress/components';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { RichLabel, Menu, MenuItem, Expandable } from '@eightshift/ui-components';
import { hamburgerMenu, reorderGrabberV, trash } from '@eightshift/ui-components/icons';
import { clsx } from '@eightshift/ui-components/utilities';

export const SortableItem = (props) => {
	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.id });

	const { icon, title, subtitle, onRemove, isOnly, noReordering, hideRemove, additionalMenuOptions, preIcon, additionalLabelContainerClass } = props;

	const style = {
		transform: CSS.Transform.toString(transform),
		transition: transition,
	};

	const additionalTriggerProps = noReordering
		? {
				disabled: 'disabled',
			}
		: {
				...attributes,
				...listeners,
			};

	const itemLabel = (
		<RichLabel
			icon={icon}
			label={title}
			subtitle={subtitle}
		/>
	);

	const expandDisabled = Array.isArray(props?.children) ? props?.children?.filter(Boolean)?.length < 1 : !props?.children;

	return (
		<div
			ref={setNodeRef}
			style={style}
		>
			<Expandable
				icon={preIcon}
				label={itemLabel}
				disabled={expandDisabled}
				className={additionalLabelContainerClass}
				actions={
					<div className='es:flex es:items-center'>
						<GutenbergButton
							{...additionalTriggerProps}
							className={clsx('[&>svg]:es:size-5 es:min-w-5 es:w-5', isOnly ? 'es:hidden' : 'es:opacity-50')}
							size='small'
							icon={reorderGrabberV}
							disabled={noReordering}
						/>

						<Menu
							hidden={!(!hideRemove || additionalMenuOptions)}
							triggerIcon={hamburgerMenu}
							triggerProps={{ size: 'small', type: 'ghost' }}
						>
							{!hideRemove && (
								<MenuItem
									icon={trash}
									onClick={onRemove}
								>
									{__('Remove', 'eightshift-frontend-libs')}
								</MenuItem>
							)}

							{additionalMenuOptions}
						</Menu>
					</div>
				}
			>
				{props.children}
			</Expandable>
		</div>
	);
};