73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import {makeStyles, MenuItem, MenuList, Text, tokens} from "@fluentui/react-components";
|
|
import {ArchiveRegular, DocumentBulletListRegular} from "@fluentui/react-icons";
|
|
import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
|
|
import React from "react";
|
|
|
|
const useStyles = makeStyles({
|
|
container: {
|
|
marginTop: '0.5rem',
|
|
maxWidth: 'calc(100vw - 25rem - 1px)',
|
|
},
|
|
row: {
|
|
height: '32px',
|
|
display: 'flex',
|
|
marginLeft: '0.5rem',
|
|
marginRight: '0.5rem',
|
|
},
|
|
item: {
|
|
width: '100%',
|
|
maxWidth: '100%',
|
|
"&:hover": {
|
|
color: tokens.colorNeutralForeground2BrandPressed,
|
|
}
|
|
},
|
|
text: {
|
|
overflow: 'hidden',
|
|
width: 'calc(100vw - 32rem)',
|
|
display: "block",
|
|
}
|
|
})
|
|
|
|
export interface ListComponentProps {
|
|
type: "bucket" | "file"
|
|
list: string[],
|
|
}
|
|
|
|
export function ListComponent(props: ListComponentProps) {
|
|
|
|
const styles = useStyles();
|
|
|
|
async function handleClick(item: string) {
|
|
console.log('[DEBUG] bucket click =', item);
|
|
}
|
|
|
|
function handleRightClick(e: React.MouseEvent<HTMLDivElement>, string: string) {
|
|
e.preventDefault()
|
|
}
|
|
|
|
return <MenuList className={styles.container}>
|
|
<VirtualizerScrollView
|
|
numItems={props.list.length}
|
|
itemSize={32}
|
|
container={{role: 'list', style: {maxHeight: 'calc(100vh - 9rem)'}}}
|
|
>
|
|
{(idx) => {
|
|
return <div
|
|
className={styles.row} key={idx}
|
|
onClick={async () => {
|
|
await handleClick(props.list[idx])
|
|
}}
|
|
onContextMenu={async (e) => {
|
|
handleRightClick(e, props.list[idx])
|
|
}}>
|
|
<MenuItem className={styles.item}
|
|
icon={props.type === 'bucket' ? <ArchiveRegular/> : <DocumentBulletListRegular/>}>
|
|
<Text truncate wrap={false} className={styles.text}>
|
|
{props.list[idx]}
|
|
</Text>
|
|
</MenuItem>
|
|
</div>
|
|
}}
|
|
</VirtualizerScrollView>
|
|
</MenuList>
|
|
} |