labo-components/app/components/resourceviewer/annotationColumn/CommentForm.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';
import IDUtil from '../../../util/IDUtil';
import { AnnotationEvents } from '../AnnotationClient';
import TextareaAutosize from 'react-textarea-autosize';

export default class CommentForm extends React.PureComponent {
    constructor(props) {
        super(props);
        this.textareaRef = React.createRef();
    }

    /* --------------- COMMENT CRUD -------------- */

    saveComment = () => {
        const comment = { annotationType: 'comment' };

        comment.text = this.textareaRef.current.value;
        this.props.annotationClient.saveBodyElement(
            comment,
            false,
            true,
            this.props.annotation
        ); // after saving a ON_SET_ANNOTATION is triggered
    };

    onSubmit = e => {
        e.preventDefault();
        this.saveComment();

        // empty
        this.textareaRef.current.value = '';
    };

    render() {
        return (
            <div className={IDUtil.cssClassName('comment-form')}>
                <form onSubmit={this.onSubmit}>
                    <TextareaAutosize
                        ref={this.textareaRef}
                        placeholder="Comments or notes"
                    />
                    <button type="submit">Add</button>
                </form>
            </div>
        );
    }
}

CommentForm.propTypes = {
    annotationClient: PropTypes.object.isRequired,
    annotation: PropTypes.object.isRequired
};