react-native-better-html 1.0.22 → 1.0.24

package/dist/index.mjs

@@ -512,6 +512,8 @@ import { useTheme as useTheme2 } from "react-better-core";
 import { Fragment, jsx } from "react/jsx-runtime";
 var touchableHighlightStyleMoveToContent = [
   "width",
+  "alignItems",
+  "justifyContent",
   "backgroundColor",
   "padding",
   "paddingTop",
@@ -1775,7 +1777,7 @@ var InputFieldComponent = 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 + (Platform5.OS === "android" ? 2 : 0);
-    const onChangeRNDateTimePicker = useCallback6(
+    const onValueChangeRNDateTimePicker = useCallback6(
       (event, data) => {
         setInternalDateValue(data);
         onChange?.(data?.toISOString() ?? "");
@@ -1802,13 +1804,13 @@ var InputFieldComponent = forwardRef(
                 label: "Cancel",
                 textColor: theme2.colors.textSecondary
               },
-              onChange: onChangeRNDateTimePicker
+              onValueChange: onValueChangeRNDateTimePicker
             });
           } else if (Platform5.OS === "ios") {
           }
         }
       },
-      [onPress, type, internalDateValue, onChangeRNDateTimePicker]
+      [onPress, type, internalDateValue, onValueChangeRNDateTimePicker]
     );
     const onFocusElement = useCallback6((event) => {
       setIsFocused.setTrue();
@@ -1874,19 +1876,16 @@ var InputFieldComponent = forwardRef(
         type === "date" ? date : internalDateValue ? `${hours.length === 1 ? `0${hours}` : hours}:${minutes.length === 1 ? `0${minutes}` : minutes}` : ""
       );
     }, [internalDateValue]);
-    useImperativeHandle(
-      ref,
-      () => {
-        return textInputRef.current;
-      },
-      []
-    );
+    useImperativeHandle(ref, () => {
+      return textInputRef.current;
+    }, []);
     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__ */ jsxs6(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
       /* @__PURE__ */ jsx12(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
       required && /* @__PURE__ */ jsx12(Text_default, { color: theme2.colors.error, children: "*" })
     ] });
+    const borderColor = isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border;
     return /* @__PURE__ */ jsxs6(
       Animate_default.View,
       {
@@ -1898,10 +1897,11 @@ var InputFieldComponent = forwardRef(
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
           /* @__PURE__ */ jsxs6(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
-            prefix && /* @__PURE__ */ jsx12(
+            prefix && /* @__PURE__ */ jsxs6(
               View_default,
               {
                 isRow: true,
+                position: "relative",
                 height: "100%",
                 backgroundColor: prefixSuffixBackgroundColor,
                 alignItems: "center",
@@ -1912,16 +1912,23 @@ var InputFieldComponent = forwardRef(
                 borderBottomLeftRadius: theme2.styles.borderRadius,
                 borderColor: theme2.colors.border,
                 paddingHorizontal: readyPaddingHorizontal,
+                zIndex: 1,
                 onPress: onPressPrefix,
-                children: typeof prefix === "string" ? /* @__PURE__ */ jsx12(
-                  Text_default,
-                  {
-                    fontWeight: 700,
-                    lineHeight,
-                    marginTop: Platform5.OS === "ios" && onPressPrefix ? readyPaddingVertical : void 0,
-                    children: prefix
-                  }
-                ) : prefix
+                children: [
+                  typeof prefix === "string" ? /* @__PURE__ */ jsx12(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
+                  /* @__PURE__ */ jsx12(
+                    Animate_default.View,
+                    {
+                      position: "absolute",
+                      top: 0,
+                      right: -1,
+                      width: 1,
+                      height: "100%",
+                      initialBackgroundColor: theme2.colors.border,
+                      animateBackgroundColor: borderColor
+                    }
+                  )
+                ]
               }
             ),
             isIOSDateTime ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
@@ -1935,7 +1942,7 @@ var InputFieldComponent = forwardRef(
                   accentColor: theme2.colors.primary,
                   themeVariant: colorTheme === "dark" ? "dark" : "light",
                   style: rnDateTimePickerStyle,
-                  onChange: onChangeRNDateTimePicker
+                  onValueChange: onValueChangeRNDateTimePicker
                 }
               )
             ] }) : /* @__PURE__ */ jsx12(
@@ -1956,13 +1963,15 @@ var InputFieldComponent = 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__ */ jsx12(
@@ -2029,29 +2038,38 @@ var InputFieldComponent = forwardRef(
                 )
               }
             ),
-            suffix && /* @__PURE__ */ jsx12(
+            suffix && /* @__PURE__ */ jsxs6(
               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__ */ jsx12(
-                  Text_default,
-                  {
-                    fontWeight: 700,
-                    lineHeight,
-                    marginTop: Platform5.OS === "ios" && onPressSuffix ? readyPaddingVertical : void 0,
-                    children: suffix
-                  }
-                ) : suffix
+                children: [
+                  typeof suffix === "string" ? /* @__PURE__ */ jsx12(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
+                  /* @__PURE__ */ jsx12(
+                    Animate_default.View,
+                    {
+                      position: "absolute",
+                      top: 0,
+                      left: -1,
+                      width: 1,
+                      height: "100%",
+                      initialBackgroundColor: theme2.colors.border,
+                      animateBackgroundColor: borderColor
+                    }
+                  )
+                ]
               }
             )
           ] }),
@@ -2105,13 +2123,9 @@ InputFieldComponent.password = forwardRef(function Password(props, ref) {
     setShowPassword.toggle();
     inputFieldRef.current?.focus();
   }, []);
-  useImperativeHandle(
-    ref,
-    () => {
-      return inputFieldRef.current;
-    },
-    []
-  );
+  useImperativeHandle(ref, () => {
+    return inputFieldRef.current;
+  }, []);
   return /* @__PURE__ */ jsx12(
     InputFieldComponent,
     {