forked from Archives/Athou_commafeed
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { Box, createStyles } from "@mantine/core"
|
|
import { FeedFavicon } from "components/content/FeedFavicon"
|
|
import React, { ReactNode } from "react"
|
|
import { UnreadCount } from "./UnreadCount"
|
|
|
|
interface TreeNodeProps {
|
|
id: string
|
|
name: ReactNode
|
|
icon: ReactNode
|
|
unread: number
|
|
selected: boolean
|
|
expanded?: boolean
|
|
level: number
|
|
hasError: boolean
|
|
onClick: (e: React.MouseEvent, id: string) => void
|
|
onIconClick?: (e: React.MouseEvent, id: string) => void
|
|
}
|
|
|
|
const useStyles = createStyles((theme, props: TreeNodeProps) => {
|
|
let backgroundColor = "inherit"
|
|
if (props.selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
|
|
|
|
let color
|
|
if (props.hasError) color = theme.colors.red[6]
|
|
else if (theme.colorScheme === "dark") color = props.unread > 0 ? theme.colors.dark[0] : theme.colors.dark[3]
|
|
else color = props.unread > 0 ? theme.black : theme.colors.gray[6]
|
|
|
|
return {
|
|
node: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
cursor: "pointer",
|
|
color,
|
|
backgroundColor,
|
|
"&:hover": {
|
|
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
|
|
},
|
|
},
|
|
nodeText: {
|
|
flexGrow: 1,
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
},
|
|
}
|
|
})
|
|
|
|
export function TreeNode(props: TreeNodeProps) {
|
|
const { classes } = useStyles(props)
|
|
return (
|
|
<Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
|
|
<Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick && props.onIconClick(e, props.id)}>
|
|
{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}
|
|
</Box>
|
|
<Box className={classes.nodeText}>{props.name}</Box>
|
|
{!props.expanded && (
|
|
<Box>
|
|
<UnreadCount unreadCount={props.unread} />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|