alice.mosphere.at / phanpy
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix clicking outside button also trigger the menu

Lim Chee Aun b6d15224 84163621

+55 -53
+55 -53
src/components/status.jsx
··· 15 15 import prettify from 'html-prettify'; 16 16 import pThrottle from 'p-throttle'; 17 17 import { Fragment } from 'preact'; 18 - import { memo } from 'preact/compat'; 18 + import { forwardRef, memo } from 'preact/compat'; 19 19 import { 20 20 useCallback, 21 21 useContext, ··· 2403 2403 disabled={!canBoost} 2404 2404 /> 2405 2405 </div> */} 2406 - <MenuConfirm 2407 - disabled={!canBoost} 2408 - onClick={confirmBoostStatus} 2409 - confirmLabel={ 2410 - <> 2411 - <Icon icon="rocket" /> 2412 - <span>{reblogged ? t`Unboost` : t`Boost`}</span> 2413 - </> 2414 - } 2415 - menuExtras={ 2416 - <MenuItem 2417 - onClick={() => { 2418 - showCompose({ 2419 - draftStatus: { 2420 - status: `\n${url}`, 2421 - }, 2422 - }); 2423 - }} 2424 - > 2425 - <Icon icon="quote" /> 2426 - <span> 2427 - <Trans>Quote</Trans> 2428 - </span> 2429 - </MenuItem> 2430 - } 2431 - menuFooter={ 2432 - mediaNoDesc && 2433 - !reblogged && ( 2434 - <div class="footer"> 2435 - <Icon icon="alert" /> 2436 - <Trans>Some media have no descriptions.</Trans> 2437 - </div> 2438 - ) 2439 - } 2440 - > 2441 - <div class="action has-count"> 2406 + <div class="action has-count"> 2407 + <MenuConfirm 2408 + disabled={!canBoost} 2409 + onClick={confirmBoostStatus} 2410 + confirmLabel={ 2411 + <> 2412 + <Icon icon="rocket" /> 2413 + <span>{reblogged ? t`Unboost` : t`Boost`}</span> 2414 + </> 2415 + } 2416 + menuExtras={ 2417 + <MenuItem 2418 + onClick={() => { 2419 + showCompose({ 2420 + draftStatus: { 2421 + status: `\n${url}`, 2422 + }, 2423 + }); 2424 + }} 2425 + > 2426 + <Icon icon="quote" /> 2427 + <span> 2428 + <Trans>Quote</Trans> 2429 + </span> 2430 + </MenuItem> 2431 + } 2432 + menuFooter={ 2433 + mediaNoDesc && 2434 + !reblogged && ( 2435 + <div class="footer"> 2436 + <Icon icon="alert" /> 2437 + <Trans>Some media have no descriptions.</Trans> 2438 + </div> 2439 + ) 2440 + } 2441 + > 2442 2442 <StatusButton 2443 2443 checked={reblogged} 2444 2444 title={[t`Boost`, t`Unboost`]} ··· 2449 2449 // onClick={boostStatus} 2450 2450 disabled={!canBoost} 2451 2451 /> 2452 - </div> 2453 - </MenuConfirm> 2452 + </MenuConfirm> 2453 + </div> 2454 2454 <div class="action has-count"> 2455 2455 <StatusButton 2456 2456 checked={favourited} ··· 3426 3426 ); 3427 3427 } 3428 3428 3429 - function StatusButton({ 3430 - checked, 3431 - count, 3432 - class: className, 3433 - title, 3434 - alt, 3435 - size, 3436 - icon, 3437 - iconSize = 'l', 3438 - onClick, 3439 - ...props 3440 - }) { 3429 + const StatusButton = forwardRef((props, ref) => { 3430 + let { 3431 + checked, 3432 + count, 3433 + class: className, 3434 + title, 3435 + alt, 3436 + size, 3437 + icon, 3438 + iconSize = 'l', 3439 + onClick, 3440 + ...otherProps 3441 + } = props; 3441 3442 if (typeof title === 'string') { 3442 3443 title = [title, title]; 3443 3444 } ··· 3460 3461 3461 3462 return ( 3462 3463 <button 3464 + ref={ref} 3463 3465 type="button" 3464 3466 title={buttonTitle} 3465 3467 class={`plain ${size ? 'small' : ''} ${className} ${ ··· 3471 3473 e.stopPropagation(); 3472 3474 onClick(e); 3473 3475 }} 3474 - {...props} 3476 + {...otherProps} 3475 3477 > 3476 3478 <Icon icon={icon} size={iconSize} alt={iconAlt} /> 3477 3479 {!!count && ( ··· 3482 3484 )} 3483 3485 </button> 3484 3486 ); 3485 - } 3487 + }); 3486 3488 3487 3489 function nicePostURL(url) { 3488 3490 if (!url) return;