Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Reuse context menu component for Status

Browse source 
This might be buggy
This commit is contained in:
Lim Chee Aun 2023-10-22 19:27:15 +08:00
parent 9c4252315a
commit e7ef20f265
1 changed files with 83 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/components/status.jsx
View file

@ -794,10 +794,7 @@ function Status({
const contextMenuRef = useRef(); const contextMenuRef = useRef();
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false); const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
const [contextMenuAnchorPoint, setContextMenuAnchorPoint] = useState({ const [contextMenuProps, setContextMenuProps] = useState({});
x: 0,
y: 0,
});
const isIOS = const isIOS =
window.ontouchstart !== undefined && window.ontouchstart !== undefined &&
/iPad|iPhone|iPod/.test(navigator.userAgent); /iPad|iPhone|iPod/.test(navigator.userAgent);
@ -814,9 +811,12 @@ function Status({
const link = e.target.closest('a'); const link = e.target.closest('a');
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return; if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
e.preventDefault(); e.preventDefault();
setContextMenuAnchorPoint({ setContextMenuProps({
x: clientX, anchorPoint: {
y: clientY, x: clientX,
y: clientY,
},
direction: 'right',
}); });
setIsContextMenuOpen(true); setIsContextMenuOpen(true);
} }
@ -996,9 +996,12 @@ function Status({
const link = e.target.closest('a'); const link = e.target.closest('a');
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return; if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
e.preventDefault(); e.preventDefault();
setContextMenuAnchorPoint({ setContextMenuProps({
x: e.clientX, anchorPoint: {
y: e.clientY, x: e.clientX,
y: e.clientY,
},
direction: 'right',
}); });
setIsContextMenuOpen(true); setIsContextMenuOpen(true);
}} }}
@ -1008,8 +1011,7 @@ function Status({
<ControlledMenu <ControlledMenu
ref={contextMenuRef} ref={contextMenuRef}
state={isContextMenuOpen ? 'open' : undefined} state={isContextMenuOpen ? 'open' : undefined}
anchorPoint={contextMenuAnchorPoint} {...contextMenuProps}
direction="right"
onClose={(e) => { onClose={(e) => {
setIsContextMenuOpen(false); setIsContextMenuOpen(false);
// statusRef.current?.focus?.(); // statusRef.current?.focus?.();
@ -1086,49 +1088,78 @@ function Status({
(_deleted ? ( (_deleted ? (
<span class="status-deleted-tag">Deleted</span> <span class="status-deleted-tag">Deleted</span>
) : url && !previewMode && !quoted ? ( ) : url && !previewMode && !quoted ? (
<Menu <Link
instanceRef={menuInstanceRef} to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
portal={{ onClick={(e) => {
target: document.body, e.preventDefault();
e.stopPropagation();
onStatusLinkClick?.(e, status);
setContextMenuProps({
anchorRef: {
current: e.currentTarget,
},
align: 'end',
direction: 'bottom',
gap: 4,
});
setIsContextMenuOpen(true);
}} }}
containerProps={{ class={`time ${
style: { isContextMenuOpen && contextMenuProps?.anchorRef
// Higher than the backdrop ? 'is-open'
zIndex: 1001, : ''
}, }`}
onClick: (e) => {
if (e.target === e.currentTarget)
menuInstanceRef.current?.closeMenu?.();
},
}}
align="end"
gap={4}
overflow="auto"
viewScroll="close"
boundingBoxPadding="8 8 8 8"
unmountOnClose
menuButton={({ open }) => (
<Link
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onStatusLinkClick?.(e, status);
}}
class={`time ${open ? 'is-open' : ''}`}
>
<Icon
icon={visibilityIconsMap[visibility]}
alt={visibilityText[visibility]}
size="s"
/>{' '}
<RelativeTime datetime={createdAtDate} format="micro" />
</Link>
)}
> >
{StatusMenuItems} <Icon
</Menu> icon={visibilityIconsMap[visibility]}
alt={visibilityText[visibility]}
size="s"
/>{' '}
<RelativeTime datetime={createdAtDate} format="micro" />
</Link>
) : ( ) : (
// <Menu
// instanceRef={menuInstanceRef}
// portal={{
// target: document.body,
// }}
// containerProps={{
// style: {
// // Higher than the backdrop
// zIndex: 1001,
// },
// onClick: (e) => {
// if (e.target === e.currentTarget)
// menuInstanceRef.current?.closeMenu?.();
// },
// }}
// align="end"
// gap={4}
// overflow="auto"
// viewScroll="close"
// boundingBoxPadding="8 8 8 8"
// unmountOnClose
// menuButton={({ open }) => (
// <Link
// to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
// onClick={(e) => {
// e.preventDefault();
// e.stopPropagation();
// onStatusLinkClick?.(e, status);
// }}
// class={`time ${open ? 'is-open' : ''}`}
// >
// <Icon
// icon={visibilityIconsMap[visibility]}
// alt={visibilityText[visibility]}
// size="s"
// />{' '}
// <RelativeTime datetime={createdAtDate} format="micro" />
// </Link>
// )}
// >
// {StatusMenuItems}
// </Menu>
<span class="time"> <span class="time">
<Icon <Icon
icon={visibilityIconsMap[visibility]} icon={visibilityIconsMap[visibility]}