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