@particle-network/ui-native 0.0.19 → 0.0.21
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.
|
@@ -5,19 +5,19 @@ export declare const useTextStyles: ({ variant, fontWeight, color, lineHeight, a
|
|
|
5
5
|
textAlign: ("right" | "left" | "center") | undefined;
|
|
6
6
|
color: string | undefined;
|
|
7
7
|
lineHeight: number;
|
|
8
|
-
fontWeight: "
|
|
8
|
+
fontWeight: "400" | "500" | "600" | "700" | "800";
|
|
9
9
|
fontSize: number;
|
|
10
10
|
} | {
|
|
11
11
|
textAlign: ("right" | "left" | "center") | undefined;
|
|
12
12
|
color: string | undefined;
|
|
13
13
|
lineHeight: number;
|
|
14
|
-
fontWeight: "
|
|
14
|
+
fontWeight: "400" | "500" | "600" | "700" | "800";
|
|
15
15
|
fontSize: number;
|
|
16
16
|
} | {
|
|
17
17
|
textAlign: ("right" | "left" | "center") | undefined;
|
|
18
18
|
color: string | undefined;
|
|
19
19
|
lineHeight: number;
|
|
20
|
-
fontWeight: "
|
|
20
|
+
fontWeight: "400" | "500" | "600" | "700" | "800";
|
|
21
21
|
fontSize: number;
|
|
22
22
|
};
|
|
23
23
|
};
|
|
@@ -2,12 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { TextInput } from "react-native";
|
|
4
4
|
import { useColors } from "../../hooks/index.js";
|
|
5
|
+
import CloseIcon from "../../icons/CloseIcon.js";
|
|
5
6
|
import { HStack } from "../layout/HStack.js";
|
|
6
7
|
import { VStack } from "../layout/VStack.js";
|
|
7
8
|
import { Text } from "../Text/index.js";
|
|
9
|
+
import { UXPressable } from "../UXPressable/index.js";
|
|
8
10
|
import { useStyles } from "./styles.js";
|
|
9
11
|
const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
10
|
-
const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, startContent, endContent, isReadOnly, isDisabled, isRequired, isInvalid: isInvalidProp, autoErrorMessage, label, onChangeText, onValueChange, onFocus, onBlur, ...restProps } = props;
|
|
12
|
+
const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, startContent, endContent, isReadOnly, isDisabled, isRequired, isClearable, isInvalid: isInvalidProp, autoErrorMessage, label, onChangeText, onValueChange, onFocus, onBlur, ...restProps } = props;
|
|
11
13
|
const { getColor } = useColors();
|
|
12
14
|
const inputRef = useRef(null);
|
|
13
15
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
@@ -53,6 +55,17 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
53
55
|
}, [
|
|
54
56
|
onBlur
|
|
55
57
|
]);
|
|
58
|
+
const handleClear = useCallback(()=>{
|
|
59
|
+
if (isDisabled || isReadOnly) return;
|
|
60
|
+
setInternalValue('');
|
|
61
|
+
onChangeText?.('');
|
|
62
|
+
onValueChange?.('');
|
|
63
|
+
}, [
|
|
64
|
+
isDisabled,
|
|
65
|
+
isReadOnly,
|
|
66
|
+
onChangeText,
|
|
67
|
+
onValueChange
|
|
68
|
+
]);
|
|
56
69
|
const validationResult = useMemo(()=>{
|
|
57
70
|
if (!internalValue && isRequired) {
|
|
58
71
|
setIsInvalid(true);
|
|
@@ -126,7 +139,13 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
126
139
|
onFocus: handleFocus,
|
|
127
140
|
...restProps
|
|
128
141
|
}),
|
|
129
|
-
renderContent(endContent)
|
|
142
|
+
renderContent(endContent),
|
|
143
|
+
!isClearable || !internalValue || isDisabled || isReadOnly ? null : /*#__PURE__*/ jsx(UXPressable, {
|
|
144
|
+
onPress: handleClear,
|
|
145
|
+
children: /*#__PURE__*/ jsx(CloseIcon, {
|
|
146
|
+
size: 16
|
|
147
|
+
})
|
|
148
|
+
})
|
|
130
149
|
]
|
|
131
150
|
}),
|
|
132
151
|
!!renderError && /*#__PURE__*/ jsx(Text, {
|
|
@@ -4,7 +4,7 @@ type UseStylesProps = UXInputCommonProps & {
|
|
|
4
4
|
};
|
|
5
5
|
export declare const useStyles: (props: UseStylesProps) => {
|
|
6
6
|
container: {
|
|
7
|
-
width: number | import("react-native").Animated.AnimatedNode |
|
|
7
|
+
width: number | "auto" | import("react-native").Animated.AnimatedNode | `${number}%`;
|
|
8
8
|
height: number | undefined;
|
|
9
9
|
paddingTop: number;
|
|
10
10
|
paddingBottom: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@particle-network/ui-native",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "./entry.js",
|
|
6
6
|
"react-native": "./dist/index.js",
|
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
"author": "UniversalX",
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@lottiefiles/dotlottie-react": "^0.16.2",
|
|
39
|
-
"@particle-network/ui-shared": "*",
|
|
40
39
|
"ahooks": "^3.9.4",
|
|
41
40
|
"deepmerge": "^4.3.1",
|
|
42
41
|
"expo-haptics": "^15.0.7",
|
|
@@ -44,7 +43,9 @@
|
|
|
44
43
|
"lottie-react-native": "^7.3.4",
|
|
45
44
|
"react-native-paper": "^5.14.5",
|
|
46
45
|
"react-native-size-matters": "^0.4.2",
|
|
47
|
-
"react-native-toast-message": "^2.3.3"
|
|
46
|
+
"react-native-toast-message": "^2.3.3",
|
|
47
|
+
"@particle-network/ui-shared": "0.0.7",
|
|
48
|
+
"@particle-network/icons": "0.0.15"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
50
51
|
"@babel/core": "^7.24.0",
|
|
@@ -52,7 +53,6 @@
|
|
|
52
53
|
"@chromatic-com/storybook": "^4.1.1",
|
|
53
54
|
"@expo/metro-runtime": "~6.1.2",
|
|
54
55
|
"@gorhom/bottom-sheet": "^5.1.2",
|
|
55
|
-
"@particle-network/eslint-config": "*",
|
|
56
56
|
"@react-native-async-storage/async-storage": "2.2.0",
|
|
57
57
|
"@react-native-community/datetimepicker": "8.4.4",
|
|
58
58
|
"@react-native-community/slider": "5.0.1",
|
|
@@ -86,7 +86,8 @@
|
|
|
86
86
|
"typescript": "~5.9.2",
|
|
87
87
|
"unfetch": "^4.2.0",
|
|
88
88
|
"vite": "^6.3.5",
|
|
89
|
-
"zustand": "^5.0.8"
|
|
89
|
+
"zustand": "^5.0.8",
|
|
90
|
+
"@particle-network/eslint-config": "0.0.5"
|
|
90
91
|
},
|
|
91
92
|
"overrides": {
|
|
92
93
|
"react-docgen-typescript": "2.2.2",
|