@tamagui/demos 1.95.0-1713326412393 → 1.95.0-1713852157160
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/TabsAdvancedDemo.js +22 -23
- package/dist/cjs/TabsAdvancedDemo.js.map +1 -1
- package/dist/cjs/TabsAdvancedDemo.native.js +28 -29
- package/dist/cjs/TabsAdvancedDemo.native.js.map +2 -2
- package/dist/esm/TabsAdvancedDemo.js +22 -23
- package/dist/esm/TabsAdvancedDemo.js.map +1 -1
- package/dist/esm/TabsAdvancedDemo.mjs +25 -32
- package/dist/esm/TabsAdvancedDemo.native.js +28 -29
- package/dist/esm/TabsAdvancedDemo.native.js.map +2 -2
- package/dist/jsx/TabsAdvancedDemo.js +22 -23
- package/dist/jsx/TabsAdvancedDemo.js.map +1 -1
- package/dist/jsx/TabsAdvancedDemo.mjs +25 -32
- package/dist/jsx/TabsAdvancedDemo.native.js +28 -29
- package/dist/jsx/TabsAdvancedDemo.native.js.map +2 -2
- package/package.json +18 -18
- package/src/TabsAdvancedDemo.tsx +25 -36
- package/types/TabsAdvancedDemo.d.ts.map +1 -1
|
@@ -44,7 +44,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
44
44
|
currentTab: "tab1",
|
|
45
45
|
intentAt: null,
|
|
46
46
|
prevActiveAt: null
|
|
47
|
-
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
47
|
+
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1, handleOnInteraction = (type, layout) => {
|
|
48
48
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
49
49
|
};
|
|
50
50
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -130,15 +130,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
130
130
|
}
|
|
131
131
|
)
|
|
132
132
|
] }),
|
|
133
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
134
|
-
import_tamagui.AnimatePresence,
|
|
135
|
-
{
|
|
136
|
-
exitBeforeEnter: !0,
|
|
137
|
-
enterVariant,
|
|
138
|
-
exitVariant,
|
|
139
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
|
|
140
|
-
}
|
|
141
|
-
)
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { exitBeforeEnter: !0, custom: { direction }, initial: !1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: currentTab }) }) }, currentTab) })
|
|
142
134
|
]
|
|
143
135
|
}
|
|
144
136
|
);
|
|
@@ -148,7 +140,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
148
140
|
currentTab: "tab1",
|
|
149
141
|
intentAt: null,
|
|
150
142
|
prevActiveAt: null
|
|
151
|
-
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
143
|
+
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1, handleOnInteraction = (type, layout) => {
|
|
152
144
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
153
145
|
};
|
|
154
146
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -235,15 +227,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
235
227
|
}
|
|
236
228
|
)
|
|
237
229
|
] }),
|
|
238
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
239
|
-
import_tamagui.AnimatePresence,
|
|
240
|
-
{
|
|
241
|
-
exitBeforeEnter: !0,
|
|
242
|
-
enterVariant,
|
|
243
|
-
exitVariant,
|
|
244
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
|
|
245
|
-
}
|
|
246
|
-
)
|
|
230
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { exitBeforeEnter: !0, custom: { direction }, initial: !1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: currentTab }) }) }, currentTab) })
|
|
247
231
|
]
|
|
248
232
|
}
|
|
249
233
|
);
|
|
@@ -267,10 +251,25 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
267
251
|
...props
|
|
268
252
|
}
|
|
269
253
|
), AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
|
|
254
|
+
f: 1,
|
|
255
|
+
x: 0,
|
|
256
|
+
o: 1,
|
|
257
|
+
animation: "100ms",
|
|
270
258
|
variants: {
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
259
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
260
|
+
direction: {
|
|
261
|
+
":number": (direction) => ({
|
|
262
|
+
enterStyle: {
|
|
263
|
+
x: direction > 0 ? -25 : 25,
|
|
264
|
+
opacity: 0
|
|
265
|
+
},
|
|
266
|
+
exitStyle: {
|
|
267
|
+
zIndex: 0,
|
|
268
|
+
x: direction < 0 ? -25 : 25,
|
|
269
|
+
opacity: 0
|
|
270
|
+
}
|
|
271
|
+
})
|
|
272
|
+
}
|
|
274
273
|
}
|
|
275
274
|
});
|
|
276
275
|
//# sourceMappingURL=TabsAdvancedDemo.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB,kBAEzB,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["currentTab", "intentAt", "activeAt"]
|
|
6
6
|
}
|
|
@@ -183,7 +183,7 @@ var demos = [
|
|
|
183
183
|
}));
|
|
184
184
|
}, activeAt = tabState.activeAt, intentAt = tabState.intentAt, prevActiveAt = tabState.prevActiveAt, currentTab = tabState.currentTab, direction = function() {
|
|
185
185
|
return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
|
|
186
|
-
}(),
|
|
186
|
+
}(), handleOnInteraction = function(type, layout) {
|
|
187
187
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
188
188
|
};
|
|
189
189
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
|
|
@@ -263,13 +263,11 @@ var demos = [
|
|
|
263
263
|
}),
|
|
264
264
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
|
|
265
265
|
exitBeforeEnter: !0,
|
|
266
|
-
|
|
267
|
-
|
|
266
|
+
custom: {
|
|
267
|
+
direction
|
|
268
|
+
},
|
|
269
|
+
initial: !1,
|
|
268
270
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, {
|
|
269
|
-
animation: "100ms",
|
|
270
|
-
x: 0,
|
|
271
|
-
opacity: 1,
|
|
272
|
-
flex: 1,
|
|
273
271
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
|
|
274
272
|
value: currentTab,
|
|
275
273
|
forceMount: !0,
|
|
@@ -316,7 +314,7 @@ var demos = [
|
|
|
316
314
|
}));
|
|
317
315
|
}, activeAt = tabState.activeAt, intentAt = tabState.intentAt, prevActiveAt = tabState.prevActiveAt, currentTab = tabState.currentTab, direction = function() {
|
|
318
316
|
return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
|
|
319
|
-
}(),
|
|
317
|
+
}(), handleOnInteraction = function(type, layout) {
|
|
320
318
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
321
319
|
};
|
|
322
320
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
|
|
@@ -397,13 +395,11 @@ var demos = [
|
|
|
397
395
|
}),
|
|
398
396
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
|
|
399
397
|
exitBeforeEnter: !0,
|
|
400
|
-
|
|
401
|
-
|
|
398
|
+
custom: {
|
|
399
|
+
direction
|
|
400
|
+
},
|
|
401
|
+
initial: !1,
|
|
402
402
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, {
|
|
403
|
-
animation: "100ms",
|
|
404
|
-
x: 0,
|
|
405
|
-
opacity: 1,
|
|
406
|
-
flex: 1,
|
|
407
403
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
|
|
408
404
|
value: currentTab,
|
|
409
405
|
forceMount: !0,
|
|
@@ -438,22 +434,25 @@ var demos = [
|
|
|
438
434
|
opacity: 0.6
|
|
439
435
|
}, props));
|
|
440
436
|
}, AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
|
|
437
|
+
f: 1,
|
|
438
|
+
x: 0,
|
|
439
|
+
o: 1,
|
|
440
|
+
animation: "100ms",
|
|
441
441
|
variants: {
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
opacity: 0
|
|
442
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
443
|
+
direction: {
|
|
444
|
+
":number": function(direction) {
|
|
445
|
+
return {
|
|
446
|
+
enterStyle: {
|
|
447
|
+
x: direction > 0 ? -25 : 25,
|
|
448
|
+
opacity: 0
|
|
449
|
+
},
|
|
450
|
+
exitStyle: {
|
|
451
|
+
zIndex: 0,
|
|
452
|
+
x: direction < 0 ? -25 : 25,
|
|
453
|
+
opacity: 0
|
|
454
|
+
}
|
|
455
|
+
};
|
|
457
456
|
}
|
|
458
457
|
}
|
|
459
458
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Users/n8/tamagui/packages/demos/src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;uDAAA,eAAyB,kBAEzB,
|
|
5
|
-
"names": ["demos", "demosTitle", "background", "underline", "TabsAdvancedDemo", "useState", "demoIndex", "setDemoIndex", "demo", "_jsxs", "_Fragment", "_jsx", "TabsAdvancedUnderline", "TabsAdvancedBackground", "XStack", "alignItems", "space", "position", "bottom", "left", "$xxs", "display", "Button", "size", "onPress", "x", "length", "activeAt", "currentTab", "intentAt", "prevActiveAt", "tabState", "setTabState", "setCurrentTab", "setIntentIndicator", "setActiveIndicator", "direction", "
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["demos", "demosTitle", "background", "underline", "TabsAdvancedDemo", "useState", "demoIndex", "setDemoIndex", "demo", "_jsxs", "_Fragment", "_jsx", "TabsAdvancedUnderline", "TabsAdvancedBackground", "XStack", "alignItems", "space", "position", "bottom", "left", "$xxs", "display", "Button", "size", "onPress", "x", "length", "activeAt", "currentTab", "intentAt", "prevActiveAt", "tabState", "setTabState", "setCurrentTab", "setIntentIndicator", "setActiveIndicator", "direction", "handleOnInteraction", "type", "layout", "Tabs", "value", "onValueChange", "orientation", "padding", "height", "flexDirection", "activationMode", "backgroundColor", "borderRadius", "YStack", "AnimatePresence", "TabsRovingIndicator", "width", "y", "theme", "List", "disablePassBorderRadius", "loop", "aria-label", "gap", "Tab", "unstyled", "paddingVertical", "paddingHorizontal", "onInteraction", "SizableText", "exitBeforeEnter", "custom", "initial", "AnimatedYStack", "Content", "forceMount", "flex", "justifyContent", "H5", "textAlign", "active", "borderBottomLeftRadius", "borderBottomRightRadius", "paddingBottom", "borderColor", "borderBottomWidth", "props", "opacity", "animation", "enterStyle", "exitStyle", "styled", "f", "o", "variants", "zIndex"]
|
|
6
6
|
}
|
|
@@ -36,7 +36,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
36
36
|
currentTab: "tab1",
|
|
37
37
|
intentAt: null,
|
|
38
38
|
prevActiveAt: null
|
|
39
|
-
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
39
|
+
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1, handleOnInteraction = (type, layout) => {
|
|
40
40
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
41
41
|
};
|
|
42
42
|
return /* @__PURE__ */ jsxs(
|
|
@@ -122,15 +122,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
122
122
|
}
|
|
123
123
|
)
|
|
124
124
|
] }),
|
|
125
|
-
/* @__PURE__ */ jsx(
|
|
126
|
-
AnimatePresence,
|
|
127
|
-
{
|
|
128
|
-
exitBeforeEnter: !0,
|
|
129
|
-
enterVariant,
|
|
130
|
-
exitVariant,
|
|
131
|
-
children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
|
|
132
|
-
}
|
|
133
|
-
)
|
|
125
|
+
/* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: !0, custom: { direction }, initial: !1, children: /* @__PURE__ */ jsx(AnimatedYStack, { children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab) })
|
|
134
126
|
]
|
|
135
127
|
}
|
|
136
128
|
);
|
|
@@ -140,7 +132,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
140
132
|
currentTab: "tab1",
|
|
141
133
|
intentAt: null,
|
|
142
134
|
prevActiveAt: null
|
|
143
|
-
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
135
|
+
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1, handleOnInteraction = (type, layout) => {
|
|
144
136
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
145
137
|
};
|
|
146
138
|
return /* @__PURE__ */ jsxs(
|
|
@@ -227,15 +219,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
227
219
|
}
|
|
228
220
|
)
|
|
229
221
|
] }),
|
|
230
|
-
/* @__PURE__ */ jsx(
|
|
231
|
-
AnimatePresence,
|
|
232
|
-
{
|
|
233
|
-
exitBeforeEnter: !0,
|
|
234
|
-
enterVariant,
|
|
235
|
-
exitVariant,
|
|
236
|
-
children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
|
|
237
|
-
}
|
|
238
|
-
)
|
|
222
|
+
/* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: !0, custom: { direction }, initial: !1, children: /* @__PURE__ */ jsx(AnimatedYStack, { children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab) })
|
|
239
223
|
]
|
|
240
224
|
}
|
|
241
225
|
);
|
|
@@ -259,10 +243,25 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
259
243
|
...props
|
|
260
244
|
}
|
|
261
245
|
), AnimatedYStack = styled(YStack, {
|
|
246
|
+
f: 1,
|
|
247
|
+
x: 0,
|
|
248
|
+
o: 1,
|
|
249
|
+
animation: "100ms",
|
|
262
250
|
variants: {
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
251
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
252
|
+
direction: {
|
|
253
|
+
":number": (direction) => ({
|
|
254
|
+
enterStyle: {
|
|
255
|
+
x: direction > 0 ? -25 : 25,
|
|
256
|
+
opacity: 0
|
|
257
|
+
},
|
|
258
|
+
exitStyle: {
|
|
259
|
+
zIndex: 0,
|
|
260
|
+
x: direction < 0 ? -25 : 25,
|
|
261
|
+
opacity: 0
|
|
262
|
+
}
|
|
263
|
+
})
|
|
264
|
+
}
|
|
266
265
|
}
|
|
267
266
|
});
|
|
268
267
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,gBAAgB;AAEzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"mappings": "AAAA,SAAS,gBAAgB;AAEzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYH,mBAC0B,KAD1B;AAVJ,MAAM,QAAQ,CAAC,cAAc,WAAW,GAClC,aAAqD;AAAA,EACzD,YAAY;AAAA,EACZ,WAAW;AACb,GAEa,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC,GACtC,OAAO,MAAM,SAAS;AAC5B,SACE,iCACG;AAAA,aAAS,cAAc,oBAAC,yBAAsB,IAAK,oBAAC,0BAAuB;AAAA,IAE5E;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,OAAK;AAAA,QACL,UAAS;AAAA,QACT,QAAO;AAAA,QACP,MAAK;AAAA,QACL,MAAM,EAAE,SAAS,OAAO;AAAA,QAExB,8BAAC,UAAO,MAAK,MAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,GACxE,qBAAW,IAAI,GAClB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,GAEM,yBAAyB,MAAM;AACnC,QAAM,CAAC,UAAU,WAAW,IAAI,SAc7B;AAAA,IACD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC,GAEK,gBAAgB,CAACA,gBAAuB,YAAY,EAAE,GAAG,UAAU,YAAAA,YAAW,CAAC,GAC/E,qBAAqB,CAACC,cAAa,YAAY,EAAE,GAAG,UAAU,UAAAA,UAAS,CAAC,GACxE,qBAAqB,CAACC,cAC1B,YAAY,EAAE,GAAG,UAAU,cAAc,SAAS,UAAU,UAAAA,UAAS,CAAC,GAClE,EAAE,UAAU,UAAU,cAAc,WAAW,IAAI,UAGnD,YACA,CAAC,YAAY,CAAC,gBAAgB,SAAS,MAAM,aAAa,IACrD,IAEF,SAAS,IAAI,aAAa,IAAI,KAAK,GAGtC,sBAAqD,CAAC,MAAM,WAAW;AAC3E,IAAI,SAAS,WACX,mBAAmB,MAAM,IAEzB,mBAAmB,MAAM;AAAA,EAE7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAQ;AAAA,MACR,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,iBAAgB;AAAA,MAChB,cAAa;AAAA,MACb,UAAS;AAAA,MAET;AAAA,6BAAC,UACC;AAAA,8BAAC,mBACE,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAa;AAAA,cACb,OAAO,SAAS;AAAA,cAChB,QAAQ,SAAS;AAAA,cACjB,GAAG,SAAS;AAAA,cACZ,GAAG,SAAS;AAAA;AAAA,UACd,GAEJ;AAAA,UACA,oBAAC,mBACE,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAa;AAAA,cACb,OAAM;AAAA,cACN,OAAO,SAAS;AAAA,cAChB,QAAQ,SAAS;AAAA,cACjB,GAAG,SAAS;AAAA,cACZ,GAAG,SAAS;AAAA;AAAA,UACd,GAEJ;AAAA,UAEA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,yBAAuB;AAAA,cACvB,MAAM;AAAA,cACN,cAAW;AAAA,cACX,KAAI;AAAA,cACJ,iBAAgB;AAAA,cAEhB;AAAA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,iBAAgB;AAAA,oBAChB,mBAAkB;AAAA,oBAClB,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,qBAAO;AAAA;AAAA,gBACtB;AAAA,gBACA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,iBAAgB;AAAA,oBAChB,mBAAkB;AAAA,oBAClB,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,yBAAW;AAAA;AAAA,gBAC1B;AAAA,gBACA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,iBAAgB;AAAA,oBAChB,mBAAkB;AAAA,oBAClB,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,2BAAa;AAAA;AAAA,gBAC5B;AAAA;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QAEA,oBAAC,mBAAgB,iBAAe,IAAC,QAAQ,EAAE,UAAU,GAAG,SAAS,IAC/D,8BAAC,kBACC,8BAAC,KAAK,SAAL,EAAa,OAAO,YAAY,YAAU,IAAC,MAAM,GAAG,gBAAe,UAClE,8BAAC,MAAG,WAAU,UAAU,sBAAW,GACrC,KAHmB,UAIrB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,GAEM,wBAAwB,MAAM;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAc7B;AAAA,IACD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC,GAEK,gBAAgB,CAACF,gBAAuB,YAAY,EAAE,GAAG,UAAU,YAAAA,YAAW,CAAC,GAC/E,qBAAqB,CAACC,cAAa,YAAY,EAAE,GAAG,UAAU,UAAAA,UAAS,CAAC,GACxE,qBAAqB,CAACC,cAC1B,YAAY,EAAE,GAAG,UAAU,cAAc,SAAS,UAAU,UAAAA,UAAS,CAAC,GAClE,EAAE,UAAU,UAAU,cAAc,WAAW,IAAI,UAGnD,YACA,CAAC,YAAY,CAAC,gBAAgB,SAAS,MAAM,aAAa,IACrD,IAEF,SAAS,IAAI,aAAa,IAAI,KAAK,GAGtC,sBAAqD,CAAC,MAAM,WAAW;AAC3E,IAAI,SAAS,WACX,mBAAmB,MAAM,IAEzB,mBAAmB,MAAM;AAAA,EAE7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,iBAAgB;AAAA,MAChB,cAAa;AAAA,MAEb;AAAA,6BAAC,UACC;AAAA,8BAAC,mBACE,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,SAAS;AAAA,cAChB,QAAO;AAAA,cACP,GAAG,SAAS;AAAA,cACZ,QAAQ;AAAA;AAAA,UACV,GAEJ;AAAA,UACA,oBAAC,mBACE,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,QAAM;AAAA,cACN,OAAO,SAAS;AAAA,cAChB,QAAO;AAAA,cACP,GAAG,SAAS;AAAA,cACZ,QAAQ;AAAA;AAAA,UACV,GAEJ;AAAA,UACA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,yBAAuB;AAAA,cACvB,MAAM;AAAA,cACN,cAAW;AAAA,cACX,wBAAwB;AAAA,cACxB,yBAAyB;AAAA,cACzB,eAAc;AAAA,cACd,aAAY;AAAA,cACZ,mBAAkB;AAAA,cAClB,iBAAgB;AAAA,cAEhB;AAAA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,mBAAkB;AAAA,oBAClB,iBAAgB;AAAA,oBAChB,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,qBAAO;AAAA;AAAA,gBACtB;AAAA,gBACA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,mBAAkB;AAAA,oBAClB,iBAAgB;AAAA,oBAChB,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,yBAAW;AAAA;AAAA,gBAC1B;AAAA,gBACA;AAAA,kBAAC,KAAK;AAAA,kBAAL;AAAA,oBACC,UAAQ;AAAA,oBACR,mBAAkB;AAAA,oBAClB,iBAAgB;AAAA,oBAChB,OAAM;AAAA,oBACN,eAAe;AAAA,oBAEf,8BAAC,eAAY,2BAAa;AAAA;AAAA,gBAC5B;AAAA;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QAEA,oBAAC,mBAAgB,iBAAe,IAAC,QAAQ,EAAE,UAAU,GAAG,SAAS,IAC/D,8BAAC,kBACC,8BAAC,KAAK,SAAL,EAAa,OAAO,YAAY,YAAU,IAAC,MAAM,GAAG,gBAAe,UAClE,8BAAC,MAAG,WAAU,UAAU,sBAAW,GACrC,KAHmB,UAIrB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,GAEM,sBAAsB,CAAC,EAAE,QAAQ,GAAG,MAAM,MAE5C;AAAA,EAAC;AAAA;AAAA,IACC,UAAS;AAAA,IACT,iBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,WAAU;AAAA,IACV,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACC,GAAI,UAAU;AAAA,MACb,iBAAiB;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACC,GAAG;AAAA;AACN,GAIE,iBAAiB,OAAO,QAAQ;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EAEH,WAAW;AAAA,EACX,UAAU;AAAA;AAAA,IAER,WAAW;AAAA,MACT,WAAW,CAAC,eAAe;AAAA,QACzB,YAAY;AAAA,UACV,GAAG,YAAY,IAAI,MAAM;AAAA,UACzB,SAAS;AAAA,QACX;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,GAAG,YAAY,IAAI,MAAM;AAAA,UACzB,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
|
|
5
5
|
"names": ["currentTab", "intentAt", "activeAt"]
|
|
6
6
|
}
|
|
@@ -54,8 +54,6 @@ const demos = ["background", "underline"],
|
|
|
54
54
|
currentTab
|
|
55
55
|
} = tabState,
|
|
56
56
|
direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
57
|
-
enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade",
|
|
58
|
-
exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade",
|
|
59
57
|
handleOnInteraction = (type, layout) => {
|
|
60
58
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
61
59
|
};
|
|
@@ -126,13 +124,11 @@ const demos = ["background", "underline"],
|
|
|
126
124
|
})]
|
|
127
125
|
}), /* @__PURE__ */jsx(AnimatePresence, {
|
|
128
126
|
exitBeforeEnter: !0,
|
|
129
|
-
|
|
130
|
-
|
|
127
|
+
custom: {
|
|
128
|
+
direction
|
|
129
|
+
},
|
|
130
|
+
initial: !1,
|
|
131
131
|
children: /* @__PURE__ */jsx(AnimatedYStack, {
|
|
132
|
-
animation: "100ms",
|
|
133
|
-
x: 0,
|
|
134
|
-
opacity: 1,
|
|
135
|
-
flex: 1,
|
|
136
132
|
children: /* @__PURE__ */jsx(Tabs.Content, {
|
|
137
133
|
value: currentTab,
|
|
138
134
|
forceMount: !0,
|
|
@@ -174,8 +170,6 @@ const demos = ["background", "underline"],
|
|
|
174
170
|
currentTab
|
|
175
171
|
} = tabState,
|
|
176
172
|
direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
177
|
-
enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade",
|
|
178
|
-
exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade",
|
|
179
173
|
handleOnInteraction = (type, layout) => {
|
|
180
174
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
181
175
|
};
|
|
@@ -247,13 +241,11 @@ const demos = ["background", "underline"],
|
|
|
247
241
|
})]
|
|
248
242
|
}), /* @__PURE__ */jsx(AnimatePresence, {
|
|
249
243
|
exitBeforeEnter: !0,
|
|
250
|
-
|
|
251
|
-
|
|
244
|
+
custom: {
|
|
245
|
+
direction
|
|
246
|
+
},
|
|
247
|
+
initial: !1,
|
|
252
248
|
children: /* @__PURE__ */jsx(AnimatedYStack, {
|
|
253
|
-
animation: "100ms",
|
|
254
|
-
x: 0,
|
|
255
|
-
opacity: 1,
|
|
256
|
-
flex: 1,
|
|
257
249
|
children: /* @__PURE__ */jsx(Tabs.Content, {
|
|
258
250
|
value: currentTab,
|
|
259
251
|
forceMount: !0,
|
|
@@ -289,23 +281,24 @@ const demos = ["background", "underline"],
|
|
|
289
281
|
...props
|
|
290
282
|
}),
|
|
291
283
|
AnimatedYStack = styled(YStack, {
|
|
284
|
+
f: 1,
|
|
285
|
+
x: 0,
|
|
286
|
+
o: 1,
|
|
287
|
+
animation: "100ms",
|
|
292
288
|
variants: {
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
true: {
|
|
307
|
-
opacity: 0
|
|
308
|
-
}
|
|
289
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
290
|
+
direction: {
|
|
291
|
+
":number": direction => ({
|
|
292
|
+
enterStyle: {
|
|
293
|
+
x: direction > 0 ? -25 : 25,
|
|
294
|
+
opacity: 0
|
|
295
|
+
},
|
|
296
|
+
exitStyle: {
|
|
297
|
+
zIndex: 0,
|
|
298
|
+
x: direction < 0 ? -25 : 25,
|
|
299
|
+
opacity: 0
|
|
300
|
+
}
|
|
301
|
+
})
|
|
309
302
|
}
|
|
310
303
|
}
|
|
311
304
|
});
|
|
@@ -165,7 +165,7 @@ var demos = [
|
|
|
165
165
|
}));
|
|
166
166
|
}, activeAt = tabState.activeAt, intentAt = tabState.intentAt, prevActiveAt = tabState.prevActiveAt, currentTab = tabState.currentTab, direction = function() {
|
|
167
167
|
return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
|
|
168
|
-
}(),
|
|
168
|
+
}(), handleOnInteraction = function(type, layout) {
|
|
169
169
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
170
170
|
};
|
|
171
171
|
return /* @__PURE__ */ _jsxs(Tabs, {
|
|
@@ -245,13 +245,11 @@ var demos = [
|
|
|
245
245
|
}),
|
|
246
246
|
/* @__PURE__ */ _jsx(AnimatePresence, {
|
|
247
247
|
exitBeforeEnter: !0,
|
|
248
|
-
|
|
249
|
-
|
|
248
|
+
custom: {
|
|
249
|
+
direction
|
|
250
|
+
},
|
|
251
|
+
initial: !1,
|
|
250
252
|
children: /* @__PURE__ */ _jsx(AnimatedYStack, {
|
|
251
|
-
animation: "100ms",
|
|
252
|
-
x: 0,
|
|
253
|
-
opacity: 1,
|
|
254
|
-
flex: 1,
|
|
255
253
|
children: /* @__PURE__ */ _jsx(Tabs.Content, {
|
|
256
254
|
value: currentTab,
|
|
257
255
|
forceMount: !0,
|
|
@@ -298,7 +296,7 @@ var demos = [
|
|
|
298
296
|
}));
|
|
299
297
|
}, activeAt = tabState.activeAt, intentAt = tabState.intentAt, prevActiveAt = tabState.prevActiveAt, currentTab = tabState.currentTab, direction = function() {
|
|
300
298
|
return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
|
|
301
|
-
}(),
|
|
299
|
+
}(), handleOnInteraction = function(type, layout) {
|
|
302
300
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
303
301
|
};
|
|
304
302
|
return /* @__PURE__ */ _jsxs(Tabs, {
|
|
@@ -379,13 +377,11 @@ var demos = [
|
|
|
379
377
|
}),
|
|
380
378
|
/* @__PURE__ */ _jsx(AnimatePresence, {
|
|
381
379
|
exitBeforeEnter: !0,
|
|
382
|
-
|
|
383
|
-
|
|
380
|
+
custom: {
|
|
381
|
+
direction
|
|
382
|
+
},
|
|
383
|
+
initial: !1,
|
|
384
384
|
children: /* @__PURE__ */ _jsx(AnimatedYStack, {
|
|
385
|
-
animation: "100ms",
|
|
386
|
-
x: 0,
|
|
387
|
-
opacity: 1,
|
|
388
|
-
flex: 1,
|
|
389
385
|
children: /* @__PURE__ */ _jsx(Tabs.Content, {
|
|
390
386
|
value: currentTab,
|
|
391
387
|
forceMount: !0,
|
|
@@ -420,22 +416,25 @@ var demos = [
|
|
|
420
416
|
opacity: 0.6
|
|
421
417
|
}, props));
|
|
422
418
|
}, AnimatedYStack = styled(YStack, {
|
|
419
|
+
f: 1,
|
|
420
|
+
x: 0,
|
|
421
|
+
o: 1,
|
|
422
|
+
animation: "100ms",
|
|
423
423
|
variants: {
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
opacity: 0
|
|
424
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
425
|
+
direction: {
|
|
426
|
+
":number": function(direction) {
|
|
427
|
+
return {
|
|
428
|
+
enterStyle: {
|
|
429
|
+
x: direction > 0 ? -25 : 25,
|
|
430
|
+
opacity: 0
|
|
431
|
+
},
|
|
432
|
+
exitStyle: {
|
|
433
|
+
zIndex: 0,
|
|
434
|
+
x: direction < 0 ? -25 : 25,
|
|
435
|
+
opacity: 0
|
|
436
|
+
}
|
|
437
|
+
};
|
|
439
438
|
}
|
|
440
439
|
}
|
|
441
440
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Users/n8/tamagui/packages/demos/src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"mappings": ";AAAA,SAASA,gBAAgB;AAEzB,SACEC,iBACAC,QACAC,IACAC,
|
|
5
|
-
"names": ["useState", "AnimatePresence", "Button", "H5", "SizableText", "Tabs", "XStack", "YStack", "styled", "demos", "demosTitle", "background", "underline", "TabsAdvancedDemo", "demoIndex", "setDemoIndex", "demo", "TabsAdvancedUnderline", "TabsAdvancedBackground", "alignItems", "space", "position", "bottom", "left", "$xxs", "display", "size", "onPress", "x", "length", "activeAt", "currentTab", "intentAt", "prevActiveAt", "tabState", "setTabState", "setCurrentTab", "setIntentIndicator", "setActiveIndicator", "direction", "
|
|
4
|
+
"mappings": ";AAAA,SAASA,gBAAgB;AAEzB,SACEC,iBACAC,QACAC,IACAC,aACAC,MACAC,QACAC,QACAC,cACK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEP,IAAMC,QAAQ;EAAC;EAAc;GACvBC,aAAqD;EACzDC,YAAY;EACZC,WAAW;AACb,GAEaC,mBAAmB,WAAA;AAC9B,MAAkCb,YAAAA,iBAAAA,SAAS,CAAA,GAAA,CAAA,GAApCc,YAA2Bd,UAAAA,CAAAA,GAAhBe,eAAgBf,UAAAA,CAAAA,GAC5BgB,OAAOP,MAAMK,SAAAA;AACnB,SACE,sBAAA,WAAA;;MACGE,SAAS,cAAc,qBAACC,uBAAAA,CAAAA,CAAAA,IAA2B,qBAACC,wBAAAA,CAAAA,CAAAA;MAErD,qBAACZ,QAAAA;QACCa,YAAW;QACXC,OAAK;QACLC,UAAS;QACTC,QAAO;QACPC,MAAK;QACLC,MAAM;UAAEC,SAAS;QAAO;kBAExB,qBAACvB,QAAAA;UAAOwB,MAAK;UAAKC,SAAS,WAAA;mBAAMZ,aAAa,SAACa,GAAAA;sBAAOA,IAAI,KAAKnB,MAAMoB;;;oBAClEnB,WAAWM,IAAAA;;;;;AAKtB,GAEME,yBAAyB,WAAA;AAC7B,MAAgClB,YAAAA,iBAAAA;;;;;;;;;;IAc7B;MACD8B,UAAU;MACVC,YAAY;MACZC,UAAU;MACVC,cAAc;IAChB;EAAA,GAAA,CAAA,GAnBOC,WAAyBlC,UAAAA,CAAAA,GAAfmC,cAAenC,UAAAA,CAAAA,GAqB1BoC,gBAAgB,SAACL,aAAAA;WAAuBI,YAAY,qBAAA,eAAA,CAAA,GAAKD,QAAAA,GAAAA;MAAUH,YAAAA;;KACnEM,qBAAqB,SAACL,WAAAA;WAAaG,YAAY,qBAAA,eAAA,CAAA,GAAKD,QAAAA,GAAAA;MAAUF,UAAAA;;KAC9DM,qBAAqB,SAACR,WAAAA;WAC1BK,YAAY,qBAAA,eAAA,CAAA,GAAKD,QAAAA,GAAAA;MAAUD,cAAcC,SAASJ;MAAUA,UAAAA;;KACtDA,WAAiDI,SAAjDJ,UAAUE,WAAuCE,SAAvCF,UAAUC,eAA6BC,SAA7BD,cAAcF,aAAeG,SAAfH,YAGpCQ,YAAa,WAAA;AACjB,WAAI,CAACT,YAAY,CAACG,gBAAgBH,SAASF,MAAMK,aAAaL,IACrD,IAEFE,SAASF,IAAIK,aAAaL,IAAI,KAAK;EAC5C,EAAA,GAEMY,sBAAqD,SAACC,MAAMC,QAAAA;AAChE,IAAID,SAAS,WACXH,mBAAmBI,MAAAA,IAEnBL,mBAAmBK,MAAAA;EAEvB;AAEA,SACE,sBAACrC,MAAAA;IACCsC,OAAOZ;IACPa,eAAeR;IACfS,aAAY;IACZnB,MAAK;IACLoB,SAAQ;IACRC,QAAQ;IACRC,eAAc;IACdC,gBAAe;IACfC,iBAAgB;IAChBC,cAAa;IACb9B,UAAS;;MAET,sBAACd,QAAAA;;UACC,qBAACN,iBAAAA;sBACE+B,YACC,qBAACoB,qBAAAA;cACCD,cAAa;cACbE,OAAOrB,SAASqB;cAChBN,QAAQf,SAASe;cACjBnB,GAAGI,SAASJ;cACZ0B,GAAGtB,SAASsB;;;UAIlB,qBAACrD,iBAAAA;sBACE6B,YACC,qBAACsB,qBAAAA;cACCD,cAAa;cACbI,OAAM;cACNF,OAAOvB,SAASuB;cAChBN,QAAQjB,SAASiB;cACjBnB,GAAGE,SAASF;cACZ0B,GAAGxB,SAASwB;;;UAKlB,sBAACjD,KAAKmD,MAAI;YACRC,yBAAuB;YACvBC,MAAM;YACNC,cAAW;YACXC,KAAI;YACJV,iBAAgB;;cAEhB,qBAAC7C,KAAKwD,KAAG;gBACPC,UAAQ;gBACRC,iBAAgB;gBAChBC,mBAAkB;gBAClBrB,OAAM;gBACNsB,eAAezB;0BAEf,qBAACpC,aAAAA;4BAAY;;;cAEf,qBAACC,KAAKwD,KAAG;gBACPC,UAAQ;gBACRC,iBAAgB;gBAChBC,mBAAkB;gBAClBrB,OAAM;gBACNsB,eAAezB;0BAEf,qBAACpC,aAAAA;4BAAY;;;cAEf,qBAACC,KAAKwD,KAAG;gBACPC,UAAQ;gBACRC,iBAAgB;gBAChBC,mBAAkB;gBAClBrB,OAAM;gBACNsB,eAAezB;0BAEf,qBAACpC,aAAAA;4BAAY;;;;;;;MAKnB,qBAACH,iBAAAA;QAAgBiE,iBAAe;QAACC,QAAQ;UAAE5B;QAAU;QAAG6B,SAAS;kBAC/D,qBAACC,gBAAAA;oBACC,qBAAChE,KAAKiE,SAAO;YAAC3B,OAAOZ;YAAYwC,YAAU;YAACC,MAAM;YAAGC,gBAAe;sBAClE,qBAACtE,IAAAA;cAAGuE,WAAU;wBAAU3C;;;WAFPA,UAAAA;;;;AAQ7B,GAEMd,wBAAwB,WAAA;AAC5B,MAAgCjB,YAAAA,iBAAAA;;;;;;;;;;IAc7B;MACD8B,UAAU;MACVC,YAAY;MACZC,UAAU;MACVC,cAAc;IAChB;EAAA,GAAA,CAAA,GAnBOC,WAAyBlC,UAAAA,CAAAA,GAAfmC,cAAenC,UAAAA,CAAAA,GAqB1BoC,gBAAgB,SAACL,aAAAA;WAAuBI,YAAY,qBAAA,eAAA,CAAA,GAAKD,QAAAA,GAAAA;MAAUH,YAAAA;;KACnEM,qBAAqB,SAACL,WAAAA;WAAaG,YAAY,qBAAA,eAAA,CAAA,GAAKD,QAAAA,GAAAA;MAAUF,UAAAA;;KAC9DM,qBAAqB,SAACR,WAAAA;WAC1BK,YAAY,qBAAA,eAAA,CAAA,GAAKD,QAAAA,GAAAA;MAAUD,cAAcC,SAASJ;MAAUA,UAAAA;;KACtDA,WAAiDI,SAAjDJ,UAAUE,WAAuCE,SAAvCF,UAAUC,eAA6BC,SAA7BD,cAAcF,aAAeG,SAAfH,YAGpCQ,YAAa,WAAA;AACjB,WAAI,CAACT,YAAY,CAACG,gBAAgBH,SAASF,MAAMK,aAAaL,IACrD,IAEFE,SAASF,IAAIK,aAAaL,IAAI,KAAK;EAC5C,EAAA,GAEMY,sBAAqD,SAACC,MAAMC,QAAAA;AAChE,IAAID,SAAS,WACXH,mBAAmBI,MAAAA,IAEnBL,mBAAmBK,MAAAA;EAEvB;AAEA,SACE,sBAACrC,MAAAA;IACCsC,OAAOZ;IACPa,eAAeR;IACfS,aAAY;IACZnB,MAAK;IACLqB,QAAQ;IACRC,eAAc;IACdC,gBAAe;IACfC,iBAAgB;IAChBC,cAAa;;MAEb,sBAAC5C,QAAAA;;UACC,qBAACN,iBAAAA;sBACE+B,YACC,qBAACoB,qBAAAA;cACCC,OAAOrB,SAASqB;cAChBN,QAAO;cACPnB,GAAGI,SAASJ;cACZN,QAAQ;;;UAId,qBAACrB,iBAAAA;sBACE6B,YACC,qBAACsB,qBAAAA;cACCG,OAAM;cACNoB,QAAM;cACNtB,OAAOvB,SAASuB;cAChBN,QAAO;cACPnB,GAAGE,SAASF;cACZN,QAAQ;;;UAId,sBAACjB,KAAKmD,MAAI;YACRC,yBAAuB;YACvBC,MAAM;YACNC,cAAW;YACXiB,wBAAwB;YACxBC,yBAAyB;YACzBC,eAAc;YACdC,aAAY;YACZC,mBAAkB;YAClB9B,iBAAgB;;cAEhB,qBAAC7C,KAAKwD,KAAG;gBACPC,UAAQ;gBACRE,mBAAkB;gBAClBD,iBAAgB;gBAChBpB,OAAM;gBACNsB,eAAezB;0BAEf,qBAACpC,aAAAA;4BAAY;;;cAEf,qBAACC,KAAKwD,KAAG;gBACPC,UAAQ;gBACRE,mBAAkB;gBAClBD,iBAAgB;gBAChBpB,OAAM;gBACNsB,eAAezB;0BAEf,qBAACpC,aAAAA;4BAAY;;;cAEf,qBAACC,KAAKwD,KAAG;gBACPC,UAAQ;gBACRE,mBAAkB;gBAClBD,iBAAgB;gBAChBpB,OAAM;gBACNsB,eAAezB;0BAEf,qBAACpC,aAAAA;4BAAY;;;;;;;MAKnB,qBAACH,iBAAAA;QAAgBiE,iBAAe;QAACC,QAAQ;UAAE5B;QAAU;QAAG6B,SAAS;kBAC/D,qBAACC,gBAAAA;oBACC,qBAAChE,KAAKiE,SAAO;YAAC3B,OAAOZ;YAAYwC,YAAU;YAACC,MAAM;YAAGC,gBAAe;sBAClE,qBAACtE,IAAAA;cAAGuE,WAAU;wBAAU3C;;;WAFPA,UAAAA;;;;AAQ7B,GAEMqB,sBAAsB,SAAA,QAAA;MAAGuB,SAAAA,OAAAA,QAAWM,QAAAA,2BAAAA,QAAAA;IAAXN;;AAC7B,SACE,qBAACpE,QAAAA,eAAAA;IACCc,UAAS;IACT6B,iBAAgB;IAChBgC,SAAS;IACTC,WAAU;IACVC,YAAY;MACVF,SAAS;IACX;IACAG,WAAW;MACTH,SAAS;IACX;KACKP,UAAU;IACbzB,iBAAiB;IACjBgC,SAAS;EACX,GACID,KAAAA,CAAAA;AAGV,GAEMZ,iBAAiB7D,OAAOD,QAAQ;EACpC+E,GAAG;EACH1D,GAAG;EACH2D,GAAG;EAEHJ,WAAW;EACXK,UAAU;;IAERjD,WAAW;MACT,WAAW,SAACA,WAAAA;eAAe;UACzB6C,YAAY;YACVxD,GAAGW,YAAY,IAAI,MAAM;YACzB2C,SAAS;UACX;UACAG,WAAW;YACTI,QAAQ;YACR7D,GAAGW,YAAY,IAAI,MAAM;YACzB2C,SAAS;UACX;QACF;;IACF;EACF;AACF,CAAA;",
|
|
5
|
+
"names": ["useState", "AnimatePresence", "Button", "H5", "SizableText", "Tabs", "XStack", "YStack", "styled", "demos", "demosTitle", "background", "underline", "TabsAdvancedDemo", "demoIndex", "setDemoIndex", "demo", "TabsAdvancedUnderline", "TabsAdvancedBackground", "alignItems", "space", "position", "bottom", "left", "$xxs", "display", "size", "onPress", "x", "length", "activeAt", "currentTab", "intentAt", "prevActiveAt", "tabState", "setTabState", "setCurrentTab", "setIntentIndicator", "setActiveIndicator", "direction", "handleOnInteraction", "type", "layout", "value", "onValueChange", "orientation", "padding", "height", "flexDirection", "activationMode", "backgroundColor", "borderRadius", "TabsRovingIndicator", "width", "y", "theme", "List", "disablePassBorderRadius", "loop", "aria-label", "gap", "Tab", "unstyled", "paddingVertical", "paddingHorizontal", "onInteraction", "exitBeforeEnter", "custom", "initial", "AnimatedYStack", "Content", "forceMount", "flex", "justifyContent", "textAlign", "active", "borderBottomLeftRadius", "borderBottomRightRadius", "paddingBottom", "borderColor", "borderBottomWidth", "props", "opacity", "animation", "enterStyle", "exitStyle", "f", "o", "variants", "zIndex"]
|
|
6
6
|
}
|
|
@@ -36,7 +36,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
36
36
|
currentTab: "tab1",
|
|
37
37
|
intentAt: null,
|
|
38
38
|
prevActiveAt: null
|
|
39
|
-
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
39
|
+
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1, handleOnInteraction = (type, layout) => {
|
|
40
40
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
41
41
|
};
|
|
42
42
|
return /* @__PURE__ */ jsxs(
|
|
@@ -122,15 +122,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
122
122
|
}
|
|
123
123
|
)
|
|
124
124
|
] }),
|
|
125
|
-
/* @__PURE__ */ jsx(
|
|
126
|
-
AnimatePresence,
|
|
127
|
-
{
|
|
128
|
-
exitBeforeEnter: !0,
|
|
129
|
-
enterVariant,
|
|
130
|
-
exitVariant,
|
|
131
|
-
children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
|
|
132
|
-
}
|
|
133
|
-
)
|
|
125
|
+
/* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: !0, custom: { direction }, initial: !1, children: /* @__PURE__ */ jsx(AnimatedYStack, { children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab) })
|
|
134
126
|
]
|
|
135
127
|
}
|
|
136
128
|
);
|
|
@@ -140,7 +132,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
140
132
|
currentTab: "tab1",
|
|
141
133
|
intentAt: null,
|
|
142
134
|
prevActiveAt: null
|
|
143
|
-
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
135
|
+
}), setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 }), setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 }), setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 }), { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1, handleOnInteraction = (type, layout) => {
|
|
144
136
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
145
137
|
};
|
|
146
138
|
return /* @__PURE__ */ jsxs(
|
|
@@ -227,15 +219,7 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
227
219
|
}
|
|
228
220
|
)
|
|
229
221
|
] }),
|
|
230
|
-
/* @__PURE__ */ jsx(
|
|
231
|
-
AnimatePresence,
|
|
232
|
-
{
|
|
233
|
-
exitBeforeEnter: !0,
|
|
234
|
-
enterVariant,
|
|
235
|
-
exitVariant,
|
|
236
|
-
children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
|
|
237
|
-
}
|
|
238
|
-
)
|
|
222
|
+
/* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: !0, custom: { direction }, initial: !1, children: /* @__PURE__ */ jsx(AnimatedYStack, { children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab) })
|
|
239
223
|
]
|
|
240
224
|
}
|
|
241
225
|
);
|
|
@@ -259,10 +243,25 @@ const demos = ["background", "underline"], demosTitle = {
|
|
|
259
243
|
...props
|
|
260
244
|
}
|
|
261
245
|
), AnimatedYStack = styled(YStack, {
|
|
246
|
+
f: 1,
|
|
247
|
+
x: 0,
|
|
248
|
+
o: 1,
|
|
249
|
+
animation: "100ms",
|
|
262
250
|
variants: {
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
251
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
252
|
+
direction: {
|
|
253
|
+
":number": (direction) => ({
|
|
254
|
+
enterStyle: {
|
|
255
|
+
x: direction > 0 ? -25 : 25,
|
|
256
|
+
opacity: 0
|
|
257
|
+
},
|
|
258
|
+
exitStyle: {
|
|
259
|
+
zIndex: 0,
|
|
260
|
+
x: direction < 0 ? -25 : 25,
|
|
261
|
+
opacity: 0
|
|
262
|
+
}
|
|
263
|
+
})
|
|
264
|
+
}
|
|
266
265
|
}
|
|
267
266
|
});
|
|
268
267
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,gBAAgB;AAEzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["currentTab", "intentAt", "activeAt"]
|
|
6
6
|
}
|
|
@@ -54,8 +54,6 @@ const demos = ["background", "underline"],
|
|
|
54
54
|
currentTab
|
|
55
55
|
} = tabState,
|
|
56
56
|
direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
57
|
-
enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade",
|
|
58
|
-
exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade",
|
|
59
57
|
handleOnInteraction = (type, layout) => {
|
|
60
58
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
61
59
|
};
|
|
@@ -126,13 +124,11 @@ const demos = ["background", "underline"],
|
|
|
126
124
|
})]
|
|
127
125
|
}), /* @__PURE__ */jsx(AnimatePresence, {
|
|
128
126
|
exitBeforeEnter: !0,
|
|
129
|
-
|
|
130
|
-
|
|
127
|
+
custom: {
|
|
128
|
+
direction
|
|
129
|
+
},
|
|
130
|
+
initial: !1,
|
|
131
131
|
children: /* @__PURE__ */jsx(AnimatedYStack, {
|
|
132
|
-
animation: "100ms",
|
|
133
|
-
x: 0,
|
|
134
|
-
opacity: 1,
|
|
135
|
-
flex: 1,
|
|
136
132
|
children: /* @__PURE__ */jsx(Tabs.Content, {
|
|
137
133
|
value: currentTab,
|
|
138
134
|
forceMount: !0,
|
|
@@ -174,8 +170,6 @@ const demos = ["background", "underline"],
|
|
|
174
170
|
currentTab
|
|
175
171
|
} = tabState,
|
|
176
172
|
direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
|
|
177
|
-
enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade",
|
|
178
|
-
exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade",
|
|
179
173
|
handleOnInteraction = (type, layout) => {
|
|
180
174
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
181
175
|
};
|
|
@@ -247,13 +241,11 @@ const demos = ["background", "underline"],
|
|
|
247
241
|
})]
|
|
248
242
|
}), /* @__PURE__ */jsx(AnimatePresence, {
|
|
249
243
|
exitBeforeEnter: !0,
|
|
250
|
-
|
|
251
|
-
|
|
244
|
+
custom: {
|
|
245
|
+
direction
|
|
246
|
+
},
|
|
247
|
+
initial: !1,
|
|
252
248
|
children: /* @__PURE__ */jsx(AnimatedYStack, {
|
|
253
|
-
animation: "100ms",
|
|
254
|
-
x: 0,
|
|
255
|
-
opacity: 1,
|
|
256
|
-
flex: 1,
|
|
257
249
|
children: /* @__PURE__ */jsx(Tabs.Content, {
|
|
258
250
|
value: currentTab,
|
|
259
251
|
forceMount: !0,
|
|
@@ -289,23 +281,24 @@ const demos = ["background", "underline"],
|
|
|
289
281
|
...props
|
|
290
282
|
}),
|
|
291
283
|
AnimatedYStack = styled(YStack, {
|
|
284
|
+
f: 1,
|
|
285
|
+
x: 0,
|
|
286
|
+
o: 1,
|
|
287
|
+
animation: "100ms",
|
|
292
288
|
variants: {
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
true: {
|
|
307
|
-
opacity: 0
|
|
308
|
-
}
|
|
289
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
290
|
+
direction: {
|
|
291
|
+
":number": direction => ({
|
|
292
|
+
enterStyle: {
|
|
293
|
+
x: direction > 0 ? -25 : 25,
|
|
294
|
+
opacity: 0
|
|
295
|
+
},
|
|
296
|
+
exitStyle: {
|
|
297
|
+
zIndex: 0,
|
|
298
|
+
x: direction < 0 ? -25 : 25,
|
|
299
|
+
opacity: 0
|
|
300
|
+
}
|
|
301
|
+
})
|
|
309
302
|
}
|
|
310
303
|
}
|
|
311
304
|
});
|
|
@@ -165,7 +165,7 @@ var demos = [
|
|
|
165
165
|
}));
|
|
166
166
|
}, activeAt = tabState.activeAt, intentAt = tabState.intentAt, prevActiveAt = tabState.prevActiveAt, currentTab = tabState.currentTab, direction = function() {
|
|
167
167
|
return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
|
|
168
|
-
}(),
|
|
168
|
+
}(), handleOnInteraction = function(type, layout) {
|
|
169
169
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
170
170
|
};
|
|
171
171
|
return /* @__PURE__ */ _jsxs(Tabs, {
|
|
@@ -245,13 +245,11 @@ var demos = [
|
|
|
245
245
|
}),
|
|
246
246
|
/* @__PURE__ */ _jsx(AnimatePresence, {
|
|
247
247
|
exitBeforeEnter: !0,
|
|
248
|
-
|
|
249
|
-
|
|
248
|
+
custom: {
|
|
249
|
+
direction
|
|
250
|
+
},
|
|
251
|
+
initial: !1,
|
|
250
252
|
children: /* @__PURE__ */ _jsx(AnimatedYStack, {
|
|
251
|
-
animation: "100ms",
|
|
252
|
-
x: 0,
|
|
253
|
-
opacity: 1,
|
|
254
|
-
flex: 1,
|
|
255
253
|
children: /* @__PURE__ */ _jsx(Tabs.Content, {
|
|
256
254
|
value: currentTab,
|
|
257
255
|
forceMount: !0,
|
|
@@ -298,7 +296,7 @@ var demos = [
|
|
|
298
296
|
}));
|
|
299
297
|
}, activeAt = tabState.activeAt, intentAt = tabState.intentAt, prevActiveAt = tabState.prevActiveAt, currentTab = tabState.currentTab, direction = function() {
|
|
300
298
|
return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
|
|
301
|
-
}(),
|
|
299
|
+
}(), handleOnInteraction = function(type, layout) {
|
|
302
300
|
type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
|
|
303
301
|
};
|
|
304
302
|
return /* @__PURE__ */ _jsxs(Tabs, {
|
|
@@ -379,13 +377,11 @@ var demos = [
|
|
|
379
377
|
}),
|
|
380
378
|
/* @__PURE__ */ _jsx(AnimatePresence, {
|
|
381
379
|
exitBeforeEnter: !0,
|
|
382
|
-
|
|
383
|
-
|
|
380
|
+
custom: {
|
|
381
|
+
direction
|
|
382
|
+
},
|
|
383
|
+
initial: !1,
|
|
384
384
|
children: /* @__PURE__ */ _jsx(AnimatedYStack, {
|
|
385
|
-
animation: "100ms",
|
|
386
|
-
x: 0,
|
|
387
|
-
opacity: 1,
|
|
388
|
-
flex: 1,
|
|
389
385
|
children: /* @__PURE__ */ _jsx(Tabs.Content, {
|
|
390
386
|
value: currentTab,
|
|
391
387
|
forceMount: !0,
|
|
@@ -420,22 +416,25 @@ var demos = [
|
|
|
420
416
|
opacity: 0.6
|
|
421
417
|
}, props));
|
|
422
418
|
}, AnimatedYStack = styled(YStack, {
|
|
419
|
+
f: 1,
|
|
420
|
+
x: 0,
|
|
421
|
+
o: 1,
|
|
422
|
+
animation: "100ms",
|
|
423
423
|
variants: {
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
opacity: 0
|
|
424
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
425
|
+
direction: {
|
|
426
|
+
":number": function(direction) {
|
|
427
|
+
return {
|
|
428
|
+
enterStyle: {
|
|
429
|
+
x: direction > 0 ? -25 : 25,
|
|
430
|
+
opacity: 0
|
|
431
|
+
},
|
|
432
|
+
exitStyle: {
|
|
433
|
+
zIndex: 0,
|
|
434
|
+
x: direction < 0 ? -25 : 25,
|
|
435
|
+
opacity: 0
|
|
436
|
+
}
|
|
437
|
+
};
|
|
439
438
|
}
|
|
440
439
|
}
|
|
441
440
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Users/n8/tamagui/packages/demos/src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"mappings": ";AAAA,SAASA,gBAAgB;AAEzB,SACEC,iBACAC,QACAC,IACAC,
|
|
5
|
-
"names": ["useState", "AnimatePresence", "Button", "H5", "SizableText", "Tabs", "XStack", "YStack", "styled", "demos", "demosTitle", "background", "underline", "TabsAdvancedDemo", "demoIndex", "setDemoIndex", "demo", "TabsAdvancedUnderline", "TabsAdvancedBackground", "alignItems", "space", "position", "bottom", "left", "$xxs", "display", "size", "onPress", "x", "length", "activeAt", "currentTab", "intentAt", "prevActiveAt", "tabState", "setTabState", "setCurrentTab", "setIntentIndicator", "setActiveIndicator", "direction", "
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["useState", "AnimatePresence", "Button", "H5", "SizableText", "Tabs", "XStack", "YStack", "styled", "demos", "demosTitle", "background", "underline", "TabsAdvancedDemo", "demoIndex", "setDemoIndex", "demo", "TabsAdvancedUnderline", "TabsAdvancedBackground", "alignItems", "space", "position", "bottom", "left", "$xxs", "display", "size", "onPress", "x", "length", "activeAt", "currentTab", "intentAt", "prevActiveAt", "tabState", "setTabState", "setCurrentTab", "setIntentIndicator", "setActiveIndicator", "direction", "handleOnInteraction", "type", "layout", "value", "onValueChange", "orientation", "padding", "height", "flexDirection", "activationMode", "backgroundColor", "borderRadius", "TabsRovingIndicator", "width", "y", "theme", "List", "disablePassBorderRadius", "loop", "aria-label", "gap", "Tab", "unstyled", "paddingVertical", "paddingHorizontal", "onInteraction", "exitBeforeEnter", "custom", "initial", "AnimatedYStack", "Content", "forceMount", "flex", "justifyContent", "textAlign", "active", "borderBottomLeftRadius", "borderBottomRightRadius", "paddingBottom", "borderColor", "borderBottomWidth", "props", "opacity", "animation", "enterStyle", "exitStyle", "f", "o", "variants", "zIndex"]
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/demos",
|
|
3
|
-
"version": "1.95.0-
|
|
3
|
+
"version": "1.95.0-1713852157160",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -40,29 +40,29 @@
|
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@tamagui/avatar": "1.95.0-
|
|
44
|
-
"@tamagui/button": "1.95.0-
|
|
45
|
-
"@tamagui/core": "1.95.0-
|
|
46
|
-
"@tamagui/list-item": "1.95.0-
|
|
47
|
-
"@tamagui/logo": "1.95.0-
|
|
48
|
-
"@tamagui/menu": "1.95.0-
|
|
49
|
-
"@tamagui/popover": "1.95.0-
|
|
50
|
-
"@tamagui/progress": "1.95.0-
|
|
51
|
-
"@tamagui/radio-group": "1.95.0-
|
|
52
|
-
"@tamagui/select": "1.95.0-
|
|
53
|
-
"@tamagui/sheet": "1.95.0-
|
|
54
|
-
"@tamagui/site-config": "1.95.0-
|
|
55
|
-
"@tamagui/slider": "1.95.0-
|
|
56
|
-
"@tamagui/stacks": "1.95.0-
|
|
57
|
-
"@tamagui/toast": "1.95.0-
|
|
58
|
-
"tamagui": "1.95.0-
|
|
43
|
+
"@tamagui/avatar": "1.95.0-1713852157160",
|
|
44
|
+
"@tamagui/button": "1.95.0-1713852157160",
|
|
45
|
+
"@tamagui/core": "1.95.0-1713852157160",
|
|
46
|
+
"@tamagui/list-item": "1.95.0-1713852157160",
|
|
47
|
+
"@tamagui/logo": "1.95.0-1713852157160",
|
|
48
|
+
"@tamagui/menu": "1.95.0-1713852157160",
|
|
49
|
+
"@tamagui/popover": "1.95.0-1713852157160",
|
|
50
|
+
"@tamagui/progress": "1.95.0-1713852157160",
|
|
51
|
+
"@tamagui/radio-group": "1.95.0-1713852157160",
|
|
52
|
+
"@tamagui/select": "1.95.0-1713852157160",
|
|
53
|
+
"@tamagui/sheet": "1.95.0-1713852157160",
|
|
54
|
+
"@tamagui/site-config": "1.95.0-1713852157160",
|
|
55
|
+
"@tamagui/slider": "1.95.0-1713852157160",
|
|
56
|
+
"@tamagui/stacks": "1.95.0-1713852157160",
|
|
57
|
+
"@tamagui/toast": "1.95.0-1713852157160",
|
|
58
|
+
"tamagui": "1.95.0-1713852157160"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"react": "*",
|
|
62
62
|
"react-dom": "*"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@tamagui/build": "1.95.0-
|
|
65
|
+
"@tamagui/build": "1.95.0-1713852157160",
|
|
66
66
|
"react": "^18.2.0",
|
|
67
67
|
"react-dom": "^18.2.0"
|
|
68
68
|
},
|
package/src/TabsAdvancedDemo.tsx
CHANGED
|
@@ -5,7 +5,6 @@ import {
|
|
|
5
5
|
Button,
|
|
6
6
|
H5,
|
|
7
7
|
SizableText,
|
|
8
|
-
Stack,
|
|
9
8
|
Tabs,
|
|
10
9
|
XStack,
|
|
11
10
|
YStack,
|
|
@@ -69,11 +68,7 @@ const TabsAdvancedBackground = () => {
|
|
|
69
68
|
setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })
|
|
70
69
|
const { activeAt, intentAt, prevActiveAt, currentTab } = tabState
|
|
71
70
|
|
|
72
|
-
|
|
73
|
-
* -1: from left
|
|
74
|
-
* 0: n/a
|
|
75
|
-
* 1: from right
|
|
76
|
-
*/
|
|
71
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
77
72
|
const direction = (() => {
|
|
78
73
|
if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
|
|
79
74
|
return 0
|
|
@@ -81,11 +76,6 @@ const TabsAdvancedBackground = () => {
|
|
|
81
76
|
return activeAt.x > prevActiveAt.x ? -1 : 1
|
|
82
77
|
})()
|
|
83
78
|
|
|
84
|
-
const enterVariant =
|
|
85
|
-
direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'
|
|
86
|
-
const exitVariant =
|
|
87
|
-
direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'
|
|
88
|
-
|
|
89
79
|
const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {
|
|
90
80
|
if (type === 'select') {
|
|
91
81
|
setActiveIndicator(layout)
|
|
@@ -170,12 +160,8 @@ const TabsAdvancedBackground = () => {
|
|
|
170
160
|
</Tabs.List>
|
|
171
161
|
</YStack>
|
|
172
162
|
|
|
173
|
-
<AnimatePresence
|
|
174
|
-
|
|
175
|
-
enterVariant={enterVariant}
|
|
176
|
-
exitVariant={exitVariant}
|
|
177
|
-
>
|
|
178
|
-
<AnimatedYStack key={currentTab} animation="100ms" x={0} opacity={1} flex={1}>
|
|
163
|
+
<AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
|
|
164
|
+
<AnimatedYStack key={currentTab}>
|
|
179
165
|
<Tabs.Content value={currentTab} forceMount flex={1} justifyContent="center">
|
|
180
166
|
<H5 textAlign="center">{currentTab}</H5>
|
|
181
167
|
</Tabs.Content>
|
|
@@ -213,11 +199,7 @@ const TabsAdvancedUnderline = () => {
|
|
|
213
199
|
setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })
|
|
214
200
|
const { activeAt, intentAt, prevActiveAt, currentTab } = tabState
|
|
215
201
|
|
|
216
|
-
|
|
217
|
-
* -1: from left
|
|
218
|
-
* 0: n/a
|
|
219
|
-
* 1: from right
|
|
220
|
-
*/
|
|
202
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
221
203
|
const direction = (() => {
|
|
222
204
|
if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
|
|
223
205
|
return 0
|
|
@@ -225,11 +207,6 @@ const TabsAdvancedUnderline = () => {
|
|
|
225
207
|
return activeAt.x > prevActiveAt.x ? -1 : 1
|
|
226
208
|
})()
|
|
227
209
|
|
|
228
|
-
const enterVariant =
|
|
229
|
-
direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'
|
|
230
|
-
const exitVariant =
|
|
231
|
-
direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'
|
|
232
|
-
|
|
233
210
|
const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {
|
|
234
211
|
if (type === 'select') {
|
|
235
212
|
setActiveIndicator(layout)
|
|
@@ -314,12 +291,8 @@ const TabsAdvancedUnderline = () => {
|
|
|
314
291
|
</Tabs.List>
|
|
315
292
|
</YStack>
|
|
316
293
|
|
|
317
|
-
<AnimatePresence
|
|
318
|
-
|
|
319
|
-
enterVariant={enterVariant}
|
|
320
|
-
exitVariant={exitVariant}
|
|
321
|
-
>
|
|
322
|
-
<AnimatedYStack key={currentTab} animation="100ms" x={0} opacity={1} flex={1}>
|
|
294
|
+
<AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
|
|
295
|
+
<AnimatedYStack key={currentTab}>
|
|
323
296
|
<Tabs.Content value={currentTab} forceMount flex={1} justifyContent="center">
|
|
324
297
|
<H5 textAlign="center">{currentTab}</H5>
|
|
325
298
|
</Tabs.Content>
|
|
@@ -352,9 +325,25 @@ const TabsRovingIndicator = ({ active, ...props }: { active?: boolean } & StackP
|
|
|
352
325
|
}
|
|
353
326
|
|
|
354
327
|
const AnimatedYStack = styled(YStack, {
|
|
328
|
+
f: 1,
|
|
329
|
+
x: 0,
|
|
330
|
+
o: 1,
|
|
331
|
+
|
|
332
|
+
animation: '100ms',
|
|
355
333
|
variants: {
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
334
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
335
|
+
direction: {
|
|
336
|
+
':number': (direction) => ({
|
|
337
|
+
enterStyle: {
|
|
338
|
+
x: direction > 0 ? -25 : 25,
|
|
339
|
+
opacity: 0,
|
|
340
|
+
},
|
|
341
|
+
exitStyle: {
|
|
342
|
+
zIndex: 0,
|
|
343
|
+
x: direction < 0 ? -25 : 25,
|
|
344
|
+
opacity: 0,
|
|
345
|
+
},
|
|
346
|
+
}),
|
|
347
|
+
},
|
|
359
348
|
} as const,
|
|
360
349
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsAdvancedDemo.d.ts","sourceRoot":"","sources":["../src/TabsAdvancedDemo.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabsAdvancedDemo.d.ts","sourceRoot":"","sources":["../src/TabsAdvancedDemo.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,gBAAgB,+CAqB5B,CAAA"}
|