Skip to main content

onchange

Description​

Fires when comments data has been changed

Usage​

onchange?: (ev: {
  action: "add" | "update" | "delete";
  id?: string | number;
  comment?: {
    id?: string | number;
    content: string;
    author?: {
      id: string | number;
      name?: string;
      avatar?: string;
      color?: string;
    };
    user?: string | number;
    date?: Date;
    format?: "text" | "markdown" | FormatComponent;
  };
  value: {
    id?: string | number;
    content: string;
    author?: {
      id: string | number;
      name?: string;
      avatar?: string;
      color?: string;
    };
    user?: string | number;
    date?: Date;
    format?: "text" | "markdown" | FormatComponent;
  }[];
  originalValue: {
    id?: string | number;
    content: string;
    author?: {
      id: string | number;
      name?: string;
      avatar?: string;
      color?: string;
    };
    user?: string | number;
    date?: Date;
    format?: "text" | "markdown" | FormatComponent;
  }[] | string | number;
}) => void;

Parameters​

ev – an object describing the change event. Contains the following properties:

  • action – (required) type of change:

    • "add" – a new comment was added
    • "update" – an existing comment was modified
    • "delete" – a comment was removed

  • id – (optional) identifier of the comment being changed. Present for "update" and "delete", omitted for "add".

  • comment – (optional) the comment object that was added or updated. Present for "add" and "update", omitted for "delete".
    Fields of comment:

    • id – (optional) unique identifier of the comment
    • content – (required) text of the comment
    • author – (optional) embedded author object:
      • id – (required) unique identifier of the author
      • name – (optional) display name of the author
      • avatar – (optional) URL of the author's avatar
      • color – (optional) color used to style the author's comments
    • user – (optional) ID of a user from the users list
    • date – (optional) timestamp when the comment was posted
    • format – (optional) rendering format: "text" | "markdown" | FormatComponent (refer to format property for description)

  • value – (required) array of all current comments after the change, each with the same structure as above.

  • originalValue – (required) the initial state of the widget’s value property. Can be:

    • IComment[] – an array of comments (see comment above)
    • string or number – a key or identifier if initialized with a single value

Examples​

Handling data changes​

<script>
  import { Comments } from '@svar-ui/svelte-comments';
  import { value } from './data.js';

  const onchange = ({ id, action, comment, originalValue }) => {
    console.log(id, action, comment, originalValue);
  };
</script>

<Comments {value} {onchange} />

For add operations, onChange does not provide id. For delete operations, onChange does not provide comment. originalValue represents the state of the widget's value property at the time of data loading.

Loading and saving comments through REST helper​

<script>
  import { RestURL } from "@svar-ui/lib-data-provider";
  import { Comments } from "@svar-ui/svelte-comments";

  const url = new RestURL("https://some.com/api/comments");  
</script>

<Comments
  ondata={v => url.get(v)}
  onchange={({ action, comment, id, originalValue: v }) => 
    url.path(v).save(action, comment, id)}
/>

This example demonstrates how to load comments from a REST API and save changes back to the server.

Saving changes in comments through local storage​

<script>
  import { RestURL } from "@svar-ui/lib-data-provider";
  import { Comments } from "@svar-ui/svelte-comments";

  const url = new RestURL("https://some.com/api/comments");  
</script>

<Comments
  value={1}
  ondata={v => localStorage.getItem(`comments-${v}`)}
  onchange={({ value }) => 
    localStorage.setItem(`comments-${value}`, JSON.stringify(value))}
/>

This example saves the comments to local storage whenever there is a change in the comments data.