Как установить значение через событие патча для любого поля из пользовательского ввода в sanity.io?

Question

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

есть только пример без указания поля:

PatchEvent.from(set(value))

Кто-нибудь знает, как указать имя поля?

Эта возможность содержится в документации, но без примеров https://www.sanity.io/docs/custom-input-widgets

Answer 1

Я не мог получить PatchEvent.fromвообще работать с другими полями внутри настраиваемого компонента ввода, но использовать DocumentOperation в сочетании с withDocument из part:@sanity/form-builder

Это грубый рабочий пример с использованием пользовательского компонента:

import React from "react";
import FormField from "part:@sanity/components/formfields/default";
import { withDocument } from "part:@sanity/form-builder";
import { useDocumentOperation } from "@sanity/react-hooks";
import PatchEvent, { set, unset } from "part:@sanity/form-builder/patch-event";

// tried .from(value, ["slug"])  and a million variations to upate the slug but to no avail
const createPatchFrom = (value) => {
  return PatchEvent.from(value === "" ? unset() : set(value));
};

const ref = React.createRef();

const RefInput = React.forwardRef((props, ref) => {
  const { onChange, document } = props;
  // drafts. cause an error so remove
  const {patch} = useDocumentOperation(
    document._id.replace("drafts.", ""), document._type)

  const setValue = (value) => {
    patch.execute([{set: {slug: value.toLowerCase().replace(/\s+/g, "-")}}])
    onChange(createPatchFrom(value));
    // OR call patch this way
    patch.execute([{set: {title: value}}])
  };

  return (
    <input
      value={document.title}
      ref={ref}
      onChange={(e) => setValue(e.target.value)}
    />
  );
});

class CustomInput extends React.Component {
  // this._input is called in HOC
  focus = () => {
    ref.current.focus();
  };
  render() {
    const { title } = this.props.type;
    return (
      <FormField label={title}>
        <RefInput ref={ref} {...this.props} />
      </FormField>
    );
  }
}
export default withDocument(CustomInput);