This package has been deprecated

    Author message:

    this package has been deprecated

    @afconsult/apollo-comments

    1.0.9 • Public • Published

    Apollo Comments

    npm version License: MIT
    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 (= 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.

    Install

    npm i @afconsult/apollo-comments

    DownloadsWeekly Downloads

    2

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    35.6 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar