@tamagui/animate-presence 2.7.7 → 3.0.0-beta.643.1
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/AnimatePresence.cjs +102 -128
- package/dist/cjs/AnimatePresence.native.cjs +135 -0
- package/dist/cjs/AnimatePresence.native.js +112 -141
- package/dist/cjs/AnimatePresence.native.js.map +1 -1
- package/dist/cjs/LayoutGroupContext.cjs +18 -26
- package/dist/cjs/LayoutGroupContext.native.cjs +34 -0
- package/dist/cjs/LayoutGroupContext.native.js +19 -26
- package/dist/cjs/LayoutGroupContext.native.js.map +1 -1
- package/dist/cjs/PresenceChild.cjs +61 -81
- package/dist/cjs/PresenceChild.native.cjs +105 -0
- package/dist/cjs/PresenceChild.native.js +83 -104
- package/dist/cjs/PresenceChild.native.js.map +1 -1
- package/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +24 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/types.cjs +10 -11
- package/dist/cjs/types.native.cjs +19 -0
- package/dist/cjs/types.native.js +10 -10
- package/dist/cjs/types.native.js.map +1 -1
- package/dist/esm/AnimatePresence.mjs +90 -112
- package/dist/esm/AnimatePresence.mjs.map +1 -1
- package/dist/esm/AnimatePresence.native.js +100 -126
- package/dist/esm/AnimatePresence.native.js.map +1 -1
- package/dist/esm/LayoutGroupContext.mjs +2 -0
- package/dist/esm/LayoutGroupContext.mjs.map +1 -1
- package/dist/esm/LayoutGroupContext.native.js +3 -1
- package/dist/esm/LayoutGroupContext.native.js.map +1 -1
- package/dist/esm/PresenceChild.mjs +45 -55
- package/dist/esm/PresenceChild.mjs.map +1 -1
- package/dist/esm/PresenceChild.native.js +68 -80
- package/dist/esm/PresenceChild.native.js.map +1 -1
- package/dist/esm/index.js +7 -5
- package/dist/esm/index.mjs +7 -5
- package/dist/esm/index.native.js +7 -5
- package/dist/esm/types.mjs +0 -2
- package/dist/esm/types.native.js +0 -2
- package/package.json +8 -8
- package/src/AnimatePresence.tsx +3 -25
- package/src/PresenceChild.tsx +1 -10
- package/src/types.ts +0 -24
- package/types/AnimatePresence.d.ts.map +1 -1
- package/types/PresenceChild.d.ts +1 -4
- package/types/PresenceChild.d.ts.map +1 -1
- package/types/types.d.ts +0 -20
- package/types/types.d.ts.map +1 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/esm/types.mjs.map +0 -1
- package/dist/esm/types.native.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"AnimatePresence.native.js","names":["_Fragment"],"sources":["esm/AnimatePresence.native.js"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useInsertionEffect } from \"react\";\nimport { useConstant } from \"@tamagui/use-constant\";\nimport { useForceUpdate } from \"@tamagui/use-force-update\";\nimport { Children, isValidElement, useContext, useMemo, useRef, useState } from \"react\";\nimport { LayoutGroupContext } from \"./LayoutGroupContext\";\nimport { PresenceChild } from \"./PresenceChild\";\nvar getChildKey = function(child) {\n var _child_key;\n return (_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : \"\";\n};\nfunction onlyElements(children) {\n var filtered = [];\n Children.forEach(children, function(child) {\n if (/* @__PURE__ */ isValidElement(child)) filtered.push(child);\n });\n return filtered;\n}\nvar AnimatePresence = function(param) {\n var { children, initial = true, onExitComplete, mode = \"sync\", presenceAffectsLayout = true, custom, passThrough } = param;\n var presentChildren = useMemo(function() {\n return onlyElements(children);\n }, [\n children\n ]);\n var presentKeys = presentChildren.map(getChildKey);\n var isInitialRender = useRef(true);\n var frozenCustomRef = useRef(/* @__PURE__ */ new Map());\n var pendingPresentChildren = useRef(presentChildren);\n var exitComplete = useConstant(function() {\n return /* @__PURE__ */ new Map();\n });\n var [diffedChildren, setDiffedChildren] = useState(presentChildren);\n var [renderedChildren, setRenderedChildren] = useState(presentChildren);\n var _useContext_forceRender;\n var forceRender = (_useContext_forceRender = useContext(LayoutGroupContext).forceRender) !== null && _useContext_forceRender !== void 0 ? _useContext_forceRender : useForceUpdate();\n if (passThrough) {\n return /* @__PURE__ */ _jsx(_Fragment, {\n children\n });\n }\n useInsertionEffect(function() {\n isInitialRender.current = false;\n pendingPresentChildren.current = presentChildren;\n for (var i2 = 0; i2 < renderedChildren.length; i2++) {\n var key2 = getChildKey(renderedChildren[i2]);\n if (!presentKeys.includes(key2)) {\n if (exitComplete.get(key2) !== true) {\n exitComplete.set(key2, false);\n }\n } else {\n exitComplete.delete(key2);\n frozenCustomRef.current.delete(key2);\n }\n }\n }, [\n renderedChildren,\n presentKeys.length,\n presentKeys.join(\"-\")\n ]);\n if (presentChildren !== diffedChildren) {\n var nextChildren = [\n ...presentChildren\n ];\n for (var i = 0; i < renderedChildren.length; i++) {\n var child = renderedChildren[i];\n var key = getChildKey(child);\n if (!presentKeys.includes(key)) {\n nextChildren.splice(i, 0, child);\n if (!frozenCustomRef.current.has(key)) {\n frozenCustomRef.current.set(key, custom);\n }\n }\n }\n var exitingChildren = renderedChildren.filter(function(child2) {\n return !presentKeys.includes(getChildKey(child2));\n });\n if (mode === \"wait\" && exitingChildren.length) {\n nextChildren = exitingChildren;\n }\n setRenderedChildren(onlyElements(nextChildren));\n setDiffedChildren(presentChildren);\n return null;\n }\n return /* @__PURE__ */ _jsx(_Fragment, {\n children: renderedChildren.map(function(child2) {\n var key2 = getChildKey(child2);\n var isPresent = presentChildren === renderedChildren || presentKeys.includes(key2);\n var onExit = function() {\n if (exitComplete.has(key2)) {\n exitComplete.set(key2, true);\n } else {\n return;\n }\n var isEveryExitComplete = true;\n exitComplete.forEach(function(isExitComplete) {\n if (!isExitComplete) isEveryExitComplete = false;\n });\n if (isEveryExitComplete) {\n forceRender === null || forceRender === void 0 ? void 0 : forceRender();\n setRenderedChildren(pendingPresentChildren.current);\n onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();\n }\n };\n var _frozenCustomRef_current_get;\n return /* @__PURE__ */ _jsx(PresenceChild, {\n isPresent,\n initial: !isInitialRender.current || initial ? void 0 : false,\n custom: isPresent ? custom : (_frozenCustomRef_current_get = frozenCustomRef.current.get(key2)) !== null && _frozenCustomRef_current_get !== void 0 ? _frozenCustomRef_current_get : custom,\n presenceAffectsLayout,\n onExitComplete: isPresent ? void 0 : onExit,\n children: child2\n }, key2);\n })\n });\n};\nAnimatePresence.displayName = \"AnimatePresence\";\nexport {\n AnimatePresence\n};\n//# sourceMappingURL=AnimatePresence.js.map\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"LayoutGroupContext.js","names":[],"sources":["esm/LayoutGroupContext.js"],"sourcesContent":["import React from \"react\";\nconst LayoutGroupContext = React.createContext({});\nexport {\n LayoutGroupContext\n};\n//# sourceMappingURL=LayoutGroupContext.js.map\n"],"mappings":";;;AACA,MAAM,qBAAqB,MAAM,cAAc,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"LayoutGroupContext.native.js","names":[],"sources":["esm/LayoutGroupContext.native.js"],"sourcesContent":["import React from \"react\";\nvar LayoutGroupContext = /* @__PURE__ */ React.createContext({});\nexport {\n LayoutGroupContext\n};\n//# sourceMappingURL=LayoutGroupContext.js.map\n"],"mappings":";;;AACA,IAAI,qBAAqC,sBAAM,cAAc,CAAC,CAAC"}
|
|
@@ -3,63 +3,53 @@ import { PresenceContext } from "@tamagui/use-presence";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { useId } from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]);
|
|
50
|
-
React.useMemo(() => {
|
|
51
|
-
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
|
|
52
|
-
}, [isPresent]);
|
|
53
|
-
React.useEffect(() => {
|
|
54
|
-
!isPresent && !presenceChildren.size && onExitComplete?.();
|
|
55
|
-
}, [isPresent]);
|
|
56
|
-
return /* @__PURE__ */jsx(PresenceContext.Provider, {
|
|
57
|
-
value: context,
|
|
58
|
-
children
|
|
59
|
-
});
|
|
6
|
+
|
|
7
|
+
const PresenceChild = React.memo(({ children, initial, isPresent, onExitComplete, presenceAffectsLayout, custom }) => {
|
|
8
|
+
const presenceChildren = useConstant(newChildrenMap);
|
|
9
|
+
const id = useId() || "";
|
|
10
|
+
const context = React.useMemo(
|
|
11
|
+
() => {
|
|
12
|
+
return {
|
|
13
|
+
id,
|
|
14
|
+
initial,
|
|
15
|
+
isPresent,
|
|
16
|
+
custom,
|
|
17
|
+
onExitComplete: () => {
|
|
18
|
+
presenceChildren.set(id, true);
|
|
19
|
+
for (const isComplete of presenceChildren.values()) {
|
|
20
|
+
if (!isComplete) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
onExitComplete?.();
|
|
25
|
+
},
|
|
26
|
+
register: () => {
|
|
27
|
+
presenceChildren.set(id, false);
|
|
28
|
+
return () => presenceChildren.delete(id);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
/**
|
|
33
|
+
* If the presence of a child affects the layout of the components around it,
|
|
34
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
35
|
+
* so they can detect that layout change.
|
|
36
|
+
*/
|
|
37
|
+
presenceAffectsLayout ? void 0 : [isPresent, custom]
|
|
38
|
+
);
|
|
39
|
+
React.useMemo(() => {
|
|
40
|
+
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
|
|
41
|
+
}, [isPresent]);
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
!isPresent && !presenceChildren.size && onExitComplete?.();
|
|
44
|
+
}, [isPresent]);
|
|
45
|
+
return /* @__PURE__ */ jsx(PresenceContext.Provider, {
|
|
46
|
+
value: context,
|
|
47
|
+
children
|
|
48
|
+
});
|
|
60
49
|
});
|
|
61
50
|
function newChildrenMap() {
|
|
62
|
-
|
|
51
|
+
return /* @__PURE__ */ new Map();
|
|
63
52
|
}
|
|
53
|
+
|
|
64
54
|
export { PresenceChild };
|
|
65
55
|
//# sourceMappingURL=PresenceChild.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"PresenceChild.js","names":[],"sources":["esm/PresenceChild.js"],"sourcesContent":["import { useConstant } from \"@tamagui/use-constant\";\nimport { PresenceContext } from \"@tamagui/use-presence\";\nimport * as React from \"react\";\nimport { useId } from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst PresenceChild = React.memo(\n ({\n children,\n initial,\n isPresent,\n onExitComplete,\n presenceAffectsLayout,\n custom\n }) => {\n const presenceChildren = useConstant(newChildrenMap);\n const id = useId() || \"\";\n const context = React.useMemo(\n () => {\n return {\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: () => {\n presenceChildren.set(id, true);\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) {\n return;\n }\n }\n onExitComplete?.();\n },\n register: () => {\n presenceChildren.set(id, false);\n return () => presenceChildren.delete(id);\n }\n };\n },\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n // @ts-expect-error its ok\n presenceAffectsLayout ? void 0 : [isPresent, custom]\n );\n React.useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n }, [isPresent]);\n React.useEffect(() => {\n !isPresent && !presenceChildren.size && onExitComplete?.();\n }, [isPresent]);\n return /* @__PURE__ */ jsx(PresenceContext.Provider, { value: context, children });\n }\n);\nfunction newChildrenMap() {\n return /* @__PURE__ */ new Map();\n}\nexport {\n PresenceChild\n};\n//# sourceMappingURL=PresenceChild.js.map\n"],"mappings":";;;;;;;AAKA,MAAM,gBAAgB,MAAM,MACzB,EACC,UACA,SACA,WACA,gBACA,uBACA,aACI;CACJ,MAAM,mBAAmB,YAAY,cAAc;CACnD,MAAM,KAAK,MAAM,KAAK;CACtB,MAAM,UAAU,MAAM;QACd;GACJ,OAAO;IACL;IACA;IACA;IACA;IACA,sBAAsB;KACpB,iBAAiB,IAAI,IAAI,IAAI;KAC7B,KAAK,MAAM,cAAc,iBAAiB,OAAO,GAAG;MAClD,IAAI,CAAC,YAAY;OACf;MACF;KACF;KACA,iBAAiB;IACnB;IACA,gBAAgB;KACd,iBAAiB,IAAI,IAAI,KAAK;KAC9B,aAAa,iBAAiB,OAAO,EAAE;IACzC;GACF;EACF;;;;;;EAOA,wBAAwB,KAAK,IAAI,CAAC,WAAW,MAAM;CACrD;CACA,MAAM,cAAc;EAClB,iBAAiB,SAAS,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;CACvE,GAAG,CAAC,SAAS,CAAC;CACd,MAAM,gBAAgB;EACpB,CAAC,aAAa,CAAC,iBAAiB,QAAQ,iBAAiB;CAC3D,GAAG,CAAC,SAAS,CAAC;CACd,OAAuB,oBAAI,gBAAgB,UAAU;EAAE,OAAO;EAAS;CAAS,CAAC;AACnF,CACF;AACA,SAAS,iBAAiB;CACxB,uBAAuB,IAAI,IAAI;AACjC"}
|
|
@@ -1,89 +1,77 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useConstant } from "@tamagui/use-constant";
|
|
3
3
|
import { PresenceContext } from "@tamagui/use-presence";
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { useId } from "react";
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]);
|
|
72
|
-
React.useMemo(function () {
|
|
73
|
-
presenceChildren.forEach(function (_, key) {
|
|
74
|
-
return presenceChildren.set(key, false);
|
|
75
|
-
});
|
|
76
|
-
}, [isPresent]);
|
|
77
|
-
React.useEffect(function () {
|
|
78
|
-
!isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
|
|
79
|
-
}, [isPresent]);
|
|
80
|
-
return /* @__PURE__ */_jsx(PresenceContext.Provider, {
|
|
81
|
-
value: context,
|
|
82
|
-
children
|
|
83
|
-
});
|
|
6
|
+
|
|
7
|
+
var PresenceChild = /* @__PURE__ */ React.memo(function(param) {
|
|
8
|
+
var { children, initial, isPresent, onExitComplete, presenceAffectsLayout, custom } = param;
|
|
9
|
+
var presenceChildren = useConstant(newChildrenMap);
|
|
10
|
+
var id = useId() || "";
|
|
11
|
+
var context = React.useMemo(
|
|
12
|
+
function() {
|
|
13
|
+
return {
|
|
14
|
+
id,
|
|
15
|
+
initial,
|
|
16
|
+
isPresent,
|
|
17
|
+
custom,
|
|
18
|
+
onExitComplete: function() {
|
|
19
|
+
presenceChildren.set(id, true);
|
|
20
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
|
|
21
|
+
try {
|
|
22
|
+
for (var _iterator = presenceChildren.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
23
|
+
var isComplete = _step.value;
|
|
24
|
+
if (!isComplete) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
} catch (err) {
|
|
29
|
+
_didIteratorError = true;
|
|
30
|
+
_iteratorError = err;
|
|
31
|
+
} finally {
|
|
32
|
+
try {
|
|
33
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
34
|
+
_iterator.return();
|
|
35
|
+
}
|
|
36
|
+
} finally {
|
|
37
|
+
if (_didIteratorError) {
|
|
38
|
+
throw _iteratorError;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
|
|
43
|
+
},
|
|
44
|
+
register: function() {
|
|
45
|
+
presenceChildren.set(id, false);
|
|
46
|
+
return function() {
|
|
47
|
+
return presenceChildren.delete(id);
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
},
|
|
52
|
+
/**
|
|
53
|
+
* If the presence of a child affects the layout of the components around it,
|
|
54
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
55
|
+
* so they can detect that layout change.
|
|
56
|
+
*/
|
|
57
|
+
presenceAffectsLayout ? void 0 : [isPresent, custom]
|
|
58
|
+
);
|
|
59
|
+
React.useMemo(function() {
|
|
60
|
+
presenceChildren.forEach(function(_, key) {
|
|
61
|
+
return presenceChildren.set(key, false);
|
|
62
|
+
});
|
|
63
|
+
}, [isPresent]);
|
|
64
|
+
React.useEffect(function() {
|
|
65
|
+
!isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
|
|
66
|
+
}, [isPresent]);
|
|
67
|
+
return /* @__PURE__ */ jsx(PresenceContext.Provider, {
|
|
68
|
+
value: context,
|
|
69
|
+
children
|
|
70
|
+
});
|
|
84
71
|
});
|
|
85
72
|
function newChildrenMap() {
|
|
86
|
-
|
|
73
|
+
return /* @__PURE__ */ new Map();
|
|
87
74
|
}
|
|
75
|
+
|
|
88
76
|
export { PresenceChild };
|
|
89
77
|
//# sourceMappingURL=PresenceChild.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"PresenceChild.native.js","names":[],"sources":["esm/PresenceChild.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useConstant } from \"@tamagui/use-constant\";\nimport { PresenceContext } from \"@tamagui/use-presence\";\nimport * as React from \"react\";\nimport { useId } from \"react\";\nvar PresenceChild = /* @__PURE__ */ React.memo(function(param) {\n var { children, initial, isPresent, onExitComplete, presenceAffectsLayout, custom } = param;\n var presenceChildren = useConstant(newChildrenMap);\n var id = useId() || \"\";\n var context = React.useMemo(\n function() {\n return {\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: function() {\n presenceChildren.set(id, true);\n var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;\n try {\n for (var _iterator = presenceChildren.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\n var isComplete = _step.value;\n if (!isComplete) {\n return;\n }\n }\n } catch (err) {\n _didIteratorError = true;\n _iteratorError = err;\n } finally {\n try {\n if (!_iteratorNormalCompletion && _iterator.return != null) {\n _iterator.return();\n }\n } finally {\n if (_didIteratorError) {\n throw _iteratorError;\n }\n }\n }\n onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();\n },\n register: function() {\n presenceChildren.set(id, false);\n return function() {\n return presenceChildren.delete(id);\n };\n }\n };\n },\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n // @ts-expect-error its ok\n presenceAffectsLayout ? void 0 : [\n isPresent,\n custom\n ]\n );\n React.useMemo(function() {\n presenceChildren.forEach(function(_, key) {\n return presenceChildren.set(key, false);\n });\n }, [\n isPresent\n ]);\n React.useEffect(function() {\n !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());\n }, [\n isPresent\n ]);\n return /* @__PURE__ */ _jsx(PresenceContext.Provider, {\n value: context,\n children\n });\n});\nfunction newChildrenMap() {\n return /* @__PURE__ */ new Map();\n}\nexport {\n PresenceChild\n};\n//# sourceMappingURL=PresenceChild.js.map\n"],"mappings":";;;;;;;AAKA,IAAI,gBAAgC,sBAAM,KAAK,SAAS,OAAO;CAC7D,IAAI,EAAE,UAAU,SAAS,WAAW,gBAAgB,uBAAuB,WAAW;CACtF,IAAI,mBAAmB,YAAY,cAAc;CACjD,IAAI,KAAK,MAAM,KAAK;CACpB,IAAI,UAAU,MAAM;EAClB,WAAW;GACT,OAAO;IACL;IACA;IACA;IACA;IACA,gBAAgB,WAAW;KACzB,iBAAiB,IAAI,IAAI,IAAI;KAC7B,IAAI,4BAA4B,MAAM,oBAAoB,OAAO,iBAAiB,KAAK;KACvF,IAAI;MACF,KAAK,IAAI,YAAY,iBAAiB,OAAO,EAAE,OAAO,UAAU,GAAG,OAAO,EAAE,6BAA6B,QAAQ,UAAU,KAAK,GAAG,OAAO,4BAA4B,MAAM;OAC1K,IAAI,aAAa,MAAM;OACvB,IAAI,CAAC,YAAY;QACf;OACF;MACF;KACF,SAAS,KAAK;MACZ,oBAAoB;MACpB,iBAAiB;KACnB,UAAU;MACR,IAAI;OACF,IAAI,CAAC,6BAA6B,UAAU,UAAU,MAAM;QAC1D,UAAU,OAAO;OACnB;MACF,UAAU;OACR,IAAI,mBAAmB;QACrB,MAAM;OACR;MACF;KACF;KACA,mBAAmB,QAAQ,mBAAmB,KAAK,IAAI,KAAK,IAAI,eAAe;IACjF;IACA,UAAU,WAAW;KACnB,iBAAiB,IAAI,IAAI,KAAK;KAC9B,OAAO,WAAW;MAChB,OAAO,iBAAiB,OAAO,EAAE;KACnC;IACF;GACF;EACF;;;;;;EAOA,wBAAwB,KAAK,IAAI,CAC/B,WACA,MACF;CACF;CACA,MAAM,QAAQ,WAAW;EACvB,iBAAiB,QAAQ,SAAS,GAAG,KAAK;GACxC,OAAO,iBAAiB,IAAI,KAAK,KAAK;EACxC,CAAC;CACH,GAAG,CACD,SACF,CAAC;CACD,MAAM,UAAU,WAAW;EACzB,CAAC,aAAa,CAAC,iBAAiB,SAAS,mBAAmB,QAAQ,mBAAmB,KAAK,IAAI,KAAK,IAAI,eAAe;CAC1H,GAAG,CACD,SACF,CAAC;CACD,OAAuB,oBAAK,gBAAgB,UAAU;EACpD,OAAO;EACP;CACF,CAAC;AACH,CAAC;AACD,SAAS,iBAAiB;CACxB,uBAAuB,IAAI,IAAI;AACjC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
export * from "./AnimatePresence.mjs"
|
|
2
|
-
|
|
3
|
-
export * from "
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
export * from "./AnimatePresence.mjs"
|
|
2
|
+
|
|
3
|
+
export * from "@tamagui/use-presence"
|
|
4
|
+
|
|
5
|
+
export * from "./types.mjs"
|
|
6
|
+
|
|
7
|
+
export * from "./PresenceChild.mjs"
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
export * from "./AnimatePresence.mjs"
|
|
2
|
-
|
|
3
|
-
export * from "
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
export * from "./AnimatePresence.mjs"
|
|
2
|
+
|
|
3
|
+
export * from "@tamagui/use-presence"
|
|
4
|
+
|
|
5
|
+
export * from "./types.mjs"
|
|
6
|
+
|
|
7
|
+
export * from "./PresenceChild.mjs"
|
package/dist/esm/index.native.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
export * from "./AnimatePresence.native.js"
|
|
2
|
-
|
|
3
|
-
export * from "
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
export * from "./AnimatePresence.native.js"
|
|
2
|
+
|
|
3
|
+
export * from "@tamagui/use-presence"
|
|
4
|
+
|
|
5
|
+
export * from "./types.native.js"
|
|
6
|
+
|
|
7
|
+
export * from "./PresenceChild.native.js"
|
package/dist/esm/types.mjs
CHANGED
package/dist/esm/types.native.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animate-presence",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-beta.643.1",
|
|
4
4
|
"gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"clean:build": "tamagui-build clean:build"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@tamagui/constants": "
|
|
40
|
-
"@tamagui/helpers": "
|
|
41
|
-
"@tamagui/use-constant": "
|
|
42
|
-
"@tamagui/use-force-update": "
|
|
43
|
-
"@tamagui/use-presence": "
|
|
44
|
-
"@tamagui/web": "
|
|
39
|
+
"@tamagui/constants": "3.0.0-beta.643.1",
|
|
40
|
+
"@tamagui/helpers": "3.0.0-beta.643.1",
|
|
41
|
+
"@tamagui/use-constant": "3.0.0-beta.643.1",
|
|
42
|
+
"@tamagui/use-force-update": "3.0.0-beta.643.1",
|
|
43
|
+
"@tamagui/use-presence": "3.0.0-beta.643.1",
|
|
44
|
+
"@tamagui/web": "3.0.0-beta.643.1"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@tamagui/build": "
|
|
47
|
+
"@tamagui/build": "3.0.0-beta.643.1",
|
|
48
48
|
"react": ">=19"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
package/src/AnimatePresence.tsx
CHANGED
|
@@ -10,19 +10,7 @@ import type { AnimatePresenceProps } from './types'
|
|
|
10
10
|
type ComponentKey = string | number
|
|
11
11
|
|
|
12
12
|
const getChildKey = (child: ReactElement<any>): ComponentKey => {
|
|
13
|
-
return
|
|
14
|
-
child.key ||
|
|
15
|
-
(() => {
|
|
16
|
-
// we can help a bit by falling back to tamagui name or component name
|
|
17
|
-
const ct = child.type
|
|
18
|
-
const defaultName = ct['displayName'] || ct['name'] || ''
|
|
19
|
-
if (ct && typeof ct === 'object' && 'staticConfig' in ct) {
|
|
20
|
-
// @ts-expect-error
|
|
21
|
-
return ct.staticConfig.componentName || defaultName
|
|
22
|
-
}
|
|
23
|
-
return defaultName
|
|
24
|
-
})()
|
|
25
|
-
)
|
|
13
|
+
return child.key ?? ''
|
|
26
14
|
}
|
|
27
15
|
|
|
28
16
|
function onlyElements(children: ReactNode): ReactElement<any>[] {
|
|
@@ -38,20 +26,13 @@ export const AnimatePresence: FunctionComponent<
|
|
|
38
26
|
PropsWithChildren<AnimatePresenceProps>
|
|
39
27
|
> = ({
|
|
40
28
|
children,
|
|
41
|
-
enterVariant,
|
|
42
|
-
exitVariant,
|
|
43
|
-
enterExitVariant,
|
|
44
29
|
initial = true,
|
|
45
30
|
onExitComplete,
|
|
46
|
-
|
|
47
|
-
mode,
|
|
31
|
+
mode = 'sync',
|
|
48
32
|
presenceAffectsLayout = true,
|
|
49
33
|
custom,
|
|
50
34
|
passThrough,
|
|
51
35
|
}) => {
|
|
52
|
-
// Determine effective mode: mode prop takes precedence, then exitBeforeEnter for backwards compatibility
|
|
53
|
-
const effectiveMode = mode ?? (exitBeforeEnter ? 'wait' : 'sync')
|
|
54
|
-
|
|
55
36
|
/**
|
|
56
37
|
* Filter any children that aren't ReactElements. We can only track components
|
|
57
38
|
* between renders with a props.key.
|
|
@@ -156,7 +137,7 @@ export const AnimatePresence: FunctionComponent<
|
|
|
156
137
|
const exitingChildren = renderedChildren.filter(
|
|
157
138
|
(child) => !presentKeys.includes(getChildKey(child))
|
|
158
139
|
)
|
|
159
|
-
if (
|
|
140
|
+
if (mode === 'wait' && exitingChildren.length) {
|
|
160
141
|
nextChildren = exitingChildren
|
|
161
142
|
}
|
|
162
143
|
|
|
@@ -203,9 +184,6 @@ export const AnimatePresence: FunctionComponent<
|
|
|
203
184
|
initial={!isInitialRender.current || initial ? undefined : false}
|
|
204
185
|
custom={isPresent ? custom : (frozenCustomRef.current.get(key) ?? custom)}
|
|
205
186
|
presenceAffectsLayout={presenceAffectsLayout}
|
|
206
|
-
enterExitVariant={enterExitVariant}
|
|
207
|
-
enterVariant={enterVariant}
|
|
208
|
-
exitVariant={exitVariant}
|
|
209
187
|
onExitComplete={isPresent ? undefined : onExit}
|
|
210
188
|
>
|
|
211
189
|
{child}
|
package/src/PresenceChild.tsx
CHANGED
|
@@ -13,9 +13,6 @@ interface PresenceChildProps {
|
|
|
13
13
|
initial?: false | VariantLabels
|
|
14
14
|
custom?: any
|
|
15
15
|
presenceAffectsLayout?: boolean
|
|
16
|
-
exitVariant?: string | null
|
|
17
|
-
enterVariant?: string | null
|
|
18
|
-
enterExitVariant?: string | null
|
|
19
16
|
}
|
|
20
17
|
|
|
21
18
|
// this memo seems to help PopoverContent from continuously re-rendering when open
|
|
@@ -25,9 +22,6 @@ export const PresenceChild = React.memo(
|
|
|
25
22
|
initial,
|
|
26
23
|
isPresent,
|
|
27
24
|
onExitComplete,
|
|
28
|
-
exitVariant,
|
|
29
|
-
enterVariant,
|
|
30
|
-
enterExitVariant,
|
|
31
25
|
presenceAffectsLayout,
|
|
32
26
|
custom,
|
|
33
27
|
}: PresenceChildProps) => {
|
|
@@ -41,9 +35,6 @@ export const PresenceChild = React.memo(
|
|
|
41
35
|
initial,
|
|
42
36
|
isPresent,
|
|
43
37
|
custom,
|
|
44
|
-
exitVariant,
|
|
45
|
-
enterVariant,
|
|
46
|
-
enterExitVariant,
|
|
47
38
|
onExitComplete: () => {
|
|
48
39
|
presenceChildren.set(id, true)
|
|
49
40
|
for (const isComplete of presenceChildren.values()) {
|
|
@@ -66,7 +57,7 @@ export const PresenceChild = React.memo(
|
|
|
66
57
|
*/
|
|
67
58
|
|
|
68
59
|
// @ts-expect-error its ok
|
|
69
|
-
presenceAffectsLayout ? undefined : [isPresent,
|
|
60
|
+
presenceAffectsLayout ? undefined : [isPresent, custom]
|
|
70
61
|
)
|
|
71
62
|
|
|
72
63
|
React.useMemo(() => {
|
package/src/types.ts
CHANGED
|
@@ -71,14 +71,6 @@ export interface AnimatePresenceProps {
|
|
|
71
71
|
*/
|
|
72
72
|
onExitComplete?: () => void
|
|
73
73
|
|
|
74
|
-
/**
|
|
75
|
-
* If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component
|
|
76
|
-
* will finish its exit animation before the entering component is rendered.
|
|
77
|
-
*
|
|
78
|
-
* @deprecated Use `mode="wait"` instead.
|
|
79
|
-
*/
|
|
80
|
-
exitBeforeEnter?: boolean
|
|
81
|
-
|
|
82
74
|
/**
|
|
83
75
|
* Used in Framer to flag that sibling children *shouldn't* re-render as a result of a
|
|
84
76
|
* child being removed.
|
|
@@ -87,21 +79,5 @@ export interface AnimatePresenceProps {
|
|
|
87
79
|
*/
|
|
88
80
|
presenceAffectsLayout?: boolean
|
|
89
81
|
|
|
90
|
-
/**
|
|
91
|
-
* @deprecated use `custom` passing it an Object instead
|
|
92
|
-
*/
|
|
93
|
-
exitVariant?: string | null
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* @deprecated use `custom` passing it an Object instead
|
|
97
|
-
*/
|
|
98
|
-
enterVariant?: string | null
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
* Will use a variant on the child component and apply the true styles for when its entering, false styles for when its exiting
|
|
102
|
-
* @deprecated use `custom` passing it an Object instead
|
|
103
|
-
*/
|
|
104
|
-
enterExitVariant?: string | null
|
|
105
|
-
|
|
106
82
|
passThrough?: boolean
|
|
107
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatePresence.d.ts","sourceRoot":"","sources":["../src/AnimatePresence.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAA;AAI1F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"AnimatePresence.d.ts","sourceRoot":"","sources":["../src/AnimatePresence.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAA;AAI1F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAiBnD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAC7C,iBAAiB,CAAC,oBAAoB,CAAC,CAyKxC,CAAA"}
|