import { HTMLProps } from 'react'; import { InteractionMode, InteractionManager, TreeEnvironmentContextProps, TreeItem, TreeItemActions, TreeItemRenderFlags, } from '../types'; import { isControlKey } from '../isControlKey'; export class ClickItemToExpandInteractionManager implements InteractionManager { public readonly mode = InteractionMode.ClickItemToExpand; private environment: TreeEnvironmentContextProps; constructor(environment: TreeEnvironmentContextProps) { this.environment = environment; } createInteractiveElementProps( item: TreeItem, treeId: string, actions: TreeItemActions, renderFlags: TreeItemRenderFlags ): HTMLProps { return { onClick: e => { const isSpacebarEvent = e.detail === 0; actions.focusItem(); if (e.shiftKey && !isSpacebarEvent) { actions.selectUpTo(!isControlKey(e)); } else if (isControlKey(e) && !isSpacebarEvent) { if (renderFlags.isSelected) { actions.unselectItem(); } else { actions.addToSelectedItems(); } } else { if (item.isFolder) { actions.toggleExpandedState(); } actions.selectItem(); if ( !item.isFolder || this.environment.canInvokePrimaryActionOnItemContainer ) { actions.primaryAction(); } } }, onFocus: () => { actions.focusItem(); }, onDragStart: e => { e.dataTransfer.dropEffect = 'move'; actions.startDragging(); }, onDragOver: e => { e.preventDefault(); // Allow drop }, draggable: renderFlags.canDrag && !renderFlags.isRenaming, tabIndex: !renderFlags.isRenaming ? renderFlags.isFocused ? 0 : -1 : undefined, }; } }