From 015ed5e7eb40110a67ee376e359f48d629315f70 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 4 Apr 2024 17:03:30 +0800
Subject: [PATCH] Further expand usage of SubMenu2
---
src/components/account-info.jsx | 9 +++++----
src/components/menu-confirm.jsx | 21 +++------------------
src/components/nav-menu.jsx | 31 ++-----------------------------
src/components/shortcuts.jsx | 7 ++++---
src/components/submenu2.jsx | 25 +++++++++++++++++++++++++
5 files changed, 39 insertions(+), 54 deletions(-)
create mode 100644 src/components/submenu2.jsx
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 1f6cc824..fd911f41 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -1,6 +1,6 @@
import './account-info.css';
-import { Menu, MenuDivider, MenuItem, SubMenu } from '@szhsin/react-menu';
+import { MenuDivider, MenuItem } from '@szhsin/react-menu';
import {
useCallback,
useEffect,
@@ -11,7 +11,6 @@ import {
} from 'preact/hooks';
import punycode from 'punycode';
-import MenuLink from '../components/menu-link';
import { api } from '../utils/api';
import enhanceContent from '../utils/enhance-content';
import getHTMLText from '../utils/getHTMLText';
@@ -34,7 +33,9 @@ import ListAddEdit from './list-add-edit';
import Loader from './loader';
import Menu2 from './menu2';
import MenuConfirm from './menu-confirm';
+import MenuLink from './menu-link';
import Modal from './modal';
+import SubMenu2 from './submenu2';
import TranslationBlock from './translation-block';
const MUTE_DURATIONS = [
@@ -1284,7 +1285,7 @@ function RelatedActions({
<span>Unmute @{username}</span>
</MenuItem>
) : (
- <SubMenu
+ <SubMenu2
menuClassName="menu-blur"
openTrigger="clickOnly"
direction="bottom"
@@ -1338,7 +1339,7 @@ function RelatedActions({
</MenuItem>
))}
</div>
- </SubMenu>
+ </SubMenu2>
)}
{followedBy && (
<MenuConfirm
diff --git a/src/components/menu-confirm.jsx b/src/components/menu-confirm.jsx
index b2bb18d5..f1df396f 100644
--- a/src/components/menu-confirm.jsx
+++ b/src/components/menu-confirm.jsx
@@ -1,8 +1,8 @@
-import { MenuItem, SubMenu } from '@szhsin/react-menu';
+import { MenuItem } from '@szhsin/react-menu';
import { cloneElement } from 'preact';
-import { useRef } from 'preact/hooks';
import Menu2 from './menu2';
+import SubMenu2 from './submenu2';
function MenuConfirm({
subMenu = false,
@@ -23,11 +23,9 @@ function MenuConfirm({
}
return children;
}
- const Parent = subMenu ? SubMenu : Menu2;
- const menuRef = useRef();
+ const Parent = subMenu ? SubMenu2 : Menu2;
return (
<Parent
- instanceRef={menuRef}
openTrigger="clickOnly"
direction="bottom"
overflow="auto"
@@ -37,19 +35,6 @@ function MenuConfirm({
{...restProps}
menuButton={subMenu ? undefined : children}
label={subMenu ? children : undefined}
- // Test fix for bug; submenus not opening on Android
- itemProps={{
- onPointerMove: (e) => {
- if (e.pointerType === 'touch') {
- menuRef.current?.openMenu?.();
- }
- },
- onPointerLeave: (e) => {
- if (e.pointerType === 'touch') {
- menuRef.current?.openMenu?.();
- }
- },
- }}
>
<MenuItem className={menuItemClassName} onClick={onClick}>
{confirmLabel}
diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
index e5659838..2b622feb 100644
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@@ -1,11 +1,6 @@
import './nav-menu.css';
-import {
- ControlledMenu,
- MenuDivider,
- MenuItem,
- SubMenu,
-} from '@szhsin/react-menu';
+import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
import { memo } from 'preact/compat';
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
import { useLongPress } from 'use-long-press';
@@ -20,6 +15,7 @@ import store from '../utils/store';
import Avatar from './avatar';
import Icon from './icon';
import MenuLink from './menu-link';
+import SubMenu2 from './submenu2';
function NavMenu(props) {
const snapStates = useSnapshot(states);
@@ -371,27 +367,4 @@ function NavMenu(props) {
);
}
-function SubMenu2(props) {
- const menuRef = useRef();
- return (
- <SubMenu
- {...props}
- instanceRef={menuRef}
- // Test fix for bug; submenus not opening on Android
- itemProps={{
- onPointerMove: (e) => {
- if (e.pointerType === 'touch') {
- menuRef.current?.openMenu?.();
- }
- },
- onPointerLeave: (e) => {
- if (e.pointerType === 'touch') {
- menuRef.current?.openMenu?.();
- }
- },
- }}
- />
- );
-}
-
export default memo(NavMenu);
diff --git a/src/components/shortcuts.jsx b/src/components/shortcuts.jsx
index c4645c7b..ddbe9cd3 100644
--- a/src/components/shortcuts.jsx
+++ b/src/components/shortcuts.jsx
@@ -1,6 +1,6 @@
import './shortcuts.css';
-import { MenuDivider, SubMenu } from '@szhsin/react-menu';
+import { MenuDivider } from '@szhsin/react-menu';
import { memo } from 'preact/compat';
import { useRef, useState } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook';
@@ -17,6 +17,7 @@ import Icon from './icon';
import Link from './link';
import Menu2 from './menu2';
import MenuLink from './menu-link';
+import SubMenu2 from './submenu2';
function Shortcuts() {
const { instance } = api();
@@ -182,7 +183,7 @@ function Shortcuts() {
{formattedShortcuts.map(({ id, path, title, subtitle, icon }, i) => {
if (id === 'lists') {
return (
- <SubMenu
+ <SubMenu2
menuClassName="glass-menu"
overflow="auto"
gap={-8}
@@ -205,7 +206,7 @@ function Shortcuts() {
<span>{list.title}</span>
</MenuLink>
))}
- </SubMenu>
+ </SubMenu2>
);
}
diff --git a/src/components/submenu2.jsx b/src/components/submenu2.jsx
new file mode 100644
index 00000000..25f16385
--- /dev/null
+++ b/src/components/submenu2.jsx
@@ -0,0 +1,25 @@
+import { SubMenu } from '@szhsin/react-menu';
+import { useRef } from 'preact/hooks';
+
+export default function SubMenu2(props) {
+ const menuRef = useRef();
+ return (
+ <SubMenu
+ {...props}
+ instanceRef={menuRef}
+ // Test fix for bug; submenus not opening on Android
+ itemProps={{
+ onPointerMove: (e) => {
+ if (e.pointerType === 'touch') {
+ menuRef.current?.openMenu?.();
+ }
+ },
+ onPointerLeave: (e) => {
+ if (e.pointerType === 'touch') {
+ menuRef.current?.openMenu?.();
+ }
+ },
+ }}
+ />
+ );
+}