Skip to main content

onChange

Description​

Fires when the data of the task list changes

Usage​

onChange?: (ev: {
    action: "add" | "update" | "delete";
    id?: number | string;
    task?: {
        id?: string | number;
        content: string;
        status?: number;
    };
    data: {
        id?: string | number;
        content: string;
        status?: number;
    }[];
    originalValue: {
        id?: string | number;
        content: string;
        status?: number;
    }[] | number | string;
}) => void;

Parameters​

The onChange callback receives a single event object with the following properties:

  • action - (required) the type of change that occurred. Possible values:

    • "add" - a new task was added
    • "update" - an existing task was modified
    • "delete" - a task was removed

  • id - (optional) the identifier of the changed task

  • task - (optional) the changed task object. The object may include:

    • id - (optional) a unique identifier of the task
    • content - (required) the text content of the task
    • status - (optional) the status of the task that can be 0 for incomplete and 1 for complete

  • data - (required) the current list of tasks after the change. Each task object has the same structure as task above.

  • originalValue - (required) the initial value of the tasklist before changes. Can be an array of tasks (task parameter), a string, or a number depending on how the widget was initialized

Examples​

Detecting data changes​

const onchange = ({ id, action, task, originalValue }) => {
    console.log(id, action, task, originalValue);
};

<Tasklist value={value} onChange={onchange} />

In this example, the onChange function logs the details of the change.

Loading and saving comments through REST helper​

import { RestURL } from "@svar-ui/lib-data-provider";
const url = new RestURL("https://some.com/api/tasks");

<Tasklist
    onData={v => url.get(v)}
    onChange={({ action, task, id, originalValue: v }) => 
        url.path(v).save(action, task, id)}
/>

This example shows how to use the onChange event to save changes to a REST API.

Saving changes in tasks​

import { Tasklist } from '@svar-ui/react-tasklist';

<Tasklist
    value={1}
    onData={v => localStorage.getItem(`tasks-${v}`)}
    onChange={({ value }) => 
        localStorage.setItem(`tasks-${value}`, JSON.stringify(value))}
/>

This example demonstrates saving task changes to local storage whenever a change occurs.