mirror of https://github.com/mastodon/mastodon
Fix missing icons and subtitle in mobile boost/quote menu (#36038)
diondiondion
2 months ago
committed by
GitHub
parent
65b4a0a6f1
commit
a5fbe2f5c1
@ -0,0 +1,253 @@
|
|||||||
|
import { useCallback, useMemo } from 'react';
|
||||||
|
import type { FC, KeyboardEvent, MouseEvent, MouseEventHandler } from 'react';
|
||||||
|
|
||||||
|
import { useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import { quoteComposeById } from '@/mastodon/actions/compose_typed';
|
||||||
|
import { toggleReblog } from '@/mastodon/actions/interactions';
|
||||||
|
import { openModal } from '@/mastodon/actions/modal';
|
||||||
|
import type { ActionMenuItem } from '@/mastodon/models/dropdown_menu';
|
||||||
|
import type { Status } from '@/mastodon/models/status';
|
||||||
|
import { useAppDispatch, useAppSelector } from '@/mastodon/store';
|
||||||
|
import { isFeatureEnabled } from '@/mastodon/utils/environment';
|
||||||
|
import type { SomeRequired } from '@/mastodon/utils/types';
|
||||||
|
|
||||||
|
import type { RenderItemFn, RenderItemFnHandlers } from '../dropdown_menu';
|
||||||
|
import { Dropdown, DropdownMenuItemContent } from '../dropdown_menu';
|
||||||
|
import { IconButton } from '../icon_button';
|
||||||
|
|
||||||
|
import {
|
||||||
|
boostItemState,
|
||||||
|
messages,
|
||||||
|
quoteItemState,
|
||||||
|
selectStatusState,
|
||||||
|
} from './boost_button_utils';
|
||||||
|
|
||||||
|
const renderMenuItem: RenderItemFn<ActionMenuItem> = (
|
||||||
|
item,
|
||||||
|
index,
|
||||||
|
handlers,
|
||||||
|
focusRefCallback,
|
||||||
|
) => (
|
||||||
|
<ReblogMenuItem
|
||||||
|
index={index}
|
||||||
|
item={item}
|
||||||
|
handlers={handlers}
|
||||||
|
key={`${item.text}-${index}`}
|
||||||
|
focusRefCallback={focusRefCallback}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
interface ReblogButtonProps {
|
||||||
|
status: Status;
|
||||||
|
counters?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
type ActionMenuItemWithIcon = SomeRequired<ActionMenuItem, 'icon'>;
|
||||||
|
|
||||||
|
export const StatusBoostButton: FC<ReblogButtonProps> = ({
|
||||||
|
status,
|
||||||
|
counters,
|
||||||
|
}) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const statusState = useAppSelector((state) =>
|
||||||
|
selectStatusState(state, status),
|
||||||
|
);
|
||||||
|
const {
|
||||||
|
isLoggedIn,
|
||||||
|
isReblogged,
|
||||||
|
isReblogAllowed,
|
||||||
|
isQuoteAutomaticallyAccepted,
|
||||||
|
isQuoteManuallyAccepted,
|
||||||
|
} = statusState;
|
||||||
|
|
||||||
|
const isMenuDisabled =
|
||||||
|
!isQuoteAutomaticallyAccepted &&
|
||||||
|
!isQuoteManuallyAccepted &&
|
||||||
|
!isReblogAllowed;
|
||||||
|
|
||||||
|
const statusId = status.get('id') as string;
|
||||||
|
const wasBoosted = !!status.get('reblogged');
|
||||||
|
|
||||||
|
const items = useMemo(() => {
|
||||||
|
const boostItem = boostItemState(statusState);
|
||||||
|
const quoteItem = quoteItemState(statusState);
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: intl.formatMessage(boostItem.title),
|
||||||
|
description: boostItem.meta
|
||||||
|
? intl.formatMessage(boostItem.meta)
|
||||||
|
: undefined,
|
||||||
|
icon: boostItem.iconComponent,
|
||||||
|
highlighted: wasBoosted,
|
||||||
|
disabled: boostItem.disabled,
|
||||||
|
action: (event) => {
|
||||||
|
if (isLoggedIn) {
|
||||||
|
dispatch(toggleReblog(statusId, event.shiftKey));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: intl.formatMessage(quoteItem.title),
|
||||||
|
description: quoteItem.meta
|
||||||
|
? intl.formatMessage(quoteItem.meta)
|
||||||
|
: undefined,
|
||||||
|
icon: quoteItem.iconComponent,
|
||||||
|
disabled: quoteItem.disabled,
|
||||||
|
action: () => {
|
||||||
|
if (isLoggedIn) {
|
||||||
|
dispatch(quoteComposeById(statusId));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
] satisfies [ActionMenuItemWithIcon, ActionMenuItemWithIcon];
|
||||||
|
}, [dispatch, intl, isLoggedIn, statusId, statusState, wasBoosted]);
|
||||||
|
|
||||||
|
const boostIcon = items[0].icon;
|
||||||
|
|
||||||
|
const handleDropdownOpen = useCallback(
|
||||||
|
(event: MouseEvent | KeyboardEvent) => {
|
||||||
|
if (!isLoggedIn) {
|
||||||
|
dispatch(
|
||||||
|
openModal({
|
||||||
|
modalType: 'INTERACTION',
|
||||||
|
modalProps: {
|
||||||
|
type: 'reblog',
|
||||||
|
accountId: status.getIn(['account', 'id']),
|
||||||
|
url: status.get('uri'),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else if (event.shiftKey) {
|
||||||
|
dispatch(toggleReblog(status.get('id'), true));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
[dispatch, isLoggedIn, status],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropdown
|
||||||
|
items={items}
|
||||||
|
renderItem={renderMenuItem}
|
||||||
|
onOpen={handleDropdownOpen}
|
||||||
|
disabled={isMenuDisabled}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
title={intl.formatMessage(
|
||||||
|
isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote,
|
||||||
|
)}
|
||||||
|
icon='retweet'
|
||||||
|
iconComponent={boostIcon}
|
||||||
|
counter={
|
||||||
|
counters
|
||||||
|
? (status.get('reblogs_count') as number) +
|
||||||
|
(status.get('quotes_count') as number)
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
active={isReblogged}
|
||||||
|
/>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ReblogMenuItemProps {
|
||||||
|
item: ActionMenuItem;
|
||||||
|
index: number;
|
||||||
|
handlers: RenderItemFnHandlers;
|
||||||
|
focusRefCallback?: (c: HTMLAnchorElement | HTMLButtonElement | null) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ReblogMenuItem: FC<ReblogMenuItemProps> = ({
|
||||||
|
index,
|
||||||
|
item,
|
||||||
|
handlers,
|
||||||
|
focusRefCallback,
|
||||||
|
}) => {
|
||||||
|
const { text, highlighted, disabled } = item;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
className={classNames('dropdown-menu__item reblog-menu-item', {
|
||||||
|
'dropdown-menu__item--highlighted': highlighted,
|
||||||
|
})}
|
||||||
|
key={`${text}-${index}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
{...handlers}
|
||||||
|
ref={focusRefCallback}
|
||||||
|
disabled={disabled}
|
||||||
|
data-index={index}
|
||||||
|
>
|
||||||
|
<DropdownMenuItemContent item={item} />
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Legacy helpers
|
||||||
|
|
||||||
|
// Switch between the legacy and new reblog button based on feature flag.
|
||||||
|
export const BoostButton: FC<ReblogButtonProps> = (props) => {
|
||||||
|
if (isFeatureEnabled('outgoing_quotes')) {
|
||||||
|
return <StatusBoostButton {...props} />;
|
||||||
|
}
|
||||||
|
return <LegacyReblogButton {...props} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const LegacyReblogButton: FC<ReblogButtonProps> = ({
|
||||||
|
status,
|
||||||
|
counters,
|
||||||
|
}) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const statusState = useAppSelector((state) =>
|
||||||
|
selectStatusState(state, status),
|
||||||
|
);
|
||||||
|
|
||||||
|
const { title, meta, iconComponent, disabled } = useMemo(
|
||||||
|
() => boostItemState(statusState),
|
||||||
|
[statusState],
|
||||||
|
);
|
||||||
|
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const handleClick: MouseEventHandler = useCallback(
|
||||||
|
(event) => {
|
||||||
|
if (statusState.isLoggedIn) {
|
||||||
|
dispatch(toggleReblog(status.get('id') as string, event.shiftKey));
|
||||||
|
} else {
|
||||||
|
dispatch(
|
||||||
|
openModal({
|
||||||
|
modalType: 'INTERACTION',
|
||||||
|
modalProps: {
|
||||||
|
type: 'reblog',
|
||||||
|
accountId: status.getIn(['account', 'id']),
|
||||||
|
url: status.get('uri'),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[dispatch, status, statusState.isLoggedIn],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IconButton
|
||||||
|
disabled={disabled}
|
||||||
|
active={!!status.get('reblogged')}
|
||||||
|
title={intl.formatMessage(meta ?? title)}
|
||||||
|
icon='retweet'
|
||||||
|
iconComponent={iconComponent}
|
||||||
|
onClick={!disabled ? handleClick : undefined}
|
||||||
|
counter={
|
||||||
|
counters
|
||||||
|
? (status.get('reblogs_count') as number) +
|
||||||
|
(status.get('quotes_count') as number)
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
import { defineMessages } from 'react-intl';
|
||||||
|
import type { MessageDescriptor } from 'react-intl';
|
||||||
|
|
||||||
|
import type { Status, StatusVisibility } from '@/mastodon/models/status';
|
||||||
|
import { createAppSelector } from '@/mastodon/store';
|
||||||
|
import FormatQuote from '@/material-icons/400-24px/format_quote-fill.svg?react';
|
||||||
|
import FormatQuoteOff from '@/material-icons/400-24px/format_quote_off-fill.svg?react';
|
||||||
|
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
|
||||||
|
import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
|
||||||
|
import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
|
||||||
|
import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg?react';
|
||||||
|
import RepeatPrivateActiveIcon from '@/svg-icons/repeat_private_active.svg?react';
|
||||||
|
|
||||||
|
import type { IconProp } from '../icon';
|
||||||
|
|
||||||
|
export const messages = defineMessages({
|
||||||
|
all_disabled: {
|
||||||
|
id: 'status.all_disabled',
|
||||||
|
defaultMessage: 'Boosts and quotes are disabled',
|
||||||
|
},
|
||||||
|
quote: { id: 'status.quote', defaultMessage: 'Quote' },
|
||||||
|
quote_cannot: {
|
||||||
|
id: 'status.cannot_quote',
|
||||||
|
defaultMessage: 'Quotes are disabled on this post',
|
||||||
|
},
|
||||||
|
quote_followers_only: {
|
||||||
|
id: 'status.quote_followers_only',
|
||||||
|
defaultMessage: 'Only followers can quote this post',
|
||||||
|
},
|
||||||
|
quote_manual_review: {
|
||||||
|
id: 'status.quote_manual_review',
|
||||||
|
defaultMessage: 'Author will manually review',
|
||||||
|
},
|
||||||
|
quote_private: {
|
||||||
|
id: 'status.quote_private',
|
||||||
|
defaultMessage: 'Private posts cannot be quoted',
|
||||||
|
},
|
||||||
|
reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
|
||||||
|
reblog_or_quote: {
|
||||||
|
id: 'status.reblog_or_quote',
|
||||||
|
defaultMessage: 'Boost or quote',
|
||||||
|
},
|
||||||
|
reblog_cancel: {
|
||||||
|
id: 'status.cancel_reblog_private',
|
||||||
|
defaultMessage: 'Unboost',
|
||||||
|
},
|
||||||
|
reblog_private: {
|
||||||
|
id: 'status.reblog_private',
|
||||||
|
defaultMessage: 'Share again with your followers',
|
||||||
|
},
|
||||||
|
reblog_cannot: {
|
||||||
|
id: 'status.cannot_reblog',
|
||||||
|
defaultMessage: 'This post cannot be boosted',
|
||||||
|
},
|
||||||
|
request_quote: {
|
||||||
|
id: 'status.request_quote',
|
||||||
|
defaultMessage: 'Request to quote',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const selectStatusState = createAppSelector(
|
||||||
|
[
|
||||||
|
(state) => state.meta.get('me') as string | undefined,
|
||||||
|
(_, status: Status) => status,
|
||||||
|
],
|
||||||
|
(userId, status) => {
|
||||||
|
const isPublic = ['public', 'unlisted'].includes(
|
||||||
|
status.get('visibility') as StatusVisibility,
|
||||||
|
);
|
||||||
|
const isMineAndPrivate =
|
||||||
|
userId === status.getIn(['account', 'id']) &&
|
||||||
|
status.get('visibility') === 'private';
|
||||||
|
return {
|
||||||
|
isLoggedIn: !!userId,
|
||||||
|
isPublic,
|
||||||
|
isMine: userId === status.getIn(['account', 'id']),
|
||||||
|
isPrivateReblog:
|
||||||
|
userId === status.getIn(['account', 'id']) &&
|
||||||
|
status.get('visibility') === 'private',
|
||||||
|
isReblogged: !!status.get('reblogged'),
|
||||||
|
isReblogAllowed: isPublic || isMineAndPrivate,
|
||||||
|
isQuoteAutomaticallyAccepted:
|
||||||
|
status.getIn(['quote_approval', 'current_user']) === 'automatic' &&
|
||||||
|
(isPublic || isMineAndPrivate),
|
||||||
|
isQuoteManuallyAccepted:
|
||||||
|
status.getIn(['quote_approval', 'current_user']) === 'manual' &&
|
||||||
|
(isPublic || isMineAndPrivate),
|
||||||
|
isQuoteFollowersOnly:
|
||||||
|
status.getIn(['quote_approval', 'automatic', 0]) === 'followers' ||
|
||||||
|
status.getIn(['quote_approval', 'manual', 0]) === 'followers',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export type StatusState = ReturnType<typeof selectStatusState>;
|
||||||
|
|
||||||
|
export interface MenuItemState {
|
||||||
|
title: MessageDescriptor;
|
||||||
|
meta?: MessageDescriptor;
|
||||||
|
iconComponent: IconProp;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function boostItemState({
|
||||||
|
isPublic,
|
||||||
|
isPrivateReblog,
|
||||||
|
isReblogged,
|
||||||
|
}: StatusState): MenuItemState {
|
||||||
|
if (isReblogged) {
|
||||||
|
return {
|
||||||
|
title: messages.reblog_cancel,
|
||||||
|
iconComponent: isPublic ? RepeatActiveIcon : RepeatPrivateActiveIcon,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const iconText: MenuItemState = {
|
||||||
|
title: messages.reblog,
|
||||||
|
iconComponent: RepeatIcon,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isPrivateReblog) {
|
||||||
|
iconText.meta = messages.reblog_private;
|
||||||
|
iconText.iconComponent = RepeatPrivateIcon;
|
||||||
|
} else if (!isPublic) {
|
||||||
|
iconText.meta = messages.reblog_cannot;
|
||||||
|
iconText.iconComponent = RepeatDisabledIcon;
|
||||||
|
iconText.disabled = true;
|
||||||
|
}
|
||||||
|
return iconText;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function quoteItemState({
|
||||||
|
isMine,
|
||||||
|
isQuoteAutomaticallyAccepted,
|
||||||
|
isQuoteManuallyAccepted,
|
||||||
|
isQuoteFollowersOnly,
|
||||||
|
isPublic,
|
||||||
|
}: StatusState): MenuItemState {
|
||||||
|
const iconText: MenuItemState = {
|
||||||
|
title: messages.quote,
|
||||||
|
iconComponent: FormatQuote,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isPublic && !isMine) {
|
||||||
|
iconText.disabled = true;
|
||||||
|
iconText.iconComponent = FormatQuoteOff;
|
||||||
|
iconText.meta = messages.quote_private;
|
||||||
|
} else if (isQuoteAutomaticallyAccepted) {
|
||||||
|
iconText.title = messages.quote;
|
||||||
|
} else if (isQuoteManuallyAccepted) {
|
||||||
|
iconText.title = messages.request_quote;
|
||||||
|
iconText.meta = messages.quote_manual_review;
|
||||||
|
} else {
|
||||||
|
iconText.disabled = true;
|
||||||
|
iconText.iconComponent = FormatQuoteOff;
|
||||||
|
iconText.meta = isQuoteFollowersOnly
|
||||||
|
? messages.quote_followers_only
|
||||||
|
: messages.quote_cannot;
|
||||||
|
}
|
||||||
|
|
||||||
|
return iconText;
|
||||||
|
}
|
||||||
@ -1,425 +0,0 @@
|
|||||||
import { useCallback, useMemo } from 'react';
|
|
||||||
import type {
|
|
||||||
FC,
|
|
||||||
KeyboardEvent,
|
|
||||||
MouseEvent,
|
|
||||||
MouseEventHandler,
|
|
||||||
SVGProps,
|
|
||||||
} from 'react';
|
|
||||||
|
|
||||||
import type { MessageDescriptor } from 'react-intl';
|
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
import { quoteComposeById } from '@/mastodon/actions/compose_typed';
|
|
||||||
import { toggleReblog } from '@/mastodon/actions/interactions';
|
|
||||||
import { openModal } from '@/mastodon/actions/modal';
|
|
||||||
import type { ActionMenuItem } from '@/mastodon/models/dropdown_menu';
|
|
||||||
import type { Status, StatusVisibility } from '@/mastodon/models/status';
|
|
||||||
import {
|
|
||||||
createAppSelector,
|
|
||||||
useAppDispatch,
|
|
||||||
useAppSelector,
|
|
||||||
} from '@/mastodon/store';
|
|
||||||
import { isFeatureEnabled } from '@/mastodon/utils/environment';
|
|
||||||
import FormatQuote from '@/material-icons/400-24px/format_quote-fill.svg?react';
|
|
||||||
import FormatQuoteOff from '@/material-icons/400-24px/format_quote_off-fill.svg?react';
|
|
||||||
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
|
|
||||||
import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
|
|
||||||
import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
|
|
||||||
import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg?react';
|
|
||||||
import RepeatPrivateActiveIcon from '@/svg-icons/repeat_private_active.svg?react';
|
|
||||||
|
|
||||||
import type { RenderItemFn, RenderItemFnHandlers } from '../dropdown_menu';
|
|
||||||
import { Dropdown } from '../dropdown_menu';
|
|
||||||
import { Icon } from '../icon';
|
|
||||||
import { IconButton } from '../icon_button';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
all_disabled: {
|
|
||||||
id: 'status.all_disabled',
|
|
||||||
defaultMessage: 'Boosts and quotes are disabled',
|
|
||||||
},
|
|
||||||
quote: { id: 'status.quote', defaultMessage: 'Quote' },
|
|
||||||
quote_cannot: {
|
|
||||||
id: 'status.cannot_quote',
|
|
||||||
defaultMessage: 'Quotes are disabled on this post',
|
|
||||||
},
|
|
||||||
quote_followers_only: {
|
|
||||||
id: 'status.quote_followers_only',
|
|
||||||
defaultMessage: 'Only followers can quote this post',
|
|
||||||
},
|
|
||||||
quote_manual_review: {
|
|
||||||
id: 'status.quote_manual_review',
|
|
||||||
defaultMessage: 'Author will manually review',
|
|
||||||
},
|
|
||||||
quote_private: {
|
|
||||||
id: 'status.quote_private',
|
|
||||||
defaultMessage: 'Private posts cannot be quoted',
|
|
||||||
},
|
|
||||||
reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
|
|
||||||
reblog_or_quote: {
|
|
||||||
id: 'status.reblog_or_quote',
|
|
||||||
defaultMessage: 'Boost or quote',
|
|
||||||
},
|
|
||||||
reblog_cancel: {
|
|
||||||
id: 'status.cancel_reblog_private',
|
|
||||||
defaultMessage: 'Unboost',
|
|
||||||
},
|
|
||||||
reblog_private: {
|
|
||||||
id: 'status.reblog_private',
|
|
||||||
defaultMessage: 'Share again with your followers',
|
|
||||||
},
|
|
||||||
reblog_cannot: {
|
|
||||||
id: 'status.cannot_reblog',
|
|
||||||
defaultMessage: 'This post cannot be boosted',
|
|
||||||
},
|
|
||||||
request_quote: {
|
|
||||||
id: 'status.request_quote',
|
|
||||||
defaultMessage: 'Request to quote',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
interface ReblogButtonProps {
|
|
||||||
status: Status;
|
|
||||||
counters?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const StatusReblogButton: FC<ReblogButtonProps> = ({
|
|
||||||
status,
|
|
||||||
counters,
|
|
||||||
}) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
|
|
||||||
const statusState = useAppSelector((state) =>
|
|
||||||
selectStatusState(state, status),
|
|
||||||
);
|
|
||||||
const {
|
|
||||||
isLoggedIn,
|
|
||||||
isReblogged,
|
|
||||||
isReblogAllowed,
|
|
||||||
isQuoteAutomaticallyAccepted,
|
|
||||||
isQuoteManuallyAccepted,
|
|
||||||
} = statusState;
|
|
||||||
const { iconComponent } = useMemo(
|
|
||||||
() => reblogIconText(statusState),
|
|
||||||
[statusState],
|
|
||||||
);
|
|
||||||
const disabled =
|
|
||||||
!isQuoteAutomaticallyAccepted &&
|
|
||||||
!isQuoteManuallyAccepted &&
|
|
||||||
!isReblogAllowed;
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const statusId = status.get('id') as string;
|
|
||||||
const items: ActionMenuItem[] = useMemo(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
text: 'reblog',
|
|
||||||
action: (event) => {
|
|
||||||
if (isLoggedIn) {
|
|
||||||
dispatch(toggleReblog(statusId, event.shiftKey));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'quote',
|
|
||||||
action: () => {
|
|
||||||
if (isLoggedIn) {
|
|
||||||
dispatch(quoteComposeById(statusId));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[dispatch, isLoggedIn, statusId],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDropdownOpen = useCallback(
|
|
||||||
(event: MouseEvent | KeyboardEvent) => {
|
|
||||||
if (!isLoggedIn) {
|
|
||||||
dispatch(
|
|
||||||
openModal({
|
|
||||||
modalType: 'INTERACTION',
|
|
||||||
modalProps: {
|
|
||||||
type: 'reblog',
|
|
||||||
accountId: status.getIn(['account', 'id']),
|
|
||||||
url: status.get('uri'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} else if (event.shiftKey) {
|
|
||||||
dispatch(toggleReblog(status.get('id'), true));
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
[dispatch, isLoggedIn, status],
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderMenuItem: RenderItemFn<ActionMenuItem> = useCallback(
|
|
||||||
(item, index, handlers, focusRefCallback) => (
|
|
||||||
<ReblogMenuItem
|
|
||||||
status={status}
|
|
||||||
index={index}
|
|
||||||
item={item}
|
|
||||||
handlers={handlers}
|
|
||||||
key={`${item.text}-${index}`}
|
|
||||||
focusRefCallback={focusRefCallback}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
[status],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dropdown
|
|
||||||
items={items}
|
|
||||||
renderItem={renderMenuItem}
|
|
||||||
onOpen={handleDropdownOpen}
|
|
||||||
disabled={disabled}
|
|
||||||
>
|
|
||||||
<IconButton
|
|
||||||
title={intl.formatMessage(
|
|
||||||
!disabled ? messages.reblog_or_quote : messages.all_disabled,
|
|
||||||
)}
|
|
||||||
icon='retweet'
|
|
||||||
iconComponent={iconComponent}
|
|
||||||
counter={
|
|
||||||
counters
|
|
||||||
? (status.get('reblogs_count') as number) +
|
|
||||||
(status.get('quotes_count') as number)
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
active={isReblogged}
|
|
||||||
/>
|
|
||||||
</Dropdown>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface ReblogMenuItemProps {
|
|
||||||
status: Status;
|
|
||||||
item: ActionMenuItem;
|
|
||||||
index: number;
|
|
||||||
handlers: RenderItemFnHandlers;
|
|
||||||
focusRefCallback?: (c: HTMLAnchorElement | HTMLButtonElement | null) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ReblogMenuItem: FC<ReblogMenuItemProps> = ({
|
|
||||||
status,
|
|
||||||
index,
|
|
||||||
item: { text },
|
|
||||||
handlers,
|
|
||||||
focusRefCallback,
|
|
||||||
}) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const statusState = useAppSelector((state) =>
|
|
||||||
selectStatusState(state, status),
|
|
||||||
);
|
|
||||||
const { title, meta, iconComponent, disabled } = useMemo(
|
|
||||||
() =>
|
|
||||||
text === 'quote'
|
|
||||||
? quoteIconText(statusState)
|
|
||||||
: reblogIconText(statusState),
|
|
||||||
[statusState, text],
|
|
||||||
);
|
|
||||||
const active = useMemo(
|
|
||||||
() => text === 'reblog' && !!status.get('reblogged'),
|
|
||||||
[status, text],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
className={classNames('dropdown-menu__item reblog-button__item', {
|
|
||||||
disabled,
|
|
||||||
active,
|
|
||||||
})}
|
|
||||||
key={`${text}-${index}`}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
{...handlers}
|
|
||||||
title={intl.formatMessage(title)}
|
|
||||||
ref={focusRefCallback}
|
|
||||||
disabled={disabled}
|
|
||||||
data-index={index}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
id={text === 'quote' ? 'quote' : 'retweet'}
|
|
||||||
icon={iconComponent}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
{intl.formatMessage(title)}
|
|
||||||
{meta && (
|
|
||||||
<span className='reblog-button__meta'>
|
|
||||||
{intl.formatMessage(meta)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Legacy helpers
|
|
||||||
|
|
||||||
// Switch between the legacy and new reblog button based on feature flag.
|
|
||||||
export const ReblogButton: FC<ReblogButtonProps> = (props) => {
|
|
||||||
if (isFeatureEnabled('outgoing_quotes')) {
|
|
||||||
return <StatusReblogButton {...props} />;
|
|
||||||
}
|
|
||||||
return <LegacyReblogButton {...props} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const LegacyReblogButton: FC<ReblogButtonProps> = ({
|
|
||||||
status,
|
|
||||||
counters,
|
|
||||||
}) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const statusState = useAppSelector((state) =>
|
|
||||||
selectStatusState(state, status),
|
|
||||||
);
|
|
||||||
|
|
||||||
const { title, meta, iconComponent, disabled } = useMemo(
|
|
||||||
() => reblogIconText(statusState),
|
|
||||||
[statusState],
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const handleClick: MouseEventHandler = useCallback(
|
|
||||||
(event) => {
|
|
||||||
if (statusState.isLoggedIn) {
|
|
||||||
dispatch(toggleReblog(status.get('id') as string, event.shiftKey));
|
|
||||||
} else {
|
|
||||||
dispatch(
|
|
||||||
openModal({
|
|
||||||
modalType: 'INTERACTION',
|
|
||||||
modalProps: {
|
|
||||||
type: 'reblog',
|
|
||||||
accountId: status.getIn(['account', 'id']),
|
|
||||||
url: status.get('uri'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[dispatch, status, statusState.isLoggedIn],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IconButton
|
|
||||||
disabled={disabled}
|
|
||||||
active={!!status.get('reblogged')}
|
|
||||||
title={intl.formatMessage(meta ?? title)}
|
|
||||||
icon='retweet'
|
|
||||||
iconComponent={iconComponent}
|
|
||||||
onClick={!disabled ? handleClick : undefined}
|
|
||||||
counter={
|
|
||||||
counters
|
|
||||||
? (status.get('reblogs_count') as number) +
|
|
||||||
(status.get('quotes_count') as number)
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helpers for copy and state for status.
|
|
||||||
const selectStatusState = createAppSelector(
|
|
||||||
[
|
|
||||||
(state) => state.meta.get('me') as string | undefined,
|
|
||||||
(_, status: Status) => status,
|
|
||||||
],
|
|
||||||
(userId, status) => {
|
|
||||||
const isPublic = ['public', 'unlisted'].includes(
|
|
||||||
status.get('visibility') as StatusVisibility,
|
|
||||||
);
|
|
||||||
const isMineAndPrivate =
|
|
||||||
userId === status.getIn(['account', 'id']) &&
|
|
||||||
status.get('visibility') === 'private';
|
|
||||||
return {
|
|
||||||
isLoggedIn: !!userId,
|
|
||||||
isPublic,
|
|
||||||
isMine: userId === status.getIn(['account', 'id']),
|
|
||||||
isPrivateReblog:
|
|
||||||
userId === status.getIn(['account', 'id']) &&
|
|
||||||
status.get('visibility') === 'private',
|
|
||||||
isReblogged: !!status.get('reblogged'),
|
|
||||||
isReblogAllowed: isPublic || isMineAndPrivate,
|
|
||||||
isQuoteAutomaticallyAccepted:
|
|
||||||
status.getIn(['quote_approval', 'current_user']) === 'automatic' &&
|
|
||||||
(isPublic || isMineAndPrivate),
|
|
||||||
isQuoteManuallyAccepted:
|
|
||||||
status.getIn(['quote_approval', 'current_user']) === 'manual' &&
|
|
||||||
(isPublic || isMineAndPrivate),
|
|
||||||
isQuoteFollowersOnly:
|
|
||||||
status.getIn(['quote_approval', 'automatic', 0]) === 'followers' ||
|
|
||||||
status.getIn(['quote_approval', 'manual', 0]) === 'followers',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
);
|
|
||||||
type StatusState = ReturnType<typeof selectStatusState>;
|
|
||||||
|
|
||||||
interface IconText {
|
|
||||||
title: MessageDescriptor;
|
|
||||||
meta?: MessageDescriptor;
|
|
||||||
iconComponent: FC<SVGProps<SVGSVGElement>>;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
function reblogIconText({
|
|
||||||
isPublic,
|
|
||||||
isPrivateReblog,
|
|
||||||
isReblogged,
|
|
||||||
}: StatusState): IconText {
|
|
||||||
if (isReblogged) {
|
|
||||||
return {
|
|
||||||
title: messages.reblog_cancel,
|
|
||||||
iconComponent: isPublic ? RepeatActiveIcon : RepeatPrivateActiveIcon,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const iconText: IconText = {
|
|
||||||
title: messages.reblog,
|
|
||||||
iconComponent: RepeatIcon,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isPrivateReblog) {
|
|
||||||
iconText.meta = messages.reblog_private;
|
|
||||||
iconText.iconComponent = RepeatPrivateIcon;
|
|
||||||
} else if (!isPublic) {
|
|
||||||
iconText.meta = messages.reblog_cannot;
|
|
||||||
iconText.iconComponent = RepeatDisabledIcon;
|
|
||||||
iconText.disabled = true;
|
|
||||||
}
|
|
||||||
return iconText;
|
|
||||||
}
|
|
||||||
|
|
||||||
function quoteIconText({
|
|
||||||
isMine,
|
|
||||||
isQuoteAutomaticallyAccepted,
|
|
||||||
isQuoteManuallyAccepted,
|
|
||||||
isQuoteFollowersOnly,
|
|
||||||
isPublic,
|
|
||||||
}: StatusState): IconText {
|
|
||||||
const iconText: IconText = {
|
|
||||||
title: messages.quote,
|
|
||||||
iconComponent: FormatQuote,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isPublic && !isMine) {
|
|
||||||
iconText.disabled = true;
|
|
||||||
iconText.iconComponent = FormatQuoteOff;
|
|
||||||
iconText.meta = messages.quote_private;
|
|
||||||
} else if (isQuoteAutomaticallyAccepted) {
|
|
||||||
iconText.title = messages.quote;
|
|
||||||
} else if (isQuoteManuallyAccepted) {
|
|
||||||
iconText.title = messages.request_quote;
|
|
||||||
iconText.meta = messages.quote_manual_review;
|
|
||||||
} else {
|
|
||||||
iconText.disabled = true;
|
|
||||||
iconText.iconComponent = FormatQuoteOff;
|
|
||||||
iconText.meta = isQuoteFollowersOnly
|
|
||||||
? messages.quote_followers_only
|
|
||||||
: messages.quote_cannot;
|
|
||||||
}
|
|
||||||
|
|
||||||
return iconText;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
* Extend an existing type and make some of its properties required or optional.
|
||||||
|
* @example
|
||||||
|
* interface Person {
|
||||||
|
* name: string;
|
||||||
|
* age?: number;
|
||||||
|
* likesIceCream?: boolean;
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* type PersonWithSomeRequired = SomeRequired<Person, 'age' | 'likesIceCream' >;
|
||||||
|
* type PersonWithSomeOptional = SomeOptional<Person, 'name' >;
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type SomeRequired<T, K extends keyof T> = T & Required<Pick<T, K>>;
|
||||||
|
export type SomeOptional<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>> &
|
||||||
|
Partial<Pick<T, K>>;
|
||||||
Loading…
Reference in New Issue