react-native-better-html 1.0.10 → 1.0.12

package/dist/index.mjs

@@ -145,7 +145,7 @@ var pressStrength = () => {
 };
 
 // src/utils/hooks.ts
-import { useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef, useState } from "react";
 import { Dimensions, Keyboard } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useBooleanState as useBooleanState2, useTheme } from "react-better-core";
@@ -420,6 +420,128 @@ function useComponentPropsGrouper(props, prefix) {
     };
   }, [props, prefix]);
 }
+function useForm(options) {
+  const { defaultValues, requiredFields, additional, onSubmit, validate } = options;
+  const inputFieldRefs = useRef(
+    {}
+  );
+  const [values, setValues] = useState(defaultValues);
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useBooleanState2();
+  const numberOfInputFields = Object.keys(defaultValues).length;
+  const setFieldValue = useCallback(
+    (field, value) => {
+      setValues((oldValue) => ({
+        ...oldValue,
+        [field]: value
+      }));
+      setErrors((oldValue) => ({
+        ...oldValue,
+        [field]: void 0
+      }));
+    },
+    []
+  );
+  const setFieldsValue = useCallback((values2) => {
+    setValues((oldValue) => ({
+      ...oldValue,
+      ...values2
+    }));
+    setErrors((oldValue) => {
+      const newErrors = {};
+      for (const key in values2) newErrors[key] = void 0;
+      return newErrors;
+    });
+  }, []);
+  const focusField = useCallback((field) => {
+    inputFieldRefs.current[field]?.focus();
+  }, []);
+  const validateForm = useCallback(() => {
+    const validationErrors = validate?.(values) || {};
+    setErrors(validationErrors);
+    return validationErrors;
+  }, [validate, values]);
+  const onSubmitFunction = 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 = 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],
+        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 = useCallback(() => {
+    setValues(defaultValues);
+    setErrors({});
+  }, [defaultValues]);
+  const isDirty = useMemo2(
+    () => Object.keys(defaultValues).some((key) => defaultValues[key] !== values[key]),
+    [defaultValues, values]
+  );
+  const isValid = useMemo2(() => {
+    const validationErrors = validate?.(values) || {};
+    return Object.keys(validationErrors).length === 0;
+  }, [validate, values]);
+  const canSubmit = useMemo2(() => {
+    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
 import NativeAsyncStorage from "@react-native-async-storage/async-storage";
@@ -975,7 +1097,7 @@ Button2.text = ButtonComponent.text;
 var Button_default = Button2;
 
 // src/components/ScreenHolder.tsx
-import { memo as memo7, useCallback, useMemo as useMemo6 } from "react";
+import { memo as memo7, useCallback as useCallback2, useMemo as useMemo6 } from "react";
 import { KeyboardAvoidingView, Platform as Platform3, RefreshControl, ScrollView } from "react-native";
 import { useBooleanState as useBooleanState3, useTheme as useTheme6 } from "react-better-core";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1005,7 +1127,7 @@ var ScreenHolderComponent = ({
     }),
     []
   );
-  const onRefreshElement = useCallback(() => {
+  const onRefreshElement = useCallback2(() => {
     setIsRefreshing.setTrue();
     onRefresh?.();
     setTimeout(() => {
@@ -1141,15 +1263,15 @@ var Image_default = Image2;
 import {
   forwardRef,
   memo as memo9,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useEffect as useEffect4,
   useImperativeHandle,
   useMemo as useMemo8,
-  useRef,
+  useRef as useRef2,
   useState as useState2
 } from "react";
 import {
-  TextInput
+  TextInput as TextInput2
 } from "react-native";
 import {
   darkenColor,
@@ -1167,6 +1289,10 @@ var InputFieldComponent = forwardRef(
     defaultValue,
     value,
     editable = true,
+    label,
+    isError,
+    infoMessage,
+    errorMessage,
     autoFocus,
     autoCapitalize,
     autoComplete,
@@ -1181,6 +1307,8 @@ var InputFieldComponent = forwardRef(
     fontWeight = 400,
     lineHeight = 20,
     textAlign,
+    required,
+    disabled,
     paddingHorizontal,
     paddingVertical,
     onFocus,
@@ -1191,22 +1319,22 @@ var InputFieldComponent = forwardRef(
   }, ref) => {
     const theme2 = useTheme8();
     const { colorTheme } = useBetterCoreContext3();
-    const textInputRef = useRef(null);
+    const textInputRef = useRef2(null);
     const [internalValue, setInternalValue] = useState2(value?.toString() || defaultValue || "");
     const [isFocused, setIsFocused] = useBooleanState4();
     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 onFocusElement = useCallback2((event) => {
+    const onFocusElement = useCallback3((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
     }, []);
-    const onBlurElement = useCallback2((event) => {
+    const onBlurElement = useCallback3((event) => {
       setIsFocused.setFalse();
       onBlur?.(event);
     }, []);
-    const onChangeText = useCallback2(
+    const onChangeText = useCallback3(
       (text) => {
         setInternalValue(text);
         onChange?.(text);
@@ -1237,84 +1365,124 @@ var InputFieldComponent = forwardRef(
       []
     );
     const prefixSuffixBackgroundColor = colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1);
-    return /* @__PURE__ */ jsxs4(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
-      prefix && /* @__PURE__ */ jsx9(
-        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: /* @__PURE__ */ jsx9(Text_default, { fontWeight: 700, children: prefix })
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        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 : theme2.colors.border,
-          overflow: "hidden",
-          children: /* @__PURE__ */ jsx9(
-            TextInput,
+    return /* @__PURE__ */ jsxs4(
+      Animate_default.View,
+      {
+        flex: 1,
+        gap: theme2.styles.gap / 3,
+        initialOpacity: 1,
+        animateOpacity: disabled ? 0.6 : 1,
+        children: [
+          label && /* @__PURE__ */ jsxs4(View_default, { isRow: true, width: "100%", alignItems: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx9(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: label }),
+            required && /* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.error, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs4(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
+            prefix && /* @__PURE__ */ jsx9(
+              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__ */ jsx9(Text_default, { fontWeight: 700, children: prefix }) : prefix
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              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__ */ jsx9(
+                  TextInput2,
+                  {
+                    style: textInputStyle,
+                    value: internalValue,
+                    defaultValue,
+                    autoCapitalize,
+                    autoComplete,
+                    autoCorrect,
+                    autoFocus,
+                    placeholder,
+                    placeholderTextColor: theme2.colors.textSecondary + "80",
+                    enterKeyHint: returnKeyLabel,
+                    returnKeyType,
+                    onSubmitEditing: onPressEnter,
+                    readOnly: !editable || disabled,
+                    textAlign,
+                    editable: !disabled,
+                    keyboardAppearance,
+                    keyboardType,
+                    cursorColor: theme2.colors.primary,
+                    selectionColor: theme2.colors.primary,
+                    secureTextEntry,
+                    onFocus: onFocusElement,
+                    onBlur: onBlurElement,
+                    onChangeText,
+                    onPress,
+                    ref: textInputRef
+                  }
+                )
+              }
+            ),
+            suffix && /* @__PURE__ */ jsx9(
+              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__ */ jsx9(Text_default, { fontWeight: 700, children: suffix }) : suffix
+              }
+            )
+          ] }),
+          infoMessage && /* @__PURE__ */ jsx9(
+            Animate_default.Text,
+            {
+              fontSize: 14,
+              color: theme2.colors.textSecondary,
+              initialHeight: 0,
+              initialOpacity: 0,
+              animateHeight: 17,
+              animateOpacity: 1,
+              children: infoMessage
+            }
+          ),
+          errorMessage && /* @__PURE__ */ jsx9(
+            Animate_default.Text,
             {
-              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
+              fontSize: 14,
+              color: theme2.colors.error,
+              initialHeight: 0,
+              initialOpacity: 0,
+              animateHeight: 17,
+              animateOpacity: 1,
+              children: errorMessage
             }
           )
-        }
-      ),
-      suffix && /* @__PURE__ */ jsx9(
-        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: /* @__PURE__ */ jsx9(Text_default, { fontWeight: 700, children: suffix })
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
 );
 InputFieldComponent.email = forwardRef(function Email(props, ref) {
@@ -1345,15 +1513,16 @@ InputFieldComponent.password = forwardRef(function Password(props, ref) {
     }
   );
 });
-InputFieldComponent.code = forwardRef(function Password2(props, ref) {
+InputFieldComponent.code = forwardRef(function Password2({ isSmall, ...props }, ref) {
   const theme2 = useTheme8();
   return /* @__PURE__ */ jsx9(
     InputFieldComponent,
     {
-      fontSize: 42,
+      fontSize: isSmall ? 36 : 42,
       fontWeight: 900,
-      lineHeight: 50,
-      paddingVertical: theme2.styles.space * 2,
+      lineHeight: isSmall ? 42 : 50,
+      paddingVertical: isSmall ? theme2.styles.space : theme2.styles.space * 2,
+      paddingHorizontal: isSmall ? theme2.styles.gap : void 0,
       textAlign: "center",
       ...props,
       ref
@@ -1369,14 +1538,15 @@ var InputField_default = InputField;
 // src/components/StatusBar.tsx
 import { memo as memo10 } from "react";
 import { useTheme as useTheme9 } from "react-better-core";
-import { StatusBar as NativeStatusBar } from "react-native";
+import { StatusBar as NativeStatusBar, Platform as Platform4 } from "react-native";
 import { jsx as jsx10 } from "react/jsx-runtime";
-function StatusBar({ darkStatusBar, hidden }) {
+function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
   const theme2 = useTheme9();
   return /* @__PURE__ */ jsx10(
     NativeStatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
+      barStyle: barStyle ?? (Platform4.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );
@@ -1418,6 +1588,7 @@ export {
   formatPhoneNumber,
   generateAsyncStorage,
   generateRandomString,
+  getFormErrorObject,
   getPluralWord,
   lightenColor2 as lightenColor,
   loaderControls,
@@ -1427,6 +1598,7 @@ export {
   useBooleanState5 as useBooleanState,
   useDebounceState,
   useDevice,
+  useForm,
   useKeyboard,
   useLoader2 as useLoader,
   useLoaderControls,