65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
import {
|
|
Icon, IconButton, OverlayTrigger, Tooltip,
|
|
} from '@edx/paragon';
|
|
|
|
import { ThumbUpFilled, ThumbUpOutline } from '../../../components/icons';
|
|
import messages from './messages';
|
|
|
|
function LikeButton({
|
|
count,
|
|
intl,
|
|
onClick,
|
|
voted,
|
|
}) {
|
|
const handleClick = (e) => {
|
|
e.preventDefault();
|
|
if (onClick) {
|
|
onClick();
|
|
}
|
|
return false;
|
|
};
|
|
|
|
return (
|
|
<div className="d-flex align-items-center mr-36px text-primary-500">
|
|
<OverlayTrigger
|
|
overlay={(
|
|
<Tooltip id={`liked-${count}-tooltip`}>
|
|
{intl.formatMessage(voted ? messages.removeLike : messages.like)}
|
|
</Tooltip>
|
|
)}
|
|
>
|
|
<IconButton
|
|
src={voted ? ThumbUpFilled : ThumbUpOutline}
|
|
onClick={handleClick}
|
|
className="post-footer-icon-dimentions"
|
|
alt="Like"
|
|
iconAs={Icon}
|
|
iconClassNames="like-icon-dimentions"
|
|
/>
|
|
</OverlayTrigger>
|
|
<div className="font-style">
|
|
{(count && count > 0) ? count : null}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
LikeButton.propTypes = {
|
|
count: PropTypes.number.isRequired,
|
|
intl: intlShape.isRequired,
|
|
onClick: PropTypes.func,
|
|
voted: PropTypes.bool,
|
|
};
|
|
|
|
LikeButton.defaultProps = {
|
|
voted: false,
|
|
onClick: undefined,
|
|
};
|
|
|
|
export default injectIntl(LikeButton);
|