react-native-better-html 1.0.11 → 1.0.13

package/dist/index.js

@@ -52,6 +52,7 @@ __export(index_exports, {
   formatPhoneNumber: () => import_react_better_core11.formatPhoneNumber,
   generateAsyncStorage: () => generateAsyncStorage,
   generateRandomString: () => import_react_better_core11.generateRandomString,
+  getFormErrorObject: () => getFormErrorObject,
   getPluralWord: () => import_react_better_core11.getPluralWord,
   lightenColor: () => import_react_better_core11.lightenColor,
   loaderControls: () => import_react_better_core11.loaderControls,
@@ -61,6 +62,7 @@ __export(index_exports, {
   useBooleanState: () => import_react_better_core11.useBooleanState,
   useDebounceState: () => import_react_better_core11.useDebounceState,
   useDevice: () => useDevice,
+  useForm: () => useForm,
   useKeyboard: () => useKeyboard,
   useLoader: () => import_react_better_core11.useLoader,
   useLoaderControls: () => import_react_better_core11.useLoaderControls,
@@ -465,6 +467,129 @@ function useComponentPropsGrouper(props, prefix) {
     };
   }, [props, prefix]);
 }
+function useForm(options) {
+  const { defaultValues, requiredFields, additional, onSubmit, validate } = options;
+  const inputFieldRefs = (0, import_react2.useRef)(
+    {}
+  );
+  const [values, setValues] = (0, import_react2.useState)(defaultValues);
+  const [errors, setErrors] = (0, import_react2.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react_better_core2.useBooleanState)();
+  const numberOfInputFields = Object.keys(defaultValues).length;
+  const setFieldValue = (0, import_react2.useCallback)(
+    (field, value) => {
+      setValues((oldValue) => ({
+        ...oldValue,
+        [field]: value
+      }));
+      setErrors((oldValue) => ({
+        ...oldValue,
+        [field]: void 0
+      }));
+    },
+    []
+  );
+  const setFieldsValue = (0, import_react2.useCallback)((values2) => {
+    setValues((oldValue) => ({
+      ...oldValue,
+      ...values2
+    }));
+    setErrors((oldValue) => {
+      const newErrors = {};
+      for (const key in values2) newErrors[key] = void 0;
+      return newErrors;
+    });
+  }, []);
+  const focusField = (0, import_react2.useCallback)((field) => {
+    inputFieldRefs.current[field]?.focus();
+  }, []);
+  const validateForm = (0, import_react2.useCallback)(() => {
+    const validationErrors = validate?.(values) || {};
+    setErrors(validationErrors);
+    return validationErrors;
+  }, [validate, values]);
+  const onSubmitFunction = (0, import_react2.useCallback)(
+    async (event) => {
+      event?.preventDefault();
+      setIsSubmitting.setTrue();
+      try {
+        const validationErrors = validateForm();
+        if (Object.keys(validationErrors).length === 0) {
+          await onSubmit?.(values);
+        } else {
+          const firstErrorField = Object.keys(validationErrors)[0];
+          focusField(firstErrorField);
+        }
+      } finally {
+        setIsSubmitting.setFalse();
+      }
+    },
+    [values, validateForm, onSubmit, focusField]
+  );
+  const getInputFieldProps = (0, import_react2.useCallback)(
+    (field) => {
+      const thisInputFieldIndex = Object.keys(values).findIndex((key) => key === field);
+      const isLastInputField = thisInputFieldIndex === numberOfInputFields - 1;
+      return {
+        required: requiredFields?.includes(field),
+        value: values[field]?.toString() ?? "",
+        errorMessage: errors[field],
+        isError: !!errors[field],
+        returnKeyLabel: isLastInputField ? additional?.lastInputFieldReturnKeyLabel ?? "done" : "next",
+        onPressEnter: () => {
+          if (isLastInputField) onSubmitFunction();
+          else inputFieldRefs.current[Object.keys(values)[thisInputFieldIndex + 1]]?.focus();
+        },
+        onChange: (value) => {
+          setFieldValue(field, value);
+        },
+        ref: (element) => {
+          if (!element) return;
+          inputFieldRefs.current[field] = element;
+        }
+      };
+    },
+    [values, setFieldValue, errors, requiredFields, additional, onSubmitFunction]
+  );
+  const reset = (0, import_react2.useCallback)(() => {
+    setValues(defaultValues);
+    setErrors({});
+  }, [defaultValues]);
+  const isDirty = (0, import_react2.useMemo)(
+    () => Object.keys(defaultValues).some((key) => defaultValues[key] !== values[key]),
+    [defaultValues, values]
+  );
+  const isValid = (0, import_react2.useMemo)(() => {
+    const validationErrors = validate?.(values) || {};
+    return Object.keys(validationErrors).length === 0;
+  }, [validate, values]);
+  const canSubmit = (0, import_react2.useMemo)(() => {
+    const requiredFieldsHaveValues = requiredFields?.every((field) => values[field] !== void 0 && values[field] !== "") ?? true;
+    return isValid && requiredFieldsHaveValues;
+  }, [isValid, requiredFields]);
+  return {
+    values,
+    errors,
+    isSubmitting,
+    setFieldValue,
+    setFieldsValue,
+    getInputFieldProps,
+    focusField,
+    inputFieldRefs: inputFieldRefs.current,
+    validate: validateForm,
+    onSubmit: onSubmitFunction,
+    reset,
+    requiredFields,
+    isDirty,
+    isValid,
+    canSubmit
+  };
+}
+
+// src/utils/functions.ts
+var getFormErrorObject = (formValues) => {
+  return {};
+};
 
 // src/utils/asyncStorage.ts
 var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
@@ -498,6 +623,7 @@ var import_react_native2 = require("react-native");
 var import_react_better_core3 = require("react-better-core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var touchableHighlightStyleMoveToContent = [
+  "width",
   "backgroundColor",
   "padding",
   "paddingTop",
@@ -638,6 +764,7 @@ var ViewComponent = function View({
         ViewComponent,
         {
           width: "100%",
+          height: props.height,
           borderRadius: props.borderRadius,
           borderTopLeftRadius: props.borderTopLeftRadius,
           borderTopRightRadius: props.borderTopRightRadius,
@@ -1177,11 +1304,14 @@ var Image_default = Image2;
 // src/components/InputField.tsx
 var import_react10 = require("react");
 var import_react_native8 = require("react-native");
+var import_datetimepicker = __toESM(require("@react-native-community/datetimepicker"));
 var import_react_better_core9 = require("react-better-core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var InputFieldComponent = (0, import_react10.forwardRef)(
   ({
     placeholder,
+    type = "text",
+    iOSDateTimeFullSize,
     prefix,
     suffix,
     defaultValue,
@@ -1205,23 +1335,67 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     fontWeight = 400,
     lineHeight = 20,
     textAlign,
+    required,
+    disabled,
+    maxLength,
+    multiline,
+    numberOfLines = 2,
     paddingHorizontal,
     paddingVertical,
     onFocus,
     onBlur,
     onChange,
     onPress,
+    onPressPrefix,
+    onPressSuffix,
     onPressEnter
   }, ref) => {
     const theme2 = (0, import_react_better_core9.useTheme)();
     const { colorTheme } = (0, import_react_better_core9.useBetterCoreContext)();
     const textInputRef = (0, import_react10.useRef)(null);
     const [internalValue, setInternalValue] = (0, import_react10.useState)(value?.toString() || defaultValue || "");
+    const [internalDateValue, setInternalDateValue] = (0, import_react10.useState)();
     const [isFocused, setIsFocused] = (0, import_react_better_core9.useBooleanState)();
+    const isIOSDateTime = import_react_native8.Platform.OS === "ios" && (type === "date" || type === "time");
     const borderWidth = 1;
     const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
     const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
-    const readyHeight = height ?? borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth;
+    const readyHeight = height ?? isIOSDateTime ? void 0 : borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth + (import_react_native8.Platform.OS === "android" ? 2 : 0);
+    const onChangeRNDateTimePicker = (0, import_react10.useCallback)(
+      (event, data) => {
+        setInternalDateValue(data);
+        onChange?.(data?.toISOString() ?? "");
+      },
+      [onChange]
+    );
+    const onPressInputField = (0, import_react10.useCallback)(
+      (event) => {
+        onPress?.(event);
+        if (type === "date" || type === "time") {
+          if (import_react_native8.Platform.OS === "android") {
+            import_datetimepicker.DateTimePickerAndroid.open({
+              value: internalDateValue ?? /* @__PURE__ */ new Date(),
+              is24Hour: true,
+              mode: type,
+              positiveButton: {
+                label: "Done"
+              },
+              negativeButton: {
+                label: "Clear",
+                textColor: theme2.colors.textSecondary
+              },
+              neutralButton: {
+                label: "Cancel",
+                textColor: theme2.colors.textSecondary
+              },
+              onChange: onChangeRNDateTimePicker
+            });
+          } else if (import_react_native8.Platform.OS === "ios") {
+          }
+        }
+      },
+      [onPress, type, internalDateValue, onChangeRNDateTimePicker]
+    );
     const onFocusElement = (0, import_react10.useCallback)((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
@@ -1249,10 +1423,27 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
       }),
       [theme2.colors, fontSize, fontWeight, lineHeight, readyPaddingHorizontal, readyPaddingVertical]
     );
+    const rnDateTimePickerStyle = (0, import_react10.useMemo)(
+      () => ({
+        flex: iOSDateTimeFullSize ? 1 : void 0,
+        marginLeft: -8 + (iOSDateTimeFullSize ? 0 : theme2.styles.space)
+      }),
+      [iOSDateTimeFullSize]
+    );
     (0, import_react10.useEffect)(() => {
       if (value === void 0) return;
       setInternalValue(value.toString());
+      setInternalDateValue(new Date(value));
     }, [value]);
+    (0, import_react10.useEffect)(() => {
+      if (type !== "date" && type !== "time") return;
+      const date = internalDateValue?.toISOString().split("T")[0] ?? "";
+      const hours = internalDateValue ? internalDateValue.getHours().toString() : "00";
+      const minutes = internalDateValue ? internalDateValue.getMinutes().toString() : "00";
+      setInternalValue(
+        type === "date" ? date : internalDateValue ? `${hours.length === 1 ? `0${hours}` : hours}:${minutes.length === 1 ? `0${minutes}` : minutes}` : ""
+      );
+    }, [internalDateValue]);
     (0, import_react10.useImperativeHandle)(
       ref,
       () => {
@@ -1260,112 +1451,175 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
       },
       []
     );
+    const withPressInputField = !!onPress || type === "date" || type === "time";
     const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core9.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core9.lightenColor)(theme2.colors.backgroundContent, 0.1);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { flex: 1, gap: theme2.styles.gap / 3, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
-        prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          View_default,
-          {
-            isRow: true,
-            height: "100%",
-            backgroundColor: prefixSuffixBackgroundColor,
-            alignItems: "center",
-            borderWidth,
-            borderRightWidth: 0,
-            borderTopLeftRadius: theme2.styles.borderRadius,
-            borderBottomLeftRadius: theme2.styles.borderRadius,
-            borderColor: theme2.colors.border,
-            paddingHorizontal: readyPaddingHorizontal,
-            children: typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: prefix }) : prefix
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          Animate_default.View,
-          {
-            flex: 1,
-            backgroundColor: theme2.colors.backgroundContent,
-            borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
-            borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
-            borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
-            borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
-            borderWidth,
-            initialBorderColor: theme2.colors.border,
-            animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
-            overflow: "hidden",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_react_native8.TextInput,
+    const labelComponent = label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
+      required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
+    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      Animate_default.View,
+      {
+        flex: 1,
+        gap: theme2.styles.gap / 3,
+        initialOpacity: 1,
+        animateOpacity: disabled ? 0.6 : 1,
+        children: [
+          isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
+            prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              View_default,
+              {
+                isRow: true,
+                height: "100%",
+                backgroundColor: prefixSuffixBackgroundColor,
+                alignItems: "center",
+                justifyContent: "center",
+                borderWidth,
+                borderRightWidth: 0,
+                borderTopLeftRadius: theme2.styles.borderRadius,
+                borderBottomLeftRadius: theme2.styles.borderRadius,
+                borderColor: theme2.colors.border,
+                paddingHorizontal: readyPaddingHorizontal,
+                onPress: onPressPrefix,
+                children: typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Text_default,
+                  {
+                    fontWeight: 700,
+                    lineHeight,
+                    marginTop: import_react_native8.Platform.OS === "ios" ? readyPaddingVertical : void 0,
+                    children: prefix
+                  }
+                ) : prefix
+              }
+            ),
+            isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+              !iOSDateTimeFullSize ? labelComponent : void 0,
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                import_datetimepicker.default,
+                {
+                  value: internalDateValue ?? /* @__PURE__ */ new Date(),
+                  mode: type,
+                  display: iOSDateTimeFullSize ? type === "date" ? "inline" : "spinner" : "default",
+                  accentColor: theme2.colors.primary,
+                  style: rnDateTimePickerStyle,
+                  onChange: onChangeRNDateTimePicker
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              View_default,
               {
-                style: textInputStyle,
-                value: internalValue,
-                defaultValue,
-                autoCapitalize,
-                autoComplete,
-                autoCorrect,
-                autoFocus,
-                placeholder,
-                placeholderTextColor: theme2.colors.textSecondary + "80",
-                enterKeyHint: returnKeyLabel,
-                returnKeyType,
-                onSubmitEditing: onPressEnter,
-                readOnly: !editable,
-                textAlign,
-                keyboardAppearance,
-                keyboardType,
-                cursorColor: theme2.colors.primary,
-                selectionColor: theme2.colors.primary,
-                secureTextEntry,
-                onFocus: onFocusElement,
-                onBlur: onBlurElement,
-                onChangeText,
-                onPress,
-                ref: textInputRef
+                flex: 1,
+                width: "100%",
+                borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+                borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+                borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+                borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+                pressStrength: 1,
+                onPress: import_react_native8.Platform.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Animate_default.View,
+                  {
+                    flex: 1,
+                    backgroundColor: theme2.colors.backgroundContent,
+                    borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+                    borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+                    borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+                    borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+                    borderWidth,
+                    initialBorderColor: theme2.colors.border,
+                    animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
+                    overflow: "hidden",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      import_react_native8.TextInput,
+                      {
+                        style: textInputStyle,
+                        value: internalValue,
+                        defaultValue,
+                        autoCapitalize,
+                        autoComplete,
+                        autoCorrect,
+                        autoFocus,
+                        placeholder: placeholder ?? label,
+                        placeholderTextColor: theme2.colors.textSecondary + "80",
+                        enterKeyHint: returnKeyLabel,
+                        returnKeyType,
+                        onSubmitEditing: onPressEnter,
+                        readOnly: !editable || disabled || type === "date" || type === "time",
+                        textAlign,
+                        editable: !disabled,
+                        keyboardAppearance,
+                        keyboardType,
+                        cursorColor: theme2.colors.primary,
+                        selectionColor: theme2.colors.primary,
+                        secureTextEntry,
+                        onFocus: onFocusElement,
+                        onBlur: onBlurElement,
+                        onChangeText,
+                        maxLength,
+                        multiline,
+                        numberOfLines,
+                        onPress: withPressInputField ? onPressInputField : void 0,
+                        ref: textInputRef
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              View_default,
+              {
+                isRow: true,
+                height: "100%",
+                backgroundColor: prefixSuffixBackgroundColor,
+                alignItems: "center",
+                borderWidth,
+                borderLeftWidth: 0,
+                borderTopRightRadius: theme2.styles.borderRadius,
+                borderBottomRightRadius: theme2.styles.borderRadius,
+                borderColor: theme2.colors.border,
+                paddingHorizontal: readyPaddingHorizontal,
+                onPress: onPressSuffix,
+                children: typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Text_default,
+                  {
+                    fontWeight: 700,
+                    lineHeight,
+                    marginTop: import_react_native8.Platform.OS === "ios" ? readyPaddingVertical : void 0,
+                    children: suffix
+                  }
+                ) : suffix
               }
             )
-          }
-        ),
-        suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          View_default,
-          {
-            isRow: true,
-            height: "100%",
-            backgroundColor: prefixSuffixBackgroundColor,
-            alignItems: "center",
-            borderWidth,
-            borderLeftWidth: 0,
-            borderTopRightRadius: theme2.styles.borderRadius,
-            borderBottomRightRadius: theme2.styles.borderRadius,
-            borderColor: theme2.colors.border,
-            paddingHorizontal: readyPaddingHorizontal,
-            children: typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: suffix }) : suffix
-          }
-        )
-      ] }),
-      infoMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        Animate_default.Text,
-        {
-          fontSize: 14,
-          color: theme2.colors.textSecondary,
-          initialHeight: 0,
-          initialOpacity: 0,
-          animateHeight: 17,
-          animateOpacity: 1,
-          children: infoMessage
-        }
-      ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        Animate_default.Text,
-        {
-          fontSize: 14,
-          color: theme2.colors.error,
-          initialHeight: 0,
-          initialOpacity: 0,
-          animateHeight: 17,
-          animateOpacity: 1,
-          children: errorMessage
-        }
-      )
-    ] });
+          ] }),
+          infoMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Animate_default.Text,
+            {
+              fontSize: 14,
+              color: theme2.colors.textSecondary,
+              initialHeight: 0,
+              initialOpacity: 0,
+              animateHeight: 17,
+              animateOpacity: 1,
+              children: infoMessage
+            }
+          ),
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Animate_default.Text,
+            {
+              fontSize: 14,
+              color: theme2.colors.error,
+              initialHeight: 0,
+              initialOpacity: 0,
+              animateHeight: 17,
+              animateOpacity: 1,
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    );
   }
 );
 InputFieldComponent.email = (0, import_react10.forwardRef)(function Email(props, ref) {
@@ -1472,6 +1726,7 @@ var asyncStoragePlugin = (options) => ({
   formatPhoneNumber,
   generateAsyncStorage,
   generateRandomString,
+  getFormErrorObject,
   getPluralWord,
   lightenColor,
   loaderControls,
@@ -1481,6 +1736,7 @@ var asyncStoragePlugin = (options) => ({
   useBooleanState,
   useDebounceState,
   useDevice,
+  useForm,
   useKeyboard,
   useLoader,
   useLoaderControls,