-
-
Notifications
You must be signed in to change notification settings - Fork 301
/
MobileActionSheet.tsx
77 lines (71 loc) · 2.03 KB
/
MobileActionSheet.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React, { ReactElement, useCallback } from "react";
import {
ArrowDropDownSVGIcon,
DeleteSVGIcon,
EditSVGIcon,
LinkSVGIcon,
ShareSVGIcon,
} from "@react-md/material-icons";
import {
defaultMenuRenderer,
DropdownMenu,
MenuRenderer,
} from "@react-md/menu";
import { Sheet, SheetProps } from "@react-md/sheet";
import { useAppSize } from "@react-md/utils";
import styles from "./MobileActionSheet.module.scss";
const items = [
{ leftAddon: <ShareSVGIcon />, children: "Share" },
{ leftAddon: <LinkSVGIcon />, children: "Get link" },
{ leftAddon: <EditSVGIcon />, children: "Edit name" },
{ leftAddon: <DeleteSVGIcon />, children: "Delete collection" },
];
function MenuSheet({ children, ...props }: SheetProps): ReactElement {
const { onRequestClose } = props;
const handleClick = useCallback(
(event: React.MouseEvent) => {
if (event.target !== event.currentTarget) {
onRequestClose();
}
},
[onRequestClose]
);
return (
<Sheet
{...props}
className={styles.sheet}
onRequestClose={onRequestClose}
role="menu"
disableFocusOnMount
position="bottom"
onClick={handleClick}
>
{children}
</Sheet>
);
}
const renderSheet: MenuRenderer = ({
// these props are only required for the `Menu` component, but not within the sheet
// so we can just extract them and not pass them down
horizontal: _horizontal,
controlId: _controlId,
anchor: _anchor,
positionOptions: _positionOptions,
closeOnResize: _closeOnResize,
closeOnScroll: _closeOnScroll,
...props
}) => <MenuSheet {...props} />;
export default function MobileActionSheet(): ReactElement {
const { isTablet, isLandscape, isDesktop, isLargeDesktop } = useAppSize();
const sheet = !isDesktop && !isLargeDesktop && !(isTablet && isLandscape);
return (
<DropdownMenu
id="dropdown-menu-1"
items={items}
dropdownIcon={<ArrowDropDownSVGIcon />}
menuRenderer={sheet ? renderSheet : defaultMenuRenderer}
>
Dropdown
</DropdownMenu>
);
}