@lobehub/ui/es/base-ui/FormKit/useForm.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { createFormInstance, getIn, getInternals, leafPaths, setIn } from "./instance.mjs";
import { useEffect, useRef, useState } from "react";
//#region src/base-ui/FormKit/useForm.ts
function useForm(options = {}) {
	const [form] = useState(() => createFormInstance({
		initialValues: options.initialValues ?? options.values ?? {},
		schema: options.schema,
		validateOn: options.validateOn ?? "auto"
	}));
	const latest = useRef(options);
	latest.current = options;
	getInternals(form).onSubmit = (values) => latest.current.onSubmit?.(values);
	useEffect(() => {
		const { engine } = getInternals(form);
		const pending = /* @__PURE__ */ new Set();
		let timer;
		const flush = () => {
			const changed = {};
			for (const path of pending) setIn(changed, path, engine.getValue(path));
			pending.clear();
			latest.current.onValuesChange?.(changed, engine.getValues());
		};
		const off = engine.onValueChange(({ path, source }) => {
			if (source !== "user" || !latest.current.onValuesChange) return;
			pending.add(path);
			const debounce = latest.current.valuesChangeDebounce ?? 0;
			if (debounce <= 0) {
				flush();
				return;
			}
			clearTimeout(timer);
			timer = setTimeout(flush, debounce);
		});
		return () => {
			off();
			clearTimeout(timer);
		};
	}, [form]);
	const { values } = options;
	useEffect(() => {
		if (!values) return;
		const { engine } = getInternals(form);
		for (const path of leafPaths(values)) {
			const next = getIn(values, path);
			if (!engine.isTouched(path) && !Object.is(engine.getValue(path), next)) engine.setValue(path, next, "api");
		}
	}, [form, values]);
	return form;
}
//#endregion
export { useForm };

//# sourceMappingURL=useForm.mjs.map