dhre-ui-kit 0.0.264 → 0.0.265
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/lib/index.js +89 -85
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +89 -85
- package/lib/index.mjs.map +1 -1
- package/package.json +1 -1
package/lib/index.mjs
CHANGED
|
@@ -2042,7 +2042,6 @@ const styles$l = StyleSheet.create({
|
|
|
2042
2042
|
container: {
|
|
2043
2043
|
position: "absolute",
|
|
2044
2044
|
alignSelf: "center",
|
|
2045
|
-
height: verticalScale(80),
|
|
2046
2045
|
width: width - horizontalScale(32),
|
|
2047
2046
|
top: 56,
|
|
2048
2047
|
borderRadius: moderateScale(8),
|
|
@@ -2072,97 +2071,102 @@ const styles$l = StyleSheet.create({
|
|
|
2072
2071
|
}
|
|
2073
2072
|
});
|
|
2074
2073
|
|
|
2075
|
-
const Toast = React.forwardRef(
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
showToast
|
|
2120
|
-
}));
|
|
2121
|
-
return visible ? /* @__PURE__ */ React.createElement(
|
|
2122
|
-
Animated.View,
|
|
2123
|
-
{
|
|
2124
|
-
style: [
|
|
2125
|
-
styles$l.container,
|
|
2126
|
-
{ bottom },
|
|
2127
|
-
{ backgroundColor: isSuccess ? "#00B578" : "#EB0542" }
|
|
2128
|
-
],
|
|
2129
|
-
testID: "TOAST"
|
|
2130
|
-
},
|
|
2131
|
-
/* @__PURE__ */ React.createElement(View, { style: styles$l.toastContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$l.innerContainer }, /* @__PURE__ */ React.createElement(Pressable, { onPress: hideToast }, isSuccess ? sucessIcon : errorIcon), /* @__PURE__ */ React.createElement(
|
|
2132
|
-
CustomTypography,
|
|
2133
|
-
{
|
|
2134
|
-
variant: "L2_REGULAR",
|
|
2135
|
-
text: message,
|
|
2136
|
-
style: styles$l.messageText
|
|
2074
|
+
const Toast = React.forwardRef(
|
|
2075
|
+
({ sucessIcon, errorIcon }, ref) => {
|
|
2076
|
+
const [visible, setVisible] = useState(false);
|
|
2077
|
+
const [message, setMessage] = useState("");
|
|
2078
|
+
const [isSuccess, setIsSuccess] = useState(true);
|
|
2079
|
+
const [btnText, setBtnText] = useState(null);
|
|
2080
|
+
const [onBtnPress, setOnBtnPress] = useState(null);
|
|
2081
|
+
const [progress, setProgress] = useState(0);
|
|
2082
|
+
const [height, setHeight] = useState(72);
|
|
2083
|
+
const bottom = useRef(new Animated.Value(-80)).current;
|
|
2084
|
+
const showToast = (toastMessage, duration = 3e3, success = true, buttonText = null, buttonAction = null, height2 = 72) => {
|
|
2085
|
+
setMessage(toastMessage);
|
|
2086
|
+
setIsSuccess(success);
|
|
2087
|
+
setBtnText(buttonText);
|
|
2088
|
+
setOnBtnPress(() => buttonAction);
|
|
2089
|
+
setVisible(true);
|
|
2090
|
+
setHeight(height2);
|
|
2091
|
+
Animated.timing(bottom, {
|
|
2092
|
+
toValue: 20,
|
|
2093
|
+
duration: 500,
|
|
2094
|
+
useNativeDriver: false
|
|
2095
|
+
}).start();
|
|
2096
|
+
setTimeout(() => {
|
|
2097
|
+
hideToast();
|
|
2098
|
+
}, duration);
|
|
2099
|
+
};
|
|
2100
|
+
const hideToast = () => {
|
|
2101
|
+
Animated.timing(bottom, {
|
|
2102
|
+
toValue: -80,
|
|
2103
|
+
duration: 500,
|
|
2104
|
+
useNativeDriver: false
|
|
2105
|
+
}).start(() => {
|
|
2106
|
+
setVisible(false);
|
|
2107
|
+
setMessage("");
|
|
2108
|
+
});
|
|
2109
|
+
};
|
|
2110
|
+
const simulateProgress = () => {
|
|
2111
|
+
setProgress((prev) => prev + 0.1 > 1 ? 1 : prev + 0.1);
|
|
2112
|
+
};
|
|
2113
|
+
useEffect(() => {
|
|
2114
|
+
if (visible) {
|
|
2115
|
+
setProgress(0);
|
|
2116
|
+
const interval = setInterval(simulateProgress, 180);
|
|
2117
|
+
return () => clearInterval(interval);
|
|
2137
2118
|
}
|
|
2138
|
-
|
|
2139
|
-
|
|
2119
|
+
}, [visible]);
|
|
2120
|
+
React.useImperativeHandle(ref, () => ({
|
|
2121
|
+
showToast
|
|
2122
|
+
}));
|
|
2123
|
+
return visible ? /* @__PURE__ */ React.createElement(
|
|
2124
|
+
Animated.View,
|
|
2140
2125
|
{
|
|
2141
|
-
style:
|
|
2142
|
-
|
|
2143
|
-
|
|
2126
|
+
style: [
|
|
2127
|
+
styles$l.container,
|
|
2128
|
+
{ bottom },
|
|
2129
|
+
{ backgroundColor: isSuccess ? "#00B578" : "#EB0542" },
|
|
2130
|
+
{ height: verticalScale(height) }
|
|
2131
|
+
],
|
|
2132
|
+
testID: "TOAST"
|
|
2144
2133
|
},
|
|
2145
|
-
/* @__PURE__ */ React.createElement(
|
|
2134
|
+
/* @__PURE__ */ React.createElement(View, { style: styles$l.toastContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$l.innerContainer }, /* @__PURE__ */ React.createElement(Pressable, { onPress: hideToast }, isSuccess ? sucessIcon : errorIcon), /* @__PURE__ */ React.createElement(
|
|
2146
2135
|
CustomTypography,
|
|
2147
2136
|
{
|
|
2148
|
-
variant: "
|
|
2149
|
-
text:
|
|
2150
|
-
style: styles$l.
|
|
2137
|
+
variant: "L2_REGULAR",
|
|
2138
|
+
text: message,
|
|
2139
|
+
style: styles$l.messageText
|
|
2140
|
+
}
|
|
2141
|
+
), btnText && /* @__PURE__ */ React.createElement(
|
|
2142
|
+
Pressable,
|
|
2143
|
+
{
|
|
2144
|
+
style: styles$l.button,
|
|
2145
|
+
onPress: onBtnPress || void 0,
|
|
2146
|
+
testID: "TOAST-BTN"
|
|
2147
|
+
},
|
|
2148
|
+
/* @__PURE__ */ React.createElement(
|
|
2149
|
+
CustomTypography,
|
|
2150
|
+
{
|
|
2151
|
+
variant: "L2_BOLD",
|
|
2152
|
+
text: btnText,
|
|
2153
|
+
style: styles$l.buttonText
|
|
2154
|
+
}
|
|
2155
|
+
)
|
|
2156
|
+
))),
|
|
2157
|
+
/* @__PURE__ */ React.createElement(
|
|
2158
|
+
Progress.Bar,
|
|
2159
|
+
{
|
|
2160
|
+
progress,
|
|
2161
|
+
width: width - horizontalScale(48),
|
|
2162
|
+
height: 3,
|
|
2163
|
+
color: isSuccess ? "#024324" : "#851D41",
|
|
2164
|
+
borderColor: "transparent"
|
|
2151
2165
|
}
|
|
2152
2166
|
)
|
|
2153
|
-
)
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
{
|
|
2157
|
-
progress,
|
|
2158
|
-
width: width - horizontalScale(48),
|
|
2159
|
-
height: 3,
|
|
2160
|
-
color: isSuccess ? "#024324" : "#851D41",
|
|
2161
|
-
borderColor: "transparent"
|
|
2162
|
-
}
|
|
2163
|
-
)
|
|
2164
|
-
) : null;
|
|
2165
|
-
});
|
|
2167
|
+
) : null;
|
|
2168
|
+
}
|
|
2169
|
+
);
|
|
2166
2170
|
Toast.displayName = "Toast";
|
|
2167
2171
|
|
|
2168
2172
|
const styles$k = StyleSheet.create({
|