react-native-better-html 1.0.22 → 1.0.24

package/dist/index.js

@@ -561,6 +561,8 @@ var import_react_better_core2 = require("react-better-core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var touchableHighlightStyleMoveToContent = [
   "width",
+  "alignItems",
+  "justifyContent",
   "backgroundColor",
   "padding",
   "paddingTop",
@@ -1799,7 +1801,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
     const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
     const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
     const readyHeight = height ?? isIOSDateTime ? void 0 : borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth + (import_react_native9.Platform.OS === "android" ? 2 : 0);
-    const onChangeRNDateTimePicker = (0, import_react14.useCallback)(
+    const onValueChangeRNDateTimePicker = (0, import_react14.useCallback)(
       (event, data) => {
         setInternalDateValue(data);
         onChange?.(data?.toISOString() ?? "");
@@ -1826,13 +1828,13 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                 label: "Cancel",
                 textColor: theme2.colors.textSecondary
               },
-              onChange: onChangeRNDateTimePicker
+              onValueChange: onValueChangeRNDateTimePicker
             });
           } else if (import_react_native9.Platform.OS === "ios") {
           }
         }
       },
-      [onPress, type, internalDateValue, onChangeRNDateTimePicker]
+      [onPress, type, internalDateValue, onValueChangeRNDateTimePicker]
     );
     const onFocusElement = (0, import_react14.useCallback)((event) => {
       setIsFocused.setTrue();
@@ -1898,19 +1900,16 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
         type === "date" ? date : internalDateValue ? `${hours.length === 1 ? `0${hours}` : hours}:${minutes.length === 1 ? `0${minutes}` : minutes}` : ""
       );
     }, [internalDateValue]);
-    (0, import_react14.useImperativeHandle)(
-      ref,
-      () => {
-        return textInputRef.current;
-      },
-      []
-    );
+    (0, import_react14.useImperativeHandle)(ref, () => {
+      return textInputRef.current;
+    }, []);
     const withPressInputField = !!onPress || type === "date" || type === "time";
     const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core13.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core13.lightenColor)(theme2.colors.backgroundContent, 0.1);
     const labelComponent = label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
       required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
     ] });
+    const borderColor = isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border;
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       Animate_default.View,
       {
@@ -1922,10 +1921,11 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
-            prefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            prefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               View_default,
               {
                 isRow: true,
+                position: "relative",
                 height: "100%",
                 backgroundColor: prefixSuffixBackgroundColor,
                 alignItems: "center",
@@ -1936,16 +1936,23 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                 borderBottomLeftRadius: theme2.styles.borderRadius,
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
+                zIndex: 1,
                 onPress: onPressPrefix,
-                children: typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  Text_default,
-                  {
-                    fontWeight: 700,
-                    lineHeight,
-                    marginTop: import_react_native9.Platform.OS === "ios" && onPressPrefix ? readyPaddingVertical : void 0,
-                    children: prefix
-                  }
-                ) : prefix
+                children: [
+                  typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    Animate_default.View,
+                    {
+                      position: "absolute",
+                      top: 0,
+                      right: -1,
+                      width: 1,
+                      height: "100%",
+                      initialBackgroundColor: theme2.colors.border,
+                      animateBackgroundColor: borderColor
+                    }
+                  )
+                ]
               }
             ),
             isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
@@ -1959,7 +1966,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                   accentColor: theme2.colors.primary,
                   themeVariant: colorTheme === "dark" ? "dark" : "light",
                   style: rnDateTimePickerStyle,
-                  onChange: onChangeRNDateTimePicker
+                  onValueChange: onValueChangeRNDateTimePicker
                 }
               )
             ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1980,13 +1987,15 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                     flex: 1,
                     justifyContent: "center",
                     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,
+                    borderTopLeftRadius: prefix ? 2 : theme2.styles.borderRadius,
+                    borderBottomLeftRadius: prefix ? 2 : theme2.styles.borderRadius,
+                    borderTopRightRadius: suffix ? 2 : theme2.styles.borderRadius,
+                    borderBottomRightRadius: suffix ? 2 : theme2.styles.borderRadius,
                     borderWidth,
+                    marginLeft: prefix ? -2 : 0,
+                    marginRight: suffix ? -2 : 0,
                     initialBorderColor: theme2.colors.border,
-                    animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
+                    animateBorderColor: borderColor,
                     overflow: "hidden",
                     children: [
                       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2053,29 +2062,38 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
                 )
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               View_default,
               {
                 isRow: true,
+                position: "relative",
                 height: "100%",
                 backgroundColor: prefixSuffixBackgroundColor,
                 alignItems: "center",
+                justifyContent: "center",
                 borderWidth,
                 borderLeftWidth: 0,
                 borderTopRightRadius: theme2.styles.borderRadius,
                 borderBottomRightRadius: theme2.styles.borderRadius,
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
+                zIndex: 1,
                 onPress: onPressSuffix,
-                children: typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  Text_default,
-                  {
-                    fontWeight: 700,
-                    lineHeight,
-                    marginTop: import_react_native9.Platform.OS === "ios" && onPressSuffix ? readyPaddingVertical : void 0,
-                    children: suffix
-                  }
-                ) : suffix
+                children: [
+                  typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    Animate_default.View,
+                    {
+                      position: "absolute",
+                      top: 0,
+                      left: -1,
+                      width: 1,
+                      height: "100%",
+                      initialBackgroundColor: theme2.colors.border,
+                      animateBackgroundColor: borderColor
+                    }
+                  )
+                ]
               }
             )
           ] }),
@@ -2129,13 +2147,9 @@ InputFieldComponent.password = (0, import_react14.forwardRef)(function Password(
     setShowPassword.toggle();
     inputFieldRef.current?.focus();
   }, []);
-  (0, import_react14.useImperativeHandle)(
-    ref,
-    () => {
-      return inputFieldRef.current;
-    },
-    []
-  );
+  (0, import_react14.useImperativeHandle)(ref, () => {
+    return inputFieldRef.current;
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     InputFieldComponent,
     {