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

Fix clicking outside button also trigger the menu

Browse source
This commit is contained in:
Lim Chee Aun 2024-11-27 22:16:28 +08:00
parent 84163621c2
commit b6d1522480
1 changed files with 55 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
src/components/status.jsx
View file

@ -15,7 +15,7 @@ import { shallowEqual } from 'fast-equals';
import prettify from 'html-prettify'; import prettify from 'html-prettify';
import pThrottle from 'p-throttle'; import pThrottle from 'p-throttle';
import { Fragment } from 'preact'; import { Fragment } from 'preact';
import { memo } from 'preact/compat'; import { forwardRef, memo } from 'preact/compat';
import { import {
useCallback, useCallback,
useContext, useContext,
@ -2403,42 +2403,42 @@ function Status({
disabled={!canBoost} disabled={!canBoost}
/> />
</div> */} </div> */}
<MenuConfirm <div class="action has-count">
disabled={!canBoost} <MenuConfirm
onClick={confirmBoostStatus} disabled={!canBoost}
confirmLabel={ onClick={confirmBoostStatus}
<> confirmLabel={
<Icon icon="rocket" /> <>
<span>{reblogged ? t`Unboost` : t`Boost`}</span> <Icon icon="rocket" />
</> <span>{reblogged ? t`Unboost` : t`Boost`}</span>
} </>
menuExtras={ }
<MenuItem menuExtras={
onClick={() => { <MenuItem
showCompose({ onClick={() => {
draftStatus: { showCompose({
status: `\n${url}`, draftStatus: {
}, status: `\n${url}`,
}); },
}} });
> }}
<Icon icon="quote" /> >
<span> <Icon icon="quote" />
<Trans>Quote</Trans> <span>
</span> <Trans>Quote</Trans>
</MenuItem> </span>
} </MenuItem>
menuFooter={ }
mediaNoDesc && menuFooter={
!reblogged && ( mediaNoDesc &&
<div class="footer"> !reblogged && (
<Icon icon="alert" /> <div class="footer">
<Trans>Some media have no descriptions.</Trans> <Icon icon="alert" />
</div> <Trans>Some media have no descriptions.</Trans>
) </div>
} )
> }
<div class="action has-count"> >
<StatusButton <StatusButton
checked={reblogged} checked={reblogged}
title={[t`Boost`, t`Unboost`]} title={[t`Boost`, t`Unboost`]}
@ -2449,8 +2449,8 @@ function Status({
// onClick={boostStatus} // onClick={boostStatus}
disabled={!canBoost} disabled={!canBoost}
/> />
</div> </MenuConfirm>
</MenuConfirm> </div>
<div class="action has-count"> <div class="action has-count">
<StatusButton <StatusButton
checked={favourited} checked={favourited}
@ -3426,18 +3426,19 @@ function EmbedModal({ post, instance, onClose }) {
); );
} }
function StatusButton({ const StatusButton = forwardRef((props, ref) => {
checked, let {
count, checked,
class: className, count,
title, class: className,
alt, title,
size, alt,
icon, size,
iconSize = 'l', icon,
onClick, iconSize = 'l',
...props onClick,
}) { ...otherProps
} = props;
if (typeof title === 'string') { if (typeof title === 'string') {
title = [title, title]; title = [title, title];
} }
@ -3460,6 +3461,7 @@ function StatusButton({
return ( return (
<button <button
ref={ref}
type="button" type="button"
title={buttonTitle} title={buttonTitle}
class={`plain ${size ? 'small' : ''} ${className} ${ class={`plain ${size ? 'small' : ''} ${className} ${
@ -3471,7 +3473,7 @@ function StatusButton({
e.stopPropagation(); e.stopPropagation();
onClick(e); onClick(e);
}} }}
{...props} {...otherProps}
> >
<Icon icon={icon} size={iconSize} alt={iconAlt} /> <Icon icon={icon} size={iconSize} alt={iconAlt} />
{!!count && ( {!!count && (
@ -3482,7 +3484,7 @@ function StatusButton({
)} )}
</button> </button>
); );
} });
function nicePostURL(url) { function nicePostURL(url) {
if (!url) return; if (!url) return;