@kivid/native-components 1.0.0-alpha.14 → 1.0.0-alpha.15
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.
|
@@ -29,8 +29,10 @@ function Toast(props) {
|
|
|
29
29
|
} = props;
|
|
30
30
|
const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
31
31
|
const timerRef = (0, _react.useRef)(null);
|
|
32
|
+
const isClosingRef = (0, _react.useRef)(false);
|
|
32
33
|
(0, _react.useEffect)(() => {
|
|
33
34
|
if (!isToastOpen) return;
|
|
35
|
+
isClosingRef.current = false;
|
|
34
36
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
35
37
|
_reactNative.Animated.timing(animatedValue, {
|
|
36
38
|
toValue: 1,
|
|
@@ -38,6 +40,8 @@ function Toast(props) {
|
|
|
38
40
|
useNativeDriver: true
|
|
39
41
|
}).start();
|
|
40
42
|
timerRef.current = setTimeout(() => {
|
|
43
|
+
if (isClosingRef.current) return;
|
|
44
|
+
isClosingRef.current = true;
|
|
41
45
|
_reactNative.Animated.timing(animatedValue, {
|
|
42
46
|
toValue: 0,
|
|
43
47
|
duration: 200,
|
|
@@ -52,8 +56,16 @@ function Toast(props) {
|
|
|
52
56
|
}, [isToastOpen]);
|
|
53
57
|
if (!isToastOpen) return null;
|
|
54
58
|
function handleClose() {
|
|
55
|
-
|
|
59
|
+
if (isClosingRef.current) return;
|
|
60
|
+
isClosingRef.current = true;
|
|
56
61
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
62
|
+
_reactNative.Animated.timing(animatedValue, {
|
|
63
|
+
toValue: 0,
|
|
64
|
+
duration: 200,
|
|
65
|
+
useNativeDriver: true
|
|
66
|
+
}).start(() => {
|
|
67
|
+
onCloseToast(false);
|
|
68
|
+
});
|
|
57
69
|
}
|
|
58
70
|
const toastStyle = (0, _classVariants.toastVariants)({
|
|
59
71
|
variant
|
|
@@ -76,32 +88,35 @@ function Toast(props) {
|
|
|
76
88
|
})
|
|
77
89
|
};
|
|
78
90
|
const Icon = iconMap[variant];
|
|
91
|
+
const animatedStyle = {
|
|
92
|
+
opacity: animatedValue,
|
|
93
|
+
transform: [{
|
|
94
|
+
translateY: animatedValue.interpolate({
|
|
95
|
+
inputRange: [0, 1],
|
|
96
|
+
outputRange: [-20, 0]
|
|
97
|
+
})
|
|
98
|
+
}]
|
|
99
|
+
};
|
|
79
100
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
80
101
|
className: containerStyle,
|
|
102
|
+
style: animatedStyle,
|
|
81
103
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
82
104
|
className: (0, _tailwindPreset.merge)(toastStyle, className),
|
|
83
105
|
style: {
|
|
84
106
|
boxShadow: _index5.elevationDown100
|
|
85
107
|
},
|
|
86
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.
|
|
87
|
-
className: "
|
|
88
|
-
children:
|
|
89
|
-
className: "flex items-center gap-8",
|
|
90
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
|
|
91
|
-
className: (0, _tailwindPreset.merge)("title_small font-bold text-chia-100", descriptionClassName),
|
|
92
|
-
children: description
|
|
93
|
-
})
|
|
94
|
-
})]
|
|
108
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
|
|
109
|
+
className: (0, _tailwindPreset.merge)("title_small font-bold text-chia-100 truncate flex-1", descriptionClassName),
|
|
110
|
+
children: description
|
|
95
111
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
96
112
|
className: "cursor-pointer",
|
|
97
113
|
onPress: handleClose,
|
|
98
114
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_native.Close, {
|
|
99
|
-
|
|
115
|
+
className: "text-chia-100",
|
|
100
116
|
size: 30
|
|
101
117
|
})
|
|
102
118
|
})]
|
|
103
119
|
})
|
|
104
120
|
});
|
|
105
121
|
}
|
|
106
|
-
;
|
|
107
122
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_index","_classVariants","_native","_index2","_interopRequireDefault","_tailwindPreset","_index3","_index4","_index5","_jsxRuntime","e","__esModule","default","Toast","props","description","isToastOpen","onCloseToast","className","descriptionClassName","durationInMilliSeconds","position","ToastPositionEnum","TOP","variant","ToastVariantEnum","SUCCESS","animatedValue","useRef","Animated","Value","current","timerRef","useEffect","clearTimeout","timing","toValue","duration","useNativeDriver","start","setTimeout","handleClose","toastStyle","toastVariants","containerStyle","containerVariants","iconMap","jsx","Seal","SealVariantEnum","inverted","ERROR","WARNING","ALERT","Icon","View","children","jsxs","merge","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_index","_classVariants","_native","_index2","_interopRequireDefault","_tailwindPreset","_index3","_index4","_index5","_jsxRuntime","e","__esModule","default","Toast","props","description","isToastOpen","onCloseToast","className","descriptionClassName","durationInMilliSeconds","position","ToastPositionEnum","TOP","variant","ToastVariantEnum","SUCCESS","animatedValue","useRef","Animated","Value","current","timerRef","isClosingRef","useEffect","clearTimeout","timing","toValue","duration","useNativeDriver","start","setTimeout","handleClose","toastStyle","toastVariants","containerStyle","containerVariants","iconMap","jsx","Seal","SealVariantEnum","inverted","ERROR","WARNING","ALERT","Icon","animatedStyle","opacity","transform","translateY","interpolate","inputRange","outputRange","View","style","children","jsxs","merge","boxShadow","elevationDown100","Pressable","onPress","Close","size"],"sourceRoot":"../../../../src","sources":["components/Toast/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -24,8 +24,10 @@ export function Toast(props) {
|
|
|
24
24
|
} = props;
|
|
25
25
|
const animatedValue = useRef(new Animated.Value(0)).current;
|
|
26
26
|
const timerRef = useRef(null);
|
|
27
|
+
const isClosingRef = useRef(false);
|
|
27
28
|
useEffect(() => {
|
|
28
29
|
if (!isToastOpen) return;
|
|
30
|
+
isClosingRef.current = false;
|
|
29
31
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
30
32
|
Animated.timing(animatedValue, {
|
|
31
33
|
toValue: 1,
|
|
@@ -33,6 +35,8 @@ export function Toast(props) {
|
|
|
33
35
|
useNativeDriver: true
|
|
34
36
|
}).start();
|
|
35
37
|
timerRef.current = setTimeout(() => {
|
|
38
|
+
if (isClosingRef.current) return;
|
|
39
|
+
isClosingRef.current = true;
|
|
36
40
|
Animated.timing(animatedValue, {
|
|
37
41
|
toValue: 0,
|
|
38
42
|
duration: 200,
|
|
@@ -47,8 +51,16 @@ export function Toast(props) {
|
|
|
47
51
|
}, [isToastOpen]);
|
|
48
52
|
if (!isToastOpen) return null;
|
|
49
53
|
function handleClose() {
|
|
50
|
-
|
|
54
|
+
if (isClosingRef.current) return;
|
|
55
|
+
isClosingRef.current = true;
|
|
51
56
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
57
|
+
Animated.timing(animatedValue, {
|
|
58
|
+
toValue: 0,
|
|
59
|
+
duration: 200,
|
|
60
|
+
useNativeDriver: true
|
|
61
|
+
}).start(() => {
|
|
62
|
+
onCloseToast(false);
|
|
63
|
+
});
|
|
52
64
|
}
|
|
53
65
|
const toastStyle = toastVariants({
|
|
54
66
|
variant
|
|
@@ -71,32 +83,35 @@ export function Toast(props) {
|
|
|
71
83
|
})
|
|
72
84
|
};
|
|
73
85
|
const Icon = iconMap[variant];
|
|
86
|
+
const animatedStyle = {
|
|
87
|
+
opacity: animatedValue,
|
|
88
|
+
transform: [{
|
|
89
|
+
translateY: animatedValue.interpolate({
|
|
90
|
+
inputRange: [0, 1],
|
|
91
|
+
outputRange: [-20, 0]
|
|
92
|
+
})
|
|
93
|
+
}]
|
|
94
|
+
};
|
|
74
95
|
return /*#__PURE__*/_jsx(Animated.View, {
|
|
75
96
|
className: containerStyle,
|
|
97
|
+
style: animatedStyle,
|
|
76
98
|
children: /*#__PURE__*/_jsxs(View, {
|
|
77
99
|
className: merge(toastStyle, className),
|
|
78
100
|
style: {
|
|
79
101
|
boxShadow: elevationDown100
|
|
80
102
|
},
|
|
81
|
-
children: [/*#__PURE__*/
|
|
82
|
-
className: "
|
|
83
|
-
children:
|
|
84
|
-
className: "flex items-center gap-8",
|
|
85
|
-
children: /*#__PURE__*/_jsx(Typography, {
|
|
86
|
-
className: merge("title_small font-bold text-chia-100", descriptionClassName),
|
|
87
|
-
children: description
|
|
88
|
-
})
|
|
89
|
-
})]
|
|
103
|
+
children: [/*#__PURE__*/_jsx(Icon, {}), /*#__PURE__*/_jsx(Typography, {
|
|
104
|
+
className: merge("title_small font-bold text-chia-100 truncate flex-1", descriptionClassName),
|
|
105
|
+
children: description
|
|
90
106
|
}), /*#__PURE__*/_jsx(Pressable, {
|
|
91
107
|
className: "cursor-pointer",
|
|
92
108
|
onPress: handleClose,
|
|
93
109
|
children: /*#__PURE__*/_jsx(Close, {
|
|
94
|
-
|
|
110
|
+
className: "text-chia-100",
|
|
95
111
|
size: 30
|
|
96
112
|
})
|
|
97
113
|
})]
|
|
98
114
|
})
|
|
99
115
|
});
|
|
100
116
|
}
|
|
101
|
-
;
|
|
102
117
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useRef","View","Animated","Pressable","ToastPositionEnum","ToastVariantEnum","containerVariants","toastVariants","Close","Typography","merge","Seal","SealVariantEnum","elevationDown100","jsx","_jsx","jsxs","_jsxs","Toast","props","description","isToastOpen","onCloseToast","className","descriptionClassName","durationInMilliSeconds","position","TOP","variant","SUCCESS","animatedValue","Value","current","timerRef","clearTimeout","timing","toValue","duration","useNativeDriver","start","setTimeout","handleClose","toastStyle","containerStyle","iconMap","inverted","ERROR","WARNING","ALERT","Icon","
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","View","Animated","Pressable","ToastPositionEnum","ToastVariantEnum","containerVariants","toastVariants","Close","Typography","merge","Seal","SealVariantEnum","elevationDown100","jsx","_jsx","jsxs","_jsxs","Toast","props","description","isToastOpen","onCloseToast","className","descriptionClassName","durationInMilliSeconds","position","TOP","variant","SUCCESS","animatedValue","Value","current","timerRef","isClosingRef","clearTimeout","timing","toValue","duration","useNativeDriver","start","setTimeout","handleClose","toastStyle","containerStyle","iconMap","inverted","ERROR","WARNING","ALERT","Icon","animatedStyle","opacity","transform","translateY","interpolate","inputRange","outputRange","style","children","boxShadow","onPress","size"],"sourceRoot":"../../../../src","sources":["components/Toast/index.tsx"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kivid/native-components",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.15",
|
|
4
4
|
"description": "A React Native component library for the Butterfly Design System.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -79,8 +79,8 @@
|
|
|
79
79
|
"react": "19.0.0",
|
|
80
80
|
"ts-jest": "^29.2.5",
|
|
81
81
|
"typescript": "~5.8.3",
|
|
82
|
-
"@kivid/
|
|
83
|
-
"@kivid/
|
|
82
|
+
"@kivid/tailwind-preset": "1.0.0-alpha.15",
|
|
83
|
+
"@kivid/icons": "1.0.0-alpha.15"
|
|
84
84
|
},
|
|
85
85
|
"peerDependencies": {
|
|
86
86
|
"@lottiefiles/dotlottie-react": "^0.15.1",
|
|
@@ -90,8 +90,8 @@
|
|
|
90
90
|
"react-native-svg": "^15.12.0",
|
|
91
91
|
"react-native": "0.79.5",
|
|
92
92
|
"react": "19.0.0",
|
|
93
|
-
"@kivid/
|
|
94
|
-
"@kivid/
|
|
93
|
+
"@kivid/tailwind-preset": "1.0.0-alpha.15",
|
|
94
|
+
"@kivid/icons": "1.0.0-alpha.15"
|
|
95
95
|
},
|
|
96
96
|
"eslintIgnore": [
|
|
97
97
|
"node_modules/",
|
|
@@ -11,7 +11,6 @@ import { Seal } from "../Seal";
|
|
|
11
11
|
import { SealVariantEnum } from "../Seal/enums";
|
|
12
12
|
import { elevationDown100 } from "../../styles/mixins/shadows";
|
|
13
13
|
|
|
14
|
-
|
|
15
14
|
export function Toast(props: ToastProps) {
|
|
16
15
|
const {
|
|
17
16
|
description,
|
|
@@ -21,15 +20,18 @@ export function Toast(props: ToastProps) {
|
|
|
21
20
|
descriptionClassName,
|
|
22
21
|
durationInMilliSeconds = 3000,
|
|
23
22
|
position = ToastPositionEnum.TOP,
|
|
24
|
-
variant = ToastVariantEnum.SUCCESS
|
|
23
|
+
variant = ToastVariantEnum.SUCCESS,
|
|
25
24
|
} = props;
|
|
26
25
|
|
|
27
26
|
const animatedValue = useRef(new Animated.Value(0)).current;
|
|
28
27
|
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
|
28
|
+
const isClosingRef = useRef(false);
|
|
29
29
|
|
|
30
30
|
useEffect(() => {
|
|
31
31
|
if (!isToastOpen) return;
|
|
32
32
|
|
|
33
|
+
isClosingRef.current = false;
|
|
34
|
+
|
|
33
35
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
34
36
|
|
|
35
37
|
Animated.timing(animatedValue, {
|
|
@@ -39,6 +41,9 @@ export function Toast(props: ToastProps) {
|
|
|
39
41
|
}).start();
|
|
40
42
|
|
|
41
43
|
timerRef.current = setTimeout(() => {
|
|
44
|
+
if (isClosingRef.current) return;
|
|
45
|
+
|
|
46
|
+
isClosingRef.current = true;
|
|
42
47
|
Animated.timing(animatedValue, {
|
|
43
48
|
toValue: 0,
|
|
44
49
|
duration: 200,
|
|
@@ -56,47 +61,71 @@ export function Toast(props: ToastProps) {
|
|
|
56
61
|
if (!isToastOpen) return null;
|
|
57
62
|
|
|
58
63
|
function handleClose() {
|
|
59
|
-
|
|
64
|
+
if (isClosingRef.current) return;
|
|
65
|
+
|
|
66
|
+
isClosingRef.current = true;
|
|
60
67
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
68
|
+
|
|
69
|
+
Animated.timing(animatedValue, {
|
|
70
|
+
toValue: 0,
|
|
71
|
+
duration: 200,
|
|
72
|
+
useNativeDriver: true,
|
|
73
|
+
}).start(() => {
|
|
74
|
+
onCloseToast(false);
|
|
75
|
+
});
|
|
61
76
|
}
|
|
62
77
|
|
|
63
78
|
const toastStyle = toastVariants({ variant });
|
|
64
79
|
const containerStyle = containerVariants({ position });
|
|
65
80
|
|
|
66
81
|
const iconMap = {
|
|
67
|
-
[ToastVariantEnum.SUCCESS]: () =>
|
|
68
|
-
|
|
69
|
-
|
|
82
|
+
[ToastVariantEnum.SUCCESS]: () => (
|
|
83
|
+
<Seal variant={SealVariantEnum.SUCCESS} inverted />
|
|
84
|
+
),
|
|
85
|
+
[ToastVariantEnum.ERROR]: () => (
|
|
86
|
+
<Seal variant={SealVariantEnum.ERROR} inverted />
|
|
87
|
+
),
|
|
88
|
+
[ToastVariantEnum.WARNING]: () => (
|
|
89
|
+
<Seal variant={SealVariantEnum.ALERT} inverted />
|
|
90
|
+
),
|
|
70
91
|
};
|
|
71
92
|
|
|
72
93
|
const Icon = iconMap[variant];
|
|
73
94
|
|
|
95
|
+
const animatedStyle = {
|
|
96
|
+
opacity: animatedValue,
|
|
97
|
+
transform: [
|
|
98
|
+
{
|
|
99
|
+
translateY: animatedValue.interpolate({
|
|
100
|
+
inputRange: [0, 1],
|
|
101
|
+
outputRange: [-20, 0],
|
|
102
|
+
}),
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
};
|
|
106
|
+
|
|
74
107
|
return (
|
|
75
|
-
<Animated.View
|
|
76
|
-
className={containerStyle}
|
|
77
|
-
>
|
|
108
|
+
<Animated.View className={containerStyle} style={animatedStyle}>
|
|
78
109
|
<View
|
|
79
110
|
className={merge(toastStyle, className)}
|
|
80
111
|
style={{
|
|
81
|
-
boxShadow: elevationDown100
|
|
112
|
+
boxShadow: elevationDown100,
|
|
82
113
|
}}
|
|
83
114
|
>
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</View>
|
|
94
|
-
</View>
|
|
115
|
+
<Icon />
|
|
116
|
+
<Typography
|
|
117
|
+
className={merge(
|
|
118
|
+
"title_small font-bold text-chia-100 truncate flex-1",
|
|
119
|
+
descriptionClassName
|
|
120
|
+
)}
|
|
121
|
+
>
|
|
122
|
+
{description}
|
|
123
|
+
</Typography>
|
|
95
124
|
|
|
96
125
|
<Pressable className="cursor-pointer" onPress={handleClose}>
|
|
97
|
-
<Close
|
|
126
|
+
<Close className="text-chia-100" size={30} />
|
|
98
127
|
</Pressable>
|
|
99
128
|
</View>
|
|
100
129
|
</Animated.View>
|
|
101
130
|
);
|
|
102
|
-
}
|
|
131
|
+
}
|