Function useControl

packages/vue/src/jsonFormsCompositions.ts:178–228

(
  props: P,
  stateMap: (state: JsonFormsState, props: P) => R,
  dispatchMap?: (dispatch: Dispatch<CoreActions>) => D
)

// TODO fix @typescript-eslint/ban-types
// eslint-disable-next-line @typescript-eslint/ban-types
export function useControl<
  R,
  D,
  P extends { schema: JsonSchema; uischema: UISchemaElement & Scopable }
>(
  props: P,
  stateMap: (state: JsonFormsState, props: P) => R,
  dispatchMap?: (dispatch: Dispatch<CoreActions>) => D
) {
  const jsonforms = useJsonForms();
  const dispatch = useDispatch();

  const id = ref<string | undefined>(undefined);
  const control = computed(() => ({
    ...props,
    ...stateMap({ jsonforms }, props),
    id: id.value,
  }));

  const dispatchMethods = dispatchMap?.(dispatch);

  onBeforeMount(() => {
    if (control.value.uischema.scope) {
      id.value = Id.createId(control.value.uischema.scope);
    }
  });

  watch(
    () => props.schema,
    (newSchema, prevSchem) => {
      if (newSchema !== prevSchem && isControl(control.value.uischema)) {
        if (id.value) {
          Id.removeId(id.value);
        }
        id.value = Id.createId(control.value.uischema.scope);
      }
    }
  );

  onUnmounted(() => {
    if (id.value) {
      Id.removeId(id.value);
      id.value = undefined;
    }
  });

  return {
    control: control,
    ...dispatchMethods,
  };
}

/**
 * Provides generic bindings for 'Control' elements.