Data handling

The Editor widget supports dynamic data handling, including real-time updates, validation, and user-driven save actions. Developers can customize the behavior of the Editor widget to match their application's requirements for data consistency and user interaction.

Saving data automatically on changes

The Editor widget can trigger automatic data saving whenever changes occur. This is helpful in scenarios where periodic user interaction is not guaranteed, or when minimizing manual save actions is a priority.

import { Editor } from "@svar-ui/react-editor";

const items = [
  // your editor item definitions
];

<Editor items={items} autoSave={true} />

The autoSave property set to true ensures that all changes are automatically saved, reducing the need for explicit save actions by the user.

Disabling auto-Save and requiring manual user action

The Editor widget supports disabling automatic saving, requiring users to explicitly save their changes. This is ideal for workflows where user confirmation or review before saving is necessary.

import { Editor } from "@svar-ui/react-editor";

const items = [
  // your editor item definitions
];

<Editor items={items} autoSave={false} />

Setting autoSave to false prevents automatic saving, giving users control over when data is saved.

Detecting changes in Editor data

The Editor widget provides detailed information about changes made to the data. This is useful for tracking modifications, implementing custom logic, or highlighting unsaved changes.

interface OnChangeResult {
  key: string;
  value: any;
  update: Record<string, any>;
}

import { Editor } from "@svar-ui/react-editor";

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

function onChange(ev: OnChangeResult) {
  console.log(`field ${ev.key} was changed to ${ev.value}`);
  console.log("all not saved changes", ev.update);
}

<Editor items={items} onChange={onChange} />

The onChange event handler provides the field key, its updated value, and a map of all unsaved changes. This allows fine-grained tracking of modifications.

Detecting user-initiated save actions

The Editor widget can detect when users explicitly request to save data. This is useful for implementing workflows that depend on user actions, such as submitting forms or confirming changes.

interface OnSaveResult {
  changes: string[];
  values: Record<string, any>;
}

import { Editor } from "@svar-ui/react-editor";

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

function onSave(ev: OnSaveResult) {
  console.log("changed values", ev.changes);
  console.log("latest data snapshot", ev.values);
}

<Editor items={items} onSave={onSave} />

The onSave event handler provides information about changed fields and the current data state.

Detecting validation status of data

The Editor widget allows monitoring of validation results, providing feedback on whether the data is valid or contains errors. This is useful for ensuring data integrity before saving.

interface OnValidationResult {
  errors: {
    [key: string]: {
      errorType: "validation" | "required";
    };
  };
  values: Record<string, any>;
}

import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "text",
    key: "name",
    label: "Name",
    validation: (v: any) => (v && v.length > 5),
    validationMessage: "Name must be longer than 5 characters",
    required: true
  },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

function onValidation(ev: OnValidationResult) {
  if (Object.keys(ev.errors).length > 0) {
    for (const key in ev.errors) {
      if (ev.errors[key].errorType === "required") {
        console.log(`"${key}" is required but missing`);
      } else if (ev.errors[key].errorType === "validation") {
        console.log(`"${key}" failed a custom validation rule`);
      }
    }
  } else {
    console.log("validation is ok");
  }

  console.log("latest data snapshot", ev.values);
}

<Editor items={items} onValidation={onValidation} />

The onValidation event handler provides the current data state and validation errors. It helps identify fields that fail validation and ensures the data meets predefined requirements.

Marking a field as required

The Editor widget allows marking specific fields as required. This ensures that users cannot leave these fields empty, enforcing mandatory data input.

import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "text",
    key: "name",
    required: true,
  },
];

<Editor items={items} />

Setting the required property to true makes the field mandatory. Users must provide a value before proceeding.

Defining validation rules for fields

The Editor widget supports defining custom validation rules for fields. This ensures that user input adheres to specific criteria, such as format or value range.

import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "text",
    key: "name",
    label: "Name",
    validation: (val: string) => {
      const regEx = /^[a-zA-Z]+$/;
      return val && regEx.test(val);
    },
    validationMessage: "wrong name format"
  },
];

<Editor items={items} />

The validation property defines a function to check the field's value, and validationMessage specifies the error message to display when validation fails. This enables precise control over input requirements.