labo-components/app/components/resourceviewer/annotationColumn/Types/Comment.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';
import IDUtil from '../../../../util/IDUtil';
import classNames from 'classnames';
import TextareaAutosize from 'react-textarea-autosize';

export default class Comment extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            edit: false
        };

        this.textarea = React.createRef();
    }

    edit = () => {
        this.setState({ edit: true });
    };

    stopEdit = () => {
        this.setState({ edit: false });
        this.update();
    };

    // update comment contents
    // store to annotation client directly
    update = () => {
        // update the comment
        const comment = Object.assign({}, this.props.comment, {
            text: this.textareaRef.current.value
        });

        // save
        this.props.annotationClient.saveBodyElement(
            comment,
            false,
            true,
            this.props.targetAnnotation
        );
    };

    delete = () => {
        if (confirm('Are you sure you want to delete this comment?')) {
            this.props.delete(this.props.comment);
        }
    };

    render() {
        // format date string
        const created = (this.props.comment.created || '')
            .replace('T', ' ')
            .slice(0, -4);

        return (
            <div className={classNames(IDUtil.cssClassName('comment-type'))}>
                <div className="delete" title="Delete" onClick={this.delete} />
                {this.state.edit ? (
                    <TextareaAutosize
                        ref={this.textareaRef}
                        onBlur={this.stopEdit}
                        defaultValue={this.props.comment.text}
                    />
                ) : (
                    <pre onDoubleClick={this.edit}>
                        {this.props.comment.text}
                    </pre>
                )}
                <span className="user">{this.props.comment.user}</span>
                <span className="created">{created}</span>
            </div>
        );
    }
}

Comment.propTypes = {
    comment: PropTypes.object,
    delete: PropTypes.func.isRequired,
    annotationClient: PropTypes.object.isRequired,
    targetAnnotation: PropTypes.object.isRequired
};