@afconsult/apollo-comments

Apollo Comments

React Comments Plugin for Apollo

Getting Started

Install

Install with npm:

npm install @afconsult/apollo-comments --save

Install with Yarn:

yarn add @afconsult/apollo-comments

Example

1. Import the stylesheet:

import '@afconsult/apollo-comments/dist/apollo-comments.css';

1. Import the component:

import CommentBox from '@afconsult/apollo-comments';

1. Use the component:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.author = {
      id: 8653303542,
      displayName: 'Willow Mcdonald',
      imageUrl: 'https://picsum.photos/200/200/?image=0',
      onClick: (authorId) => { },
    };

    this.comments = [
      {
        id: 0,
        author: {
          id: 8653303542,
          displayName: 'Willow Mcdonald',
          imageUrl: 'https://picsum.photos/200/200/?image=0',
          onClick: (authorId) => { }
        },
        createdDate: new Date(2018, 1, 1, 9, 4, 59).toString(),
        text: 'Twee flannel poke knausgaard dreamcatcher normcore iPhone.',
        actions: [
          { label: 'Delete', onClick: (commentId) => { } }
        ],
      },
      {
        id: 1,
        author: {
          id: 9269792615,
          displayName: 'Cian Fernandez',
          imageUrl: 'https://picsum.photos/200/200/?image=1',
          onClick: (authorId) => { }
        },
        createdDate: new Date(2018, 1, 13, 13, 45, 12).toString(),
        text: 'Quinoa gluten-free single-origin coffee chambray.',
      },
    ];

    this.mention = {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      denotationChars: ['@'],
      onSource: (searchTerm, renderList, denotationChar) => {
        const items = [
          { id: 5801740633, value: 'Annabelle Robinson' },
          { id: 9140877053, value: 'Brodie Stevenson' }
        ];

        if (searchTerm.length === 0) {
          renderList(items, searchTerm);
        } else {
          const matches = [];
          for (i = 0; i < items.length; i++) {
            if (~items[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {
              matches.push(items[i]);
            }
          }
          renderList(matches, searchTerm);
        }
      }
    };
  }

  render() {    
    return (
      <CommentBox
        author={this.author}
        comments={this.comments.sort((a, b) => a.createdDate < b.createdDate ? -1 : 1)}
        mention={this.mention}
        onSubmit={editor => { }}
        placeholder="Write a comment..."
        title="Comments"
      />
    );
  }
}

Props

author : (required) An object describing the user of the comment box. The object should specify an id, displayName, imageUrl and onClick(authorId).

comments : An array of objects specifying comment data. Default is [].

Comment	Default	Description
id	null	A unique string ID used to identify the comment.
author	{}	An object describing the author of the comment. The object should specify an id, displayName, imageUrl and onClick(authorId).
createdDate	null	A string representation of a date for when the comment was created.
text	null	Text for the comment. Can be a string containing HTML.
actions	[]	An array of objects specifying custom actions that can be applied to edit the comment. Each action requires a label and onClick(commentId).

dateFormat : A Moment.js string token. Default is YYYY-MM-DD HH:mm:ss

mention : (optional) An object specifying necessary options module Quill Mention module. Default is null.

Options	Default	Description
allowedChars	[a-zA-Z0-9_]	Allowed characters in search term triggering a search request using regular expressions.
denotationChars	['@']	Specifies which characters will cause the quill mention autocomplete to open.
onRenderItem(item, searchTerm)	null	A function that gives you control over how matches from source are displayed. You can use this function to highlight the search term or change the design with custom HTML.
onSource(searchTerm, renderList, denotationChar)	null	Required callback function to handle the search term and connect it to a data source for matches. The data source can be a local source or an AJAX request. The callback should call renderList(matches, searchTerm); with matches of JSON Objects in an array to show the result for the user. The JSON Objects should have id and value but can also have other values to be used in renderItem for custom display.

onSubmit(editor) : (required) Called back with the React Quill editor after submit.

onTranslate(commentId) : Called back with the comment id that has been requested to translate. Will display a button next to each comment's date if assigned. Default as null.

placeholder : Specifying a short hint that describes the expected value of the input field. Default is null.

title : A string representing the title of the comment box. Default is null.

Contribute

Feel free to create an issue or feature request.

Authors

Jon Wahlström (jonwa)

See also the list of contributors.

License

This project is licensed under the MIT License - see the LICENSE file for details.