react-native-better-html 1.0.22 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +57 -43
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +57 -43
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -561,6 +561,8 @@ var import_react_better_core2 = require("react-better-core");
|
|
|
561
561
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
562
562
|
var touchableHighlightStyleMoveToContent = [
|
|
563
563
|
"width",
|
|
564
|
+
"alignItems",
|
|
565
|
+
"justifyContent",
|
|
564
566
|
"backgroundColor",
|
|
565
567
|
"padding",
|
|
566
568
|
"paddingTop",
|
|
@@ -1799,7 +1801,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
|
|
|
1799
1801
|
const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
|
|
1800
1802
|
const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
|
|
1801
1803
|
const readyHeight = height ?? isIOSDateTime ? void 0 : borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth + (import_react_native9.Platform.OS === "android" ? 2 : 0);
|
|
1802
|
-
const
|
|
1804
|
+
const onValueChangeRNDateTimePicker = (0, import_react14.useCallback)(
|
|
1803
1805
|
(event, data) => {
|
|
1804
1806
|
setInternalDateValue(data);
|
|
1805
1807
|
onChange?.(data?.toISOString() ?? "");
|
|
@@ -1826,13 +1828,13 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
|
|
|
1826
1828
|
label: "Cancel",
|
|
1827
1829
|
textColor: theme2.colors.textSecondary
|
|
1828
1830
|
},
|
|
1829
|
-
|
|
1831
|
+
onValueChange: onValueChangeRNDateTimePicker
|
|
1830
1832
|
});
|
|
1831
1833
|
} else if (import_react_native9.Platform.OS === "ios") {
|
|
1832
1834
|
}
|
|
1833
1835
|
}
|
|
1834
1836
|
},
|
|
1835
|
-
[onPress, type, internalDateValue,
|
|
1837
|
+
[onPress, type, internalDateValue, onValueChangeRNDateTimePicker]
|
|
1836
1838
|
);
|
|
1837
1839
|
const onFocusElement = (0, import_react14.useCallback)((event) => {
|
|
1838
1840
|
setIsFocused.setTrue();
|
|
@@ -1898,19 +1900,16 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
|
|
|
1898
1900
|
type === "date" ? date : internalDateValue ? `${hours.length === 1 ? `0${hours}` : hours}:${minutes.length === 1 ? `0${minutes}` : minutes}` : ""
|
|
1899
1901
|
);
|
|
1900
1902
|
}, [internalDateValue]);
|
|
1901
|
-
(0, import_react14.useImperativeHandle)(
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
return textInputRef.current;
|
|
1905
|
-
},
|
|
1906
|
-
[]
|
|
1907
|
-
);
|
|
1903
|
+
(0, import_react14.useImperativeHandle)(ref, () => {
|
|
1904
|
+
return textInputRef.current;
|
|
1905
|
+
}, []);
|
|
1908
1906
|
const withPressInputField = !!onPress || type === "date" || type === "time";
|
|
1909
1907
|
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);
|
|
1910
1908
|
const labelComponent = label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
|
|
1911
1909
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
|
|
1912
1910
|
required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { color: theme2.colors.error, children: "*" })
|
|
1913
1911
|
] });
|
|
1912
|
+
const borderColor = isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border;
|
|
1914
1913
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1915
1914
|
Animate_default.View,
|
|
1916
1915
|
{
|
|
@@ -1922,10 +1921,11 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
|
|
|
1922
1921
|
children: [
|
|
1923
1922
|
isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
|
|
1924
1923
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
|
|
1925
|
-
prefix && /* @__PURE__ */ (0, import_jsx_runtime12.
|
|
1924
|
+
prefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1926
1925
|
View_default,
|
|
1927
1926
|
{
|
|
1928
1927
|
isRow: true,
|
|
1928
|
+
position: "relative",
|
|
1929
1929
|
height: "100%",
|
|
1930
1930
|
backgroundColor: prefixSuffixBackgroundColor,
|
|
1931
1931
|
alignItems: "center",
|
|
@@ -1936,16 +1936,23 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
|
|
|
1936
1936
|
borderBottomLeftRadius: theme2.styles.borderRadius,
|
|
1937
1937
|
borderColor: theme2.colors.border,
|
|
1938
1938
|
paddingHorizontal: readyPaddingHorizontal,
|
|
1939
|
+
zIndex: 1,
|
|
1939
1940
|
onPress: onPressPrefix,
|
|
1940
|
-
children:
|
|
1941
|
-
Text_default,
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1941
|
+
children: [
|
|
1942
|
+
typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
|
|
1943
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1944
|
+
Animate_default.View,
|
|
1945
|
+
{
|
|
1946
|
+
position: "absolute",
|
|
1947
|
+
top: 0,
|
|
1948
|
+
right: -1,
|
|
1949
|
+
width: 1,
|
|
1950
|
+
height: "100%",
|
|
1951
|
+
initialBackgroundColor: theme2.colors.border,
|
|
1952
|
+
animateBackgroundColor: borderColor
|
|
1953
|
+
}
|
|
1954
|
+
)
|
|
1955
|
+
]
|
|
1949
1956
|
}
|
|
1950
1957
|
),
|
|
1951
1958
|
isIOSDateTime ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
@@ -1959,7 +1966,7 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
|
|
|
1959
1966
|
accentColor: theme2.colors.primary,
|
|
1960
1967
|
themeVariant: colorTheme === "dark" ? "dark" : "light",
|
|
1961
1968
|
style: rnDateTimePickerStyle,
|
|
1962
|
-
|
|
1969
|
+
onValueChange: onValueChangeRNDateTimePicker
|
|
1963
1970
|
}
|
|
1964
1971
|
)
|
|
1965
1972
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
@@ -1980,13 +1987,15 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
|
|
|
1980
1987
|
flex: 1,
|
|
1981
1988
|
justifyContent: "center",
|
|
1982
1989
|
backgroundColor: theme2.colors.backgroundContent,
|
|
1983
|
-
borderTopLeftRadius: prefix ?
|
|
1984
|
-
borderBottomLeftRadius: prefix ?
|
|
1985
|
-
borderTopRightRadius: suffix ?
|
|
1986
|
-
borderBottomRightRadius: suffix ?
|
|
1990
|
+
borderTopLeftRadius: prefix ? 2 : theme2.styles.borderRadius,
|
|
1991
|
+
borderBottomLeftRadius: prefix ? 2 : theme2.styles.borderRadius,
|
|
1992
|
+
borderTopRightRadius: suffix ? 2 : theme2.styles.borderRadius,
|
|
1993
|
+
borderBottomRightRadius: suffix ? 2 : theme2.styles.borderRadius,
|
|
1987
1994
|
borderWidth,
|
|
1995
|
+
marginLeft: prefix ? -2 : 0,
|
|
1996
|
+
marginRight: suffix ? -2 : 0,
|
|
1988
1997
|
initialBorderColor: theme2.colors.border,
|
|
1989
|
-
animateBorderColor:
|
|
1998
|
+
animateBorderColor: borderColor,
|
|
1990
1999
|
overflow: "hidden",
|
|
1991
2000
|
children: [
|
|
1992
2001
|
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
@@ -2053,29 +2062,38 @@ var InputFieldComponent = (0, import_react14.forwardRef)(
|
|
|
2053
2062
|
)
|
|
2054
2063
|
}
|
|
2055
2064
|
),
|
|
2056
|
-
suffix && /* @__PURE__ */ (0, import_jsx_runtime12.
|
|
2065
|
+
suffix && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2057
2066
|
View_default,
|
|
2058
2067
|
{
|
|
2059
2068
|
isRow: true,
|
|
2069
|
+
position: "relative",
|
|
2060
2070
|
height: "100%",
|
|
2061
2071
|
backgroundColor: prefixSuffixBackgroundColor,
|
|
2062
2072
|
alignItems: "center",
|
|
2073
|
+
justifyContent: "center",
|
|
2063
2074
|
borderWidth,
|
|
2064
2075
|
borderLeftWidth: 0,
|
|
2065
2076
|
borderTopRightRadius: theme2.styles.borderRadius,
|
|
2066
2077
|
borderBottomRightRadius: theme2.styles.borderRadius,
|
|
2067
2078
|
borderColor: theme2.colors.border,
|
|
2068
2079
|
paddingHorizontal: readyPaddingHorizontal,
|
|
2080
|
+
zIndex: 1,
|
|
2069
2081
|
onPress: onPressSuffix,
|
|
2070
|
-
children:
|
|
2071
|
-
Text_default,
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2082
|
+
children: [
|
|
2083
|
+
typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
|
|
2084
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2085
|
+
Animate_default.View,
|
|
2086
|
+
{
|
|
2087
|
+
position: "absolute",
|
|
2088
|
+
top: 0,
|
|
2089
|
+
left: -1,
|
|
2090
|
+
width: 1,
|
|
2091
|
+
height: "100%",
|
|
2092
|
+
initialBackgroundColor: theme2.colors.border,
|
|
2093
|
+
animateBackgroundColor: borderColor
|
|
2094
|
+
}
|
|
2095
|
+
)
|
|
2096
|
+
]
|
|
2079
2097
|
}
|
|
2080
2098
|
)
|
|
2081
2099
|
] }),
|
|
@@ -2129,13 +2147,9 @@ InputFieldComponent.password = (0, import_react14.forwardRef)(function Password(
|
|
|
2129
2147
|
setShowPassword.toggle();
|
|
2130
2148
|
inputFieldRef.current?.focus();
|
|
2131
2149
|
}, []);
|
|
2132
|
-
(0, import_react14.useImperativeHandle)(
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
return inputFieldRef.current;
|
|
2136
|
-
},
|
|
2137
|
-
[]
|
|
2138
|
-
);
|
|
2150
|
+
(0, import_react14.useImperativeHandle)(ref, () => {
|
|
2151
|
+
return inputFieldRef.current;
|
|
2152
|
+
}, []);
|
|
2139
2153
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2140
2154
|
InputFieldComponent,
|
|
2141
2155
|
{
|