adastra-ui-comment
Version:
Testing locally 1) in this file - `npm i` install dependencies - `npm run build` or `npm run tsc` to build your module 2) in childApp - in package.json under dependencies add ui-astra-assets with file:(relativePathToRepo) - "ui-astra-a
120 lines • 6.23 kB
JavaScript
import React from 'react';
import { injectIntl } from 'react-intl';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
import moment from 'moment';
import { compose } from 'redux';
import { connect } from 'react-redux';
import messages from 'CommentSection/messages';
import ListItemText from '@material-ui/core/ListItemText';
import Button from '@material-ui/core/Button';
import { AstraTheme } from 'Themes/themes';
import { deleteCommentBeginAction, setReplyUser, } from 'CommentSection/actions';
import ReactMarkdown from 'react-markdown';
import Linkify from 'react-linkify';
import { commentToolButtonStyle } from 'CommentSection/components/styles';
import 'CommentSection/components/reactMarkdownOverride.css';
const momentLocale = moment.locale();
moment.updateLocale(momentLocale, {
calendar: {
lastWeek: 'l, LT',
sameElse: 'l, LT',
},
});
const prettyCommentStyle = {
fontFamily: AstraTheme.typography.fontFamily,
};
export const OwnerTools = ({ handleOnDelete, intl }) => {
return (React.createElement("div", { style: { display: 'flex' } },
React.createElement(Button, { id: "comment_delete_button", style: commentToolButtonStyle, onClick: handleOnDelete, "aria-label": intl.formatMessage(messages.deleteButton) },
React.createElement(Typography, { color: 'textSecondary', style: { fontSize: 'inherit', lineHeight: 1 } }, intl.formatMessage(messages.deleteButton)))));
};
export const NonOwnerTools = ({ handleOnReply, intl }) => {
return (React.createElement("div", { style: { display: 'flex' } },
React.createElement(Button, { id: "comment_reply_button", style: commentToolButtonStyle, onClick: handleOnReply, "aria-label": intl.formatMessage(messages.replyButton) },
React.createElement(Typography, { color: 'textSecondary', style: { fontSize: 'inherit', lineHeight: 1 } }, intl.formatMessage(messages.replyButton)))));
};
export const DeletedView = ({ undoDelete, wasDeleted, intl }) => {
return (React.createElement("div", null,
React.createElement(Typography, null, intl.formatMessage(messages.undoWarning)),
React.createElement("div", { style: { display: 'flex' } },
React.createElement(CircularCountdown, null),
React.createElement(Button, { id: "comment_reply_button", onClick: undoDelete, disabled: wasDeleted, "aria-label": intl.formatMessage(messages.undoDeleteButton) }, intl.formatMessage(messages.undoDeleteButton)))));
};
export const CircularCountdown = () => {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
function tick() {
setProgress(oldProgress => (oldProgress >= 100 ? oldProgress : oldProgress + 1));
}
const timer = setInterval(tick, 20);
return () => {
clearInterval(timer);
};
});
return (React.createElement(CircularProgress, { variant: "determinate", value: progress }));
};
let timer;
export class CommentItem extends React.Component {
constructor() {
super(...arguments);
this.initialComment = {
id: '',
author: '',
authorId: '',
message: '',
createdDate: '',
isOwner: true,
};
this.state = { toBeDeleted: false, wasDeleted: false, toBeDeletedComment: this.initialComment };
this.componentWillUpdate = (prevProps) => {
if (prevProps.comment.id !== this.props.comment.id) {
this.setState({ toBeDeleted: false, wasDeleted: false });
}
};
this.onDelete = () => {
this.setState({ toBeDeleted: true, toBeDeletedComment: this.props.comment });
timer = setTimeout(() => {
this.setState({ wasDeleted: true });
this.props.deleteComment(this.state.toBeDeletedComment);
}, 3500);
};
this.undoDelete = () => {
clearTimeout(timer);
this.setState({ toBeDeleted: false });
};
this.onReply = () => {
this.props.replyComment(`@[${this.props.comment.author}](${this.props.comment.authorId})`);
};
}
render() {
const { comment, divider, key, } = this.props;
const prettyComment = comment.message.replace(/\@\[(.*?)\]\((.*?)\)/g, '**$1**');
return (React.createElement(ListItem, { key: key, divider: divider },
React.createElement(ListItemText, null,
this.state.toBeDeleted && (React.createElement(DeletedView, { undoDelete: this.undoDelete, wasDeleted: this.state.wasDeleted, intl: this.props.intl })),
!this.state.toBeDeleted && (React.createElement("div", null,
React.createElement("div", { style: { display: 'flex' } },
React.createElement(Typography, { color: "inherit", style: { fontWeight: 'bold' } }, comment.author),
React.createElement(Typography, { color: "textSecondary", style: { paddingLeft: 10 } }, moment(comment.createdDate).calendar())),
React.createElement("div", { style: prettyCommentStyle },
React.createElement(Linkify, null,
React.createElement(ReactMarkdown, { source: prettyComment, skipHtml: true }))),
comment.isOwner && (React.createElement(OwnerTools, { handleOnDelete: this.onDelete, intl: this.props.intl })),
!comment.isOwner && (React.createElement(NonOwnerTools, { handleOnReply: this.onReply, intl: this.props.intl })))))));
}
}
export const mapDispatchToProps = (dispatch) => {
return {
deleteComment: (comment) => {
console.log(comment);
dispatch(deleteCommentBeginAction(comment));
},
replyComment: userString => dispatch(setReplyUser(userString)),
};
};
const withConnect = connect(null, mapDispatchToProps);
export const CommentItemWithIntl = injectIntl(CommentItem, { withRef: true });
export default compose(withConnect)(CommentItemWithIntl);
//# sourceMappingURL=CommentItem.js.map