This commit is contained in:
Tom Moor
2022-04-09 20:25:54 -07:00
parent 48fad5cfa0
commit 9281287dba
15 changed files with 56 additions and 38 deletions

View File

@@ -7,7 +7,7 @@ import { hover } from "~/styles";
import MenuIconWrapper from "../MenuIconWrapper";
type Props = {
onClick?: (arg0: React.SyntheticEvent) => void | Promise<void>;
onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
selected?: boolean;
disabled?: boolean;
dangerous?: boolean;

View File

@@ -2,7 +2,7 @@ import * as React from "react";
import { useTranslation } from "react-i18next";
import { Portal } from "react-portal";
import { Menu } from "reakit/Menu";
import styled from "styled-components";
import styled, { DefaultTheme } from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { depths } from "@shared/styles";
import useMenuContext from "~/hooks/useMenuContext";
@@ -160,8 +160,10 @@ export const Position = styled.div`
position: absolute;
z-index: ${depths.menu};
// overrides make mobile-first coding style challenging
// so we explicitly define mobile breakpoint here
/*
* overrides make mobile-first coding style challenging
* so we explicitly define mobile breakpoint here
*/
${breakpoint("mobile", "tablet")`
position: fixed !important;
transform: none !important;
@@ -172,10 +174,13 @@ export const Position = styled.div`
`};
`;
export const Background = styled.div<{
type BackgroundProps = {
topAnchor?: boolean;
rightAnchor?: boolean;
}>`
theme: DefaultTheme;
};
export const Background = styled.div<BackgroundProps>`
animation: ${mobileContextMenu} 200ms ease;
transform-origin: 50% 100%;
max-width: 100%;
@@ -195,11 +200,12 @@ export const Background = styled.div<{
}
${breakpoint("tablet")`
animation: ${(props: any) =>
animation: ${(props: BackgroundProps) =>
props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
transform-origin: ${(props: any) => (props.rightAnchor ? "75%" : "25%")} 0;
transform-origin: ${(props: BackgroundProps) =>
props.rightAnchor ? "75%" : "25%"} 0;
max-width: 276px;
background: ${(props: any) => props.theme.menuBackground};
box-shadow: ${(props: any) => props.theme.menuShadow};
background: ${(props: BackgroundProps) => props.theme.menuBackground};
box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
`};
`;