Alex Gleason
3 years ago
parent
82130a1612
commit
bd98842434
@ -0,0 +1,81 @@
|
|||||||
|
import classNames from 'classnames';
|
||||||
|
import React from 'react';
|
||||||
|
import InlineSVG from 'react-inlinesvg';
|
||||||
|
|
||||||
|
import { Text } from 'soapbox/components/ui';
|
||||||
|
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
||||||
|
|
||||||
|
const COLORS = {
|
||||||
|
accent: 'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300',
|
||||||
|
success: 'text-success-600 hover:text-success-600 dark:hover:text-success-600',
|
||||||
|
'': '',
|
||||||
|
};
|
||||||
|
|
||||||
|
const FILL_COLORS = {
|
||||||
|
accent: 'fill-accent-300 hover:fill-accent-300',
|
||||||
|
'': '',
|
||||||
|
};
|
||||||
|
|
||||||
|
type Color = keyof typeof COLORS;
|
||||||
|
type FillColor = keyof typeof FILL_COLORS;
|
||||||
|
|
||||||
|
interface IStatusActionCounter {
|
||||||
|
count: number,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Action button numerical counter, eg "5" likes */
|
||||||
|
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<Text size='xs' weight='semibold' theme='inherit'>
|
||||||
|
{shortNumberFormat(count)}
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
iconClassName?: string,
|
||||||
|
icon: string,
|
||||||
|
count?: number,
|
||||||
|
active?: boolean,
|
||||||
|
color?: Color,
|
||||||
|
fill?: FillColor,
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
|
||||||
|
const { icon, className, iconClassName, active, color = '', fill = '', count = 0, ...filteredProps } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
ref={ref}
|
||||||
|
type='button'
|
||||||
|
className={classNames(
|
||||||
|
'group flex items-center p-1 space-x-0.5 rounded-full',
|
||||||
|
'text-gray-400 hover:text-gray-600 dark:hover:text-white',
|
||||||
|
'bg-white dark:bg-transparent',
|
||||||
|
{
|
||||||
|
[COLORS[color]]: active,
|
||||||
|
},
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...filteredProps}
|
||||||
|
>
|
||||||
|
<InlineSVG
|
||||||
|
src={icon}
|
||||||
|
className={classNames(
|
||||||
|
'p-1 rounded-full box-content',
|
||||||
|
'group-focus:outline-none group-focus:ring-2 group-focus:ring-offset-2 dark:ring-offset-0 group-focus:ring-primary-500',
|
||||||
|
{
|
||||||
|
[FILL_COLORS[fill]]: active,
|
||||||
|
},
|
||||||
|
iconClassName,
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{(count || null) && (
|
||||||
|
<StatusActionCounter count={count} />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default StatusActionButton;
|
||||||
@ -1,77 +0,0 @@
|
|||||||
import classNames from 'classnames';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { IconButton } from 'soapbox/components/ui';
|
|
||||||
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
|
||||||
|
|
||||||
interface IStatusActionCounter {
|
|
||||||
count: number,
|
|
||||||
className?: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Action button numerical counter, eg "5" likes */
|
|
||||||
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0, className }): JSX.Element => {
|
|
||||||
return (
|
|
||||||
<span className={classNames('text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', className)}>
|
|
||||||
{shortNumberFormat(count)}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface IStatusAction {
|
|
||||||
title?: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Status action container element */
|
|
||||||
const StatusAction: React.FC<IStatusAction> = ({ title, children }) => {
|
|
||||||
return (
|
|
||||||
<div title={title} className='group flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface IStatusActionButton {
|
|
||||||
icon: string,
|
|
||||||
onClick: () => void,
|
|
||||||
count?: number,
|
|
||||||
active?: boolean,
|
|
||||||
title?: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Action button (eg "Like") for a Status */
|
|
||||||
const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active = false, onClick, count = 0 }): JSX.Element => {
|
|
||||||
|
|
||||||
const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
||||||
onClick();
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StatusAction title={title}>
|
|
||||||
<IconButton
|
|
||||||
title={title}
|
|
||||||
src={icon}
|
|
||||||
onClick={handleClick}
|
|
||||||
className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', {
|
|
||||||
'text-accent-300 group-hover:text-accent-300 dark:group-hover:text-accent-300': active,
|
|
||||||
// TODO: repost button
|
|
||||||
// 'text-success-600 hover:text-success-600': active,
|
|
||||||
})}
|
|
||||||
iconClassName={classNames({
|
|
||||||
'fill-accent-300': active,
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{(count || null) && (
|
|
||||||
<StatusActionCounter
|
|
||||||
className={classNames({ 'text-accent-300 group-hover:text-accent-300': active })}
|
|
||||||
count={count}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</StatusAction>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export { StatusAction, StatusActionButton, StatusActionCounter };
|
|
||||||
Loading…
Reference in new issue