Fix clicking outside button also trigger the menu

This commit is contained in:
Lim Chee Aun 2024-11-27 22:16:28 +08:00
parent 84163621c2
commit b6d1522480

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,6 +2403,7 @@ function Status({
disabled={!canBoost} disabled={!canBoost}
/> />
</div> */} </div> */}
<div class="action has-count">
<MenuConfirm <MenuConfirm
disabled={!canBoost} disabled={!canBoost}
onClick={confirmBoostStatus} onClick={confirmBoostStatus}
@ -2438,7 +2439,6 @@ function Status({
) )
} }
> >
<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,7 +3426,8 @@ function EmbedModal({ post, instance, onClose }) {
); );
} }
function StatusButton({ const StatusButton = forwardRef((props, ref) => {
let {
checked, checked,
count, count,
class: className, class: className,
@ -3436,8 +3437,8 @@ function StatusButton({
icon, icon,
iconSize = 'l', iconSize = 'l',
onClick, onClick,
...props ...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;