@tamagui/form 2.7.7 → 3.0.0-beta.643.1

package/dist/jsx/Form.native.cjs

@@ -0,0 +1,347 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Form_exports = {};
+__export(Form_exports, {
+	Form: () => Form2,
+	FormContext: () => FormContext,
+	FormFrame: () => FormFrame,
+	FormProvider: () => FormProvider,
+	FormRegistryContext: () => FormRegistryContext,
+	FormTrigger: () => FormTrigger,
+	useFormContext: () => useFormContext,
+	useFormRegistryContext: () => useFormRegistryContext
+});
+module.exports = __toCommonJS(Form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tamagui/core");
+var import_focusable = require("@tamagui/focusable");
+var import_helpers = require("@tamagui/helpers");
+var React = __toESM(require("react"), 1);
+var FORM_NAME = "Form";
+var EMPTY_ERRORS = {};
+var defaultSubmitAttemptedRef = { current: false };
+var defaultFormElementRef = { current: null };
+var FormRegistryContext = /* @__PURE__ */ React.createContext({
+	validationMode: "onSubmit",
+	errors: EMPTY_ERRORS,
+	formElementRef: defaultFormElementRef,
+	submitAttemptedRef: defaultSubmitAttemptedRef,
+	clearErrors: function() {},
+	getValues: function() {
+		return {};
+	},
+	registerField: function() {
+		return function() {};
+	}
+});
+var useFormRegistryContext = function() {
+	return React.useContext(FormRegistryContext);
+};
+var FormContext = (0, import_core.createStyledContext)({ onSubmit: void 0 });
+var { useStyledContext: useFormContext, Provider: FormProvider } = FormContext;
+var FormFrame = (0, import_core.styled)(import_core.View, {
+	displayName: FORM_NAME,
+	render: "form"
+});
+var FormTriggerFrame = (0, import_core.styled)(import_core.View, { displayName: "FormTrigger" });
+var FormTrigger = (0, import_core.createStyledHOC)(FormTriggerFrame, function(props, forwardedRef) {
+	var { scope, children, onPress, ...triggerProps } = props;
+	var context = useFormContext(scope);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormTriggerFrame, {
+		role: "button",
+		...triggerProps,
+		ref: forwardedRef,
+		onPress: (0, import_helpers.composeEventHandlers)(onPress, context.onSubmit),
+		children
+	});
+});
+function hasError(errors, name) {
+	if (!name || !Object.hasOwn(errors, name)) {
+		return false;
+	}
+	var error = errors[name];
+	return Array.isArray(error) ? error.length > 0 : Boolean(error);
+}
+var FormComponent = (0, import_core.createStyledHOC)(FormFrame, function Form(param, forwardedRef) {
+	var { scope, validationMode = "onSubmit", errors: externalErrors, actionsRef, onSubmit, ...props } = param;
+	var registryRef = React.useRef(/* @__PURE__ */ new Map());
+	var formElementRef = React.useRef(null);
+	var submittedRef = React.useRef(false);
+	var submitAttemptedRef = React.useRef(false);
+	var pendingSubmitDetailsRef = React.useRef(null);
+	var onSubmitRef = React.useRef(onSubmit);
+	onSubmitRef.current = onSubmit;
+	var [errors, setErrors] = React.useState(externalErrors !== null && externalErrors !== void 0 ? externalErrors : EMPTY_ERRORS);
+	var errorsRef = React.useRef(errors);
+	errorsRef.current = errors;
+	React.useEffect(function() {
+		var next = externalErrors !== null && externalErrors !== void 0 ? externalErrors : EMPTY_ERRORS;
+		errorsRef.current = next;
+		setErrors(next);
+	}, [externalErrors]);
+	var registerField = React.useCallback(function(id, registration) {
+		registryRef.current.set(id, registration);
+		return function() {
+			if (registryRef.current.get(id) === registration) {
+				registryRef.current.delete(id);
+			}
+		};
+	}, []);
+	var getValues = React.useCallback(function() {
+		var values = {};
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = registryRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var field = _step.value;
+				if (field.name) {
+					values[field.name] = field.getValue();
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		return values;
+	}, []);
+	var clearErrors = React.useCallback(function(name) {
+		if (!name || !hasError(errorsRef.current, name)) {
+			return;
+		}
+		var next = { ...errorsRef.current };
+		delete next[name];
+		errorsRef.current = next;
+		setErrors(next);
+	}, []);
+	var focusFirstInvalid = React.useCallback(function() {
+		var hasInvalid = false;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = registryRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var field = _step.value;
+				if (!hasError(errorsRef.current, field.name) && field.validityData.state.valid !== false) {
+					continue;
+				}
+				hasInvalid = true;
+				var control = field.controlRef.current;
+				if (import_core.isWeb && (control === null || control === void 0 ? void 0 : control.focus)) {
+					control.focus();
+					if (control.tagName === "INPUT" || control.tagName === "TEXTAREA") {
+						var _control_select;
+						(_control_select = control.select) === null || _control_select === void 0 ? void 0 : _control_select.call(control);
+					}
+					return true;
+				}
+				if (!import_core.isWeb && field.controlId) {
+					(0, import_focusable.focusFocusable)(field.controlId);
+					return true;
+				}
+				if (control === null || control === void 0 ? void 0 : control.focus) {
+					control.focus();
+					return true;
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		return hasInvalid;
+	}, []);
+	var performSubmit = React.useCallback(function(details) {
+		var _onSubmitRef_current;
+		submitAttemptedRef.current = true;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = registryRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var field = _step.value;
+				field.validate();
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		if (focusFirstInvalid()) {
+			return;
+		}
+		submittedRef.current = true;
+		void ((_onSubmitRef_current = onSubmitRef.current) === null || _onSubmitRef_current === void 0 ? void 0 : _onSubmitRef_current.call(onSubmitRef, getValues(), details));
+	}, [focusFirstInvalid, getValues]);
+	var requestSubmit = React.useCallback(function(event) {
+		var _event_preventDefault, _formElementRef_current;
+		event === null || event === void 0 ? void 0 : (_event_preventDefault = event.preventDefault) === null || _event_preventDefault === void 0 ? void 0 : _event_preventDefault.call(event);
+		var _event_nativeEvent;
+		var details = {
+			reason: "trigger-press",
+			event: (_event_nativeEvent = event === null || event === void 0 ? void 0 : event.nativeEvent) !== null && _event_nativeEvent !== void 0 ? _event_nativeEvent : event,
+			trigger: event === null || event === void 0 ? void 0 : event.currentTarget
+		};
+		if (import_core.isWeb && ((_formElementRef_current = formElementRef.current) === null || _formElementRef_current === void 0 ? void 0 : _formElementRef_current.requestSubmit)) {
+			pendingSubmitDetailsRef.current = details;
+			formElementRef.current.requestSubmit();
+			return;
+		}
+		performSubmit(details);
+	}, [performSubmit]);
+	React.useEffect(function() {
+		if (!submittedRef.current) {
+			return;
+		}
+		submittedRef.current = false;
+		focusFirstInvalid();
+	}, [errors, focusFirstInvalid]);
+	React.useImperativeHandle(actionsRef, function() {
+		return { validate(fieldName) {
+			if (fieldName) {
+				var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+				try {
+					for (var _iterator = registryRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+						var field = _step.value;
+						if (field.name === fieldName) {
+							field.validate();
+							return;
+						}
+					}
+				} catch (err) {
+					_didIteratorError = true;
+					_iteratorError = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion && _iterator.return != null) {
+							_iterator.return();
+						}
+					} finally {
+						if (_didIteratorError) {
+							throw _iteratorError;
+						}
+					}
+				}
+				return;
+			}
+			var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+			try {
+				for (var _iterator1 = registryRef.current.values()[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+					var field1 = _step1.value;
+					field1.validate();
+				}
+			} catch (err) {
+				_didIteratorError1 = true;
+				_iteratorError1 = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+						_iterator1.return();
+					}
+				} finally {
+					if (_didIteratorError1) {
+						throw _iteratorError1;
+					}
+				}
+			}
+		} };
+	}, []);
+	var registryContext = React.useMemo(function() {
+		return {
+			validationMode,
+			errors,
+			formElementRef,
+			submitAttemptedRef,
+			clearErrors,
+			getValues,
+			registerField
+		};
+	}, [
+		clearErrors,
+		errors,
+		getValues,
+		registerField,
+		validationMode
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormRegistryContext.Provider, {
+		value: registryContext,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormProvider, {
+			scope,
+			onSubmit: requestSubmit,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormFrame, {
+				...props,
+				ref: function(element) {
+					formElementRef.current = element;
+					if (typeof forwardedRef === "function") {
+						forwardedRef(element);
+					} else if (forwardedRef) {
+						forwardedRef.current = element;
+					}
+				},
+				noValidate: true,
+				onSubmit: function(event) {
+					var _event_nativeEvent;
+					event.preventDefault();
+					var pendingDetails = pendingSubmitDetailsRef.current;
+					pendingSubmitDetailsRef.current = null;
+					var _event_nativeEvent1;
+					performSubmit(pendingDetails !== null && pendingDetails !== void 0 ? pendingDetails : {
+						reason: "submit",
+						event: (_event_nativeEvent1 = event.nativeEvent) !== null && _event_nativeEvent1 !== void 0 ? _event_nativeEvent1 : event,
+						trigger: (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : _event_nativeEvent.submitter
+					});
+				}
+			})
+		})
+	});
+});
+var Form2 = (0, import_helpers.withStaticProperties)(FormComponent, { Trigger: FormTrigger });