@tamagui/toast 1.61.2 → 1.62.0
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/dist/cjs/Toast.js +26 -61
- package/dist/cjs/Toast.js.map +1 -1
- package/dist/cjs/Toast.native.js +141 -0
- package/dist/cjs/Toast.native.js.map +6 -0
- package/dist/cjs/ToastAnnounce.js +18 -40
- package/dist/cjs/ToastAnnounce.js.map +1 -1
- package/dist/cjs/ToastAnnounce.native.js +74 -0
- package/dist/cjs/ToastAnnounce.native.js.map +6 -0
- package/dist/cjs/ToastImperative.js +27 -65
- package/dist/cjs/ToastImperative.js.map +1 -1
- package/dist/cjs/ToastImperative.native.js +74 -0
- package/dist/cjs/ToastImperative.native.js.map +6 -0
- package/dist/cjs/ToastImpl.js +65 -213
- package/dist/cjs/ToastImpl.js.map +1 -1
- package/dist/cjs/ToastImpl.native.js +232 -0
- package/dist/cjs/ToastImpl.native.js.map +6 -0
- package/dist/cjs/ToastProvider.js +18 -41
- package/dist/cjs/ToastProvider.js.map +1 -1
- package/dist/cjs/ToastProvider.native.js +103 -0
- package/dist/cjs/ToastProvider.native.js.map +6 -0
- package/dist/cjs/ToastViewport.js +59 -150
- package/dist/cjs/ToastViewport.js.map +1 -1
- package/dist/cjs/ToastViewport.native.js +260 -0
- package/dist/cjs/ToastViewport.native.js.map +6 -0
- package/dist/cjs/constants.js +5 -9
- package/dist/cjs/constants.js.map +1 -1
- package/dist/cjs/constants.native.js +26 -0
- package/dist/cjs/constants.native.js.map +6 -0
- package/dist/cjs/createNativeToast.js +22 -43
- package/dist/cjs/createNativeToast.js.map +1 -1
- package/dist/cjs/createNativeToast.native.js +12 -21
- package/dist/cjs/createNativeToast.native.js.map +1 -1
- package/dist/cjs/index.js +4 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index.native.js +20 -0
- package/dist/cjs/index.native.js.map +6 -0
- package/dist/cjs/types.js +3 -6
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/types.native.js +15 -0
- package/dist/cjs/types.native.js.map +6 -0
- package/dist/esm/Toast.js +19 -37
- package/dist/esm/Toast.js.map +1 -1
- package/dist/esm/ToastAnnounce.js +11 -21
- package/dist/esm/ToastAnnounce.js.map +1 -1
- package/dist/esm/ToastImperative.js +20 -48
- package/dist/esm/ToastImperative.js.map +1 -1
- package/dist/esm/ToastImpl.js +58 -188
- package/dist/esm/ToastImpl.js.map +1 -1
- package/dist/esm/ToastProvider.js +11 -24
- package/dist/esm/ToastProvider.js.map +1 -1
- package/dist/esm/ToastViewport.js +52 -129
- package/dist/esm/ToastViewport.js.map +1 -1
- package/dist/esm/createNativeToast.js +17 -34
- package/dist/esm/createNativeToast.js.map +1 -1
- package/dist/jsx/Toast.js +17 -35
- package/dist/jsx/Toast.js.map +1 -1
- package/dist/jsx/Toast.native.js +127 -0
- package/dist/jsx/Toast.native.js.map +6 -0
- package/dist/jsx/ToastAnnounce.js +10 -20
- package/dist/jsx/ToastAnnounce.js.map +1 -1
- package/dist/jsx/ToastAnnounce.native.js +52 -0
- package/dist/jsx/ToastAnnounce.native.js.map +6 -0
- package/dist/jsx/ToastImperative.js +17 -45
- package/dist/jsx/ToastImperative.js.map +1 -1
- package/dist/jsx/ToastImperative.native.js +45 -0
- package/dist/jsx/ToastImperative.native.js.map +6 -0
- package/dist/jsx/ToastImpl.js +53 -183
- package/dist/jsx/ToastImpl.js.map +1 -1
- package/dist/jsx/ToastImpl.native.js +207 -0
- package/dist/jsx/ToastImpl.native.js.map +6 -0
- package/dist/jsx/ToastProvider.js +10 -23
- package/dist/jsx/ToastProvider.js.map +1 -1
- package/dist/jsx/ToastProvider.native.js +68 -0
- package/dist/jsx/ToastProvider.native.js.map +6 -0
- package/dist/jsx/ToastViewport.js +49 -124
- package/dist/jsx/ToastViewport.js.map +1 -1
- package/dist/jsx/ToastViewport.native.js +225 -0
- package/dist/jsx/ToastViewport.native.js.map +6 -0
- package/dist/jsx/constants.native.js +5 -0
- package/dist/jsx/constants.native.js.map +6 -0
- package/dist/jsx/createNativeToast.js +17 -34
- package/dist/jsx/createNativeToast.js.map +1 -1
- package/dist/jsx/createNativeToast.native.js +7 -13
- package/dist/jsx/createNativeToast.native.js.map +1 -1
- package/dist/jsx/index.native.js +2 -0
- package/dist/jsx/index.native.js.map +6 -0
- package/dist/jsx/types.native.js +1 -0
- package/dist/jsx/types.native.js.map +6 -0
- package/package.json +13 -13
- package/dist/esm/createNativeToast.native.js +0 -19
- package/dist/esm/createNativeToast.native.js.map +0 -6
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Toast.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -12,8 +12,7 @@ import { TOAST_NAME } from "./constants";
|
|
|
12
12
|
import { useToastProviderContext } from "./ToastProvider";
|
|
13
13
|
const ToastAnnounceExcludeFrame = styled(Stack, {
|
|
14
14
|
name: "ToastAnnounceExclude"
|
|
15
|
-
})
|
|
16
|
-
const ToastAnnounceExclude = React.forwardRef(
|
|
15
|
+
}), ToastAnnounceExclude = React.forwardRef(
|
|
17
16
|
(props, forwardedRef) => {
|
|
18
17
|
const { __scopeToast, altText, ...announceExcludeProps } = props;
|
|
19
18
|
return <ToastAnnounceExcludeFrame
|
|
@@ -23,18 +22,12 @@ const ToastAnnounceExclude = React.forwardRef(
|
|
|
23
22
|
ref={forwardedRef}
|
|
24
23
|
/>;
|
|
25
24
|
}
|
|
26
|
-
)
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
|
|
31
|
-
const [isAnnounced, setIsAnnounced] = React.useState(false);
|
|
32
|
-
useNextFrame(() => setRenderAnnounceText(true));
|
|
33
|
-
React.useEffect(() => {
|
|
34
|
-
const timer = setTimeout(() => setIsAnnounced(true), 1e3);
|
|
25
|
+
), ToastAnnounce = (props) => {
|
|
26
|
+
const { __scopeToast, children, ...announceProps } = props, context = useToastProviderContext(TOAST_NAME, __scopeToast), [renderAnnounceText, setRenderAnnounceText] = React.useState(!1), [isAnnounced, setIsAnnounced] = React.useState(!1);
|
|
27
|
+
return useNextFrame(() => setRenderAnnounceText(!0)), React.useEffect(() => {
|
|
28
|
+
const timer = setTimeout(() => setIsAnnounced(!0), 1e3);
|
|
35
29
|
return () => clearTimeout(timer);
|
|
36
|
-
}, [])
|
|
37
|
-
return isAnnounced ? null : <Portal asChild><VisuallyHidden {...announceProps}>{renderAnnounceText && <Text>
|
|
30
|
+
}, []), isAnnounced ? null : <Portal asChild><VisuallyHidden {...announceProps}>{renderAnnounceText && <Text>
|
|
38
31
|
{context.label}
|
|
39
32
|
{" "}
|
|
40
33
|
{children}
|
|
@@ -44,14 +37,11 @@ function useNextFrame(callback = () => {
|
|
|
44
37
|
}) {
|
|
45
38
|
const fn = useEvent(callback);
|
|
46
39
|
useIsomorphicLayoutEffect(() => {
|
|
47
|
-
let raf1 = 0;
|
|
48
|
-
|
|
49
|
-
raf1 = requestAnimationFrame(() => {
|
|
40
|
+
let raf1 = 0, raf2 = 0;
|
|
41
|
+
return raf1 = requestAnimationFrame(() => {
|
|
50
42
|
raf2 = requestAnimationFrame(fn);
|
|
51
|
-
})
|
|
52
|
-
|
|
53
|
-
cancelAnimationFrame(raf1);
|
|
54
|
-
cancelAnimationFrame(raf2);
|
|
43
|
+
}), () => {
|
|
44
|
+
cancelAnimationFrame(raf1), cancelAnimationFrame(raf2);
|
|
55
45
|
};
|
|
56
46
|
}, [fn]);
|
|
57
47
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastAnnounce.tsx"],
|
|
4
|
-
"mappings": "AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAEvB,SAAS,kBAAkB;AAC3B,SAAsB,+BAA+B;AAErD,MAAM,4BAA4B,OAAO,OAAO;AAAA,EAC9C,MAAM;AACR,CAAC
|
|
4
|
+
"mappings": "AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAEvB,SAAS,kBAAkB;AAC3B,SAAsB,+BAA+B;AAErD,MAAM,4BAA4B,OAAO,OAAO;AAAA,EAC9C,MAAM;AACR,CAAC,GAMK,uBAAuB,MAAM;AAAA,EACjC,CAAC,OAA+C,iBAAiB;AAC/D,UAAM,EAAE,cAAc,SAAS,GAAG,qBAAqB,IAAI;AAE3D,WACE,CAAC;AAAA,MACC,4BAA4B;AAAA,MAC5B,yBAAyB,WAAW;AAAA,UAChC;AAAA,MACJ,KAAK;AAAA,IACP;AAAA,EAEJ;AACF,GAQM,gBAA8C,CAClD,UACG;AACH,QAAM,EAAE,cAAc,UAAU,GAAG,cAAc,IAAI,OAC/C,UAAU,wBAAwB,YAAY,YAAY,GAC1D,CAAC,oBAAoB,qBAAqB,IAAI,MAAM,SAAS,EAAK,GAClE,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,EAAK;AAG1D,sBAAa,MAAM,sBAAsB,EAAI,CAAC,GAG9C,MAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,WAAW,MAAM,eAAe,EAAI,GAAG,GAAI;AACzD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC,GAEE,cAAc,OACnB,CAAC,OAAO,QACN,CAAC,mBAAmB,gBACjB,sBACC,CAAC;AAAA,KACE,QAAQ;AAAA,KAAM;AAAA,KAAE;AAAA,EACnB,EAFC,MAIL,EANC,eAOH,EARC;AAUL;AAIA,SAAS,aAAa,WAAW,MAAM;AAAC,GAAG;AACzC,QAAM,KAAK,SAAS,QAAQ;AAC5B,4BAA0B,MAAM;AAC9B,QAAI,OAAO,GACP,OAAO;AACX,kBAAO,sBAAsB,MAAM;AACjC,aAAO,sBAAsB,EAAE;AAAA,IACjC,CAAC,GACM,MAAM;AACX,2BAAqB,IAAI,GACzB,qBAAqB,IAAI;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AACT;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Stack,
|
|
3
|
+
Text,
|
|
4
|
+
styled,
|
|
5
|
+
useEvent,
|
|
6
|
+
useIsomorphicLayoutEffect
|
|
7
|
+
} from "@tamagui/core";
|
|
8
|
+
import { Portal } from "@tamagui/portal";
|
|
9
|
+
import { VisuallyHidden } from "@tamagui/visually-hidden";
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
import { TOAST_NAME } from "./constants";
|
|
12
|
+
import { useToastProviderContext } from "./ToastProvider";
|
|
13
|
+
const ToastAnnounceExcludeFrame = styled(Stack, {
|
|
14
|
+
name: "ToastAnnounceExclude"
|
|
15
|
+
}), ToastAnnounceExclude = React.forwardRef(
|
|
16
|
+
(props, forwardedRef) => {
|
|
17
|
+
const { __scopeToast, altText, ...announceExcludeProps } = props;
|
|
18
|
+
return <ToastAnnounceExcludeFrame
|
|
19
|
+
data-toast-announce-exclude=""
|
|
20
|
+
data-toast-announce-alt={altText || void 0}
|
|
21
|
+
{...announceExcludeProps}
|
|
22
|
+
ref={forwardedRef}
|
|
23
|
+
/>;
|
|
24
|
+
}
|
|
25
|
+
), ToastAnnounce = (props) => {
|
|
26
|
+
const { __scopeToast, children, ...announceProps } = props, context = useToastProviderContext(TOAST_NAME, __scopeToast), [renderAnnounceText, setRenderAnnounceText] = React.useState(!1), [isAnnounced, setIsAnnounced] = React.useState(!1);
|
|
27
|
+
return useNextFrame(() => setRenderAnnounceText(!0)), React.useEffect(() => {
|
|
28
|
+
const timer = setTimeout(() => setIsAnnounced(!0), 1e3);
|
|
29
|
+
return () => clearTimeout(timer);
|
|
30
|
+
}, []), isAnnounced ? null : <Portal asChild><VisuallyHidden {...announceProps}>{renderAnnounceText && <Text>
|
|
31
|
+
{context.label}
|
|
32
|
+
{" "}
|
|
33
|
+
{children}
|
|
34
|
+
</Text>}</VisuallyHidden></Portal>;
|
|
35
|
+
};
|
|
36
|
+
function useNextFrame(callback = () => {
|
|
37
|
+
}) {
|
|
38
|
+
const fn = useEvent(callback);
|
|
39
|
+
useIsomorphicLayoutEffect(() => {
|
|
40
|
+
let raf1 = 0, raf2 = 0;
|
|
41
|
+
return raf1 = requestAnimationFrame(() => {
|
|
42
|
+
raf2 = requestAnimationFrame(fn);
|
|
43
|
+
}), () => {
|
|
44
|
+
cancelAnimationFrame(raf1), cancelAnimationFrame(raf2);
|
|
45
|
+
};
|
|
46
|
+
}, [fn]);
|
|
47
|
+
}
|
|
48
|
+
export {
|
|
49
|
+
ToastAnnounce,
|
|
50
|
+
ToastAnnounceExclude
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=ToastAnnounce.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ToastAnnounce.tsx"],
|
|
4
|
+
"mappings": "AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAEvB,SAAS,kBAAkB;AAC3B,SAAsB,+BAA+B;AAErD,MAAM,4BAA4B,OAAO,OAAO;AAAA,EAC9C,MAAM;AACR,CAAC,GAMK,uBAAuB,MAAM;AAAA,EACjC,CAAC,OAA+C,iBAAiB;AAC/D,UAAM,EAAE,cAAc,SAAS,GAAG,qBAAqB,IAAI;AAE3D,WACE,CAAC;AAAA,MACC,4BAA4B;AAAA,MAC5B,yBAAyB,WAAW;AAAA,UAChC;AAAA,MACJ,KAAK;AAAA,IACP;AAAA,EAEJ;AACF,GAQM,gBAA8C,CAClD,UACG;AACH,QAAM,EAAE,cAAc,UAAU,GAAG,cAAc,IAAI,OAC/C,UAAU,wBAAwB,YAAY,YAAY,GAC1D,CAAC,oBAAoB,qBAAqB,IAAI,MAAM,SAAS,EAAK,GAClE,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,EAAK;AAG1D,sBAAa,MAAM,sBAAsB,EAAI,CAAC,GAG9C,MAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,WAAW,MAAM,eAAe,EAAI,GAAG,GAAI;AACzD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC,GAEE,cAAc,OACnB,CAAC,OAAO,QACN,CAAC,mBAAmB,gBACjB,sBACC,CAAC;AAAA,KACE,QAAQ;AAAA,KAAM;AAAA,KAAE;AAAA,EACnB,EAFC,MAIL,EANC,eAOH,EARC;AAUL;AAIA,SAAS,aAAa,WAAW,MAAM;AAAC,GAAG;AACzC,QAAM,KAAK,SAAS,QAAQ;AAC5B,4BAA0B,MAAM;AAC9B,QAAI,OAAO,GACP,OAAO;AACX,kBAAO,sBAAsB,MAAM;AACjC,aAAO,sBAAsB,EAAE;AAAA,IACjC,CAAC,GACM,MAAM;AACX,2BAAqB,IAAI,GACzB,qBAAqB,IAAI;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AACT;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -2,66 +2,38 @@ import { isWeb } from "@tamagui/core";
|
|
|
2
2
|
import React, { createContext, useContext, useMemo, useRef } from "react";
|
|
3
3
|
import { Platform } from "react-native";
|
|
4
4
|
import { createNativeToast } from "./createNativeToast";
|
|
5
|
-
const ToastContext = createContext({})
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
const useToastState = () => {
|
|
11
|
-
return useContext(ToastCurrentContext);
|
|
12
|
-
};
|
|
13
|
-
const useToast = () => {
|
|
14
|
-
return {
|
|
15
|
-
...useToastController(),
|
|
16
|
-
currentToast: useToastState()
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
const ToastImperativeProvider = ({
|
|
5
|
+
const ToastContext = createContext({}), ToastCurrentContext = createContext(null), useToastController = () => useContext(ToastContext), useToastState = () => useContext(ToastCurrentContext), useToast = () => ({
|
|
6
|
+
...useToastController(),
|
|
7
|
+
currentToast: useToastState()
|
|
8
|
+
}), ToastImperativeProvider = ({
|
|
20
9
|
children,
|
|
21
10
|
options
|
|
22
11
|
}) => {
|
|
23
|
-
const counterRef = useRef(0)
|
|
24
|
-
const [toast, setToast] = React.useState(null);
|
|
25
|
-
const [lastNativeToastRef, setLastNativeToastRef] = React.useState(null);
|
|
26
|
-
const show = React.useCallback(
|
|
12
|
+
const counterRef = useRef(0), [toast, setToast] = React.useState(null), [lastNativeToastRef, setLastNativeToastRef] = React.useState(null), show = React.useCallback(
|
|
27
13
|
(title, showOptions) => {
|
|
28
|
-
const native = showOptions?.native ?? options.native;
|
|
29
|
-
const isWebNative = Array.isArray(native) ? native.includes("web") : native === "web";
|
|
30
|
-
const isMobileNative = Array.isArray(native) ? native.includes("mobile") : native === "mobile";
|
|
31
|
-
const isAndroidNative = isMobileNative || (Array.isArray(native) ? native.includes("android") : native === "android");
|
|
32
|
-
const isIosNative = isMobileNative || (Array.isArray(native) ? native.includes("ios") : native === "ios");
|
|
33
|
-
const isHandledNatively = native === true || isWeb && isWebNative || !isWeb && isMobileNative || Platform.OS === "android" && isAndroidNative || Platform.OS === "ios" && isIosNative;
|
|
14
|
+
const native = showOptions?.native ?? options.native, isWebNative = Array.isArray(native) ? native.includes("web") : native === "web", isMobileNative = Array.isArray(native) ? native.includes("mobile") : native === "mobile", isAndroidNative = isMobileNative || (Array.isArray(native) ? native.includes("android") : native === "android"), isIosNative = isMobileNative || (Array.isArray(native) ? native.includes("ios") : native === "ios"), isHandledNatively = native === !0 || isWeb && isWebNative || !isWeb && isMobileNative || Platform.OS === "android" && isAndroidNative || Platform.OS === "ios" && isIosNative;
|
|
34
15
|
if (isHandledNatively) {
|
|
35
16
|
const nativeToastResult = createNativeToast(title, showOptions ?? {});
|
|
36
|
-
|
|
37
|
-
setLastNativeToastRef(nativeToastResult.nativeToastRef);
|
|
38
|
-
}
|
|
17
|
+
typeof nativeToastResult == "object" && nativeToastResult.nativeToastRef && setLastNativeToastRef(nativeToastResult.nativeToastRef);
|
|
39
18
|
}
|
|
40
|
-
counterRef.current
|
|
41
|
-
setToast({
|
|
19
|
+
return counterRef.current++, setToast({
|
|
42
20
|
...showOptions?.customData,
|
|
43
21
|
...showOptions,
|
|
44
22
|
viewportName: showOptions?.viewportName ?? "default",
|
|
45
23
|
title,
|
|
46
24
|
id: counterRef.current.toString(),
|
|
47
25
|
isHandledNatively
|
|
48
|
-
});
|
|
49
|
-
return true;
|
|
26
|
+
}), !0;
|
|
50
27
|
},
|
|
51
28
|
[setToast, options.native]
|
|
52
|
-
)
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
hide,
|
|
61
|
-
nativeToast: lastNativeToastRef,
|
|
62
|
-
options
|
|
63
|
-
};
|
|
64
|
-
}, [show, hide, lastNativeToastRef, JSON.stringify(options || null)]);
|
|
29
|
+
), hide = React.useCallback(() => {
|
|
30
|
+
lastNativeToastRef?.close(), setToast(null);
|
|
31
|
+
}, [setToast, lastNativeToastRef]), contextValue = useMemo(() => ({
|
|
32
|
+
show,
|
|
33
|
+
hide,
|
|
34
|
+
nativeToast: lastNativeToastRef,
|
|
35
|
+
options
|
|
36
|
+
}), [show, hide, lastNativeToastRef, JSON.stringify(options || null)]);
|
|
65
37
|
return <ToastContext.Provider value={contextValue}><ToastCurrentContext.Provider value={toast}>{children}</ToastCurrentContext.Provider></ToastContext.Provider>;
|
|
66
38
|
};
|
|
67
39
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastImperative.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAsC,aAAa;AACnD,OAAO,SAAS,eAAe,YAAY,SAAS,cAAc;AAClE,SAAS,gBAAgB;AAEzB,SAAS,yBAAyB;AA4ElC,MAAM,eAAe,cAA6B,CAAC,CAAQ
|
|
4
|
+
"mappings": "AAAA,SAAsC,aAAa;AACnD,OAAO,SAAS,eAAe,YAAY,SAAS,cAAc;AAClE,SAAS,gBAAgB;AAEzB,SAAS,yBAAyB;AA4ElC,MAAM,eAAe,cAA6B,CAAC,CAAQ,GACrD,sBAAsB,cAAgC,IAAI,GAEnD,qBAAqB,MACzB,WAAW,YAAY,GAGnB,gBAAgB,MACpB,WAAW,mBAAmB,GAI1B,WAAW,OACf;AAAA,EACL,GAAG,mBAAmB;AAAA,EACtB,cAAc,cAAc;AAC9B,IAWW,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,aAAa,OAAO,CAAC,GAErB,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA2B,IAAI,GAEzD,CAAC,oBAAoB,qBAAqB,IAC9C,MAAM,SAAuC,IAAI,GAE7C,OAAO,MAAM;AAAA,IACjB,CAAC,OAAO,gBAAgB;AACtB,YAAM,SAAS,aAAa,UAAU,QAAQ,QACxC,cAAc,MAAM,QAAQ,MAAM,IACpC,OAAO,SAAS,KAAK,IACrB,WAAW,OACT,iBAAiB,MAAM,QAAQ,MAAM,IACvC,OAAO,SAAS,QAAQ,IACxB,WAAW,UACT,kBACJ,mBACC,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,SAAS,IAAI,WAAW,YAC7D,cACJ,mBACC,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,KAAK,IAAI,WAAW,QAEzD,oBACJ,WAAW,MACV,SAAS,eACT,CAAC,SAAS,kBACV,SAAS,OAAO,aAAa,mBAC7B,SAAS,OAAO,SAAS;AAE5B,UAAI,mBAAmB;AACrB,cAAM,oBAAoB,kBAAkB,OAAO,eAAe,CAAC,CAAC;AACpE,QAAI,OAAO,qBAAsB,YAAY,kBAAkB,kBAC7D,sBAAsB,kBAAkB,cAAc;AAAA,MAE1D;AACA,wBAAW,WACX,SAAS;AAAA,QACP,GAAG,aAAa;AAAA,QAChB,GAAG;AAAA,QACH,cAAc,aAAa,gBAAgB;AAAA,QAC3C;AAAA,QACA,IAAI,WAAW,QAAQ,SAAS;AAAA,QAChC;AAAA,MACF,CAAC,GACM;AAAA,IACT;AAAA,IACA,CAAC,UAAU,QAAQ,MAAM;AAAA,EAC3B,GACM,OAAO,MAAM,YAAY,MAAM;AACnC,wBAAoB,MAAM,GAC1B,SAAS,IAAI;AAAA,EACf,GAAG,CAAC,UAAU,kBAAkB,CAAC,GAE3B,eAAe,QAAQ,OACpB;AAAA,IACL;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,EACF,IACC,CAAC,MAAM,MAAM,oBAAoB,KAAK,UAAU,WAAW,IAAI,CAAC,CAAC;AAEpE,SACE,CAAC,aAAa,SAAS,OAAO,cAC5B,CAAC,oBAAoB,SAAS,OAAO,QAClC,SACH,EAFC,oBAAoB,SAGvB,EAJC,aAAa;AAMlB;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { isWeb } from "@tamagui/core";
|
|
2
|
+
import React, { createContext, useContext, useMemo, useRef } from "react";
|
|
3
|
+
import { Platform } from "react-native";
|
|
4
|
+
import { createNativeToast } from "./createNativeToast";
|
|
5
|
+
const ToastContext = createContext({}), ToastCurrentContext = createContext(null), useToastController = () => useContext(ToastContext), useToastState = () => useContext(ToastCurrentContext), useToast = () => ({
|
|
6
|
+
...useToastController(),
|
|
7
|
+
currentToast: useToastState()
|
|
8
|
+
}), ToastImperativeProvider = ({
|
|
9
|
+
children,
|
|
10
|
+
options
|
|
11
|
+
}) => {
|
|
12
|
+
const counterRef = useRef(0), [toast, setToast] = React.useState(null), [lastNativeToastRef, setLastNativeToastRef] = React.useState(null), show = React.useCallback(
|
|
13
|
+
(title, showOptions) => {
|
|
14
|
+
const native = showOptions?.native ?? options.native, isWebNative = Array.isArray(native) ? native.includes("web") : native === "web", isMobileNative = Array.isArray(native) ? native.includes("mobile") : native === "mobile", isAndroidNative = isMobileNative || (Array.isArray(native) ? native.includes("android") : native === "android"), isIosNative = isMobileNative || (Array.isArray(native) ? native.includes("ios") : native === "ios"), isHandledNatively = native === !0 || isWeb && isWebNative || !isWeb && isMobileNative || Platform.OS === "android" && isAndroidNative || Platform.OS === "ios" && isIosNative;
|
|
15
|
+
if (isHandledNatively) {
|
|
16
|
+
const nativeToastResult = createNativeToast(title, showOptions ?? {});
|
|
17
|
+
typeof nativeToastResult == "object" && nativeToastResult.nativeToastRef && setLastNativeToastRef(nativeToastResult.nativeToastRef);
|
|
18
|
+
}
|
|
19
|
+
return counterRef.current++, setToast({
|
|
20
|
+
...showOptions?.customData,
|
|
21
|
+
...showOptions,
|
|
22
|
+
viewportName: showOptions?.viewportName ?? "default",
|
|
23
|
+
title,
|
|
24
|
+
id: counterRef.current.toString(),
|
|
25
|
+
isHandledNatively
|
|
26
|
+
}), !0;
|
|
27
|
+
},
|
|
28
|
+
[setToast, options.native]
|
|
29
|
+
), hide = React.useCallback(() => {
|
|
30
|
+
lastNativeToastRef?.close(), setToast(null);
|
|
31
|
+
}, [setToast, lastNativeToastRef]), contextValue = useMemo(() => ({
|
|
32
|
+
show,
|
|
33
|
+
hide,
|
|
34
|
+
nativeToast: lastNativeToastRef,
|
|
35
|
+
options
|
|
36
|
+
}), [show, hide, lastNativeToastRef, JSON.stringify(options || null)]);
|
|
37
|
+
return <ToastContext.Provider value={contextValue}><ToastCurrentContext.Provider value={toast}>{children}</ToastCurrentContext.Provider></ToastContext.Provider>;
|
|
38
|
+
};
|
|
39
|
+
export {
|
|
40
|
+
ToastImperativeProvider,
|
|
41
|
+
useToast,
|
|
42
|
+
useToastController,
|
|
43
|
+
useToastState
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=ToastImperative.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ToastImperative.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAsC,aAAa;AACnD,OAAO,SAAS,eAAe,YAAY,SAAS,cAAc;AAClE,SAAS,gBAAgB;AAEzB,SAAS,yBAAyB;AA4ElC,MAAM,eAAe,cAA6B,CAAC,CAAQ,GACrD,sBAAsB,cAAgC,IAAI,GAEnD,qBAAqB,MACzB,WAAW,YAAY,GAGnB,gBAAgB,MACpB,WAAW,mBAAmB,GAI1B,WAAW,OACf;AAAA,EACL,GAAG,mBAAmB;AAAA,EACtB,cAAc,cAAc;AAC9B,IAWW,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,aAAa,OAAO,CAAC,GAErB,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA2B,IAAI,GAEzD,CAAC,oBAAoB,qBAAqB,IAC9C,MAAM,SAAuC,IAAI,GAE7C,OAAO,MAAM;AAAA,IACjB,CAAC,OAAO,gBAAgB;AACtB,YAAM,SAAS,aAAa,UAAU,QAAQ,QACxC,cAAc,MAAM,QAAQ,MAAM,IACpC,OAAO,SAAS,KAAK,IACrB,WAAW,OACT,iBAAiB,MAAM,QAAQ,MAAM,IACvC,OAAO,SAAS,QAAQ,IACxB,WAAW,UACT,kBACJ,mBACC,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,SAAS,IAAI,WAAW,YAC7D,cACJ,mBACC,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,KAAK,IAAI,WAAW,QAEzD,oBACJ,WAAW,MACV,SAAS,eACT,CAAC,SAAS,kBACV,SAAS,OAAO,aAAa,mBAC7B,SAAS,OAAO,SAAS;AAE5B,UAAI,mBAAmB;AACrB,cAAM,oBAAoB,kBAAkB,OAAO,eAAe,CAAC,CAAC;AACpE,QAAI,OAAO,qBAAsB,YAAY,kBAAkB,kBAC7D,sBAAsB,kBAAkB,cAAc;AAAA,MAE1D;AACA,wBAAW,WACX,SAAS;AAAA,QACP,GAAG,aAAa;AAAA,QAChB,GAAG;AAAA,QACH,cAAc,aAAa,gBAAgB;AAAA,QAC3C;AAAA,QACA,IAAI,WAAW,QAAQ,SAAS;AAAA,QAChC;AAAA,MACF,CAAC,GACM;AAAA,IACT;AAAA,IACA,CAAC,UAAU,QAAQ,MAAM;AAAA,EAC3B,GACM,OAAO,MAAM,YAAY,MAAM;AACnC,wBAAoB,MAAM,GAC1B,SAAS,IAAI;AAAA,EACf,GAAG,CAAC,UAAU,kBAAkB,CAAC,GAE3B,eAAe,QAAQ,OACpB;AAAA,IACL;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,EACF,IACC,CAAC,MAAM,MAAM,oBAAoB,KAAK,UAAU,WAAW,IAAI,CAAC,CAAC;AAEpE,SACE,CAAC,aAAa,SAAS,OAAO,cAC5B,CAAC,oBAAoB,SAAS,OAAO,QAClC,SACH,EAFC,oBAAoB,SAGvB,EAJC,aAAa;AAMlB;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
package/dist/jsx/ToastImpl.js
CHANGED
|
@@ -26,7 +26,7 @@ import {
|
|
|
26
26
|
import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from "./ToastViewport";
|
|
27
27
|
const ToastImplFrame = styled(ThemeableStack, {
|
|
28
28
|
name: "ToastImpl",
|
|
29
|
-
focusable:
|
|
29
|
+
focusable: !0,
|
|
30
30
|
variants: {
|
|
31
31
|
unstyled: {
|
|
32
32
|
false: {
|
|
@@ -45,17 +45,15 @@ const ToastImplFrame = styled(ThemeableStack, {
|
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
defaultVariants: {
|
|
48
|
-
unstyled:
|
|
48
|
+
unstyled: !1
|
|
49
49
|
}
|
|
50
|
-
})
|
|
51
|
-
const [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(
|
|
50
|
+
}), [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(
|
|
52
51
|
TOAST_NAME,
|
|
53
52
|
{
|
|
54
53
|
onClose() {
|
|
55
54
|
}
|
|
56
55
|
}
|
|
57
|
-
)
|
|
58
|
-
const ToastImpl = React.forwardRef(
|
|
56
|
+
), ToastImpl = React.forwardRef(
|
|
59
57
|
(props, forwardedRef) => {
|
|
60
58
|
const {
|
|
61
59
|
__scopeToast,
|
|
@@ -72,132 +70,54 @@ const ToastImpl = React.forwardRef(
|
|
|
72
70
|
onSwipeEnd,
|
|
73
71
|
viewportName = "default",
|
|
74
72
|
...toastProps
|
|
75
|
-
} = props
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const [node, setNode] = React.useState(null);
|
|
79
|
-
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
|
|
80
|
-
const duration = durationProp || context.duration;
|
|
81
|
-
const closeTimerStartTimeRef = React.useRef(0);
|
|
82
|
-
const closeTimerRemainingTimeRef = React.useRef(duration);
|
|
83
|
-
const closeTimerRef = React.useRef(0);
|
|
84
|
-
const { onToastAdd, onToastRemove } = context;
|
|
85
|
-
const viewport = React.useMemo(() => {
|
|
86
|
-
return context.viewports[viewportName];
|
|
87
|
-
}, [context.viewports, viewportName]);
|
|
88
|
-
const handleClose = useEvent(() => {
|
|
89
|
-
if (!isPresent) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
if (isWeb) {
|
|
93
|
-
const isFocusInToast = node?.contains(document.activeElement);
|
|
94
|
-
if (isFocusInToast)
|
|
95
|
-
viewport?.focus();
|
|
96
|
-
}
|
|
97
|
-
onClose();
|
|
98
|
-
});
|
|
99
|
-
const startTimer = React.useCallback(
|
|
73
|
+
} = props, isPresent = useIsPresent(), context = useToastProviderContext(TOAST_NAME, __scopeToast), [node, setNode] = React.useState(null), composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2)), duration = durationProp || context.duration, closeTimerStartTimeRef = React.useRef(0), closeTimerRemainingTimeRef = React.useRef(duration), closeTimerRef = React.useRef(0), { onToastAdd, onToastRemove } = context, viewport = React.useMemo(() => context.viewports[viewportName], [context.viewports, viewportName]), handleClose = useEvent(() => {
|
|
74
|
+
isPresent && (isWeb && node?.contains(document.activeElement) && viewport?.focus(), onClose());
|
|
75
|
+
}), startTimer = React.useCallback(
|
|
100
76
|
(duration2) => {
|
|
101
|
-
|
|
102
|
-
return;
|
|
103
|
-
clearTimeout(closeTimerRef.current);
|
|
104
|
-
closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
|
|
105
|
-
closeTimerRef.current = setTimeout(handleClose, duration2);
|
|
77
|
+
!duration2 || duration2 === 1 / 0 || (clearTimeout(closeTimerRef.current), closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime(), closeTimerRef.current = setTimeout(handleClose, duration2));
|
|
106
78
|
},
|
|
107
79
|
[handleClose]
|
|
108
|
-
)
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
onResume?.();
|
|
112
|
-
}, [onResume, startTimer]);
|
|
113
|
-
const handlePause = React.useCallback(() => {
|
|
80
|
+
), handleResume = React.useCallback(() => {
|
|
81
|
+
startTimer(closeTimerRemainingTimeRef.current), onResume?.();
|
|
82
|
+
}, [onResume, startTimer]), handlePause = React.useCallback(() => {
|
|
114
83
|
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
|
|
115
|
-
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
|
|
116
|
-
window.clearTimeout(closeTimerRef.current);
|
|
117
|
-
onPause?.();
|
|
84
|
+
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime, window.clearTimeout(closeTimerRef.current), onPause?.();
|
|
118
85
|
}, [onPause]);
|
|
119
86
|
React.useEffect(() => {
|
|
120
|
-
if (
|
|
121
|
-
return
|
|
122
|
-
|
|
123
|
-
viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
|
|
124
|
-
viewport.addEventListener(VIEWPORT_RESUME, handleResume);
|
|
125
|
-
return () => {
|
|
126
|
-
viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
|
|
127
|
-
viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
|
|
87
|
+
if (isWeb && viewport)
|
|
88
|
+
return viewport.addEventListener(VIEWPORT_PAUSE, handlePause), viewport.addEventListener(VIEWPORT_RESUME, handleResume), () => {
|
|
89
|
+
viewport.removeEventListener(VIEWPORT_PAUSE, handlePause), viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
|
|
128
90
|
};
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
React.useEffect(() =>
|
|
132
|
-
|
|
133
|
-
startTimer(duration);
|
|
134
|
-
}
|
|
135
|
-
}, [open, duration, context.isClosePausedRef, startTimer]);
|
|
136
|
-
React.useEffect(() => {
|
|
137
|
-
onToastAdd();
|
|
138
|
-
return () => onToastRemove();
|
|
139
|
-
}, [onToastAdd, onToastRemove]);
|
|
140
|
-
const announceTextContent = React.useMemo(() => {
|
|
141
|
-
if (!isWeb)
|
|
142
|
-
return null;
|
|
143
|
-
return node ? getAnnounceTextContent(node) : null;
|
|
144
|
-
}, [node]);
|
|
145
|
-
const isHorizontalSwipe = ["left", "right", "horizontal"].includes(
|
|
91
|
+
}, [viewport, duration, onPause, onResume, startTimer]), React.useEffect(() => {
|
|
92
|
+
open && !context.isClosePausedRef.current && startTimer(duration);
|
|
93
|
+
}, [open, duration, context.isClosePausedRef, startTimer]), React.useEffect(() => (onToastAdd(), () => onToastRemove()), [onToastAdd, onToastRemove]);
|
|
94
|
+
const announceTextContent = React.useMemo(() => isWeb && node ? getAnnounceTextContent(node) : null, [node]), isHorizontalSwipe = ["left", "right", "horizontal"].includes(
|
|
146
95
|
context.swipeDirection
|
|
147
|
-
);
|
|
148
|
-
|
|
149
|
-
if (!driver) {
|
|
96
|
+
), driver = useAnimationDriver();
|
|
97
|
+
if (!driver)
|
|
150
98
|
throw new Error("Must set animations in tamagui.config.ts");
|
|
151
|
-
}
|
|
152
|
-
const { useAnimatedNumber, useAnimatedNumberStyle } = driver;
|
|
153
|
-
const animatedNumber = useAnimatedNumber(0);
|
|
154
|
-
const AnimatedView = driver["NumberView"] ?? driver.View;
|
|
155
|
-
const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {
|
|
99
|
+
const { useAnimatedNumber, useAnimatedNumberStyle } = driver, animatedNumber = useAnimatedNumber(0), AnimatedView = driver.NumberView ?? driver.View, animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {
|
|
156
100
|
"worklet";
|
|
157
101
|
return {
|
|
158
102
|
transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }]
|
|
159
103
|
};
|
|
160
|
-
})
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
const { x, y } = getGestureDistance(context.swipeDirection, gesture);
|
|
178
|
-
const delta = { x, y };
|
|
179
|
-
animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: "direct" });
|
|
180
|
-
if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
|
|
181
|
-
onSwipeEnd?.(e);
|
|
182
|
-
}
|
|
183
|
-
onSwipeMove?.(e);
|
|
184
|
-
},
|
|
185
|
-
onPanResponderEnd: (e, { dx, dy }) => {
|
|
186
|
-
if (!isDeltaInDirection(
|
|
187
|
-
{ x: dx, y: dy },
|
|
188
|
-
context.swipeDirection,
|
|
189
|
-
context.swipeThreshold
|
|
190
|
-
)) {
|
|
191
|
-
if (!isWeb) {
|
|
192
|
-
handleResume?.();
|
|
193
|
-
}
|
|
194
|
-
onSwipeCancel?.(e);
|
|
195
|
-
animatedNumber.setValue(0, { type: "spring" });
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
});
|
|
199
|
-
}, [handlePause, handleResume]);
|
|
200
|
-
const themeName = useThemeName();
|
|
104
|
+
}), panResponder = React.useMemo(() => PanResponder.create({
|
|
105
|
+
onMoveShouldSetPanResponder: (e, gesture) => shouldGrantGestureMove(context.swipeDirection, gesture) ? (onSwipeStart?.(e), !0) : !1,
|
|
106
|
+
onPanResponderGrant: (e) => {
|
|
107
|
+
isWeb || handlePause?.();
|
|
108
|
+
},
|
|
109
|
+
onPanResponderMove: (e, gesture) => {
|
|
110
|
+
const { x, y } = getGestureDistance(context.swipeDirection, gesture), delta = { x, y };
|
|
111
|
+
animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: "direct" }), isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold) && onSwipeEnd?.(e), onSwipeMove?.(e);
|
|
112
|
+
},
|
|
113
|
+
onPanResponderEnd: (e, { dx, dy }) => {
|
|
114
|
+
isDeltaInDirection(
|
|
115
|
+
{ x: dx, y: dy },
|
|
116
|
+
context.swipeDirection,
|
|
117
|
+
context.swipeThreshold
|
|
118
|
+
) || (isWeb || handleResume?.(), onSwipeCancel?.(e), animatedNumber.setValue(0, { type: "spring" }));
|
|
119
|
+
}
|
|
120
|
+
}), [handlePause, handleResume]), themeName = useThemeName();
|
|
201
121
|
return <>
|
|
202
122
|
{announceTextContent && <ToastAnnounce
|
|
203
123
|
__scopeToast={__scopeToast}
|
|
@@ -213,10 +133,7 @@ const ToastImpl = React.forwardRef(
|
|
|
213
133
|
}}
|
|
214
134
|
><Dismissable
|
|
215
135
|
onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
|
|
216
|
-
|
|
217
|
-
handleClose();
|
|
218
|
-
}
|
|
219
|
-
context.isFocusedToastEscapeKeyDownRef.current = false;
|
|
136
|
+
context.isFocusedToastEscapeKeyDownRef.current || handleClose(), context.isFocusedToastEscapeKeyDownRef.current = !1;
|
|
220
137
|
})}
|
|
221
138
|
><Theme forceClassName name={themeName}><AnimatedView
|
|
222
139
|
{...panResponder?.panHandlers}
|
|
@@ -235,14 +152,7 @@ const ToastImpl = React.forwardRef(
|
|
|
235
152
|
onKeyDown: composeEventHandlers(
|
|
236
153
|
props.onKeyDown,
|
|
237
154
|
(event) => {
|
|
238
|
-
|
|
239
|
-
return;
|
|
240
|
-
onEscapeKeyDown?.(event);
|
|
241
|
-
onEscapeKeyDown?.(event);
|
|
242
|
-
if (!event.defaultPrevented) {
|
|
243
|
-
context.isFocusedToastEscapeKeyDownRef.current = true;
|
|
244
|
-
handleClose();
|
|
245
|
-
}
|
|
155
|
+
event.key === "Escape" && (onEscapeKeyDown?.(event), onEscapeKeyDown?.(event), event.defaultPrevented || (context.isFocusedToastEscapeKeyDownRef.current = !0, handleClose()));
|
|
246
156
|
}
|
|
247
157
|
)
|
|
248
158
|
}}
|
|
@@ -260,71 +170,31 @@ ToastImpl.propTypes = {
|
|
|
260
170
|
}
|
|
261
171
|
};
|
|
262
172
|
const isDeltaInDirection = (delta, direction, threshold = 0) => {
|
|
263
|
-
const deltaX = Math.abs(delta.x);
|
|
264
|
-
|
|
265
|
-
const isDeltaX = deltaX > deltaY;
|
|
266
|
-
if (direction === "left" || direction === "right" || direction === "horizontal") {
|
|
267
|
-
return isDeltaX && deltaX > threshold;
|
|
268
|
-
} else {
|
|
269
|
-
return !isDeltaX && deltaY > threshold;
|
|
270
|
-
}
|
|
173
|
+
const deltaX = Math.abs(delta.x), deltaY = Math.abs(delta.y), isDeltaX = deltaX > deltaY;
|
|
174
|
+
return direction === "left" || direction === "right" || direction === "horizontal" ? isDeltaX && deltaX > threshold : !isDeltaX && deltaY > threshold;
|
|
271
175
|
};
|
|
272
176
|
function getAnnounceTextContent(container) {
|
|
273
177
|
if (!isWeb)
|
|
274
178
|
return "";
|
|
275
179
|
const textContent = [];
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
if (isHTMLElement(node)) {
|
|
281
|
-
const isHidden = node.ariaHidden || node.hidden || node.style.display === "none";
|
|
282
|
-
const isExcluded = node.dataset.toastAnnounceExclude === "";
|
|
283
|
-
if (!isHidden) {
|
|
180
|
+
return Array.from(container.childNodes).forEach((node) => {
|
|
181
|
+
if (node.nodeType === node.TEXT_NODE && node.textContent && textContent.push(node.textContent), isHTMLElement(node)) {
|
|
182
|
+
const isHidden = node.ariaHidden || node.hidden || node.style.display === "none", isExcluded = node.dataset.toastAnnounceExclude === "";
|
|
183
|
+
if (!isHidden)
|
|
284
184
|
if (isExcluded) {
|
|
285
185
|
const altText = node.dataset.toastAnnounceAlt;
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
} else {
|
|
186
|
+
altText && textContent.push(altText);
|
|
187
|
+
} else
|
|
289
188
|
textContent.push(...getAnnounceTextContent(node));
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
189
|
}
|
|
293
|
-
});
|
|
294
|
-
return textContent;
|
|
190
|
+
}), textContent;
|
|
295
191
|
}
|
|
296
192
|
function isHTMLElement(node) {
|
|
297
193
|
return node.nodeType === node.ELEMENT_NODE;
|
|
298
194
|
}
|
|
299
|
-
const GESTURE_GRANT_THRESHOLD = 10
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
return true;
|
|
303
|
-
} else if ((dir === "horizontal" || dir === "right") && dx > GESTURE_GRANT_THRESHOLD) {
|
|
304
|
-
return true;
|
|
305
|
-
} else if ((dir === "vertical" || dir === "up") && dy > -GESTURE_GRANT_THRESHOLD) {
|
|
306
|
-
return true;
|
|
307
|
-
} else if ((dir === "vertical" || dir === "down") && dy < GESTURE_GRANT_THRESHOLD) {
|
|
308
|
-
return true;
|
|
309
|
-
}
|
|
310
|
-
return false;
|
|
311
|
-
};
|
|
312
|
-
const getGestureDistance = (dir, { dx, dy }) => {
|
|
313
|
-
let y = 0;
|
|
314
|
-
let x = 0;
|
|
315
|
-
if (dir === "horizontal")
|
|
316
|
-
x = dx;
|
|
317
|
-
else if (dir === "left")
|
|
318
|
-
x = Math.min(0, dx);
|
|
319
|
-
else if (dir === "right")
|
|
320
|
-
x = Math.max(0, dx);
|
|
321
|
-
else if (dir === "vertical")
|
|
322
|
-
y = dy;
|
|
323
|
-
else if (dir === "up")
|
|
324
|
-
y = Math.min(0, dy);
|
|
325
|
-
else if (dir === "down")
|
|
326
|
-
y = Math.max(0, dy);
|
|
327
|
-
return {
|
|
195
|
+
const GESTURE_GRANT_THRESHOLD = 10, shouldGrantGestureMove = (dir, { dx, dy }) => (dir === "horizontal" || dir === "left") && dx < -GESTURE_GRANT_THRESHOLD || (dir === "horizontal" || dir === "right") && dx > GESTURE_GRANT_THRESHOLD || (dir === "vertical" || dir === "up") && dy > -GESTURE_GRANT_THRESHOLD ? !0 : (dir === "vertical" || dir === "down") && dy < GESTURE_GRANT_THRESHOLD, getGestureDistance = (dir, { dx, dy }) => {
|
|
196
|
+
let y = 0, x = 0;
|
|
197
|
+
return dir === "horizontal" ? x = dx : dir === "left" ? x = Math.min(0, dx) : dir === "right" ? x = Math.max(0, dx) : dir === "vertical" ? y = dy : dir === "up" ? y = Math.min(0, dy) : dir === "down" && (y = Math.max(0, dy)), {
|
|
328
198
|
x,
|
|
329
199
|
y
|
|
330
200
|
};
|