react-native-better-html 1.0.12 → 1.0.13

package/dist/index.mjs

@@ -487,6 +487,7 @@ function useForm(options) {
         required: requiredFields?.includes(field),
         value: values[field]?.toString() ?? "",
         errorMessage: errors[field],
+        isError: !!errors[field],
         returnKeyLabel: isLastInputField ? additional?.lastInputFieldReturnKeyLabel ?? "done" : "next",
         onPressEnter: () => {
           if (isLastInputField) onSubmitFunction();
@@ -581,6 +582,7 @@ import {
 import { useTheme as useTheme2 } from "react-better-core";
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
 var touchableHighlightStyleMoveToContent = [
+  "width",
   "backgroundColor",
   "padding",
   "paddingTop",
@@ -721,6 +723,7 @@ var ViewComponent = function View({
         ViewComponent,
         {
           width: "100%",
+          height: props.height,
           borderRadius: props.borderRadius,
           borderTopLeftRadius: props.borderTopLeftRadius,
           borderTopRightRadius: props.borderTopRightRadius,
@@ -1271,8 +1274,12 @@ import {
   useState as useState2
 } from "react";
 import {
+  Platform as Platform4,
   TextInput as TextInput2
 } from "react-native";
+import RNDateTimePicker, {
+  DateTimePickerAndroid
+} from "@react-native-community/datetimepicker";
 import {
   darkenColor,
   lightenColor,
@@ -1280,10 +1287,12 @@ import {
   useBooleanState as useBooleanState4,
   useTheme as useTheme8
 } from "react-better-core";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var InputFieldComponent = forwardRef(
   ({
     placeholder,
+    type = "text",
+    iOSDateTimeFullSize,
     prefix,
     suffix,
     defaultValue,
@@ -1309,23 +1318,65 @@ var InputFieldComponent = forwardRef(
     textAlign,
     required,
     disabled,
+    maxLength,
+    multiline,
+    numberOfLines = 2,
     paddingHorizontal,
     paddingVertical,
     onFocus,
     onBlur,
     onChange,
     onPress,
+    onPressPrefix,
+    onPressSuffix,
     onPressEnter
   }, ref) => {
     const theme2 = useTheme8();
     const { colorTheme } = useBetterCoreContext3();
     const textInputRef = useRef2(null);
     const [internalValue, setInternalValue] = useState2(value?.toString() || defaultValue || "");
+    const [internalDateValue, setInternalDateValue] = useState2();
     const [isFocused, setIsFocused] = useBooleanState4();
+    const isIOSDateTime = Platform4.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 + (Platform4.OS === "android" ? 2 : 0);
+    const onChangeRNDateTimePicker = useCallback3(
+      (event, data) => {
+        setInternalDateValue(data);
+        onChange?.(data?.toISOString() ?? "");
+      },
+      [onChange]
+    );
+    const onPressInputField = useCallback3(
+      (event) => {
+        onPress?.(event);
+        if (type === "date" || type === "time") {
+          if (Platform4.OS === "android") {
+            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 (Platform4.OS === "ios") {
+          }
+        }
+      },
+      [onPress, type, internalDateValue, onChangeRNDateTimePicker]
+    );
     const onFocusElement = useCallback3((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
@@ -1353,10 +1404,27 @@ var InputFieldComponent = forwardRef(
       }),
       [theme2.colors, fontSize, fontWeight, lineHeight, readyPaddingHorizontal, readyPaddingVertical]
     );
+    const rnDateTimePickerStyle = useMemo8(
+      () => ({
+        flex: iOSDateTimeFullSize ? 1 : void 0,
+        marginLeft: -8 + (iOSDateTimeFullSize ? 0 : theme2.styles.space)
+      }),
+      [iOSDateTimeFullSize]
+    );
     useEffect4(() => {
       if (value === void 0) return;
       setInternalValue(value.toString());
+      setInternalDateValue(new Date(value));
     }, [value]);
+    useEffect4(() => {
+      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]);
     useImperativeHandle(
       ref,
       () => {
@@ -1364,7 +1432,12 @@ var InputFieldComponent = forwardRef(
       },
       []
     );
+    const withPressInputField = !!onPress || type === "date" || type === "time";
     const prefixSuffixBackgroundColor = colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1);
+    const labelComponent = label && /* @__PURE__ */ jsxs4(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
+      /* @__PURE__ */ jsx9(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
+      required && /* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.error, children: "*" })
+    ] });
     return /* @__PURE__ */ jsxs4(
       Animate_default.View,
       {
@@ -1373,10 +1446,7 @@ var InputFieldComponent = forwardRef(
         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: "*" })
-          ] }),
+          isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
           /* @__PURE__ */ jsxs4(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
             prefix && /* @__PURE__ */ jsx9(
               View_default,
@@ -1385,56 +1455,95 @@ var InputFieldComponent = forwardRef(
                 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,
-                children: typeof prefix === "string" ? /* @__PURE__ */ jsx9(Text_default, { fontWeight: 700, children: prefix }) : prefix
+                onPress: onPressPrefix,
+                children: typeof prefix === "string" ? /* @__PURE__ */ jsx9(
+                  Text_default,
+                  {
+                    fontWeight: 700,
+                    lineHeight,
+                    marginTop: Platform4.OS === "ios" ? readyPaddingVertical : void 0,
+                    children: prefix
+                  }
+                ) : prefix
               }
             ),
-            /* @__PURE__ */ jsx9(
-              Animate_default.View,
+            isIOSDateTime ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+              !iOSDateTimeFullSize ? labelComponent : void 0,
+              /* @__PURE__ */ jsx9(
+                RNDateTimePicker,
+                {
+                  value: internalDateValue ?? /* @__PURE__ */ new Date(),
+                  mode: type,
+                  display: iOSDateTimeFullSize ? type === "date" ? "inline" : "spinner" : "default",
+                  accentColor: theme2.colors.primary,
+                  style: rnDateTimePickerStyle,
+                  onChange: onChangeRNDateTimePicker
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx9(
+              View_default,
               {
                 flex: 1,
-                backgroundColor: theme2.colors.backgroundContent,
+                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,
-                borderWidth,
-                initialBorderColor: theme2.colors.border,
-                animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
-                overflow: "hidden",
+                pressStrength: 1,
+                onPress: Platform4.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
                 children: /* @__PURE__ */ jsx9(
-                  TextInput2,
+                  Animate_default.View,
                   {
-                    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
+                    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: 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
+                      }
+                    )
                   }
                 )
               }
@@ -1452,7 +1561,16 @@ var InputFieldComponent = forwardRef(
                 borderBottomRightRadius: theme2.styles.borderRadius,
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
-                children: typeof suffix === "string" ? /* @__PURE__ */ jsx9(Text_default, { fontWeight: 700, children: suffix }) : suffix
+                onPress: onPressSuffix,
+                children: typeof suffix === "string" ? /* @__PURE__ */ jsx9(
+                  Text_default,
+                  {
+                    fontWeight: 700,
+                    lineHeight,
+                    marginTop: Platform4.OS === "ios" ? readyPaddingVertical : void 0,
+                    children: suffix
+                  }
+                ) : suffix
               }
             )
           ] }),
@@ -1538,7 +1656,7 @@ 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, Platform as Platform4 } from "react-native";
+import { StatusBar as NativeStatusBar, Platform as Platform5 } from "react-native";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
   const theme2 = useTheme9();
@@ -1546,7 +1664,7 @@ function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarSty
     NativeStatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
-      barStyle: barStyle ?? (Platform4.OS === "android" ? androidBarStyle : iOSBarStyle),
+      barStyle: barStyle ?? (Platform5.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );