moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'update-component-status-action-bar' into 'main' 

Update action bar in status component

See merge request soapbox-pub/soapbox!3271
This commit is contained in:
Alex Gleason 2024-11-19 21:42:23 +00:00
parent b88ae602c5 f67af96f74
commit fe7ffe48f7
2 changed files with 3 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/status-action-bar.tsx
View File

@ -146,7 +146,6 @@ const messages = defineMessages({
interface IStatusActionBar {
status: Status;
withLabels?: boolean;
expandable?: boolean;
space?: 'sm' | 'md' | 'lg';
statusActionButtonTheme?: 'default' | 'inverse';
@ -155,7 +154,6 @@ interface IStatusActionBar {
const StatusActionBar: React.FC<IStatusActionBar> = ({
status,
withLabels = false,
expandable = true,
space = 'sm',
statusActionButtonTheme = 'default',
@ -740,7 +738,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
active={status.reblogged}
onClick={handleReblogClick}
count={reblogCount}
text={withLabels ? intl.formatMessage(messages.reblog) : undefined}
theme={statusActionButtonTheme}
/>
);
@ -780,7 +777,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
icon={messageCircleIcon}
onClick={handleReplyClick}
count={replyCount}
text={withLabels ? intl.formatMessage(messages.reply) : undefined}
disabled={replyDisabled}
theme={statusActionButtonTheme}
/>
@ -808,7 +804,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
active={Boolean(meEmojiName)}
count={emojiReactCount}
emoji={meEmojiReact}
text={withLabels ? meEmojiTitle : undefined}
theme={statusActionButtonTheme}
/>
</StatusReactionWrapper>
@ -821,7 +816,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
onClick={handleFavouriteClick}
active={Boolean(meEmojiName)}
count={favouriteCount}
text={withLabels ? meEmojiTitle : undefined}
theme={statusActionButtonTheme}
/>
)}
@ -835,7 +829,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
onClick={handleDislikeClick}
active={status.disliked}
count={status.dislikes_count}
text={withLabels ? intl.formatMessage(messages.disfavourite) : undefined}
theme={statusActionButtonTheme}
/>
)}
@ -848,7 +841,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
filled
onClick={handleZapClick}
active={status.zapped}
text={withLabels ? intl.formatMessage(messages.zap) : undefined}
theme={statusActionButtonTheme}
count={status?.zaps_amount ? status.zaps_amount / 1000 : 0}
/>

15
src/components/status-action-button.tsx
View File

@ -36,12 +36,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
color?: Color;
filled?: boolean;
emoji?: EmojiReaction;
text?: React.ReactNode;
theme?: 'default' | 'inverse';
}
const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', ...filteredProps } = props;
const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, theme = 'default', ...filteredProps } = props;
const renderIcon = () => {
if (emoji) {
@ -70,13 +69,7 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
};
const renderText = () => {
if (text) {
return (
<Text tag='span' theme='inherit' size='sm'>
{text}
</Text>
);
} else if (count) {
if (count) {
return (
<StatusActionCounter count={count} />
);
@ -88,7 +81,7 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
ref={ref}
type='button'
className={clsx(
'flex items-center rounded-full p-1 rtl:space-x-reverse',
'flex items-center space-x-1 rounded-full p-1 rtl:space-x-reverse',
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0',
{
'text-gray-600 hover:text-gray-600 dark:hover:text-white bg-white dark:bg-transparent': theme === 'default',
@ -97,8 +90,6 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
'hover:text-gray-600 dark:hover:text-white': !filteredProps.disabled,
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
'space-x-1': !text,
'space-x-2': text,
},
className,
)}