@tamagui/animate-presence 1.1.7 → 1.1.9
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.js +46 -34
- package/dist/cjs/AnimatePresence.js.map +1 -1
- package/dist/cjs/PresenceChild.js +11 -4
- package/dist/cjs/PresenceChild.js.map +1 -1
- package/dist/esm/AnimatePresence.js +42 -34
- package/dist/esm/AnimatePresence.js.map +1 -1
- package/dist/esm/PresenceChild.js +7 -4
- package/dist/esm/PresenceChild.js.map +1 -1
- package/dist/jsx/AnimatePresence.js +37 -17
- package/dist/jsx/AnimatePresence.js.map +1 -1
- package/dist/jsx/PresenceChild.js +6 -0
- package/dist/jsx/PresenceChild.js.map +1 -1
- package/package.json +4 -4
- package/dist/cjs/PresenceContext.js +0 -30
- package/dist/cjs/PresenceContext.js.map +0 -7
- package/dist/cjs/usePresence.js +0 -52
- package/dist/cjs/usePresence.js.map +0 -7
- package/dist/esm/PresenceContext.js +0 -6
- package/dist/esm/PresenceContext.js.map +0 -7
- package/dist/esm/usePresence.js +0 -26
- package/dist/esm/usePresence.js.map +0 -7
- package/dist/jsx/PresenceContext.js +0 -6
- package/dist/jsx/PresenceContext.js.map +0 -7
- package/dist/jsx/usePresence.js +0 -26
- package/dist/jsx/usePresence.js.map +0 -7
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -106,16 +110,18 @@ const AnimatePresence = ({
|
|
|
106
110
|
});
|
|
107
111
|
const hasWarned = process.env.NODE_ENV === "development" ? (0, import_react.useRef)(false) : null;
|
|
108
112
|
if (isInitialRender.current) {
|
|
109
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
|
|
110
|
-
|
|
113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: childrenToRender.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
114
|
+
import_PresenceChild.PresenceChild,
|
|
115
|
+
{
|
|
111
116
|
isPresent: Boolean(isClientMounted ? true : isMounted.current),
|
|
112
117
|
exitVariant,
|
|
113
118
|
enterVariant,
|
|
114
119
|
initial: initial ? void 0 : false,
|
|
115
120
|
presenceAffectsLayout,
|
|
116
121
|
children: child
|
|
117
|
-
},
|
|
118
|
-
|
|
122
|
+
},
|
|
123
|
+
getChildKey(child)
|
|
124
|
+
)) });
|
|
119
125
|
}
|
|
120
126
|
childrenToRender = [...childrenToRender];
|
|
121
127
|
const presentKeys = presentChildren.current.map(getChildKey);
|
|
@@ -140,40 +146,48 @@ const AnimatePresence = ({
|
|
|
140
146
|
childrenToRender.splice(
|
|
141
147
|
insertionIndex,
|
|
142
148
|
0,
|
|
143
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
(
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
presentChildren.current
|
|
154
|
-
if (
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
149
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
150
|
+
import_PresenceChild.PresenceChild,
|
|
151
|
+
{
|
|
152
|
+
isPresent: false,
|
|
153
|
+
onExitComplete: () => {
|
|
154
|
+
allChildren.delete(key);
|
|
155
|
+
exiting.delete(key);
|
|
156
|
+
const removeIndex = presentChildren.current.findIndex(
|
|
157
|
+
(presentChild) => presentChild.key === key
|
|
158
|
+
);
|
|
159
|
+
presentChildren.current.splice(removeIndex, 1);
|
|
160
|
+
if (!exiting.size) {
|
|
161
|
+
presentChildren.current = filteredChildren;
|
|
162
|
+
if (isMounted.current === false)
|
|
163
|
+
return;
|
|
164
|
+
forceRender();
|
|
165
|
+
onExitComplete == null ? void 0 : onExitComplete();
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
exitVariant,
|
|
169
|
+
enterVariant,
|
|
170
|
+
presenceAffectsLayout,
|
|
171
|
+
children: child
|
|
159
172
|
},
|
|
173
|
+
getChildKey(child)
|
|
174
|
+
)
|
|
175
|
+
);
|
|
176
|
+
});
|
|
177
|
+
childrenToRender = childrenToRender.map((child) => {
|
|
178
|
+
const key = child.key;
|
|
179
|
+
return exiting.has(key) ? child : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
180
|
+
import_PresenceChild.PresenceChild,
|
|
181
|
+
{
|
|
182
|
+
isPresent: true,
|
|
160
183
|
exitVariant,
|
|
161
184
|
enterVariant,
|
|
162
185
|
presenceAffectsLayout,
|
|
163
186
|
children: child
|
|
164
|
-
},
|
|
187
|
+
},
|
|
188
|
+
getChildKey(child)
|
|
165
189
|
);
|
|
166
190
|
});
|
|
167
|
-
childrenToRender = childrenToRender.map((child) => {
|
|
168
|
-
const key = child.key;
|
|
169
|
-
return exiting.has(key) ? child : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PresenceChild.PresenceChild, {
|
|
170
|
-
isPresent: true,
|
|
171
|
-
exitVariant,
|
|
172
|
-
enterVariant,
|
|
173
|
-
presenceAffectsLayout,
|
|
174
|
-
children: child
|
|
175
|
-
}, getChildKey(child));
|
|
176
|
-
});
|
|
177
191
|
if (process.env.NODE_ENV === "development") {
|
|
178
192
|
const shouldWarn = exitBeforeEnter && childrenToRender.length > 1;
|
|
179
193
|
if (shouldWarn && hasWarned && !hasWarned.current) {
|
|
@@ -183,9 +197,7 @@ const AnimatePresence = ({
|
|
|
183
197
|
);
|
|
184
198
|
}
|
|
185
199
|
}
|
|
186
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
|
|
187
|
-
children: exiting.size ? childrenToRender : childrenToRender.map((child) => (0, import_react.cloneElement)(child))
|
|
188
|
-
});
|
|
200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: exiting.size ? childrenToRender : childrenToRender.map((child) => (0, import_react.cloneElement)(child)) });
|
|
189
201
|
};
|
|
190
202
|
AnimatePresence.displayName = "AnimatePresence";
|
|
191
203
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimatePresence.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n useDidFinishSSR,\n useForceUpdate,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport React, {\n Children,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useContext,\n useEffect,\n useRef,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\nimport { AnimatePresenceProps } from './types'\n\ntype ComponentKey = string | number\n\nconst getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\nfunction updateChildLookup(\n children: ReactElement<any>[],\n allChildren: Map<ComponentKey, ReactElement<any>>,\n) {\n const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n children.forEach((child) => {\n const key = getChildKey(child)\n\n if (isDev && seenChildren && seenChildren.has(key)) {\n // eslint-disable-next-line no-console\n console.warn(\n `Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`,\n )\n\n seenChildren.add(key)\n }\n\n allChildren.set(key, child)\n })\n}\n\nfunction onlyElements(children: ReactNode): ReactElement<any>[] {\n const filtered: ReactElement<any>[] = []\n\n // We use forEach here instead of map as map mutates the component key by preprending `.$`\n Children.forEach(children, (child, index) => {\n if (isValidElement(child)) {\n if (!child.key) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n 'No key given to AnimatePresence child, assigning index as key',\n )\n }\n filtered.push(\n React.cloneElement(child, {\n key: index,\n }),\n )\n } else {\n filtered.push(child)\n }\n }\n })\n\n return filtered\n}\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```tsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n * <AnimatePresence>\n * {items.map(item => (\n * <motion.div\n * key={item.id}\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * ))}\n * </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nexport const AnimatePresence: React.FunctionComponent<\n React.PropsWithChildren<AnimatePresenceProps>\n> = ({\n children,\n enterVariant,\n exitVariant,\n initial = true,\n onExitComplete,\n exitBeforeEnter,\n presenceAffectsLayout = true,\n}) => {\n // We want to force a re-render once all exiting animations have finished. We\n // either use a local forceRender function, or one from a parent context if it exists.\n let forceRender = useForceUpdate()\n const isClientMounted = useDidFinishSSR()\n const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n const isMounted = useRef(false)\n\n // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n const filteredChildren = onlyElements(children)\n let childrenToRender = filteredChildren\n\n const exiting = new Set<ComponentKey>()\n\n // Keep a living record of the children we're actually rendering so we\n // can diff to figure out which are entering and exiting\n const presentChildren = useRef(childrenToRender)\n\n // A lookup table to quickly reference components by key\n const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n // If this is the initial component render, just deal with logic surrounding whether\n // we play onMount animations or not.\n const isInitialRender = useRef(true)\n\n useEffect(() => {\n isMounted.current = true\n return () => {\n isMounted.current = false\n isInitialRender.current = true\n allChildren.clear()\n exiting.clear()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useIsomorphicLayoutEffect(() => {\n isInitialRender.current = false\n updateChildLookup(filteredChildren, allChildren)\n presentChildren.current = childrenToRender\n })\n\n const hasWarned = process.env.NODE_ENV === 'development' ? useRef(false) : null\n\n if (isInitialRender.current) {\n return (\n <>\n {childrenToRender.map((child) => (\n <PresenceChild\n key={getChildKey(child)}\n isPresent={Boolean(isClientMounted ? true : isMounted.current)}\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n initial={initial ? undefined : false}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>\n ))}\n </>\n )\n }\n\n // If this is a subsequent render, deal with entering and exiting children\n childrenToRender = [...childrenToRender]\n\n // Diff the keys of the currently-present and target children to update our\n // exiting list.\n const presentKeys = presentChildren.current.map(getChildKey)\n const targetKeys = filteredChildren.map(getChildKey)\n\n // Diff the present children with our target children and mark those that are exiting\n const numPresent = presentKeys.length\n for (let i = 0; i < numPresent; i++) {\n const key = presentKeys[i]\n if (targetKeys.indexOf(key) === -1) {\n exiting.add(key)\n }\n }\n\n // If we currently have exiting children, and we're deferring rendering incoming children\n // until after all current children have exiting, empty the childrenToRender array\n if (exitBeforeEnter && exiting.size) {\n childrenToRender = []\n }\n\n // Loop through all currently exiting components and clone them to overwrite `animate`\n // with any `exit` prop they might have defined.\n exiting.forEach((key) => {\n // If this component is actually entering again, early return\n if (targetKeys.indexOf(key) !== -1) return\n\n const child = allChildren.get(key)\n if (!child) return\n\n const insertionIndex = presentKeys.indexOf(key)\n\n childrenToRender.splice(\n insertionIndex,\n 0,\n <PresenceChild\n key={getChildKey(child)}\n isPresent={false}\n onExitComplete={() => {\n allChildren.delete(key)\n exiting.delete(key)\n\n // Remove this child from the present children\n const removeIndex = presentChildren.current.findIndex(\n (presentChild) => presentChild.key === key,\n )\n presentChildren.current.splice(removeIndex, 1)\n\n // Defer re-rendering until all exiting children have indeed left\n if (!exiting.size) {\n presentChildren.current = filteredChildren\n\n if (isMounted.current === false) return\n\n forceRender()\n onExitComplete?.()\n }\n }}\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>,\n )\n })\n\n // Add `MotionContext` even to children that don't need it to ensure we're rendering\n // the same tree between renders\n childrenToRender = childrenToRender.map((child) => {\n const key = child.key as string | number\n return exiting.has(key) ? (\n child\n ) : (\n <PresenceChild\n key={getChildKey(child)}\n isPresent\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>\n )\n })\n\n if (process.env.NODE_ENV === 'development') {\n const shouldWarn = exitBeforeEnter && childrenToRender.length > 1\n if (shouldWarn && hasWarned && !hasWarned.current) {\n hasWarned.current = true\n // eslint-disable-next-line no-console\n console.log(\n `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This can lead to odd visual behaviour.`,\n )\n }\n }\n\n return (\n <>\n {exiting.size\n ? childrenToRender\n : childrenToRender.map((child) => cloneElement(child))}\n </>\n )\n}\n\nAnimatePresence.displayName = 'AnimatePresence'\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsKM;AAtKN,kBAIO;AACP,mBASO;AAEP,gCAAmC;AACnC,2BAA8B;AAK9B,MAAM,cAAc,CAAC,UAA2C,MAAM,OAAO;AAE7E,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,SAAS,kBACP,UACA,aACA;AACA,QAAM,eAAe,QAAQ,oBAAI,IAAkB,IAAI;AAEvD,WAAS,QAAQ,CAAC,UAAU;AAC1B,UAAM,MAAM,YAAY,KAAK;AAE7B,QAAI,SAAS,gBAAgB,aAAa,IAAI,GAAG,GAAG;AAElD,cAAQ;AAAA,QACN,qDAAqD;AAAA,MACvD;AAEA,mBAAa,IAAI,GAAG;AAAA,IACtB;AAEA,gBAAY,IAAI,KAAK,KAAK;AAAA,EAC5B,CAAC;AACH;AAEA,SAAS,aAAa,UAA0C;AAC9D,QAAM,WAAgC,CAAC;AAGvC,wBAAS,QAAQ,UAAU,CAAC,OAAO,UAAU;AAC3C,YAAI,6BAAe,KAAK,GAAG;AACzB,UAAI,CAAC,MAAM,KAAK;AACd,YAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AACA,iBAAS;AAAA,UACP,aAAAA,QAAM,aAAa,OAAO;AAAA,YACxB,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,MACF,OAAO;AACL,iBAAS,KAAK,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAmCO,MAAM,kBAET,CAAC;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,wBAAwB;AAC1B,MAAM;AAGJ,MAAI,kBAAc,4BAAe;AACjC,QAAM,sBAAkB,6BAAgB;AACxC,QAAM,6BAAyB,yBAAW,4CAAkB,EAAE;AAC9D,MAAI;AAAwB,kBAAc;AAE1C,QAAM,gBAAY,qBAAO,KAAK;AAG9B,QAAM,mBAAmB,aAAa,QAAQ;AAC9C,MAAI,mBAAmB;AAEvB,QAAM,UAAU,oBAAI,IAAkB;AAItC,QAAM,sBAAkB,qBAAO,gBAAgB;AAG/C,QAAM,kBAAc,qBAAO,oBAAI,IAAqC,CAAC,EAAE;AAIvE,QAAM,sBAAkB,qBAAO,IAAI;AAEnC,8BAAU,MAAM;AACd,cAAU,UAAU;AACpB,WAAO,MAAM;AACX,gBAAU,UAAU;AACpB,sBAAgB,UAAU;AAC1B,kBAAY,MAAM;AAClB,cAAQ,MAAM;AAAA,IAChB;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,6CAA0B,MAAM;AAC9B,oBAAgB,UAAU;AAC1B,sBAAkB,kBAAkB,WAAW;AAC/C,oBAAgB,UAAU;AAAA,EAC5B,CAAC;AAED,QAAM,YAAY,QAAQ,IAAI,aAAa,oBAAgB,qBAAO,KAAK,IAAI;AAE3E,MAAI,gBAAgB,SAAS;AAC3B,WACE,2EACG,2BAAiB,IAAI,CAAC,UACrB;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,QAAQ,kBAAkB,OAAO,UAAU,OAAO;AAAA,QAC7D;AAAA,QACA;AAAA,QACA,SAAS,UAAU,SAAY;AAAA,QAC/B;AAAA,QAEC;AAAA;AAAA,MAPI,YAAY,KAAK;AAAA,IAQxB,CACD,GACH;AAAA,EAEJ;AAGA,qBAAmB,CAAC,GAAG,gBAAgB;AAIvC,QAAM,cAAc,gBAAgB,QAAQ,IAAI,WAAW;AAC3D,QAAM,aAAa,iBAAiB,IAAI,WAAW;AAGnD,QAAM,aAAa,YAAY;AAC/B,WAAS,IAAI,GAAG,IAAI,YAAY,KAAK;AACnC,UAAM,MAAM,YAAY,CAAC;AACzB,QAAI,WAAW,QAAQ,GAAG,MAAM,IAAI;AAClC,cAAQ,IAAI,GAAG;AAAA,IACjB;AAAA,EACF;AAIA,MAAI,mBAAmB,QAAQ,MAAM;AACnC,uBAAmB,CAAC;AAAA,EACtB;AAIA,UAAQ,QAAQ,CAAC,QAAQ;AAEvB,QAAI,WAAW,QAAQ,GAAG,MAAM;AAAI;AAEpC,UAAM,QAAQ,YAAY,IAAI,GAAG;AACjC,QAAI,CAAC;AAAO;AAEZ,UAAM,iBAAiB,YAAY,QAAQ,GAAG;AAE9C,qBAAiB;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW;AAAA,UACX,gBAAgB,MAAM;AACpB,wBAAY,OAAO,GAAG;AACtB,oBAAQ,OAAO,GAAG;AAGlB,kBAAM,cAAc,gBAAgB,QAAQ;AAAA,cAC1C,CAAC,iBAAiB,aAAa,QAAQ;AAAA,YACzC;AACA,4BAAgB,QAAQ,OAAO,aAAa,CAAC;AAG7C,gBAAI,CAAC,QAAQ,MAAM;AACjB,8BAAgB,UAAU;AAE1B,kBAAI,UAAU,YAAY;AAAO;AAEjC,0BAAY;AACZ;AAAA,YACF;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,QA1BI,YAAY,KAAK;AAAA,MA2BxB;AAAA,IACF;AAAA,EACF,CAAC;AAID,qBAAmB,iBAAiB,IAAI,CAAC,UAAU;AACjD,UAAM,MAAM,MAAM;AAClB,WAAO,QAAQ,IAAI,GAAG,IACpB,QAEA;AAAA,MAAC;AAAA;AAAA,QAEC,WAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,MANI,YAAY,KAAK;AAAA,IAOxB;AAAA,EAEJ,CAAC;AAED,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,aAAa,mBAAmB,iBAAiB,SAAS;AAChE,QAAI,cAAc,aAAa,CAAC,UAAU,SAAS;AACjD,gBAAU,UAAU;AAEpB,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE,2EACG,kBAAQ,OACL,mBACA,iBAAiB,IAAI,CAAC,cAAU,2BAAa,KAAK,CAAC,GACzD;AAEJ;AAEA,gBAAgB,cAAc;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -65,6 +69,12 @@ const PresenceChild = ({
|
|
|
65
69
|
}
|
|
66
70
|
};
|
|
67
71
|
},
|
|
72
|
+
/**
|
|
73
|
+
* If the presence of a child affects the layout of the components around it,
|
|
74
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
75
|
+
* so they can detect that layout change.
|
|
76
|
+
*/
|
|
77
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
78
|
presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]
|
|
69
79
|
);
|
|
70
80
|
React.useMemo(() => {
|
|
@@ -73,10 +83,7 @@ const PresenceChild = ({
|
|
|
73
83
|
React.useEffect(() => {
|
|
74
84
|
!(isPresent || presenceChildren.size) && (onExitComplete == null ? void 0 : onExitComplete());
|
|
75
85
|
}, [isPresent]);
|
|
76
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_use_presence.PresenceContext.Provider, {
|
|
77
|
-
value: context,
|
|
78
|
-
children
|
|
79
|
-
});
|
|
86
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_use_presence.PresenceContext.Provider, { value: context, children });
|
|
80
87
|
};
|
|
81
88
|
function newChildrenMap() {
|
|
82
89
|
return /* @__PURE__ */ new Map();
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/PresenceChild.tsx"],
|
|
4
4
|
"sourcesContent": ["import type { PresenceContextProps } from '@tamagui/core'\nimport { PresenceContext } from '@tamagui/use-presence'\nimport * as React from 'react'\nimport { useId } from 'react'\n\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n children: React.ReactElement<any>\n isPresent: boolean\n onExitComplete?: () => void\n initial?: false | VariantLabels\n custom?: any\n presenceAffectsLayout: boolean\n exitVariant?: string | null\n enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isPresent,\n onExitComplete,\n exitVariant,\n enterVariant,\n presenceAffectsLayout,\n}: PresenceChildProps) => {\n const presenceChildren = React.useMemo(newChildrenMap, [])\n const id = useId() || ''\n\n const context = React.useMemo(\n (): PresenceContextProps => {\n return {\n id,\n initial,\n isPresent,\n exitVariant,\n enterVariant,\n onExitComplete: (id: string) => {\n presenceChildren.set(id, true)\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) {\n return // can stop searching when any is incomplete\n }\n }\n onExitComplete?.()\n },\n register: (id: string) => {\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 // eslint-disable-next-line react-hooks/exhaustive-deps\n presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant],\n )\n\n React.useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isPresent])\n\n /**\n * If there's no animated components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !(isPresent || presenceChildren.size) && onExitComplete?.()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isPresent])\n\n return (\n <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n return new Map()\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6EI;AA5EJ,0BAAgC;AAChC,YAAuB;AACvB,mBAAsB;AAef,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC;AACzD,QAAM,SAAK,oBAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA;AAAA,QACF;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,MAAE,aAAa,iBAAiB,UAAS;AAAA,EAE3C,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,4CAAC,oCAAgB,UAAhB,EAAyB,OAAO,SAAU,UAAS;AAExD;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
|
|
6
6
|
"names": ["id"]
|
|
7
7
|
}
|
|
@@ -88,16 +88,18 @@ const AnimatePresence = ({
|
|
|
88
88
|
});
|
|
89
89
|
const hasWarned = process.env.NODE_ENV === "development" ? useRef(false) : null;
|
|
90
90
|
if (isInitialRender.current) {
|
|
91
|
-
return /* @__PURE__ */ jsx(Fragment, {
|
|
92
|
-
|
|
91
|
+
return /* @__PURE__ */ jsx(Fragment, { children: childrenToRender.map((child) => /* @__PURE__ */ jsx(
|
|
92
|
+
PresenceChild,
|
|
93
|
+
{
|
|
93
94
|
isPresent: Boolean(isClientMounted ? true : isMounted.current),
|
|
94
95
|
exitVariant,
|
|
95
96
|
enterVariant,
|
|
96
97
|
initial: initial ? void 0 : false,
|
|
97
98
|
presenceAffectsLayout,
|
|
98
99
|
children: child
|
|
99
|
-
},
|
|
100
|
-
|
|
100
|
+
},
|
|
101
|
+
getChildKey(child)
|
|
102
|
+
)) });
|
|
101
103
|
}
|
|
102
104
|
childrenToRender = [...childrenToRender];
|
|
103
105
|
const presentKeys = presentChildren.current.map(getChildKey);
|
|
@@ -122,40 +124,48 @@ const AnimatePresence = ({
|
|
|
122
124
|
childrenToRender.splice(
|
|
123
125
|
insertionIndex,
|
|
124
126
|
0,
|
|
125
|
-
/* @__PURE__ */ jsx(
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
(
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
presentChildren.current
|
|
136
|
-
if (
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
127
|
+
/* @__PURE__ */ jsx(
|
|
128
|
+
PresenceChild,
|
|
129
|
+
{
|
|
130
|
+
isPresent: false,
|
|
131
|
+
onExitComplete: () => {
|
|
132
|
+
allChildren.delete(key);
|
|
133
|
+
exiting.delete(key);
|
|
134
|
+
const removeIndex = presentChildren.current.findIndex(
|
|
135
|
+
(presentChild) => presentChild.key === key
|
|
136
|
+
);
|
|
137
|
+
presentChildren.current.splice(removeIndex, 1);
|
|
138
|
+
if (!exiting.size) {
|
|
139
|
+
presentChildren.current = filteredChildren;
|
|
140
|
+
if (isMounted.current === false)
|
|
141
|
+
return;
|
|
142
|
+
forceRender();
|
|
143
|
+
onExitComplete == null ? void 0 : onExitComplete();
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
exitVariant,
|
|
147
|
+
enterVariant,
|
|
148
|
+
presenceAffectsLayout,
|
|
149
|
+
children: child
|
|
141
150
|
},
|
|
151
|
+
getChildKey(child)
|
|
152
|
+
)
|
|
153
|
+
);
|
|
154
|
+
});
|
|
155
|
+
childrenToRender = childrenToRender.map((child) => {
|
|
156
|
+
const key = child.key;
|
|
157
|
+
return exiting.has(key) ? child : /* @__PURE__ */ jsx(
|
|
158
|
+
PresenceChild,
|
|
159
|
+
{
|
|
160
|
+
isPresent: true,
|
|
142
161
|
exitVariant,
|
|
143
162
|
enterVariant,
|
|
144
163
|
presenceAffectsLayout,
|
|
145
164
|
children: child
|
|
146
|
-
},
|
|
165
|
+
},
|
|
166
|
+
getChildKey(child)
|
|
147
167
|
);
|
|
148
168
|
});
|
|
149
|
-
childrenToRender = childrenToRender.map((child) => {
|
|
150
|
-
const key = child.key;
|
|
151
|
-
return exiting.has(key) ? child : /* @__PURE__ */ jsx(PresenceChild, {
|
|
152
|
-
isPresent: true,
|
|
153
|
-
exitVariant,
|
|
154
|
-
enterVariant,
|
|
155
|
-
presenceAffectsLayout,
|
|
156
|
-
children: child
|
|
157
|
-
}, getChildKey(child));
|
|
158
|
-
});
|
|
159
169
|
if (process.env.NODE_ENV === "development") {
|
|
160
170
|
const shouldWarn = exitBeforeEnter && childrenToRender.length > 1;
|
|
161
171
|
if (shouldWarn && hasWarned && !hasWarned.current) {
|
|
@@ -165,9 +175,7 @@ const AnimatePresence = ({
|
|
|
165
175
|
);
|
|
166
176
|
}
|
|
167
177
|
}
|
|
168
|
-
return /* @__PURE__ */ jsx(Fragment, {
|
|
169
|
-
children: exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child))
|
|
170
|
-
});
|
|
178
|
+
return /* @__PURE__ */ jsx(Fragment, { children: exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child)) });
|
|
171
179
|
};
|
|
172
180
|
AnimatePresence.displayName = "AnimatePresence";
|
|
173
181
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimatePresence.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n useDidFinishSSR,\n useForceUpdate,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport React, {\n Children,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useContext,\n useEffect,\n useRef,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\nimport { AnimatePresenceProps } from './types'\n\ntype ComponentKey = string | number\n\nconst getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\nfunction updateChildLookup(\n children: ReactElement<any>[],\n allChildren: Map<ComponentKey, ReactElement<any>>,\n) {\n const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n children.forEach((child) => {\n const key = getChildKey(child)\n\n if (isDev && seenChildren && seenChildren.has(key)) {\n // eslint-disable-next-line no-console\n console.warn(\n `Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`,\n )\n\n seenChildren.add(key)\n }\n\n allChildren.set(key, child)\n })\n}\n\nfunction onlyElements(children: ReactNode): ReactElement<any>[] {\n const filtered: ReactElement<any>[] = []\n\n // We use forEach here instead of map as map mutates the component key by preprending `.$`\n Children.forEach(children, (child, index) => {\n if (isValidElement(child)) {\n if (!child.key) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n 'No key given to AnimatePresence child, assigning index as key',\n )\n }\n filtered.push(\n React.cloneElement(child, {\n key: index,\n }),\n )\n } else {\n filtered.push(child)\n }\n }\n })\n\n return filtered\n}\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```tsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n * <AnimatePresence>\n * {items.map(item => (\n * <motion.div\n * key={item.id}\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * ))}\n * </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nexport const AnimatePresence: React.FunctionComponent<\n React.PropsWithChildren<AnimatePresenceProps>\n> = ({\n children,\n enterVariant,\n exitVariant,\n initial = true,\n onExitComplete,\n exitBeforeEnter,\n presenceAffectsLayout = true,\n}) => {\n // We want to force a re-render once all exiting animations have finished. We\n // either use a local forceRender function, or one from a parent context if it exists.\n let forceRender = useForceUpdate()\n const isClientMounted = useDidFinishSSR()\n const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n const isMounted = useRef(false)\n\n // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n const filteredChildren = onlyElements(children)\n let childrenToRender = filteredChildren\n\n const exiting = new Set<ComponentKey>()\n\n // Keep a living record of the children we're actually rendering so we\n // can diff to figure out which are entering and exiting\n const presentChildren = useRef(childrenToRender)\n\n // A lookup table to quickly reference components by key\n const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n // If this is the initial component render, just deal with logic surrounding whether\n // we play onMount animations or not.\n const isInitialRender = useRef(true)\n\n useEffect(() => {\n isMounted.current = true\n return () => {\n isMounted.current = false\n isInitialRender.current = true\n allChildren.clear()\n exiting.clear()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useIsomorphicLayoutEffect(() => {\n isInitialRender.current = false\n updateChildLookup(filteredChildren, allChildren)\n presentChildren.current = childrenToRender\n })\n\n const hasWarned = process.env.NODE_ENV === 'development' ? useRef(false) : null\n\n if (isInitialRender.current) {\n return (\n <>\n {childrenToRender.map((child) => (\n <PresenceChild\n key={getChildKey(child)}\n isPresent={Boolean(isClientMounted ? true : isMounted.current)}\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n initial={initial ? undefined : false}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>\n ))}\n </>\n )\n }\n\n // If this is a subsequent render, deal with entering and exiting children\n childrenToRender = [...childrenToRender]\n\n // Diff the keys of the currently-present and target children to update our\n // exiting list.\n const presentKeys = presentChildren.current.map(getChildKey)\n const targetKeys = filteredChildren.map(getChildKey)\n\n // Diff the present children with our target children and mark those that are exiting\n const numPresent = presentKeys.length\n for (let i = 0; i < numPresent; i++) {\n const key = presentKeys[i]\n if (targetKeys.indexOf(key) === -1) {\n exiting.add(key)\n }\n }\n\n // If we currently have exiting children, and we're deferring rendering incoming children\n // until after all current children have exiting, empty the childrenToRender array\n if (exitBeforeEnter && exiting.size) {\n childrenToRender = []\n }\n\n // Loop through all currently exiting components and clone them to overwrite `animate`\n // with any `exit` prop they might have defined.\n exiting.forEach((key) => {\n // If this component is actually entering again, early return\n if (targetKeys.indexOf(key) !== -1) return\n\n const child = allChildren.get(key)\n if (!child) return\n\n const insertionIndex = presentKeys.indexOf(key)\n\n childrenToRender.splice(\n insertionIndex,\n 0,\n <PresenceChild\n key={getChildKey(child)}\n isPresent={false}\n onExitComplete={() => {\n allChildren.delete(key)\n exiting.delete(key)\n\n // Remove this child from the present children\n const removeIndex = presentChildren.current.findIndex(\n (presentChild) => presentChild.key === key,\n )\n presentChildren.current.splice(removeIndex, 1)\n\n // Defer re-rendering until all exiting children have indeed left\n if (!exiting.size) {\n presentChildren.current = filteredChildren\n\n if (isMounted.current === false) return\n\n forceRender()\n onExitComplete?.()\n }\n }}\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>,\n )\n })\n\n // Add `MotionContext` even to children that don't need it to ensure we're rendering\n // the same tree between renders\n childrenToRender = childrenToRender.map((child) => {\n const key = child.key as string | number\n return exiting.has(key) ? (\n child\n ) : (\n <PresenceChild\n key={getChildKey(child)}\n isPresent\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>\n )\n })\n\n if (process.env.NODE_ENV === 'development') {\n const shouldWarn = exitBeforeEnter && childrenToRender.length > 1\n if (shouldWarn && hasWarned && !hasWarned.current) {\n hasWarned.current = true\n // eslint-disable-next-line no-console\n console.log(\n `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This can lead to odd visual behaviour.`,\n )\n }\n }\n\n return (\n <>\n {exiting.size\n ? childrenToRender\n : childrenToRender.map((child) => cloneElement(child))}\n </>\n )\n}\n\nAnimatePresence.displayName = 'AnimatePresence'\n"],
|
|
5
|
-
"mappings": "AAsKM,mBAEI,WAFJ;AAtKN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO;AAAA,EACL;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAK9B,MAAM,cAAc,CAAC,UAA2C,MAAM,OAAO;AAE7E,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,SAAS,kBACP,UACA,aACA;AACA,QAAM,eAAe,QAAQ,oBAAI,IAAkB,IAAI;AAEvD,WAAS,QAAQ,CAAC,UAAU;AAC1B,UAAM,MAAM,YAAY,KAAK;AAE7B,QAAI,SAAS,gBAAgB,aAAa,IAAI,GAAG,GAAG;AAElD,cAAQ;AAAA,QACN,qDAAqD;AAAA,MACvD;AAEA,mBAAa,IAAI,GAAG;AAAA,IACtB;AAEA,gBAAY,IAAI,KAAK,KAAK;AAAA,EAC5B,CAAC;AACH;AAEA,SAAS,aAAa,UAA0C;AAC9D,QAAM,WAAgC,CAAC;AAGvC,WAAS,QAAQ,UAAU,CAAC,OAAO,UAAU;AAC3C,QAAI,eAAe,KAAK,GAAG;AACzB,UAAI,CAAC,MAAM,KAAK;AACd,YAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AACA,iBAAS;AAAA,UACP,MAAM,aAAa,OAAO;AAAA,YACxB,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,MACF,OAAO;AACL,iBAAS,KAAK,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAmCO,MAAM,kBAET,CAAC;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,wBAAwB;AAC1B,MAAM;AAGJ,MAAI,cAAc,eAAe;AACjC,QAAM,kBAAkB,gBAAgB;AACxC,QAAM,yBAAyB,WAAW,kBAAkB,EAAE;AAC9D,MAAI;AAAwB,kBAAc;AAE1C,QAAM,YAAY,OAAO,KAAK;AAG9B,QAAM,mBAAmB,aAAa,QAAQ;AAC9C,MAAI,mBAAmB;AAEvB,QAAM,UAAU,oBAAI,IAAkB;AAItC,QAAM,kBAAkB,OAAO,gBAAgB;AAG/C,QAAM,cAAc,OAAO,oBAAI,IAAqC,CAAC,EAAE;AAIvE,QAAM,kBAAkB,OAAO,IAAI;AAEnC,YAAU,MAAM;AACd,cAAU,UAAU;AACpB,WAAO,MAAM;AACX,gBAAU,UAAU;AACpB,sBAAgB,UAAU;AAC1B,kBAAY,MAAM;AAClB,cAAQ,MAAM;AAAA,IAChB;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,4BAA0B,MAAM;AAC9B,oBAAgB,UAAU;AAC1B,sBAAkB,kBAAkB,WAAW;AAC/C,oBAAgB,UAAU;AAAA,EAC5B,CAAC;AAED,QAAM,YAAY,QAAQ,IAAI,aAAa,gBAAgB,OAAO,KAAK,IAAI;AAE3E,MAAI,gBAAgB,SAAS;AAC3B,WACE
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,6 +36,12 @@ const PresenceChild = ({
|
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
},
|
|
39
|
+
/**
|
|
40
|
+
* If the presence of a child affects the layout of the components around it,
|
|
41
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
42
|
+
* so they can detect that layout change.
|
|
43
|
+
*/
|
|
44
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
45
|
presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]
|
|
40
46
|
);
|
|
41
47
|
React.useMemo(() => {
|
|
@@ -44,10 +50,7 @@ const PresenceChild = ({
|
|
|
44
50
|
React.useEffect(() => {
|
|
45
51
|
!(isPresent || presenceChildren.size) && (onExitComplete == null ? void 0 : onExitComplete());
|
|
46
52
|
}, [isPresent]);
|
|
47
|
-
return /* @__PURE__ */ jsx(PresenceContext.Provider, {
|
|
48
|
-
value: context,
|
|
49
|
-
children
|
|
50
|
-
});
|
|
53
|
+
return /* @__PURE__ */ jsx(PresenceContext.Provider, { value: context, children });
|
|
51
54
|
};
|
|
52
55
|
function newChildrenMap() {
|
|
53
56
|
return /* @__PURE__ */ new Map();
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/PresenceChild.tsx"],
|
|
4
4
|
"sourcesContent": ["import type { PresenceContextProps } from '@tamagui/core'\nimport { PresenceContext } from '@tamagui/use-presence'\nimport * as React from 'react'\nimport { useId } from 'react'\n\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n children: React.ReactElement<any>\n isPresent: boolean\n onExitComplete?: () => void\n initial?: false | VariantLabels\n custom?: any\n presenceAffectsLayout: boolean\n exitVariant?: string | null\n enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isPresent,\n onExitComplete,\n exitVariant,\n enterVariant,\n presenceAffectsLayout,\n}: PresenceChildProps) => {\n const presenceChildren = React.useMemo(newChildrenMap, [])\n const id = useId() || ''\n\n const context = React.useMemo(\n (): PresenceContextProps => {\n return {\n id,\n initial,\n isPresent,\n exitVariant,\n enterVariant,\n onExitComplete: (id: string) => {\n presenceChildren.set(id, true)\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) {\n return // can stop searching when any is incomplete\n }\n }\n onExitComplete?.()\n },\n register: (id: string) => {\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 // eslint-disable-next-line react-hooks/exhaustive-deps\n presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant],\n )\n\n React.useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isPresent])\n\n /**\n * If there's no animated components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !(isPresent || presenceChildren.size) && onExitComplete?.()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isPresent])\n\n return (\n <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n return new Map()\n}\n"],
|
|
5
|
-
"mappings": "AA6EI;AA5EJ,SAAS,uBAAuB;AAChC,YAAY,WAAW;AACvB,SAAS,aAAa;AAef,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC;AACzD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA;AAAA,QACF;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,MAAE,aAAa,iBAAiB,UAAS;AAAA,EAE3C,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,oBAAC,gBAAgB,UAAhB
|
|
5
|
+
"mappings": "AA6EI;AA5EJ,SAAS,uBAAuB;AAChC,YAAY,WAAW;AACvB,SAAS,aAAa;AAef,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC;AACzD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA;AAAA,QACF;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,MAAE,aAAa,iBAAiB,UAAS;AAAA,EAE3C,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,SAAU,UAAS;AAExD;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
|
|
6
6
|
"names": ["id"]
|
|
7
7
|
}
|
|
@@ -87,7 +87,14 @@ const AnimatePresence = ({
|
|
|
87
87
|
});
|
|
88
88
|
const hasWarned = process.env.NODE_ENV === "development" ? useRef(false) : null;
|
|
89
89
|
if (isInitialRender.current) {
|
|
90
|
-
return <>{childrenToRender.map((child) => <PresenceChild
|
|
90
|
+
return <>{childrenToRender.map((child) => <PresenceChild
|
|
91
|
+
key={getChildKey(child)}
|
|
92
|
+
isPresent={Boolean(isClientMounted ? true : isMounted.current)}
|
|
93
|
+
exitVariant={exitVariant}
|
|
94
|
+
enterVariant={enterVariant}
|
|
95
|
+
initial={initial ? void 0 : false}
|
|
96
|
+
presenceAffectsLayout={presenceAffectsLayout}
|
|
97
|
+
>{child}</PresenceChild>)}</>;
|
|
91
98
|
}
|
|
92
99
|
childrenToRender = [...childrenToRender];
|
|
93
100
|
const presentKeys = presentChildren.current.map(getChildKey);
|
|
@@ -112,26 +119,39 @@ const AnimatePresence = ({
|
|
|
112
119
|
childrenToRender.splice(
|
|
113
120
|
insertionIndex,
|
|
114
121
|
0,
|
|
115
|
-
<PresenceChild
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
(
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
122
|
+
<PresenceChild
|
|
123
|
+
key={getChildKey(child)}
|
|
124
|
+
isPresent={false}
|
|
125
|
+
onExitComplete={() => {
|
|
126
|
+
allChildren.delete(key);
|
|
127
|
+
exiting.delete(key);
|
|
128
|
+
const removeIndex = presentChildren.current.findIndex(
|
|
129
|
+
(presentChild) => presentChild.key === key
|
|
130
|
+
);
|
|
131
|
+
presentChildren.current.splice(removeIndex, 1);
|
|
132
|
+
if (!exiting.size) {
|
|
133
|
+
presentChildren.current = filteredChildren;
|
|
134
|
+
if (isMounted.current === false)
|
|
135
|
+
return;
|
|
136
|
+
forceRender();
|
|
137
|
+
onExitComplete?.();
|
|
138
|
+
}
|
|
139
|
+
}}
|
|
140
|
+
exitVariant={exitVariant}
|
|
141
|
+
enterVariant={enterVariant}
|
|
142
|
+
presenceAffectsLayout={presenceAffectsLayout}
|
|
143
|
+
>{child}</PresenceChild>
|
|
130
144
|
);
|
|
131
145
|
});
|
|
132
146
|
childrenToRender = childrenToRender.map((child) => {
|
|
133
147
|
const key = child.key;
|
|
134
|
-
return exiting.has(key) ? child : <PresenceChild
|
|
148
|
+
return exiting.has(key) ? child : <PresenceChild
|
|
149
|
+
key={getChildKey(child)}
|
|
150
|
+
isPresent
|
|
151
|
+
exitVariant={exitVariant}
|
|
152
|
+
enterVariant={enterVariant}
|
|
153
|
+
presenceAffectsLayout={presenceAffectsLayout}
|
|
154
|
+
>{child}</PresenceChild>;
|
|
135
155
|
});
|
|
136
156
|
if (process.env.NODE_ENV === "development") {
|
|
137
157
|
const shouldWarn = exitBeforeEnter && childrenToRender.length > 1;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimatePresence.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n useDidFinishSSR,\n useForceUpdate,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport React, {\n Children,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useContext,\n useEffect,\n useRef,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\nimport { AnimatePresenceProps } from './types'\n\ntype ComponentKey = string | number\n\nconst getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\nfunction updateChildLookup(\n children: ReactElement<any>[],\n allChildren: Map<ComponentKey, ReactElement<any>>,\n) {\n const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n children.forEach((child) => {\n const key = getChildKey(child)\n\n if (isDev && seenChildren && seenChildren.has(key)) {\n // eslint-disable-next-line no-console\n console.warn(\n `Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`,\n )\n\n seenChildren.add(key)\n }\n\n allChildren.set(key, child)\n })\n}\n\nfunction onlyElements(children: ReactNode): ReactElement<any>[] {\n const filtered: ReactElement<any>[] = []\n\n // We use forEach here instead of map as map mutates the component key by preprending `.$`\n Children.forEach(children, (child, index) => {\n if (isValidElement(child)) {\n if (!child.key) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n 'No key given to AnimatePresence child, assigning index as key',\n )\n }\n filtered.push(\n React.cloneElement(child, {\n key: index,\n }),\n )\n } else {\n filtered.push(child)\n }\n }\n })\n\n return filtered\n}\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```tsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n * <AnimatePresence>\n * {items.map(item => (\n * <motion.div\n * key={item.id}\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * ))}\n * </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nexport const AnimatePresence: React.FunctionComponent<\n React.PropsWithChildren<AnimatePresenceProps>\n> = ({\n children,\n enterVariant,\n exitVariant,\n initial = true,\n onExitComplete,\n exitBeforeEnter,\n presenceAffectsLayout = true,\n}) => {\n // We want to force a re-render once all exiting animations have finished. We\n // either use a local forceRender function, or one from a parent context if it exists.\n let forceRender = useForceUpdate()\n const isClientMounted = useDidFinishSSR()\n const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n const isMounted = useRef(false)\n\n // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n const filteredChildren = onlyElements(children)\n let childrenToRender = filteredChildren\n\n const exiting = new Set<ComponentKey>()\n\n // Keep a living record of the children we're actually rendering so we\n // can diff to figure out which are entering and exiting\n const presentChildren = useRef(childrenToRender)\n\n // A lookup table to quickly reference components by key\n const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n // If this is the initial component render, just deal with logic surrounding whether\n // we play onMount animations or not.\n const isInitialRender = useRef(true)\n\n useEffect(() => {\n isMounted.current = true\n return () => {\n isMounted.current = false\n isInitialRender.current = true\n allChildren.clear()\n exiting.clear()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useIsomorphicLayoutEffect(() => {\n isInitialRender.current = false\n updateChildLookup(filteredChildren, allChildren)\n presentChildren.current = childrenToRender\n })\n\n const hasWarned = process.env.NODE_ENV === 'development' ? useRef(false) : null\n\n if (isInitialRender.current) {\n return (\n <>\n {childrenToRender.map((child) => (\n <PresenceChild\n key={getChildKey(child)}\n isPresent={Boolean(isClientMounted ? true : isMounted.current)}\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n initial={initial ? undefined : false}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>\n ))}\n </>\n )\n }\n\n // If this is a subsequent render, deal with entering and exiting children\n childrenToRender = [...childrenToRender]\n\n // Diff the keys of the currently-present and target children to update our\n // exiting list.\n const presentKeys = presentChildren.current.map(getChildKey)\n const targetKeys = filteredChildren.map(getChildKey)\n\n // Diff the present children with our target children and mark those that are exiting\n const numPresent = presentKeys.length\n for (let i = 0; i < numPresent; i++) {\n const key = presentKeys[i]\n if (targetKeys.indexOf(key) === -1) {\n exiting.add(key)\n }\n }\n\n // If we currently have exiting children, and we're deferring rendering incoming children\n // until after all current children have exiting, empty the childrenToRender array\n if (exitBeforeEnter && exiting.size) {\n childrenToRender = []\n }\n\n // Loop through all currently exiting components and clone them to overwrite `animate`\n // with any `exit` prop they might have defined.\n exiting.forEach((key) => {\n // If this component is actually entering again, early return\n if (targetKeys.indexOf(key) !== -1) return\n\n const child = allChildren.get(key)\n if (!child) return\n\n const insertionIndex = presentKeys.indexOf(key)\n\n childrenToRender.splice(\n insertionIndex,\n 0,\n <PresenceChild\n key={getChildKey(child)}\n isPresent={false}\n onExitComplete={() => {\n allChildren.delete(key)\n exiting.delete(key)\n\n // Remove this child from the present children\n const removeIndex = presentChildren.current.findIndex(\n (presentChild) => presentChild.key === key,\n )\n presentChildren.current.splice(removeIndex, 1)\n\n // Defer re-rendering until all exiting children have indeed left\n if (!exiting.size) {\n presentChildren.current = filteredChildren\n\n if (isMounted.current === false) return\n\n forceRender()\n onExitComplete?.()\n }\n }}\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>,\n )\n })\n\n // Add `MotionContext` even to children that don't need it to ensure we're rendering\n // the same tree between renders\n childrenToRender = childrenToRender.map((child) => {\n const key = child.key as string | number\n return exiting.has(key) ? (\n child\n ) : (\n <PresenceChild\n key={getChildKey(child)}\n isPresent\n exitVariant={exitVariant}\n enterVariant={enterVariant}\n presenceAffectsLayout={presenceAffectsLayout}\n >\n {child}\n </PresenceChild>\n )\n })\n\n if (process.env.NODE_ENV === 'development') {\n const shouldWarn = exitBeforeEnter && childrenToRender.length > 1\n if (shouldWarn && hasWarned && !hasWarned.current) {\n hasWarned.current = true\n // eslint-disable-next-line no-console\n console.log(\n `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This can lead to odd visual behaviour.`,\n )\n }\n }\n\n return (\n <>\n {exiting.size\n ? childrenToRender\n : childrenToRender.map((child) => cloneElement(child))}\n </>\n )\n}\n\nAnimatePresence.displayName = 'AnimatePresence'\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO;AAAA,EACL;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAK9B,MAAM,cAAc,CAAC,UAA2C,MAAM,OAAO;AAE7E,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,SAAS,kBACP,UACA,aACA;AACA,QAAM,eAAe,QAAQ,oBAAI,IAAkB,IAAI;AAEvD,WAAS,QAAQ,CAAC,UAAU;AAC1B,UAAM,MAAM,YAAY,KAAK;AAE7B,QAAI,SAAS,gBAAgB,aAAa,IAAI,GAAG,GAAG;AAElD,cAAQ;AAAA,QACN,qDAAqD;AAAA,MACvD;AAEA,mBAAa,IAAI,GAAG;AAAA,IACtB;AAEA,gBAAY,IAAI,KAAK,KAAK;AAAA,EAC5B,CAAC;AACH;AAEA,SAAS,aAAa,UAA0C;AAC9D,QAAM,WAAgC,CAAC;AAGvC,WAAS,QAAQ,UAAU,CAAC,OAAO,UAAU;AAC3C,QAAI,eAAe,KAAK,GAAG;AACzB,UAAI,CAAC,MAAM,KAAK;AACd,YAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AACA,iBAAS;AAAA,UACP,MAAM,aAAa,OAAO;AAAA,YACxB,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,MACF,OAAO;AACL,iBAAS,KAAK,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAmCO,MAAM,kBAET,CAAC;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,wBAAwB;AAC1B,MAAM;AAGJ,MAAI,cAAc,eAAe;AACjC,QAAM,kBAAkB,gBAAgB;AACxC,QAAM,yBAAyB,WAAW,kBAAkB,EAAE;AAC9D,MAAI;AAAwB,kBAAc;AAE1C,QAAM,YAAY,OAAO,KAAK;AAG9B,QAAM,mBAAmB,aAAa,QAAQ;AAC9C,MAAI,mBAAmB;AAEvB,QAAM,UAAU,oBAAI,IAAkB;AAItC,QAAM,kBAAkB,OAAO,gBAAgB;AAG/C,QAAM,cAAc,OAAO,oBAAI,IAAqC,CAAC,EAAE;AAIvE,QAAM,kBAAkB,OAAO,IAAI;AAEnC,YAAU,MAAM;AACd,cAAU,UAAU;AACpB,WAAO,MAAM;AACX,gBAAU,UAAU;AACpB,sBAAgB,UAAU;AAC1B,kBAAY,MAAM;AAClB,cAAQ,MAAM;AAAA,IAChB;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,4BAA0B,MAAM;AAC9B,oBAAgB,UAAU;AAC1B,sBAAkB,kBAAkB,WAAW;AAC/C,oBAAgB,UAAU;AAAA,EAC5B,CAAC;AAED,QAAM,YAAY,QAAQ,IAAI,aAAa,gBAAgB,OAAO,KAAK,IAAI;AAE3E,MAAI,gBAAgB,SAAS;AAC3B,WACE,GACG,iBAAiB,IAAI,CAAC,UACrB,CAAC,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,6 +35,12 @@ const PresenceChild = ({
|
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
},
|
|
38
|
+
/**
|
|
39
|
+
* If the presence of a child affects the layout of the components around it,
|
|
40
|
+
* we want to make a new context value to ensure they get re-rendered
|
|
41
|
+
* so they can detect that layout change.
|
|
42
|
+
*/
|
|
43
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
38
44
|
presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]
|
|
39
45
|
);
|
|
40
46
|
React.useMemo(() => {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/PresenceChild.tsx"],
|
|
4
4
|
"sourcesContent": ["import type { PresenceContextProps } from '@tamagui/core'\nimport { PresenceContext } from '@tamagui/use-presence'\nimport * as React from 'react'\nimport { useId } from 'react'\n\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n children: React.ReactElement<any>\n isPresent: boolean\n onExitComplete?: () => void\n initial?: false | VariantLabels\n custom?: any\n presenceAffectsLayout: boolean\n exitVariant?: string | null\n enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isPresent,\n onExitComplete,\n exitVariant,\n enterVariant,\n presenceAffectsLayout,\n}: PresenceChildProps) => {\n const presenceChildren = React.useMemo(newChildrenMap, [])\n const id = useId() || ''\n\n const context = React.useMemo(\n (): PresenceContextProps => {\n return {\n id,\n initial,\n isPresent,\n exitVariant,\n enterVariant,\n onExitComplete: (id: string) => {\n presenceChildren.set(id, true)\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) {\n return // can stop searching when any is incomplete\n }\n }\n onExitComplete?.()\n },\n register: (id: string) => {\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 // eslint-disable-next-line react-hooks/exhaustive-deps\n presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant],\n )\n\n React.useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isPresent])\n\n /**\n * If there's no animated components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !(isPresent || presenceChildren.size) && onExitComplete?.()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isPresent])\n\n return (\n <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n return new Map()\n}\n"],
|
|
5
|
-
"mappings": "AACA,SAAS,uBAAuB;AAChC,YAAY,WAAW;AACvB,SAAS,aAAa;AAef,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC;AACzD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA,2BAAiB;AAAA,QACnB;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,MAAE,aAAa,iBAAiB,SAAS,iBAAiB;AAAA,EAE5D,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,CAAC,gBAAgB,SAAS,OAAO,UAAU,SAAS,EAAnD,gBAAgB;AAErB;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
|
|
5
|
+
"mappings": "AACA,SAAS,uBAAuB;AAChC,YAAY,WAAW;AACvB,SAAS,aAAa;AAef,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC;AACzD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA,2BAAiB;AAAA,QACnB;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,MAAE,aAAa,iBAAiB,SAAS,iBAAiB;AAAA,EAE5D,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,CAAC,gBAAgB,SAAS,OAAO,UAAU,SAAS,EAAnD,gBAAgB;AAErB;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
|
|
6
6
|
"names": ["id"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animate-presence",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"dist"
|
|
15
15
|
],
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@tamagui/core": "^1.1.
|
|
18
|
-
"@tamagui/use-presence": "^1.1.
|
|
17
|
+
"@tamagui/core": "^1.1.9",
|
|
18
|
+
"@tamagui/use-presence": "^1.1.9"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "^1.1.
|
|
21
|
+
"@tamagui/build": "^1.1.9"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
24
|
"build": "tamagui-build",
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var PresenceContext_exports = {};
|
|
20
|
-
__export(PresenceContext_exports, {
|
|
21
|
-
PresenceContext: () => PresenceContext
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(PresenceContext_exports);
|
|
24
|
-
var import_react = require("react");
|
|
25
|
-
const PresenceContext = (0, import_react.createContext)(null);
|
|
26
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
27
|
-
0 && (module.exports = {
|
|
28
|
-
PresenceContext
|
|
29
|
-
});
|
|
30
|
-
//# sourceMappingURL=PresenceContext.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/PresenceContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface PresenceContextProps {\n id: string\n isPresent: boolean\n register: (id: string) => () => void\n onExitComplete?: (id: string) => void\n initial?: false | VariantLabels\n custom?: any\n exitVariant?: string | null\n enterVariant?: string | null\n}\n\nexport const PresenceContext = createContext<PresenceContextProps | null>(null)\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAevB,MAAM,sBAAkB,4BAA2C,IAAI;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/cjs/usePresence.js
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var usePresence_exports = {};
|
|
20
|
-
__export(usePresence_exports, {
|
|
21
|
-
isPresent: () => isPresent,
|
|
22
|
-
useIsPresent: () => useIsPresent,
|
|
23
|
-
usePresence: () => usePresence
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(usePresence_exports);
|
|
26
|
-
var import_core = require("@tamagui/core");
|
|
27
|
-
var import_react = require("react");
|
|
28
|
-
var import_PresenceContext = require("./PresenceContext");
|
|
29
|
-
function usePresence() {
|
|
30
|
-
const context = (0, import_react.useContext)(import_PresenceContext.PresenceContext);
|
|
31
|
-
if (context === null) {
|
|
32
|
-
return [true, null];
|
|
33
|
-
}
|
|
34
|
-
const { isPresent: isPresent2, onExitComplete, register } = context;
|
|
35
|
-
const id = (0, import_core.useId)() || "";
|
|
36
|
-
(0, import_react.useEffect)(() => register(id), [id, register]);
|
|
37
|
-
const safeToRemove = () => onExitComplete == null ? void 0 : onExitComplete(id);
|
|
38
|
-
return !isPresent2 && onExitComplete ? [false, safeToRemove] : [true];
|
|
39
|
-
}
|
|
40
|
-
function useIsPresent() {
|
|
41
|
-
return isPresent((0, import_react.useContext)(import_PresenceContext.PresenceContext));
|
|
42
|
-
}
|
|
43
|
-
function isPresent(context) {
|
|
44
|
-
return context === null ? true : context.isPresent;
|
|
45
|
-
}
|
|
46
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
47
|
-
0 && (module.exports = {
|
|
48
|
-
isPresent,
|
|
49
|
-
useIsPresent,
|
|
50
|
-
usePresence
|
|
51
|
-
});
|
|
52
|
-
//# sourceMappingURL=usePresence.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/usePresence.ts"],
|
|
4
|
-
"sourcesContent": ["import { useId } from '@tamagui/core'\nimport { useContext, useEffect } from 'react'\n\nimport { PresenceContext, PresenceContextProps } from './PresenceContext'\n\nexport type SafeToRemove = () => void\ntype AlwaysPresent = [true, null]\ntype Present = [true]\ntype NotPresent = [false, SafeToRemove]\n\nexport function usePresence(): AlwaysPresent | Present | NotPresent {\n const context = useContext(PresenceContext)\n\n if (context === null) {\n return [true, null]\n }\n\n const { isPresent, onExitComplete, register } = context\n const id = useId() || ''\n useEffect(() => register(id), [id, register])\n\n const safeToRemove = () => onExitComplete?.(id)\n\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true]\n}\n\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function. ```\n */\nexport function useIsPresent() {\n return isPresent(useContext(PresenceContext))\n}\n\nexport function isPresent(context: PresenceContextProps | null) {\n return context === null ? true : context.isPresent\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAsB;AACtB,mBAAsC;AAEtC,6BAAsD;AAO/C,SAAS,cAAoD;AAClE,QAAM,cAAU,yBAAW,sCAAe;AAE1C,MAAI,YAAY,MAAM;AACpB,WAAO,CAAC,MAAM,IAAI;AAAA,EACpB;AAEA,QAAM,EAAE,WAAAA,YAAW,gBAAgB,SAAS,IAAI;AAChD,QAAM,SAAK,mBAAM,KAAK;AACtB,8BAAU,MAAM,SAAS,EAAE,GAAG,CAAC,IAAI,QAAQ,CAAC;AAE5C,QAAM,eAAe,MAAM,iDAAiB;AAE5C,SAAO,CAACA,cAAa,iBAAiB,CAAC,OAAO,YAAY,IAAI,CAAC,IAAI;AACrE;AAMO,SAAS,eAAe;AAC7B,SAAO,cAAU,yBAAW,sCAAe,CAAC;AAC9C;AAEO,SAAS,UAAU,SAAsC;AAC9D,SAAO,YAAY,OAAO,OAAO,QAAQ;AAC3C;",
|
|
6
|
-
"names": ["isPresent"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/PresenceContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface PresenceContextProps {\n id: string\n isPresent: boolean\n register: (id: string) => () => void\n onExitComplete?: (id: string) => void\n initial?: false | VariantLabels\n custom?: any\n exitVariant?: string | null\n enterVariant?: string | null\n}\n\nexport const PresenceContext = createContext<PresenceContextProps | null>(null)\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,qBAAqB;AAevB,MAAM,kBAAkB,cAA2C,IAAI;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/usePresence.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { useId } from "@tamagui/core";
|
|
2
|
-
import { useContext, useEffect } from "react";
|
|
3
|
-
import { PresenceContext } from "./PresenceContext";
|
|
4
|
-
function usePresence() {
|
|
5
|
-
const context = useContext(PresenceContext);
|
|
6
|
-
if (context === null) {
|
|
7
|
-
return [true, null];
|
|
8
|
-
}
|
|
9
|
-
const { isPresent: isPresent2, onExitComplete, register } = context;
|
|
10
|
-
const id = useId() || "";
|
|
11
|
-
useEffect(() => register(id), [id, register]);
|
|
12
|
-
const safeToRemove = () => onExitComplete == null ? void 0 : onExitComplete(id);
|
|
13
|
-
return !isPresent2 && onExitComplete ? [false, safeToRemove] : [true];
|
|
14
|
-
}
|
|
15
|
-
function useIsPresent() {
|
|
16
|
-
return isPresent(useContext(PresenceContext));
|
|
17
|
-
}
|
|
18
|
-
function isPresent(context) {
|
|
19
|
-
return context === null ? true : context.isPresent;
|
|
20
|
-
}
|
|
21
|
-
export {
|
|
22
|
-
isPresent,
|
|
23
|
-
useIsPresent,
|
|
24
|
-
usePresence
|
|
25
|
-
};
|
|
26
|
-
//# sourceMappingURL=usePresence.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/usePresence.ts"],
|
|
4
|
-
"sourcesContent": ["import { useId } from '@tamagui/core'\nimport { useContext, useEffect } from 'react'\n\nimport { PresenceContext, PresenceContextProps } from './PresenceContext'\n\nexport type SafeToRemove = () => void\ntype AlwaysPresent = [true, null]\ntype Present = [true]\ntype NotPresent = [false, SafeToRemove]\n\nexport function usePresence(): AlwaysPresent | Present | NotPresent {\n const context = useContext(PresenceContext)\n\n if (context === null) {\n return [true, null]\n }\n\n const { isPresent, onExitComplete, register } = context\n const id = useId() || ''\n useEffect(() => register(id), [id, register])\n\n const safeToRemove = () => onExitComplete?.(id)\n\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true]\n}\n\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function. ```\n */\nexport function useIsPresent() {\n return isPresent(useContext(PresenceContext))\n}\n\nexport function isPresent(context: PresenceContextProps | null) {\n return context === null ? true : context.isPresent\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,YAAY,iBAAiB;AAEtC,SAAS,uBAA6C;AAO/C,SAAS,cAAoD;AAClE,QAAM,UAAU,WAAW,eAAe;AAE1C,MAAI,YAAY,MAAM;AACpB,WAAO,CAAC,MAAM,IAAI;AAAA,EACpB;AAEA,QAAM,EAAE,WAAAA,YAAW,gBAAgB,SAAS,IAAI;AAChD,QAAM,KAAK,MAAM,KAAK;AACtB,YAAU,MAAM,SAAS,EAAE,GAAG,CAAC,IAAI,QAAQ,CAAC;AAE5C,QAAM,eAAe,MAAM,iDAAiB;AAE5C,SAAO,CAACA,cAAa,iBAAiB,CAAC,OAAO,YAAY,IAAI,CAAC,IAAI;AACrE;AAMO,SAAS,eAAe;AAC7B,SAAO,UAAU,WAAW,eAAe,CAAC;AAC9C;AAEO,SAAS,UAAU,SAAsC;AAC9D,SAAO,YAAY,OAAO,OAAO,QAAQ;AAC3C;",
|
|
6
|
-
"names": ["isPresent"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/PresenceContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface PresenceContextProps {\n id: string\n isPresent: boolean\n register: (id: string) => () => void\n onExitComplete?: (id: string) => void\n initial?: false | VariantLabels\n custom?: any\n exitVariant?: string | null\n enterVariant?: string | null\n}\n\nexport const PresenceContext = createContext<PresenceContextProps | null>(null)\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,qBAAqB;AAevB,MAAM,kBAAkB,cAA2C,IAAI;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/jsx/usePresence.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { useId } from "@tamagui/core";
|
|
2
|
-
import { useContext, useEffect } from "react";
|
|
3
|
-
import { PresenceContext } from "./PresenceContext";
|
|
4
|
-
function usePresence() {
|
|
5
|
-
const context = useContext(PresenceContext);
|
|
6
|
-
if (context === null) {
|
|
7
|
-
return [true, null];
|
|
8
|
-
}
|
|
9
|
-
const { isPresent: isPresent2, onExitComplete, register } = context;
|
|
10
|
-
const id = useId() || "";
|
|
11
|
-
useEffect(() => register(id), [id, register]);
|
|
12
|
-
const safeToRemove = () => onExitComplete?.(id);
|
|
13
|
-
return !isPresent2 && onExitComplete ? [false, safeToRemove] : [true];
|
|
14
|
-
}
|
|
15
|
-
function useIsPresent() {
|
|
16
|
-
return isPresent(useContext(PresenceContext));
|
|
17
|
-
}
|
|
18
|
-
function isPresent(context) {
|
|
19
|
-
return context === null ? true : context.isPresent;
|
|
20
|
-
}
|
|
21
|
-
export {
|
|
22
|
-
isPresent,
|
|
23
|
-
useIsPresent,
|
|
24
|
-
usePresence
|
|
25
|
-
};
|
|
26
|
-
//# sourceMappingURL=usePresence.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/usePresence.ts"],
|
|
4
|
-
"sourcesContent": ["import { useId } from '@tamagui/core'\nimport { useContext, useEffect } from 'react'\n\nimport { PresenceContext, PresenceContextProps } from './PresenceContext'\n\nexport type SafeToRemove = () => void\ntype AlwaysPresent = [true, null]\ntype Present = [true]\ntype NotPresent = [false, SafeToRemove]\n\nexport function usePresence(): AlwaysPresent | Present | NotPresent {\n const context = useContext(PresenceContext)\n\n if (context === null) {\n return [true, null]\n }\n\n const { isPresent, onExitComplete, register } = context\n const id = useId() || ''\n useEffect(() => register(id), [id, register])\n\n const safeToRemove = () => onExitComplete?.(id)\n\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true]\n}\n\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function. ```\n */\nexport function useIsPresent() {\n return isPresent(useContext(PresenceContext))\n}\n\nexport function isPresent(context: PresenceContextProps | null) {\n return context === null ? true : context.isPresent\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,YAAY,iBAAiB;AAEtC,SAAS,uBAA6C;AAO/C,SAAS,cAAoD;AAClE,QAAM,UAAU,WAAW,eAAe;AAE1C,MAAI,YAAY,MAAM;AACpB,WAAO,CAAC,MAAM,IAAI;AAAA,EACpB;AAEA,QAAM,EAAE,WAAAA,YAAW,gBAAgB,SAAS,IAAI;AAChD,QAAM,KAAK,MAAM,KAAK;AACtB,YAAU,MAAM,SAAS,EAAE,GAAG,CAAC,IAAI,QAAQ,CAAC;AAE5C,QAAM,eAAe,MAAM,iBAAiB,EAAE;AAE9C,SAAO,CAACA,cAAa,iBAAiB,CAAC,OAAO,YAAY,IAAI,CAAC,IAAI;AACrE;AAMO,SAAS,eAAe;AAC7B,SAAO,UAAU,WAAW,eAAe,CAAC;AAC9C;AAEO,SAAS,UAAU,SAAsC;AAC9D,SAAO,YAAY,OAAO,OAAO,QAAQ;AAC3C;",
|
|
6
|
-
"names": ["isPresent"]
|
|
7
|
-
}
|