@questpie/admin 1.1.1 → 3.0.0

package/dist/client/views/collection/field-renderer.mjs

@@ -0,0 +1,368 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { useScopedLocale } from "../../runtime/locale-scope.mjs";
+import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
+import { scopeDependencies, trackDependencies } from "../../utils/dependency-tracker.mjs";
+import { buildComponentProps, getFieldContext, getFieldOptions, getFullFieldName } from "./field-context.mjs";
+import { Spinner } from "../../components/ui/spinner.mjs";
+import { useFieldHooks } from "../../hooks/use-field-hooks.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useFormContext, useWatch } from "react-hook-form";
+
+//#region src/client/views/collection/field-renderer.tsx
+/**
+* FieldRenderer Component
+*
+* Renders a single form field using FieldDefinition.
+* Shared between AutoFormFields and BlockEditor.
+*/
+function renderConfigError(message) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-destructive/40 bg-destructive/5 text-destructive rounded border p-3 text-sm",
+		children: message
+	});
+}
+function stripFieldUiOptions(options) {
+	const rest = { ...options };
+	delete rest.label;
+	delete rest.description;
+	delete rest.placeholder;
+	delete rest.required;
+	delete rest.disabled;
+	delete rest.readOnly;
+	delete rest.visible;
+	delete rest.localized;
+	delete rest.locale;
+	return rest;
+}
+const DYNAMIC_FIELD_OPTION_KEYS = [
+	"hidden",
+	"readOnly",
+	"disabled",
+	"required",
+	"options",
+	"label",
+	"description",
+	"placeholder"
+];
+function collectFieldOptionDependencies(fieldOptions, values) {
+	const deps = /* @__PURE__ */ new Set();
+	for (const key of DYNAMIC_FIELD_OPTION_KEYS) {
+		const value = fieldOptions[key];
+		if (typeof value !== "function") continue;
+		const tracked = trackDependencies(values, value);
+		for (const dep of tracked.deps) deps.add(dep);
+	}
+	return [...deps];
+}
+function computeDynamicDependencyPaths({ fieldOptions, form, fieldPrefix }) {
+	return scopeDependencies(collectFieldOptionDependencies(fieldOptions, (fieldPrefix ? form.getValues(fieldPrefix) : form.getValues()) ?? {}), fieldPrefix);
+}
+/**
+* Resolve a MaybeLazyComponent to a concrete React component.
+* Handles direct components, React.lazy, and `() => import(...)` loaders.
+*/
+function useLazyComponent(loader) {
+	const [state, setState] = React.useState(() => {
+		if (!loader) return {
+			Component: null,
+			loading: false
+		};
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0 && !loader.$$typeof)) return {
+			Component: loader,
+			loading: false
+		};
+		return {
+			Component: null,
+			loading: true
+		};
+	});
+	React.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false
+			});
+			return;
+		}
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0 && !loader.$$typeof)) {
+			setState({
+				Component: loader,
+				loading: false
+			});
+			return;
+		}
+		let mounted = true;
+		(async () => {
+			try {
+				const result = await loader();
+				if (mounted) setState({
+					Component: result.default || result,
+					loading: false
+				});
+			} catch {
+				if (mounted) setState({
+					Component: null,
+					loading: false
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [loader]);
+	return state;
+}
+/**
+* Render field using FieldDefinition.field.component
+*
+* This is the primary rendering method. Field components receive:
+* - Base props (name, value, onChange, label, etc.) from componentProps
+* - Field-specific options from FieldDefinition["~options"]
+*/
+function renderDefinitionComponent({ context, componentProps, blocks }) {
+	const Component = context.component;
+	if (!Component) return null;
+	const options = stripFieldUiOptions(getFieldOptions(context.fieldDef));
+	if (context.type === "blocks" && blocks) return /* @__PURE__ */ jsx(Component, {
+		...componentProps,
+		...options,
+		blocks
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		...componentProps,
+		...options
+	});
+}
+/**
+* Render embedded collection field
+*
+* Embedded fields need special handling because they require:
+* 1. Access to allCollectionsConfig for the embedded collection's config
+* 2. A renderFields callback that recursively renders AutoFormFields
+*/
+function renderEmbeddedField({ context, registry, allCollectionsConfig, componentProps, renderEmbeddedFields }) {
+	if (context.type !== "embedded") return null;
+	const options = stripFieldUiOptions(getFieldOptions(context.fieldDef));
+	const embeddedCollection = options.collection;
+	if (!embeddedCollection) return renderConfigError(`Missing collection for embedded field "${context.fieldName}".`);
+	const embeddedCollectionConfig = allCollectionsConfig?.[embeddedCollection];
+	const EmbeddedComponent = context.component || registry?.fields?.embedded;
+	if (!EmbeddedComponent) return renderConfigError(`No component found for embedded field "${context.fieldName}".`);
+	return /* @__PURE__ */ jsx(EmbeddedComponent, {
+		...componentProps,
+		...options,
+		value: context.fieldValue || [],
+		collection: embeddedCollection,
+		renderFields: (index) => renderEmbeddedFields?.({
+			embeddedCollection,
+			embeddedCollectionConfig,
+			fullFieldName: context.fullFieldName,
+			index
+		})
+	});
+}
+/**
+* Render a single field with conditional logic
+*
+* Rendering priority:
+* 1. Embedded fields (need special handling for recursive AutoFormFields)
+* 2. FieldDefinition.field.component (registry-first approach)
+* 3. Error message if no component registered
+*/
+function FieldRenderer(t0) {
+	const $ = c(32);
+	const { fieldName, fieldDef, collection, mode: t1, registry, fieldPrefix, allCollectionsConfig, renderEmbeddedFields, className, entityMeta: entityMetaProp } = t0;
+	const mode = t1 === void 0 ? "collection" : t1;
+	const form = useFormContext();
+	const { locale } = useScopedLocale();
+	const resolveText = useResolveText();
+	const { data: adminConfig } = useAdminConfig();
+	let t2;
+	if ($[0] !== fieldName || $[1] !== fieldPrefix) {
+		t2 = getFullFieldName(fieldName, fieldPrefix);
+		$[0] = fieldName;
+		$[1] = fieldPrefix;
+		$[2] = t2;
+	} else t2 = $[2];
+	const fullFieldName = t2;
+	let t3;
+	if ($[3] !== fieldDef) {
+		t3 = getFieldOptions(fieldDef);
+		$[3] = fieldDef;
+		$[4] = t3;
+	} else t3 = $[4];
+	const fieldOptions = t3;
+	let t4;
+	if ($[5] !== fieldOptions || $[6] !== fieldPrefix || $[7] !== form) {
+		t4 = computeDynamicDependencyPaths({
+			fieldOptions,
+			form,
+			fieldPrefix
+		});
+		$[5] = fieldOptions;
+		$[6] = fieldPrefix;
+		$[7] = form;
+		$[8] = t4;
+	} else t4 = $[8];
+	const dynamicDependencyPaths = t4;
+	let t5;
+	if ($[9] !== dynamicDependencyPaths || $[10] !== fullFieldName) {
+		t5 = new Set([fullFieldName, ...dynamicDependencyPaths]);
+		$[9] = dynamicDependencyPaths;
+		$[10] = fullFieldName;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = [...t5];
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	const t7 = t6;
+	let t8;
+	if ($[14] !== form.control || $[15] !== t7) {
+		t8 = {
+			control: form.control,
+			name: t7
+		};
+		$[14] = form.control;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	const watchedDependencyValues = useWatch(t8);
+	const watchedFieldValue = Array.isArray(watchedDependencyValues) ? watchedDependencyValues[0] : watchedDependencyValues;
+	let t9;
+	bb0: {
+		if (!fieldPrefix) {
+			let t10$2;
+			if ($[17] !== form) {
+				t10$2 = form.getValues() ?? {};
+				$[17] = form;
+				$[18] = t10$2;
+			} else t10$2 = $[18];
+			t9 = t10$2;
+			break bb0;
+		}
+		let t10$1;
+		if ($[19] !== fieldPrefix || $[20] !== form) {
+			t10$1 = form.getValues(fieldPrefix) ?? {};
+			$[19] = fieldPrefix;
+			$[20] = form;
+			$[21] = t10$1;
+		} else t10$1 = $[21];
+		t9 = t10$1;
+	}
+	const formValues = t9;
+	const context = getFieldContext({
+		fieldName,
+		fieldDef,
+		collection,
+		form,
+		fieldPrefix,
+		locale,
+		entityMeta: entityMetaProp,
+		formValues
+	});
+	const { Component: resolvedComponent, loading: componentLoading } = useLazyComponent(context.component);
+	const clientSideCompute = typeof fieldOptions.compute === "function" ? fieldOptions.compute : void 0;
+	const { handleChange, computedValue, isComputed, options: hookOptions, optionsLoading } = useFieldHooks({
+		fieldName,
+		fullFieldName: context.fullFieldName,
+		locale,
+		compute: clientSideCompute,
+		onChange: fieldOptions.onChange,
+		defaultValue: fieldOptions.defaultValue,
+		loadOptions: fieldOptions.loadOptions,
+		staticOptions: context.options
+	});
+	if (context.isHidden) return null;
+	if (!fieldDef) {
+		const t10$1 = `Field "${fieldName}" not found in ${mode === "global" ? "global" : "collection"} "${collection}" config.`;
+		let t11;
+		if ($[22] !== t10$1) {
+			t11 = renderConfigError(t10$1);
+			$[22] = t10$1;
+			$[23] = t11;
+		} else t11 = $[23];
+		return t11;
+	}
+	const resolvedOptions = hookOptions ?? context.options;
+	const rawComponentProps = buildComponentProps(context);
+	const fieldValue = isComputed ? computedValue : watchedFieldValue === void 0 ? rawComponentProps.value : watchedFieldValue;
+	const componentProps = {
+		...rawComponentProps,
+		value: fieldValue,
+		onChange: handleChange,
+		options: resolvedOptions,
+		optionsLoading,
+		readOnly: rawComponentProps.readOnly || isComputed,
+		label: resolveText(rawComponentProps.label, "", formValues),
+		description: resolveText(rawComponentProps.description, "", formValues),
+		placeholder: resolveText(rawComponentProps.placeholder, "", formValues)
+	};
+	let content = null;
+	if (context.type === "embedded") content = renderEmbeddedField({
+		context: {
+			...context,
+			component: resolvedComponent ?? void 0
+		},
+		registry,
+		allCollectionsConfig,
+		componentProps,
+		renderEmbeddedFields
+	});
+	if (!content && componentLoading) {
+		let t10$1;
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+			t10$1 = /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center p-4",
+				children: /* @__PURE__ */ jsx(Spinner, { className: "size-5" })
+			});
+			$[24] = t10$1;
+		} else t10$1 = $[24];
+		content = t10$1;
+	}
+	if (!content && resolvedComponent) content = renderDefinitionComponent({
+		context: {
+			...context,
+			component: resolvedComponent
+		},
+		componentProps,
+		blocks: adminConfig?.blocks
+	});
+	if (!content) {
+		const t10$1 = `No component registered for field type "${context.type}" (field: "${context.fieldName}").`;
+		let t11;
+		if ($[25] !== t10$1) {
+			t11 = renderConfigError(t10$1);
+			$[25] = t10$1;
+			$[26] = t11;
+		} else t11 = $[26];
+		content = t11;
+	}
+	if (className) {
+		let t10$1;
+		if ($[27] !== className || $[28] !== content) {
+			t10$1 = /* @__PURE__ */ jsx("div", {
+				className,
+				children: content
+			});
+			$[27] = className;
+			$[28] = content;
+			$[29] = t10$1;
+		} else t10$1 = $[29];
+		return t10$1;
+	}
+	let t10;
+	if ($[30] !== content) {
+		t10 = /* @__PURE__ */ jsx(Fragment, { children: content });
+		$[30] = content;
+		$[31] = t10;
+	} else t10 = $[31];
+	return t10;
+}
+
+//#endregion
+export { FieldRenderer };