@tamagui/animate-presence 1.74.3 → 1.74.4
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/esm/AnimatePresence.native.js +130 -0
- package/dist/esm/AnimatePresence.native.js.map +6 -0
- package/dist/esm/LayoutGroupContext.native.js +6 -0
- package/dist/esm/LayoutGroupContext.native.js.map +6 -0
- package/dist/esm/PresenceChild.native.js +53 -0
- package/dist/esm/PresenceChild.native.js.map +6 -0
- package/dist/esm/index.native.js +5 -0
- package/dist/esm/index.native.js.map +6 -0
- package/dist/esm/types.native.js +1 -0
- package/dist/esm/types.native.js.map +6 -0
- package/package.json +5 -5
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { useForceUpdate } from "@tamagui/use-force-update";
|
|
2
|
+
import { useDidFinishSSR, useIsomorphicLayoutEffect } from "@tamagui/web";
|
|
3
|
+
import React, {
|
|
4
|
+
Children,
|
|
5
|
+
cloneElement,
|
|
6
|
+
isValidElement,
|
|
7
|
+
useContext,
|
|
8
|
+
useEffect,
|
|
9
|
+
useRef
|
|
10
|
+
} from "react";
|
|
11
|
+
import { LayoutGroupContext } from "./LayoutGroupContext";
|
|
12
|
+
import { PresenceChild } from "./PresenceChild";
|
|
13
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
14
|
+
const getChildKey = (child) => child.key || "", isDev = process.env.NODE_ENV !== "production";
|
|
15
|
+
function updateChildLookup(children, allChildren) {
|
|
16
|
+
const seenChildren = isDev ? /* @__PURE__ */ new Set() : null;
|
|
17
|
+
children.forEach((child) => {
|
|
18
|
+
const key = getChildKey(child);
|
|
19
|
+
isDev && seenChildren && seenChildren.has(key) && (console.warn(
|
|
20
|
+
`Children of AnimatePresence require unique keys. "${key}" is a duplicate.`
|
|
21
|
+
), seenChildren.add(key)), allChildren.set(key, child);
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function onlyElements(children) {
|
|
25
|
+
const filtered = [];
|
|
26
|
+
return Children.forEach(children, (child, index) => {
|
|
27
|
+
isValidElement(child) && (!child.key && Children.count(children) > 1 ? (process.env.NODE_ENV === "development" && console.warn("No key given to AnimatePresence child, assigning index as key"), filtered.push(
|
|
28
|
+
React.cloneElement(child, {
|
|
29
|
+
key: index
|
|
30
|
+
})
|
|
31
|
+
)) : filtered.push(child));
|
|
32
|
+
}), filtered;
|
|
33
|
+
}
|
|
34
|
+
const AnimatePresence = ({
|
|
35
|
+
children,
|
|
36
|
+
enterVariant,
|
|
37
|
+
exitVariant,
|
|
38
|
+
enterExitVariant,
|
|
39
|
+
initial = !0,
|
|
40
|
+
onExitComplete,
|
|
41
|
+
exitBeforeEnter,
|
|
42
|
+
presenceAffectsLayout = !0
|
|
43
|
+
}) => {
|
|
44
|
+
let forceRender = useForceUpdate();
|
|
45
|
+
const isClientMounted = useDidFinishSSR(), forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
|
|
46
|
+
forceRenderLayoutGroup && (forceRender = forceRenderLayoutGroup);
|
|
47
|
+
const isMounted = useRef(!1), filteredChildren = onlyElements(children);
|
|
48
|
+
let childrenToRender = filteredChildren;
|
|
49
|
+
const exiting = /* @__PURE__ */ new Set(), presentChildren = useRef(childrenToRender), allChildren = useRef(/* @__PURE__ */ new Map()).current, isInitialRender = useRef(!0);
|
|
50
|
+
useEffect(() => (isMounted.current = !0, () => {
|
|
51
|
+
isMounted.current = !1, isInitialRender.current = !0, allChildren.clear(), exiting.clear();
|
|
52
|
+
}), []), useIsomorphicLayoutEffect(() => {
|
|
53
|
+
isInitialRender.current = !1, updateChildLookup(filteredChildren, allChildren), presentChildren.current = childrenToRender;
|
|
54
|
+
});
|
|
55
|
+
const hasWarned = process.env.NODE_ENV === "development" ? useRef(!1) : null;
|
|
56
|
+
if (isInitialRender.current)
|
|
57
|
+
return /* @__PURE__ */ jsx(Fragment, { children: childrenToRender.map((child) => /* @__PURE__ */ jsx(
|
|
58
|
+
PresenceChild,
|
|
59
|
+
{
|
|
60
|
+
isPresent: !!(isClientMounted || isMounted.current),
|
|
61
|
+
enterExitVariant,
|
|
62
|
+
exitVariant,
|
|
63
|
+
enterVariant,
|
|
64
|
+
initial: initial ? void 0 : !1,
|
|
65
|
+
presenceAffectsLayout,
|
|
66
|
+
children: child
|
|
67
|
+
},
|
|
68
|
+
getChildKey(child)
|
|
69
|
+
)) });
|
|
70
|
+
childrenToRender = [...childrenToRender];
|
|
71
|
+
const presentKeys = presentChildren.current.map(getChildKey), targetKeys = filteredChildren.map(getChildKey), numPresent = presentKeys.length;
|
|
72
|
+
for (let i = 0; i < numPresent; i++) {
|
|
73
|
+
const key = presentKeys[i];
|
|
74
|
+
targetKeys.indexOf(key) === -1 && exiting.add(key);
|
|
75
|
+
}
|
|
76
|
+
return exitBeforeEnter && exiting.size && (childrenToRender = []), exiting.forEach((key) => {
|
|
77
|
+
if (targetKeys.indexOf(key) !== -1)
|
|
78
|
+
return;
|
|
79
|
+
const child = allChildren.get(key);
|
|
80
|
+
if (!child)
|
|
81
|
+
return;
|
|
82
|
+
const insertionIndex = presentKeys.indexOf(key);
|
|
83
|
+
childrenToRender.splice(
|
|
84
|
+
insertionIndex,
|
|
85
|
+
0,
|
|
86
|
+
/* @__PURE__ */ jsx(
|
|
87
|
+
PresenceChild,
|
|
88
|
+
{
|
|
89
|
+
isPresent: !1,
|
|
90
|
+
onExitComplete: () => {
|
|
91
|
+
allChildren.delete(key), exiting.delete(key);
|
|
92
|
+
const removeIndex = presentChildren.current.findIndex(
|
|
93
|
+
(presentChild) => presentChild.key === key
|
|
94
|
+
);
|
|
95
|
+
if (presentChildren.current.splice(removeIndex, 1), !exiting.size) {
|
|
96
|
+
if (presentChildren.current = filteredChildren, isMounted.current === !1)
|
|
97
|
+
return;
|
|
98
|
+
forceRender(), onExitComplete?.();
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
exitVariant,
|
|
102
|
+
enterVariant,
|
|
103
|
+
enterExitVariant,
|
|
104
|
+
presenceAffectsLayout,
|
|
105
|
+
children: child
|
|
106
|
+
},
|
|
107
|
+
getChildKey(child)
|
|
108
|
+
)
|
|
109
|
+
);
|
|
110
|
+
}), childrenToRender = childrenToRender.map((child) => {
|
|
111
|
+
const key = child.key;
|
|
112
|
+
return exiting.has(key) ? child : /* @__PURE__ */ jsx(
|
|
113
|
+
PresenceChild,
|
|
114
|
+
{
|
|
115
|
+
isPresent: !0,
|
|
116
|
+
exitVariant,
|
|
117
|
+
enterVariant,
|
|
118
|
+
enterExitVariant,
|
|
119
|
+
presenceAffectsLayout,
|
|
120
|
+
children: child
|
|
121
|
+
},
|
|
122
|
+
getChildKey(child)
|
|
123
|
+
);
|
|
124
|
+
}), /* @__PURE__ */ jsx(Fragment, { children: exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child)) });
|
|
125
|
+
};
|
|
126
|
+
AnimatePresence.displayName = "AnimatePresence";
|
|
127
|
+
export {
|
|
128
|
+
AnimatePresence
|
|
129
|
+
};
|
|
130
|
+
//# sourceMappingURL=AnimatePresence.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/AnimatePresence.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { PresenceContext } from "@tamagui/use-presence";
|
|
2
|
+
import { useIsomorphicLayoutEffect } from "@tamagui/web";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { useId } from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
const PresenceChild = ({
|
|
7
|
+
children,
|
|
8
|
+
initial,
|
|
9
|
+
isPresent,
|
|
10
|
+
onExitComplete,
|
|
11
|
+
exitVariant,
|
|
12
|
+
enterVariant,
|
|
13
|
+
enterExitVariant,
|
|
14
|
+
presenceAffectsLayout
|
|
15
|
+
}) => {
|
|
16
|
+
const presenceChildren = React.useMemo(newChildrenMap, []), id = useId() || "", context = React.useMemo(
|
|
17
|
+
() => ({
|
|
18
|
+
id,
|
|
19
|
+
initial,
|
|
20
|
+
isPresent,
|
|
21
|
+
exitVariant,
|
|
22
|
+
enterVariant,
|
|
23
|
+
enterExitVariant,
|
|
24
|
+
onExitComplete: (id2) => {
|
|
25
|
+
presenceChildren.set(id2, !0);
|
|
26
|
+
for (const isComplete of presenceChildren.values())
|
|
27
|
+
if (!isComplete)
|
|
28
|
+
return;
|
|
29
|
+
onExitComplete?.();
|
|
30
|
+
},
|
|
31
|
+
register: (id2) => (presenceChildren.set(id2, !1), () => presenceChildren.delete(id2))
|
|
32
|
+
}),
|
|
33
|
+
/**
|
|
34
|
+
* If the presence of a child affects the layout of the components around it,
|
|
35
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
36
|
+
* so they can detect that layout change.
|
|
37
|
+
*/
|
|
38
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
|
+
presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]
|
|
40
|
+
);
|
|
41
|
+
return React.useMemo(() => {
|
|
42
|
+
presenceChildren.forEach((_, key) => presenceChildren.set(key, !1));
|
|
43
|
+
}, [isPresent]), useIsomorphicLayoutEffect(() => {
|
|
44
|
+
!(isPresent || presenceChildren.size) && onExitComplete?.();
|
|
45
|
+
}, [isPresent]), /* @__PURE__ */ jsx(PresenceContext.Provider, { value: context, children });
|
|
46
|
+
};
|
|
47
|
+
function newChildrenMap() {
|
|
48
|
+
return /* @__PURE__ */ new Map();
|
|
49
|
+
}
|
|
50
|
+
export {
|
|
51
|
+
PresenceChild
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=PresenceChild.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/PresenceChild.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAS,uBAAuB;AAChC,SAA+B,iCAAiC;AAChE,YAAY,WAAW;AACvB,SAAS,aAAa;AA4Eb;AA5DF,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC,GACnD,KAAK,MAAM,KAAK,IAEhB,UAAU,MAAM;AAAA,IACpB,OACS;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAACA,QAAe;AAC9B,yBAAiB,IAAIA,KAAI,EAAI;AAC7B,mBAAW,cAAc,iBAAiB,OAAO;AAC/C,cAAI,CAAC;AACH;AAGJ,yBAAiB;AAAA,MACnB;AAAA,MACA,UAAU,CAACA,SACT,iBAAiB,IAAIA,KAAI,EAAK,GACvB,MAAM,iBAAiB,OAAOA,GAAE;AAAA,IAE3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQF,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,eAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,EAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC,GAMd,0BAA0B,MAAM;AAC9B,MAAE,aAAa,iBAAiB,SAAS,iBAAiB;AAAA,EAE5D,GAAG,CAAC,SAAS,CAAC,GAEP,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,SAAU,UAAS;AAC7D;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
|
|
5
|
+
"names": ["id"]
|
|
6
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=types.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animate-presence",
|
|
3
|
-
"version": "1.74.
|
|
3
|
+
"version": "1.74.4",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
"dist"
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@tamagui/use-force-update": "1.74.
|
|
17
|
-
"@tamagui/use-presence": "1.74.
|
|
18
|
-
"@tamagui/web": "1.74.
|
|
16
|
+
"@tamagui/use-force-update": "1.74.4",
|
|
17
|
+
"@tamagui/use-presence": "1.74.4",
|
|
18
|
+
"@tamagui/web": "1.74.4"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "1.74.
|
|
21
|
+
"@tamagui/build": "1.74.4"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
24
|
"build": "tamagui-build",
|