1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
joplin/packages/app-desktop/gui/Sidebar/listItemComponents/ListItemWrapper.tsx

67 lines
1.7 KiB
TypeScript
Raw Normal View History

import { ModelType } from '@joplin/lib/BaseModel';
import * as React from 'react';
import { useMemo } from 'react';
export type ListItemRef = React.Ref<HTMLDivElement>;
interface Props {
containerRef: ListItemRef;
selected: boolean;
itemIndex: number;
itemCount: number;
expanded?: boolean|undefined;
depth: number;
className?: string;
highlightOnHover: boolean;
children: (React.ReactNode[])|React.ReactNode;
onContextMenu?: React.MouseEventHandler;
onDrag?: React.DragEventHandler;
onDragStart?: React.DragEventHandler;
onDragOver?: React.DragEventHandler;
onDrop?: React.DragEventHandler;
draggable?: boolean;
'data-folder-id'?: string;
'data-id'?: string;
'data-type'?: ModelType;
}
const ListItemWrapper: React.FC<Props> = props => {
const style = useMemo(() => {
return {
'--depth': props.depth,
} as React.CSSProperties;
}, [props.depth]);
return (
<div
ref={props.containerRef}
aria-posinset={props.itemIndex + 1}
aria-setsize={props.itemCount}
aria-selected={props.selected}
aria-expanded={props.expanded}
// aria-level is 1-based, where depth is zero-based
aria-level={props.depth + 1}
tabIndex={props.selected ? 0 : -1}
onContextMenu={props.onContextMenu}
onDrag={props.onDrag}
onDragStart={props.onDragStart}
onDragOver={props.onDragOver}
onDrop={props.onDrop}
draggable={props.draggable}
role='treeitem'
className={`list-item-wrapper ${props.highlightOnHover ? '-highlight-on-hover' : ''} ${props.selected ? '-selected' : ''} ${props.className ?? ''}`}
style={style}
data-folder-id={props['data-folder-id']}
data-id={props['data-id']}
data-type={props['data-type']}
>
{props.children}
</div>
);
};
export default ListItemWrapper;