Перейти к основному содержимому

Работа с данными

Виджет Editor поддерживает динамическую работу с данными, включая обновление в реальном времени, валидацию и сохранение данных по инициативе пользователя. Разработчики могут настроить поведение виджета Editor в соответствии с требованиями своего приложения к согласованности данных и взаимодействию с пользователем.

Автоматическое сохранение данных при изменениях​

Виджет Editor может запускать автоматическое сохранение данных при каждом изменении. Это удобно в сценариях, где периодическое взаимодействие с пользователем не гарантировано, или когда важно минимизировать ручные действия по сохранению.

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

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

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

Свойство autoSave со значением true обеспечивает автоматическое сохранение всех изменений, снижая необходимость явных действий по сохранению со стороны пользователя.

Отключение автосохранения и ручное сохранение пользователем​

Виджет Editor поддерживает отключение автоматического сохранения, при котором пользователи должны явно сохранять свои изменения. Это идеально подходит для рабочих процессов, требующих подтверждения или проверки данных перед сохранением.

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

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

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

Установка autoSave в false отключает автоматическое сохранение, передавая пользователю контроль над тем, когда данные сохраняются.

Отслеживание изменений данных в Editor​

Виджет Editor предоставляет подробную информацию об изменениях в данных. Это полезно для отслеживания правок, реализации пользовательской логики или выделения несохранённых изменений.

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} />

Обработчик события onChange предоставляет ключ поля, его обновлённое значение и карту всех несохранённых изменений. Это позволяет детально отслеживать правки.

Отслеживание действий пользователя по сохранению​

Виджет Editor может фиксировать момент, когда пользователь явно запрашивает сохранение данных. Это полезно для реализации рабочих процессов, зависящих от действий пользователя, — например, отправки форм или подтверждения изменений.

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} />

Обработчик события onSave предоставляет информацию об изменённых полях и текущем состоянии данных.

Отслеживание статуса валидации данных​

Виджет Editor позволяет отслеживать результаты валидации, сообщая о том, являются ли данные корректными или содержат ошибки. Это полезно для проверки целостности данных перед сохранением.

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} />

Обработчик события onValidation предоставляет текущее состояние данных и ошибки валидации. Он помогает определить поля, не прошедшие валидацию, и гарантирует соответствие данных заданным требованиям.

Пометка поля как обязательного​

Виджет Editor позволяет помечать определённые поля как обязательные. Это гарантирует, что пользователи не смогут оставить такие поля пустыми, обеспечивая обязательный ввод данных.

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

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

<Editor items={items} />

Установка свойства required в true делает поле обязательным. Пользователь должен указать значение перед продолжением работы.

Определение правил валидации для полей​

Виджет Editor поддерживает определение пользовательских правил валидации для полей. Это гарантирует соответствие введённых данных заданным критериям, например формату или диапазону значений.

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} />

Свойство validation задаёт функцию для проверки значения поля, а validationMessage определяет сообщение об ошибке, отображаемое при неудачной валидации. Это обеспечивает точный контроль над требованиями к вводу.

Связанные примеры: