43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
|
|
import styled from "styled-components";
|
|
import { depths } from "@shared/styles";
|
|
import Popover from "~/components/Popover";
|
|
import Notifications from "./Notifications";
|
|
|
|
const NotificationsButton: React.FC = ({ children }) => {
|
|
const { t } = useTranslation();
|
|
const focusRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
const popover = usePopoverState({
|
|
gutter: 0,
|
|
placement: "top-start",
|
|
unstable_fixed: true,
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<PopoverDisclosure {...popover}>{children}</PopoverDisclosure>
|
|
<StyledPopover
|
|
{...popover}
|
|
scrollable={false}
|
|
mobilePosition="bottom"
|
|
aria-label={t("Notifications")}
|
|
unstable_initialFocusRef={focusRef}
|
|
shrink
|
|
flex
|
|
>
|
|
<Notifications onRequestClose={popover.hide} ref={focusRef} />
|
|
</StyledPopover>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const StyledPopover = styled(Popover)`
|
|
z-index: ${depths.menu};
|
|
`;
|
|
|
|
export default observer(NotificationsButton);
|