23 lines
1.6 KiB
TypeScript
23 lines
1.6 KiB
TypeScript
import type { DragEvent } from 'react';
|
|
import type { FolderInfo } from '@/core-bridge/types';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import styles from './FileExplorer.module.css';
|
|
|
|
interface Props {
|
|
folder: FolderInfo; selected: boolean; dropping: boolean; enabled: boolean;
|
|
onSelect: () => void; onOpen: () => void; onRename: () => void; onMenu: (x: number, y: number) => void;
|
|
drop: { onDragOver: (e: DragEvent) => void; onDragLeave: (e: DragEvent) => void; onDrop: (e: DragEvent) => void };
|
|
}
|
|
export function ExplorerFolderRow(props: Props) {
|
|
return <tr className={`${props.selected ? styles.selected : ''} ${props.dropping ? styles.dropTarget : ''}`} {...props.drop} data-drop-folder={props.folder.id}
|
|
onClick={props.onSelect} onDoubleClick={props.onOpen} onContextMenu={(event) => { event.preventDefault(); event.stopPropagation(); props.onMenu(event.clientX, event.clientY); }}>
|
|
<td /><td><button className={styles.name} type="button" onKeyDown={(event) => {
|
|
if (event.key === 'Enter') { event.preventDefault(); event.stopPropagation(); props.onOpen(); }
|
|
if (event.key === 'F2' && props.enabled) { event.preventDefault(); props.onRename(); }
|
|
}}><Icon name="folder" size={18} /><span>{props.folder.name}</span></button></td>
|
|
<td className={styles.numeric}>文件夹</td><td className={styles.date}>—</td>
|
|
<td><Button variant="ghost" icon="more" label={`文件夹操作 ${props.folder.name}`} onClick={(event) => { event.stopPropagation(); const rect = event.currentTarget.getBoundingClientRect(); props.onMenu(rect.right, rect.bottom); }} /></td>
|
|
</tr>;
|
|
}
|