74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { Box, Divider, Flex } from "@mantine/core";
|
|
import { MentionRow } from "./MentionRow";
|
|
import React, { useState } from "react";
|
|
import { useHotkeys } from "@mantine/hooks";
|
|
|
|
export interface Mention {
|
|
username: string;
|
|
title: string;
|
|
publicKey: string;
|
|
}
|
|
|
|
interface MentionListProps {
|
|
mentions: Mention[];
|
|
style?: React.CSSProperties;
|
|
onSelectMention?: (mention: Mention) => void;
|
|
}
|
|
|
|
export function MentionList(props: MentionListProps) {
|
|
const colors = useRosettaColors();
|
|
const [selectedIndex, setSelectedIndex] = useState(-1);
|
|
|
|
useHotkeys([
|
|
['ArrowDown', () => {
|
|
if(props.mentions.length === 1){
|
|
//setSelectedIndex(0);
|
|
return;
|
|
}
|
|
setSelectedIndex((prev) => (prev + 1) % props.mentions.length);
|
|
}],
|
|
['ArrowUp', () => {
|
|
if(props.mentions.length === 1){
|
|
//setSelectedIndex(0);
|
|
return;
|
|
}
|
|
setSelectedIndex((prev) => (prev - 1 + props.mentions.length) % props.mentions.length);
|
|
}],
|
|
['Enter', () => {
|
|
if(props.mentions.length === 1){
|
|
if(props.onSelectMention){
|
|
props.onSelectMention(props.mentions[0]);
|
|
}
|
|
return;
|
|
}
|
|
if(selectedIndex >= 0 && selectedIndex < props.mentions.length) {
|
|
const mention = props.mentions[selectedIndex];
|
|
if(props.onSelectMention){
|
|
props.onSelectMention(mention);
|
|
}
|
|
}
|
|
}]
|
|
], [], true);
|
|
|
|
const onClick = (mention: Mention) => {
|
|
if(props.onSelectMention){
|
|
props.onSelectMention(mention);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Box style={props.style} bg={colors.mainColor}>
|
|
<Flex direction={'column'}>
|
|
{props.mentions.map((mention, index) => (
|
|
<Box onClick={() => onClick(mention)} key={mention.publicKey}>
|
|
<MentionRow selected={selectedIndex === index} {...mention}></MentionRow>
|
|
{index < props.mentions.length - 1 &&
|
|
<Divider color={colors.borderColor}></Divider>
|
|
}
|
|
</Box>
|
|
))}
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
} |