2018-01-30 11:53:12 -05:00
|
|
|
const classNames = require('classnames');
|
|
|
|
const FormattedRelative = require('react-intl').FormattedRelative;
|
|
|
|
const PropTypes = require('prop-types');
|
|
|
|
const React = require('react');
|
2017-08-31 17:05:22 -04:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
const FlexRow = require('../flex-row/flex-row.jsx');
|
2017-08-31 17:05:22 -04:00
|
|
|
|
|
|
|
require('./social-message.scss');
|
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
const SocialMessage = props => (
|
|
|
|
<props.as className={classNames('social-message', props.className)}>
|
|
|
|
<FlexRow className="mod-social-message">
|
|
|
|
<div className="social-message-content">
|
|
|
|
{typeof props.iconSrc === 'undefined' ? [] : [
|
|
|
|
<img
|
|
|
|
alt={props.iconAlt}
|
|
|
|
className={classNames('social-message-icon', props.imgClassName)}
|
|
|
|
key="social-message-icon"
|
|
|
|
src={props.iconSrc}
|
|
|
|
/>
|
|
|
|
]}
|
|
|
|
<div>
|
|
|
|
{props.children}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span className="social-message-date">
|
|
|
|
<FormattedRelative value={new Date(props.datetime)} />
|
|
|
|
</span>
|
|
|
|
</FlexRow>
|
|
|
|
</props.as>
|
|
|
|
);
|
|
|
|
|
|
|
|
SocialMessage.propTypes = {
|
|
|
|
as: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
|
|
|
|
children: PropTypes.node,
|
|
|
|
className: PropTypes.string,
|
|
|
|
datetime: PropTypes.string.isRequired,
|
|
|
|
iconAlt: PropTypes.string,
|
|
|
|
iconSrc: PropTypes.string,
|
|
|
|
imgClassName: PropTypes.string
|
|
|
|
};
|
|
|
|
|
|
|
|
SocialMessage.defaultProps = {
|
|
|
|
as: 'li'
|
|
|
|
};
|
2017-08-31 17:05:22 -04:00
|
|
|
|
|
|
|
module.exports = SocialMessage;
|