db73879918
* fix: Logic error in toast fix: Remove useless component * fix: Logout not clearing all stores * Add icons to notification settings * Add eslint rule to enforce spaced comment * Add eslint rule for arrow-body-style * Add eslint rule to enforce self-closing components * Add menu to api key settings Fix: Deleting webhook subscription does not remove from UI Split webhook subscriptions into active and inactive Styling updates
63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import * as React from "react";
|
|
import scrollIntoView from "smooth-scroll-into-view-if-needed";
|
|
import styled from "styled-components";
|
|
import MenuItem from "~/components/ContextMenu/MenuItem";
|
|
import { usePortalContext } from "~/components/Portal";
|
|
|
|
export type Props = {
|
|
selected: boolean;
|
|
disabled?: boolean;
|
|
onClick: () => void;
|
|
icon?: React.ReactElement;
|
|
title: React.ReactNode;
|
|
shortcut?: string;
|
|
};
|
|
|
|
function SuggestionsMenuItem({
|
|
selected,
|
|
disabled,
|
|
onClick,
|
|
title,
|
|
shortcut,
|
|
icon,
|
|
}: Props) {
|
|
const portal = usePortalContext();
|
|
const ref = React.useCallback(
|
|
(node) => {
|
|
if (selected && node) {
|
|
scrollIntoView(node, {
|
|
scrollMode: "if-needed",
|
|
block: "nearest",
|
|
boundary: (parent) =>
|
|
// All the parent elements of your target are checked until they
|
|
// reach the portal context. Prevents body and other parent
|
|
// elements from being scrolled
|
|
parent !== portal,
|
|
});
|
|
}
|
|
},
|
|
[selected, portal]
|
|
);
|
|
|
|
return (
|
|
<MenuItem
|
|
ref={ref}
|
|
active={selected}
|
|
onClick={disabled ? undefined : onClick}
|
|
icon={icon}
|
|
>
|
|
{title}
|
|
{shortcut && <Shortcut $active={selected}>{shortcut}</Shortcut>}
|
|
</MenuItem>
|
|
);
|
|
}
|
|
|
|
const Shortcut = styled.span<{ $active?: boolean }>`
|
|
color: ${(props) =>
|
|
props.$active ? props.theme.white50 : props.theme.textTertiary};
|
|
flex-grow: 1;
|
|
text-align: right;
|
|
`;
|
|
|
|
export default SuggestionsMenuItem;
|