dhre-ui-kit 0.0.263 → 0.0.264
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 +0 -1
- package/lib/index.js +85 -88
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +85 -88
- package/lib/index.mjs.map +1 -1
- package/package.json +1 -1
package/lib/index.d.ts
CHANGED
|
@@ -371,7 +371,6 @@ declare const _default$g: (props: AccordionProps) => React$1.JSX.Element;
|
|
|
371
371
|
interface ToastProps {
|
|
372
372
|
sucessIcon: React$1.ReactElement;
|
|
373
373
|
errorIcon: React$1.ReactElement;
|
|
374
|
-
containerStyle?: ViewStyle;
|
|
375
374
|
}
|
|
376
375
|
interface ToastRef {
|
|
377
376
|
showToast: (message: string, duration?: number, isSuccess?: boolean, buttonText?: string | null, buttonAction?: (() => void) | null) => void;
|
package/lib/index.js
CHANGED
|
@@ -2078,7 +2078,7 @@ const styles$l = reactNative.StyleSheet.create({
|
|
|
2078
2078
|
container: {
|
|
2079
2079
|
position: "absolute",
|
|
2080
2080
|
alignSelf: "center",
|
|
2081
|
-
height: verticalScale(
|
|
2081
|
+
height: verticalScale(80),
|
|
2082
2082
|
width: width - horizontalScale(32),
|
|
2083
2083
|
top: 56,
|
|
2084
2084
|
borderRadius: moderateScale(8),
|
|
@@ -2108,100 +2108,97 @@ const styles$l = reactNative.StyleSheet.create({
|
|
|
2108
2108
|
}
|
|
2109
2109
|
});
|
|
2110
2110
|
|
|
2111
|
-
const Toast = React__default["default"].forwardRef(
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2111
|
+
const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, ref) => {
|
|
2112
|
+
const [visible, setVisible] = React.useState(false);
|
|
2113
|
+
const [message, setMessage] = React.useState("");
|
|
2114
|
+
const [isSuccess, setIsSuccess] = React.useState(true);
|
|
2115
|
+
const [btnText, setBtnText] = React.useState(null);
|
|
2116
|
+
const [onBtnPress, setOnBtnPress] = React.useState(null);
|
|
2117
|
+
const [progress, setProgress] = React.useState(0);
|
|
2118
|
+
const bottom = React.useRef(new reactNative.Animated.Value(-80)).current;
|
|
2119
|
+
const showToast = (toastMessage, duration = 3e3, success = true, buttonText = null, buttonAction = null) => {
|
|
2120
|
+
setMessage(toastMessage);
|
|
2121
|
+
setIsSuccess(success);
|
|
2122
|
+
setBtnText(buttonText);
|
|
2123
|
+
setOnBtnPress(() => buttonAction);
|
|
2124
|
+
setVisible(true);
|
|
2125
|
+
reactNative.Animated.timing(bottom, {
|
|
2126
|
+
toValue: 20,
|
|
2127
|
+
duration: 500,
|
|
2128
|
+
useNativeDriver: false
|
|
2129
|
+
}).start();
|
|
2130
|
+
setTimeout(() => {
|
|
2131
|
+
hideToast();
|
|
2132
|
+
}, duration);
|
|
2133
|
+
};
|
|
2134
|
+
const hideToast = () => {
|
|
2135
|
+
reactNative.Animated.timing(bottom, {
|
|
2136
|
+
toValue: -80,
|
|
2137
|
+
duration: 500,
|
|
2138
|
+
useNativeDriver: false
|
|
2139
|
+
}).start(() => {
|
|
2140
|
+
setVisible(false);
|
|
2141
|
+
setMessage("");
|
|
2142
|
+
});
|
|
2143
|
+
};
|
|
2144
|
+
const simulateProgress = () => {
|
|
2145
|
+
setProgress((prev) => prev + 0.1 > 1 ? 1 : prev + 0.1);
|
|
2146
|
+
};
|
|
2147
|
+
React.useEffect(() => {
|
|
2148
|
+
if (visible) {
|
|
2149
|
+
setProgress(0);
|
|
2150
|
+
const interval = setInterval(simulateProgress, 180);
|
|
2151
|
+
return () => clearInterval(interval);
|
|
2152
|
+
}
|
|
2153
|
+
}, [visible]);
|
|
2154
|
+
React__default["default"].useImperativeHandle(ref, () => ({
|
|
2155
|
+
showToast
|
|
2156
|
+
}));
|
|
2157
|
+
return visible ? /* @__PURE__ */ React__default["default"].createElement(
|
|
2158
|
+
reactNative.Animated.View,
|
|
2159
|
+
{
|
|
2160
|
+
style: [
|
|
2161
|
+
styles$l.container,
|
|
2162
|
+
{ bottom },
|
|
2163
|
+
{ backgroundColor: isSuccess ? "#00B578" : "#EB0542" }
|
|
2164
|
+
],
|
|
2165
|
+
testID: "TOAST"
|
|
2166
|
+
},
|
|
2167
|
+
/* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.innerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: hideToast }, isSuccess ? sucessIcon : errorIcon), /* @__PURE__ */ React__default["default"].createElement(
|
|
2168
|
+
CustomTypography,
|
|
2169
|
+
{
|
|
2170
|
+
variant: "L2_REGULAR",
|
|
2171
|
+
text: message,
|
|
2172
|
+
style: styles$l.messageText
|
|
2153
2173
|
}
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
showToast
|
|
2157
|
-
}));
|
|
2158
|
-
return visible ? /* @__PURE__ */ React__default["default"].createElement(
|
|
2159
|
-
reactNative.Animated.View,
|
|
2174
|
+
), btnText && /* @__PURE__ */ React__default["default"].createElement(
|
|
2175
|
+
reactNative.Pressable,
|
|
2160
2176
|
{
|
|
2161
|
-
style:
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
{ backgroundColor: isSuccess ? "#00B578" : "#EB0542" },
|
|
2165
|
-
containerStyle
|
|
2166
|
-
],
|
|
2167
|
-
testID: "TOAST"
|
|
2177
|
+
style: styles$l.button,
|
|
2178
|
+
onPress: onBtnPress || void 0,
|
|
2179
|
+
testID: "TOAST-BTN"
|
|
2168
2180
|
},
|
|
2169
|
-
/* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.innerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: hideToast }, isSuccess ? sucessIcon : errorIcon), /* @__PURE__ */ React__default["default"].createElement(
|
|
2170
|
-
CustomTypography,
|
|
2171
|
-
{
|
|
2172
|
-
variant: "L2_REGULAR",
|
|
2173
|
-
text: message,
|
|
2174
|
-
style: styles$l.messageText
|
|
2175
|
-
}
|
|
2176
|
-
), btnText && /* @__PURE__ */ React__default["default"].createElement(
|
|
2177
|
-
reactNative.Pressable,
|
|
2178
|
-
{
|
|
2179
|
-
style: styles$l.button,
|
|
2180
|
-
onPress: onBtnPress || void 0,
|
|
2181
|
-
testID: "TOAST-BTN"
|
|
2182
|
-
},
|
|
2183
|
-
/* @__PURE__ */ React__default["default"].createElement(
|
|
2184
|
-
CustomTypography,
|
|
2185
|
-
{
|
|
2186
|
-
variant: "L2_BOLD",
|
|
2187
|
-
text: btnText,
|
|
2188
|
-
style: styles$l.buttonText
|
|
2189
|
-
}
|
|
2190
|
-
)
|
|
2191
|
-
))),
|
|
2192
2181
|
/* @__PURE__ */ React__default["default"].createElement(
|
|
2193
|
-
|
|
2182
|
+
CustomTypography,
|
|
2194
2183
|
{
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
color: isSuccess ? "#024324" : "#851D41",
|
|
2199
|
-
borderColor: "transparent"
|
|
2184
|
+
variant: "L2_BOLD",
|
|
2185
|
+
text: btnText,
|
|
2186
|
+
style: styles$l.buttonText
|
|
2200
2187
|
}
|
|
2201
2188
|
)
|
|
2202
|
-
)
|
|
2203
|
-
|
|
2204
|
-
|
|
2189
|
+
))),
|
|
2190
|
+
/* @__PURE__ */ React__default["default"].createElement(
|
|
2191
|
+
Progress__namespace.Bar,
|
|
2192
|
+
{
|
|
2193
|
+
progress,
|
|
2194
|
+
width: width - horizontalScale(48),
|
|
2195
|
+
height: 3,
|
|
2196
|
+
color: isSuccess ? "#024324" : "#851D41",
|
|
2197
|
+
borderColor: "transparent"
|
|
2198
|
+
}
|
|
2199
|
+
)
|
|
2200
|
+
) : null;
|
|
2201
|
+
});
|
|
2205
2202
|
Toast.displayName = "Toast";
|
|
2206
2203
|
|
|
2207
2204
|
const styles$k = reactNative.StyleSheet.create({
|