adastra-ui-comment/dist/CommentSection/index.js

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

import React from 'react';
import { MentionsInput, Mention } from 'react-mentions';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import SendIcon from '@material-ui/icons/Send';
import { mentionInputStyle, paperStyle, dividerStyle, commentStyling, buttonStyle, } from 'CommentSection/components/styles';
export class CommentsSection extends React.Component {
    constructor(props) {
        super(props);
        this.anchorEl = null;
        this.componentDidMount = () => {
            this.setState({ comments: this.props.comments });
            this.props.fetchUsers();
        };
        this.componentDidUpdate = (prevProps) => {
            if (JSON.stringify(prevProps.comments) !== JSON.stringify(this.props.comments) ||
                prevProps.comments.length !== this.props.comments.length) {
            }
            if (prevProps.threadId !== this.props.threadId) {
                const threadId = this.props.threadId;
                this.props.fetchComments(threadId);
                this.props.setThreadId(threadId);
            }
            if (prevProps.users !== this.props.users) {
                const mappedUsers = this.props.users.map(u => ({ id: u.id, display: `${u.firstName} ${u.lastName}` }));
                this.setState({ users: mappedUsers });
            }
            if (prevProps.replyUser !== this.props.replyUser) {
                const commentList = document.getElementById('comment_input');
                if (commentList) {
                    commentList.focus();
                }
                const newCommentVal = `${this.props.replyUser} ${this.state.newNotificaitonValue}`;
                this.setState({ newNotificaitonValue: newCommentVal });
            }
        };
        this.updateComment = (e) => {
            if (e.target.value !== '\n') {
                this.setState({
                    newNotificaitonValue: e.target.value,
                });
            }
        };
        this.checkEnter = (e) => {
            if (e.keyCode === 13 && !this.state.userSearch) {
                this.createComment();
            }
        };
        this.createComment = () => {
            const threadId = this.props.threadId;
            const threadName = this.props.threadId;
            const newComment = {
                comment_text: this.state.newNotificaitonValue,
                thread_id: threadId,
                source_url: window.location.pathname + window.location.search,
                thread_name: threadName,
            };
            this.props.createComment(newComment);
            this.setState({ newNotificaitonValue: '', userSearch: false });
        };
        this.getData = (query) => {
            let returnedUsers;
            if (this.state.users === []) {
                const mappedUsers = this.props.users.map(u => ({ id: u.id, display: `${u.firstName} ${u.lastName}` }));
                this.setState({ users: mappedUsers });
                returnedUsers = mappedUsers.filter(u => (u.display.toLowerCase().includes(query.toLowerCase())));
            }
            else {
                returnedUsers = this.state.users.filter(u => (u.display.toLowerCase().includes(query.toLowerCase())));
            }
            returnedUsers.sort((a, b) => {
                if (a.display < b.display) {
                    return -1;
                }
                if (a.display > b.display) {
                    return 1;
                }
                return 0;
            });
            if (returnedUsers.length > 10) {
                const userCount = returnedUsers.length;
                returnedUsers = returnedUsers.slice(0, 10);
                returnedUsers.push({
                    id: 'count',
                    display: `(${userCount} results)`,
                });
            }
            this.setState({ userSearch: (returnedUsers.length > 0) });
            return returnedUsers;
        };
        this.addUser = () => {
            this.setState({ userSearch: false });
        };
        this.scrollDown = () => {
            const commentList = document.getElementById('comment_list');
            if (commentList) {
                const isIE = navigator.userAgent.indexOf('MSIE') !== -1;
                const isEdge = navigator.userAgent.indexOf('Edge') !== -1;
                const isSafari = navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1;
                if (isIE || isEdge || isSafari) {
                    window.scrollTo(0, commentList.offsetTop - 250);
                }
                else {
                    window.scrollTo({
                        top: commentList.offsetTop - 250,
                        behavior: 'smooth',
                    });
                }
            }
            this.setState({ focused: true });
        };
        this.handleBlur = () => {
            this.setState({ focused: false });
        };
        const initialComments = [];
        const initialUsers = [];
        this.state = {
            comments: initialComments,
            newNotificaitonValue: '',
            userSearch: false,
            users: initialUsers,
            focused: false,
        };
    }
    render() {
        return (React.createElement("div", { style: commentStyling },
            React.createElement("div", { style: dividerStyle }),
            React.createElement(Paper, { style: paperStyle },
                React.createElement("div", { style: { display: 'flex' } },
                    React.createElement("div", { style: { width: '100%' } },
                        React.createElement(MentionsInput, { id: "comment_input", value: this.state.newNotificaitonValue, onFocus: this.scrollDown, onBlur: this.handleBlur, onChange: this.updateComment, onKeyDown: this.checkEnter, allowSpaceInQuery: true, style: mentionInputStyle(this.state.focused) },
                            React.createElement(Mention, { trigger: "@", data: this.getData, onAdd: this.addUser, appendSpaceOnAdd: true, style: mentionInputStyle(this.state.focused).mention }))),
                    React.createElement(Button, { id: "comment_input_button", style: buttonStyle(this.state.focused), onClick: this.createComment },
                        React.createElement(SendIcon, null))))));
    }
}
export default CommentsSection;
//# sourceMappingURL=index.js.map