@flemo/react 1.8.1 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +200 -209
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useContext as a, useEffect as o, useId as s, useImperativeHandle as c, useInsertionEffect as l, useLayoutEffect as u, useReducer as d, useRef as f, useState as p } from "react";
|
|
2
|
-
import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as te,
|
|
3
|
-
import { jsx as L, jsxs as
|
|
2
|
+
import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as te, computeScreenFreezeMode as _, consumeSelfInducedPop as v, createAnimHoldCoordinator as y, createBrowserHistoryDriver as b, createBrowserHistoryDriver as ne, createDecorator as re, createHistoryStore as x, createNavigateStore as S, createNavigationController as C, createPartTransition as w, createRawDecorator as T, createRawPartTransition as E, createRawTransition as D, createRouterScope as ie, createScreenSelector as O, createScreenStore as k, createStepController as A, createSwipeController as ae, createTransition as oe, createTransitionEngine as se, createTransitionStore as ce, decoratorMap as le, eagerlyDecodeImages as ue, ensureImageDecodeOffloader as de, ensureScopeHistorySync as j, enteringInitialStyle as fe, getMatchedPathPattern as pe, holdCompositorWarm as me, isOpaqueColor as he, isServer as ge, markSelfInducedPop as _e, matchesPathname as ve, observeBarHeight as ye, observeViewportScrollHeight as M, partTransitionMap as be, readStepParams as N, registerTransitionDefinitions as xe, releaseScopeHistorySync as P, resolveTransition as Se, seedRouterEntry as F, subscribeStepParamsRestore as I } from "@flemo/core";
|
|
3
|
+
import { jsx as L, jsxs as Ce } from "react/jsx-runtime";
|
|
4
4
|
//#region src/stores/StoreContext.ts
|
|
5
5
|
var R = r(null);
|
|
6
6
|
//#endregion
|
|
@@ -12,9 +12,9 @@ function z() {
|
|
|
12
12
|
}
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/history/HistoryListener.tsx
|
|
15
|
-
function
|
|
15
|
+
function we() {
|
|
16
16
|
let e = z();
|
|
17
|
-
return o(() => (
|
|
17
|
+
return o(() => (j(e), () => P(e)), [e]), null;
|
|
18
18
|
}
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region src/screen/ScreenContext.ts
|
|
@@ -38,10 +38,10 @@ function V() {
|
|
|
38
38
|
}
|
|
39
39
|
//#endregion
|
|
40
40
|
//#region src/screen/ParamsProvider/ParamsContext.ts
|
|
41
|
-
var
|
|
41
|
+
var Te = r({}), Ee = r(() => {});
|
|
42
42
|
//#endregion
|
|
43
43
|
//#region src/screen/ParamsProvider/ParamsReducer.ts
|
|
44
|
-
function
|
|
44
|
+
function H(e, t) {
|
|
45
45
|
switch (t.type) {
|
|
46
46
|
case "SET": return t.params;
|
|
47
47
|
default: return e;
|
|
@@ -49,8 +49,8 @@ function Ee(e, t) {
|
|
|
49
49
|
}
|
|
50
50
|
//#endregion
|
|
51
51
|
//#region src/screen/ParamsProvider/ParamsProvider.tsx
|
|
52
|
-
function
|
|
53
|
-
let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(
|
|
52
|
+
function De({ children: e }) {
|
|
53
|
+
let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(H, n);
|
|
54
54
|
return o(() => {
|
|
55
55
|
if (t) return I(r, (e) => a({
|
|
56
56
|
type: "SET",
|
|
@@ -60,9 +60,9 @@ function H({ children: e }) {
|
|
|
60
60
|
t,
|
|
61
61
|
a,
|
|
62
62
|
r
|
|
63
|
-
]), /* @__PURE__ */ L(
|
|
63
|
+
]), /* @__PURE__ */ L(Ee.Provider, {
|
|
64
64
|
value: a,
|
|
65
|
-
children: /* @__PURE__ */ L(
|
|
65
|
+
children: /* @__PURE__ */ L(Te.Provider, {
|
|
66
66
|
value: i,
|
|
67
67
|
children: e
|
|
68
68
|
})
|
|
@@ -70,42 +70,43 @@ function H({ children: e }) {
|
|
|
70
70
|
}
|
|
71
71
|
//#endregion
|
|
72
72
|
//#region ../../node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.17_react@19.2.7/node_modules/zustand/esm/react.mjs
|
|
73
|
-
var
|
|
74
|
-
function
|
|
73
|
+
var U = (e) => e;
|
|
74
|
+
function W(t, n = U) {
|
|
75
75
|
let r = e.useSyncExternalStore(t.subscribe, e.useCallback(() => n(t.getState()), [t, n]), e.useCallback(() => n(t.getInitialState()), [t, n]));
|
|
76
76
|
return e.useDebugValue(r), r;
|
|
77
77
|
}
|
|
78
78
|
//#endregion
|
|
79
79
|
//#region src/stores/useHistoryStore.ts
|
|
80
|
-
function
|
|
81
|
-
return
|
|
80
|
+
function G(e) {
|
|
81
|
+
return W(z().history, e);
|
|
82
82
|
}
|
|
83
83
|
//#endregion
|
|
84
84
|
//#region src/renderer/Renderer.tsx
|
|
85
|
-
function
|
|
86
|
-
let t =
|
|
85
|
+
function K({ children: e }) {
|
|
86
|
+
let t = G((e) => e.index), r = G((e) => e.histories), i = z(), o = a(B);
|
|
87
87
|
return O(r, t).map((t) => {
|
|
88
|
-
let [r] = n.toArray(e).filter((e) =>
|
|
88
|
+
let [r] = n.toArray(e).filter((e) => ve(e.props.path, t.pathname));
|
|
89
89
|
return r ? /* @__PURE__ */ L(B.Provider, {
|
|
90
90
|
value: {
|
|
91
91
|
...t,
|
|
92
|
+
isPrev: t.isPrev || o.isPrev,
|
|
92
93
|
navigateStore: i.navigate,
|
|
93
|
-
routePath:
|
|
94
|
+
routePath: pe(r.props.path, t.pathname)
|
|
94
95
|
},
|
|
95
|
-
children: /* @__PURE__ */ L(
|
|
96
|
+
children: /* @__PURE__ */ L(De, { children: r })
|
|
96
97
|
}, t.id) : null;
|
|
97
98
|
});
|
|
98
99
|
}
|
|
99
100
|
//#endregion
|
|
100
101
|
//#region src/screen/ScreenViewportContext.ts
|
|
101
|
-
var
|
|
102
|
+
var q = r({ contained: !1 });
|
|
102
103
|
function Oe() {
|
|
103
|
-
return a(
|
|
104
|
+
return a(q);
|
|
104
105
|
}
|
|
105
106
|
//#endregion
|
|
106
107
|
//#region src/transition/styles.ts
|
|
107
|
-
function
|
|
108
|
-
l(() =>
|
|
108
|
+
function J(e, t, n = []) {
|
|
109
|
+
l(() => xe(e, t, n), [
|
|
109
110
|
e,
|
|
110
111
|
t,
|
|
111
112
|
n
|
|
@@ -113,7 +114,7 @@ function ke(e, t, n = []) {
|
|
|
113
114
|
}
|
|
114
115
|
//#endregion
|
|
115
116
|
//#region src/RouterDepthContext.ts
|
|
116
|
-
var
|
|
117
|
+
var ke = r(0), Ae = { contained: !0 };
|
|
117
118
|
function je({ children: e, className: t, style: n }) {
|
|
118
119
|
return /* @__PURE__ */ L("div", {
|
|
119
120
|
className: t,
|
|
@@ -122,9 +123,9 @@ function je({ children: e, className: t, style: n }) {
|
|
|
122
123
|
overflow: "hidden",
|
|
123
124
|
...n
|
|
124
125
|
},
|
|
125
|
-
children: /* @__PURE__ */ L(
|
|
126
|
+
children: /* @__PURE__ */ L(q.Provider, {
|
|
126
127
|
value: Ae,
|
|
127
|
-
children: /* @__PURE__ */ L(
|
|
128
|
+
children: /* @__PURE__ */ L(K, { children: e })
|
|
128
129
|
})
|
|
129
130
|
});
|
|
130
131
|
}
|
|
@@ -145,30 +146,30 @@ function Me(e) {
|
|
|
145
146
|
}
|
|
146
147
|
}), t;
|
|
147
148
|
}
|
|
148
|
-
var Ne = typeof window > "u" ? o : u, Pe = [],
|
|
149
|
-
function
|
|
150
|
-
let m = a(
|
|
151
|
-
routePaths: (
|
|
152
|
-
pathname:
|
|
153
|
-
search:
|
|
149
|
+
var Ne = typeof window > "u" ? o : u, Pe = [], Y = [], Fe = [], Ie = { contained: !0 }, Le = 500, Re = 3e3;
|
|
150
|
+
function ze({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Pe, decorators: c = Y, partTransitions: l = Fe, history: u = "browser", createDriver: d, className: f, style: ee }) {
|
|
151
|
+
let m = a(ke), h = m > 0, g = u === "memory", te = s(), _ = a(B), v = a(R), y = h && _.id ? `_F_${v?.routerKey ?? ""}${_.id}_` : te, b = Me(e), re = b !== null, x = h ? null : v, S = x !== null, C = d ?? ne, [w] = p(() => g ? null : C(S ? void 0 : y)), T = !h && !g && !ge(), E = T && w ? w.readPathname() : t || "/", D = E.indexOf("?"), O = (D >= 0 ? E.slice(0, D) : E) || "/", k = T ? window.location.search : D >= 0 ? E.slice(D) : "", [A] = p(() => ie({
|
|
152
|
+
routePaths: (b ?? n.toArray(e)).map((e) => e.props.path).flat(),
|
|
153
|
+
pathname: O,
|
|
154
|
+
search: k,
|
|
154
155
|
defaultTransitionName: r,
|
|
155
156
|
memory: g,
|
|
156
157
|
browserDriver: w,
|
|
157
|
-
hostedScope:
|
|
158
|
-
routerKey:
|
|
159
|
-
zoneEntryId: h && !
|
|
160
|
-
persistKey: h && !g && !
|
|
158
|
+
hostedScope: x,
|
|
159
|
+
routerKey: S ? void 0 : y,
|
|
160
|
+
zoneEntryId: h && !S && _.id || void 0,
|
|
161
|
+
persistKey: h && !g && !S ? y : void 0
|
|
161
162
|
}));
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}), [
|
|
163
|
+
A.transition.setState({ defaultTransitionName: r }), Ne(() => (A.life.alive = !0, () => {
|
|
164
|
+
A.life.alive = !1;
|
|
165
|
+
}), [A]), J(i, c, l), o(() => de(), []), o(() => {
|
|
165
166
|
if (typeof document > "u") return;
|
|
166
167
|
let e = null, t = null, n = 0, r = () => {
|
|
167
168
|
let r = Date.now();
|
|
168
169
|
if (r - n < Le) return;
|
|
169
170
|
n = r, t && clearTimeout(t);
|
|
170
171
|
let i = e;
|
|
171
|
-
e =
|
|
172
|
+
e = me(), i?.(), t = setTimeout(() => {
|
|
172
173
|
t = null, e?.(), e = null;
|
|
173
174
|
}, Re);
|
|
174
175
|
}, i = [
|
|
@@ -186,30 +187,30 @@ function Y({ children: e, initPath: t = "/", defaultTransitionName: r = "cuperti
|
|
|
186
187
|
}, []), o(() => {
|
|
187
188
|
g || !w || F({
|
|
188
189
|
driver: w,
|
|
189
|
-
routerKey:
|
|
190
|
-
nested: h && !
|
|
191
|
-
seedPathname:
|
|
190
|
+
routerKey: S ? null : y,
|
|
191
|
+
nested: h && !S,
|
|
192
|
+
seedPathname: O,
|
|
192
193
|
defaultTransitionName: r,
|
|
193
|
-
rootParams:
|
|
194
|
+
rootParams: A.history.getState().histories[0]?.params ?? {}
|
|
194
195
|
});
|
|
195
196
|
}, [
|
|
196
197
|
g,
|
|
197
|
-
|
|
198
|
+
S,
|
|
198
199
|
h,
|
|
199
200
|
y,
|
|
200
|
-
|
|
201
|
+
O,
|
|
201
202
|
r,
|
|
202
|
-
|
|
203
|
+
A.history,
|
|
203
204
|
w
|
|
204
205
|
]);
|
|
205
|
-
let
|
|
206
|
+
let ae = re ? e : /* @__PURE__ */ L(K, { children: e }), oe = /* @__PURE__ */ L(ke.Provider, {
|
|
206
207
|
value: m + 1,
|
|
207
|
-
children: /* @__PURE__ */
|
|
208
|
-
value:
|
|
209
|
-
children: [!g && /* @__PURE__ */ L(
|
|
208
|
+
children: /* @__PURE__ */ Ce(R.Provider, {
|
|
209
|
+
value: A,
|
|
210
|
+
children: [!g && /* @__PURE__ */ L(we, {}), h ? /* @__PURE__ */ L(q.Provider, {
|
|
210
211
|
value: Ie,
|
|
211
|
-
children:
|
|
212
|
-
}) :
|
|
212
|
+
children: ae
|
|
213
|
+
}) : ae]
|
|
213
214
|
})
|
|
214
215
|
});
|
|
215
216
|
return h ? /* @__PURE__ */ L("div", {
|
|
@@ -219,25 +220,25 @@ function Y({ children: e, initPath: t = "/", defaultTransitionName: r = "cuperti
|
|
|
219
220
|
overflow: "hidden",
|
|
220
221
|
...ee
|
|
221
222
|
},
|
|
222
|
-
children:
|
|
223
|
-
}) :
|
|
223
|
+
children: oe
|
|
224
|
+
}) : oe;
|
|
224
225
|
}
|
|
225
226
|
//#endregion
|
|
226
227
|
//#region src/Route.tsx
|
|
227
|
-
function
|
|
228
|
+
function X({ element: e }) {
|
|
228
229
|
return e;
|
|
229
230
|
}
|
|
230
231
|
//#endregion
|
|
231
232
|
//#region src/utils/buildRoutePath.ts
|
|
232
|
-
function
|
|
233
|
+
function Z(e, t) {
|
|
233
234
|
return h(e, t);
|
|
234
235
|
}
|
|
235
236
|
//#endregion
|
|
236
237
|
//#region src/navigate/useNavigate.ts
|
|
237
|
-
function
|
|
238
|
+
function Be() {
|
|
238
239
|
let e = z(), t = C({
|
|
239
240
|
stores: e,
|
|
240
|
-
buildPathname: (e, t) =>
|
|
241
|
+
buildPathname: (e, t) => Z(e, t),
|
|
241
242
|
driver: e.driver,
|
|
242
243
|
markSelfInduced: e.markSelfInduced
|
|
243
244
|
});
|
|
@@ -249,21 +250,21 @@ function Z() {
|
|
|
249
250
|
}
|
|
250
251
|
//#endregion
|
|
251
252
|
//#region src/navigate/usePathname.ts
|
|
252
|
-
function
|
|
253
|
-
return
|
|
253
|
+
function Ve() {
|
|
254
|
+
return G((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
|
|
254
255
|
}
|
|
255
256
|
//#endregion
|
|
256
257
|
//#region src/navigate/useStep.ts
|
|
257
|
-
function
|
|
258
|
-
let { routePath: e } = V(), t = z(), n = a(
|
|
258
|
+
function He() {
|
|
259
|
+
let { routePath: e } = V(), t = z(), n = a(Ee), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
|
|
259
260
|
o(() => {
|
|
260
|
-
if (!e) return c(
|
|
261
|
+
if (!e) return c(N(r.readState())), r.subscribe((e) => c(N(e.state)));
|
|
261
262
|
}, [e, r]);
|
|
262
263
|
let l = A({
|
|
263
264
|
stores: t,
|
|
264
265
|
driver: r,
|
|
265
266
|
markSelfInduced: i,
|
|
266
|
-
buildStepPathname: (t) => e ?
|
|
267
|
+
buildStepPathname: (t) => e ? Z(e, t).pathname : m(r.readPathname(), t),
|
|
267
268
|
applyParams: (t) => {
|
|
268
269
|
n({
|
|
269
270
|
type: "SET",
|
|
@@ -280,12 +281,12 @@ function Ve() {
|
|
|
280
281
|
}
|
|
281
282
|
//#endregion
|
|
282
283
|
//#region src/screen/ParamsProvider/useParams.ts
|
|
283
|
-
function
|
|
284
|
-
return a(
|
|
284
|
+
function Ue() {
|
|
285
|
+
return a(Te);
|
|
285
286
|
}
|
|
286
287
|
//#endregion
|
|
287
288
|
//#region src/screen/ScreenFreeze.tsx
|
|
288
|
-
function
|
|
289
|
+
function We({ freeze: e, children: n }) {
|
|
289
290
|
return /* @__PURE__ */ L(t, {
|
|
290
291
|
mode: e ? "hidden" : "visible",
|
|
291
292
|
children: n
|
|
@@ -293,27 +294,27 @@ function Ue({ freeze: e, children: n }) {
|
|
|
293
294
|
}
|
|
294
295
|
//#endregion
|
|
295
296
|
//#region src/screen/scopeAnimHoldCoordinator.ts
|
|
296
|
-
var
|
|
297
|
-
function
|
|
298
|
-
let t =
|
|
299
|
-
return t || (t =
|
|
297
|
+
var Ge = /* @__PURE__ */ new WeakMap();
|
|
298
|
+
function Ke(e) {
|
|
299
|
+
let t = Ge.get(e);
|
|
300
|
+
return t || (t = y(), Ge.set(e, t)), t;
|
|
300
301
|
}
|
|
301
302
|
//#endregion
|
|
302
303
|
//#region src/stores/useNavigateStore.ts
|
|
303
304
|
function Q(e) {
|
|
304
|
-
return
|
|
305
|
+
return W(z().navigate, e);
|
|
305
306
|
}
|
|
306
307
|
//#endregion
|
|
307
308
|
//#region src/screen/ScreenDecorator.tsx
|
|
308
|
-
function
|
|
309
|
-
let { isActive: r,
|
|
310
|
-
c(e, () =>
|
|
311
|
-
let
|
|
312
|
-
return
|
|
313
|
-
ref:
|
|
309
|
+
function qe({ ref: e, style: t, ...n }) {
|
|
310
|
+
let { isActive: r, isPrev: i, transitionName: a } = V(), o = f(null);
|
|
311
|
+
c(e, () => o.current);
|
|
312
|
+
let s = Q((e) => i ? "COMPLETED" : e.status), { decoratorName: l } = Se(a), u = le.get(l);
|
|
313
|
+
return u ? /* @__PURE__ */ L("div", {
|
|
314
|
+
ref: o,
|
|
314
315
|
"data-flemo-decorator": !0,
|
|
315
|
-
"data-flemo-decorator-name":
|
|
316
|
-
"data-flemo-status":
|
|
316
|
+
"data-flemo-decorator-name": u.name,
|
|
317
|
+
"data-flemo-status": s,
|
|
317
318
|
"data-flemo-active": r ? "true" : "false",
|
|
318
319
|
style: {
|
|
319
320
|
position: "absolute",
|
|
@@ -330,9 +331,9 @@ function Ke({ ref: e, style: t, ...n }) {
|
|
|
330
331
|
}
|
|
331
332
|
//#endregion
|
|
332
333
|
//#region src/screen/useViewportScrollHeight.ts
|
|
333
|
-
function
|
|
334
|
+
function Je() {
|
|
334
335
|
let [e, t] = p(0), [n, r] = p(0);
|
|
335
|
-
return o(() =>
|
|
336
|
+
return o(() => M((e, n) => {
|
|
336
337
|
r(n), t(e);
|
|
337
338
|
}), []), {
|
|
338
339
|
viewportScrollHeight: e,
|
|
@@ -342,45 +343,45 @@ function qe() {
|
|
|
342
343
|
//#endregion
|
|
343
344
|
//#region src/stores/useScreenStore.ts
|
|
344
345
|
function $(e) {
|
|
345
|
-
return
|
|
346
|
+
return W(z().screen, e);
|
|
346
347
|
}
|
|
347
348
|
//#endregion
|
|
348
349
|
//#region src/screen/ScreenMotion.tsx
|
|
349
|
-
function
|
|
350
|
-
let { id: y, isActive: b, isRoot:
|
|
351
|
-
|
|
350
|
+
function Ye({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: d, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: _ = !0, ...v }) {
|
|
351
|
+
let { id: y, isActive: b, isRoot: ne, isPrev: re, zIndex: x, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Oe(), T = w ? "absolute" : "fixed", E = z(), D = G((e) => e.index), ie = G((e) => e.histories), O = b || x === D - 1, k = Q((e) => O ? e.status : "COMPLETED"), A = $((e) => e.dragStatus), oe = $((e) => e.replaceTransitionStatus), ce = E.screen.getState().setDragStatus, de = E.screen.getState().setReplaceTransitionStatus, j = b ? ie[D - 1]?.id : ie[D]?.id, pe = $((e) => j ? e.sharedBars[j] : void 0), me = $((e) => j ? e.screenSurfaces[j] : void 0), ge = f(null);
|
|
352
|
+
ge.current ||= se({
|
|
352
353
|
getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
|
|
353
354
|
setDragStatus: ce,
|
|
354
|
-
setReplaceTransitionStatus:
|
|
355
|
+
setReplaceTransitionStatus: de
|
|
355
356
|
});
|
|
356
|
-
let
|
|
357
|
-
|
|
358
|
-
let
|
|
359
|
-
transition:
|
|
360
|
-
decorator:
|
|
357
|
+
let _e = ge.current, ve = f(null);
|
|
358
|
+
ve.current ||= Ke(E.navigate);
|
|
359
|
+
let M = Se(S), { initial: be, swipeDirection: N, decoratorName: xe } = M, P = le.get(xe), { viewportScrollHeight: F } = Je(), I = F > 0, [R, we] = p(0), [B, Te] = p(0), Ee = f(null), H = f(null), De = f(null), U = f(null), W = f(null), K = f({
|
|
360
|
+
transition: M,
|
|
361
|
+
decorator: P,
|
|
361
362
|
hasSharedTopBar: !!a,
|
|
362
363
|
hasSharedBottomBar: !!s,
|
|
363
|
-
viewportScrollHeight:
|
|
364
|
-
isRoot:
|
|
364
|
+
viewportScrollHeight: F,
|
|
365
|
+
isRoot: ne,
|
|
365
366
|
isActive: b,
|
|
366
|
-
status:
|
|
367
|
-
dragStatus:
|
|
367
|
+
status: k,
|
|
368
|
+
dragStatus: A,
|
|
368
369
|
index: D
|
|
369
370
|
});
|
|
370
371
|
K.current = {
|
|
371
|
-
transition:
|
|
372
|
-
decorator:
|
|
372
|
+
transition: M,
|
|
373
|
+
decorator: P,
|
|
373
374
|
hasSharedTopBar: !!a,
|
|
374
375
|
hasSharedBottomBar: !!s,
|
|
375
|
-
viewportScrollHeight:
|
|
376
|
-
isRoot:
|
|
376
|
+
viewportScrollHeight: F,
|
|
377
|
+
isRoot: ne,
|
|
377
378
|
isActive: b,
|
|
378
|
-
status:
|
|
379
|
-
dragStatus:
|
|
379
|
+
status: k,
|
|
380
|
+
dragStatus: A,
|
|
380
381
|
index: D
|
|
381
382
|
};
|
|
382
|
-
let
|
|
383
|
-
|
|
383
|
+
let q = f(null);
|
|
384
|
+
q.current ||= ae({
|
|
384
385
|
getTransition: () => K.current.transition,
|
|
385
386
|
getDecorator: () => K.current.decorator,
|
|
386
387
|
getElements: () => ({
|
|
@@ -388,7 +389,7 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
388
389
|
screenContainer: Ee.current,
|
|
389
390
|
decorator: De.current,
|
|
390
391
|
sharedTopBar: U.current,
|
|
391
|
-
sharedBottomBar:
|
|
392
|
+
sharedBottomBar: W.current
|
|
392
393
|
}),
|
|
393
394
|
hasSharedTopBar: () => K.current.hasSharedTopBar,
|
|
394
395
|
hasSharedBottomBar: () => K.current.hasSharedBottomBar,
|
|
@@ -404,32 +405,32 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
404
405
|
setDragStatus: ce,
|
|
405
406
|
back: () => window.history.back()
|
|
406
407
|
});
|
|
407
|
-
let
|
|
408
|
+
let J = q.current, ke = (e) => J.pointerDown(e.nativeEvent), Ae = (e) => J.pointerMove(e.nativeEvent), je = (e) => J.pointerUp(e.nativeEvent);
|
|
408
409
|
o(() => {
|
|
409
|
-
|
|
410
|
+
ue(H.current);
|
|
410
411
|
}, []), o(() => {
|
|
411
412
|
let e = H.current;
|
|
412
413
|
if (!e) return;
|
|
413
414
|
let t = (e) => {
|
|
414
|
-
|
|
415
|
+
J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
|
|
415
416
|
};
|
|
416
417
|
return e.addEventListener("touchmove", t, { passive: !1 }), () => {
|
|
417
418
|
e.removeEventListener("touchmove", t);
|
|
418
419
|
};
|
|
419
|
-
}, [
|
|
420
|
+
}, [J]), u(() => {
|
|
420
421
|
let e = U.current;
|
|
421
422
|
if (!e) {
|
|
422
|
-
|
|
423
|
+
we(0);
|
|
423
424
|
return;
|
|
424
425
|
}
|
|
425
|
-
return
|
|
426
|
+
return ye(e, we);
|
|
426
427
|
}, [a]), u(() => {
|
|
427
|
-
let e =
|
|
428
|
+
let e = W.current;
|
|
428
429
|
if (!e) {
|
|
429
430
|
Te(0);
|
|
430
431
|
return;
|
|
431
432
|
}
|
|
432
|
-
return
|
|
433
|
+
return ye(e, Te);
|
|
433
434
|
}, [s]), u(() => {
|
|
434
435
|
let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
|
|
435
436
|
return e(y, {
|
|
@@ -445,88 +446,82 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
445
446
|
let e = H.current;
|
|
446
447
|
if (!e) return;
|
|
447
448
|
let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
|
|
448
|
-
return t(y, { opaqueBackground:
|
|
449
|
+
return t(y, { opaqueBackground: he(getComputedStyle(e).backgroundColor) }), () => n(y);
|
|
449
450
|
}, [
|
|
450
451
|
y,
|
|
451
452
|
h,
|
|
452
|
-
|
|
453
|
+
k,
|
|
453
454
|
E.screen
|
|
454
455
|
]);
|
|
455
|
-
let
|
|
456
|
-
status:
|
|
457
|
-
isTopOrTopPrev:
|
|
456
|
+
let Me = O, { app: Ne, nav: Pe } = g({
|
|
457
|
+
status: k,
|
|
458
|
+
isTopOrTopPrev: Me,
|
|
458
459
|
hasTopBar: !!a,
|
|
459
460
|
hasNavBar: !!s,
|
|
460
|
-
partnerBars:
|
|
461
|
-
}),
|
|
462
|
-
status:
|
|
463
|
-
isTopOrTopPrev:
|
|
464
|
-
transitionName:
|
|
465
|
-
}),
|
|
461
|
+
partnerBars: pe
|
|
462
|
+
}), Y = ee({
|
|
463
|
+
status: k,
|
|
464
|
+
isTopOrTopPrev: Me,
|
|
465
|
+
transitionName: S
|
|
466
|
+
}), Fe = te({
|
|
466
467
|
isActive: b,
|
|
467
|
-
isPrev:
|
|
468
|
-
zIndex:
|
|
468
|
+
isPrev: re,
|
|
469
|
+
zIndex: x,
|
|
469
470
|
index: D,
|
|
470
|
-
status:
|
|
471
|
-
dragStatus:
|
|
472
|
-
replaceTransitionStatus:
|
|
473
|
-
}),
|
|
474
|
-
key:
|
|
475
|
-
released:
|
|
471
|
+
status: k,
|
|
472
|
+
dragStatus: A,
|
|
473
|
+
replaceTransitionStatus: oe
|
|
474
|
+
}), Ie = f(Fe), Le = f(Y !== null && Fe), [Re, ze] = p({
|
|
475
|
+
key: Y,
|
|
476
|
+
released: Y === null
|
|
476
477
|
});
|
|
477
|
-
|
|
478
|
-
key:
|
|
479
|
-
released:
|
|
480
|
-
}),
|
|
481
|
-
let X =
|
|
482
|
-
u(() =>
|
|
478
|
+
Re.key !== Y && (ze({
|
|
479
|
+
key: Y,
|
|
480
|
+
released: Y === null
|
|
481
|
+
}), Le.current = Y !== null && Ie.current), Ie.current = Fe;
|
|
482
|
+
let X = Y !== null && Re.key === Y && !Re.released, Z = X ? !b && me?.opaqueBackground ? "park" : b && (k === "PUSHING" || k === "REPLACING") && me?.opaqueBackground ? "park-under" : "true" : "false";
|
|
483
|
+
u(() => _e.driveScreenLifecycle({
|
|
483
484
|
getElements: () => ({
|
|
484
485
|
scope: H.current,
|
|
485
486
|
decorator: De.current,
|
|
486
|
-
bars: [U.current,
|
|
487
|
+
bars: [U.current, W.current]
|
|
487
488
|
}),
|
|
488
|
-
transitionName:
|
|
489
|
-
prevTransitionName:
|
|
490
|
-
status:
|
|
489
|
+
transitionName: S,
|
|
490
|
+
prevTransitionName: C,
|
|
491
|
+
status: k,
|
|
491
492
|
isActive: b,
|
|
492
493
|
animHoldReleased: !X
|
|
493
494
|
}), [
|
|
494
|
-
|
|
495
|
-
|
|
495
|
+
_e,
|
|
496
|
+
k,
|
|
496
497
|
b,
|
|
497
|
-
re,
|
|
498
498
|
C,
|
|
499
|
+
S,
|
|
499
500
|
X
|
|
500
501
|
]), o(() => {
|
|
501
|
-
if (!X ||
|
|
502
|
-
let e =
|
|
503
|
-
return
|
|
502
|
+
if (!X || Y === null) return;
|
|
503
|
+
let e = Y, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
|
|
504
|
+
return ve.current.join(n, () => ze((t) => t.key === e && !t.released ? {
|
|
504
505
|
key: e,
|
|
505
506
|
released: !0
|
|
506
507
|
} : t), {
|
|
507
508
|
scope: H.current,
|
|
508
|
-
decodeWait:
|
|
509
|
-
contentSettle: b && A === "PUSHING" ? {
|
|
510
|
-
graceMs: 150,
|
|
511
|
-
firstWaitMs: 400,
|
|
512
|
-
capMs: 900,
|
|
513
|
-
minNodes: 30
|
|
514
|
-
} : void 0
|
|
509
|
+
decodeWait: Le.current
|
|
515
510
|
});
|
|
516
511
|
}, [
|
|
517
512
|
X,
|
|
518
|
-
|
|
513
|
+
Y,
|
|
519
514
|
Z,
|
|
520
515
|
b,
|
|
521
|
-
|
|
516
|
+
k,
|
|
522
517
|
E.navigate
|
|
523
518
|
]);
|
|
524
|
-
let Be = Z === "park-under" ? {} :
|
|
525
|
-
initial:
|
|
519
|
+
let Be = Z === "park-under" ? {} : fe({
|
|
520
|
+
initial: be,
|
|
526
521
|
isActive: b,
|
|
527
|
-
status:
|
|
522
|
+
status: k
|
|
528
523
|
});
|
|
529
|
-
return /* @__PURE__ */
|
|
524
|
+
return /* @__PURE__ */ Ce("div", {
|
|
530
525
|
ref: Ee,
|
|
531
526
|
style: {
|
|
532
527
|
position: T,
|
|
@@ -553,16 +548,16 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
553
548
|
zIndex: 1
|
|
554
549
|
}
|
|
555
550
|
}),
|
|
556
|
-
/* @__PURE__ */
|
|
551
|
+
/* @__PURE__ */ Ce("div", {
|
|
557
552
|
ref: H,
|
|
558
553
|
...v,
|
|
559
|
-
onPointerDown:
|
|
560
|
-
onPointerMove:
|
|
561
|
-
onPointerUp:
|
|
562
|
-
onPointerCancel:
|
|
554
|
+
onPointerDown: ke,
|
|
555
|
+
onPointerMove: Ae,
|
|
556
|
+
onPointerUp: je,
|
|
557
|
+
onPointerCancel: je,
|
|
563
558
|
"data-flemo-screen": !0,
|
|
564
|
-
"data-flemo-transition":
|
|
565
|
-
"data-flemo-status":
|
|
559
|
+
"data-flemo-transition": S,
|
|
560
|
+
"data-flemo-status": k,
|
|
566
561
|
"data-flemo-active": b ? "true" : "false",
|
|
567
562
|
"data-flemo-anim-hold": Z,
|
|
568
563
|
style: {
|
|
@@ -571,7 +566,7 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
571
566
|
height: "100%",
|
|
572
567
|
backgroundColor: h,
|
|
573
568
|
overflowY: _ ? void 0 : "auto",
|
|
574
|
-
touchAction:
|
|
569
|
+
touchAction: N === "x" ? "pan-y" : N === "y" ? "pan-x" : "auto",
|
|
575
570
|
...Be,
|
|
576
571
|
...v.style
|
|
577
572
|
},
|
|
@@ -588,7 +583,7 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
588
583
|
}),
|
|
589
584
|
a && /* @__PURE__ */ L("div", { style: {
|
|
590
585
|
width: "100%",
|
|
591
|
-
minHeight:
|
|
586
|
+
minHeight: R
|
|
592
587
|
} }),
|
|
593
588
|
c,
|
|
594
589
|
/* @__PURE__ */ L("div", {
|
|
@@ -602,13 +597,13 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
602
597
|
}),
|
|
603
598
|
l,
|
|
604
599
|
s && /* @__PURE__ */ L("div", { style: {
|
|
605
|
-
display:
|
|
600
|
+
display: I ? "none" : void 0,
|
|
606
601
|
width: "100%",
|
|
607
|
-
minHeight:
|
|
602
|
+
minHeight: B
|
|
608
603
|
} }),
|
|
609
604
|
!m && r && /* @__PURE__ */ L("div", {
|
|
610
605
|
style: {
|
|
611
|
-
display:
|
|
606
|
+
display: I ? "none" : void 0,
|
|
612
607
|
minHeight: r
|
|
613
608
|
},
|
|
614
609
|
children: /* @__PURE__ */ L("div", { style: {
|
|
@@ -624,10 +619,10 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
624
619
|
a && /* @__PURE__ */ L("div", {
|
|
625
620
|
ref: U,
|
|
626
621
|
"data-flemo-bar": "app",
|
|
627
|
-
"data-flemo-bar-transition":
|
|
628
|
-
"data-flemo-bar-status":
|
|
622
|
+
"data-flemo-bar-transition": S,
|
|
623
|
+
"data-flemo-bar-status": k,
|
|
629
624
|
"data-flemo-bar-active": b ? "true" : "false",
|
|
630
|
-
"data-flemo-bar-riding":
|
|
625
|
+
"data-flemo-bar-riding": Ne ? "true" : "false",
|
|
631
626
|
"data-flemo-anim-hold": Z,
|
|
632
627
|
style: {
|
|
633
628
|
position: T,
|
|
@@ -639,15 +634,15 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
639
634
|
children: a
|
|
640
635
|
}),
|
|
641
636
|
s && /* @__PURE__ */ L("div", {
|
|
642
|
-
ref:
|
|
637
|
+
ref: W,
|
|
643
638
|
"data-flemo-bar": "nav",
|
|
644
|
-
"data-flemo-bar-transition":
|
|
645
|
-
"data-flemo-bar-status":
|
|
639
|
+
"data-flemo-bar-transition": S,
|
|
640
|
+
"data-flemo-bar-status": k,
|
|
646
641
|
"data-flemo-bar-active": b ? "true" : "false",
|
|
647
|
-
"data-flemo-bar-riding":
|
|
642
|
+
"data-flemo-bar-riding": Pe ? "true" : "false",
|
|
648
643
|
"data-flemo-anim-hold": Z,
|
|
649
644
|
style: {
|
|
650
|
-
display:
|
|
645
|
+
display: I ? "none" : void 0,
|
|
651
646
|
position: T,
|
|
652
647
|
bottom: m ? 0 : r,
|
|
653
648
|
left: 0,
|
|
@@ -656,7 +651,7 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
656
651
|
},
|
|
657
652
|
children: s
|
|
658
653
|
}),
|
|
659
|
-
|
|
654
|
+
P && /* @__PURE__ */ L(qe, {
|
|
660
655
|
ref: De,
|
|
661
656
|
"data-flemo-anim-hold": Z
|
|
662
657
|
}),
|
|
@@ -676,41 +671,37 @@ function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
676
671
|
}
|
|
677
672
|
//#endregion
|
|
678
673
|
//#region src/screen/Screen.tsx
|
|
679
|
-
function
|
|
680
|
-
let { isActive: n, isPrev: r, zIndex: i } = V(), a =
|
|
674
|
+
function Xe({ children: e, ...t }) {
|
|
675
|
+
let { isActive: n, isPrev: r, zIndex: i } = V(), a = _({
|
|
681
676
|
isActive: n,
|
|
682
677
|
isPrev: r,
|
|
683
678
|
zIndex: i,
|
|
684
|
-
index:
|
|
685
|
-
status:
|
|
679
|
+
index: G((e) => e.index),
|
|
680
|
+
status: Q((e) => e.status),
|
|
686
681
|
dragStatus: $((e) => e.dragStatus),
|
|
687
682
|
replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
|
|
688
|
-
}), [
|
|
689
|
-
return
|
|
690
|
-
if (
|
|
691
|
-
let e = setTimeout(() =>
|
|
683
|
+
}), [s, c] = p(a !== "live");
|
|
684
|
+
return a === "live" && s && c(!1), a === "immediate" && !s && c(!0), o(() => {
|
|
685
|
+
if (a !== "deferred" || s) return;
|
|
686
|
+
let e = setTimeout(() => c(!0), Ze);
|
|
692
687
|
return () => clearTimeout(e);
|
|
693
|
-
}, [
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
s
|
|
697
|
-
]), /* @__PURE__ */ L(Ue, {
|
|
698
|
-
freeze: l,
|
|
699
|
-
children: /* @__PURE__ */ L(Je, {
|
|
688
|
+
}, [a, s]), /* @__PURE__ */ L(We, {
|
|
689
|
+
freeze: s,
|
|
690
|
+
children: /* @__PURE__ */ L(Ye, {
|
|
700
691
|
...t,
|
|
701
692
|
children: e
|
|
702
693
|
})
|
|
703
694
|
});
|
|
704
695
|
}
|
|
705
|
-
var
|
|
696
|
+
var Ze = 600;
|
|
706
697
|
//#endregion
|
|
707
698
|
//#region src/screen/Part.tsx
|
|
708
|
-
function
|
|
709
|
-
let { isActive: a,
|
|
699
|
+
function Qe({ ref: e, name: t, style: n, children: r, ...i }) {
|
|
700
|
+
let { isActive: a, isPrev: o, navigateStore: s } = V(), c = z();
|
|
710
701
|
return /* @__PURE__ */ L("div", {
|
|
711
702
|
ref: e,
|
|
712
703
|
"data-flemo-part-name": t,
|
|
713
|
-
"data-flemo-status":
|
|
704
|
+
"data-flemo-status": W(s ?? c.navigate, (e) => o ? "COMPLETED" : e.status),
|
|
714
705
|
"data-flemo-active": a ? "true" : "false",
|
|
715
706
|
style: n,
|
|
716
707
|
...i,
|
|
@@ -719,15 +710,15 @@ function Ze({ ref: e, name: t, style: n, children: r, ...i }) {
|
|
|
719
710
|
}
|
|
720
711
|
//#endregion
|
|
721
712
|
//#region src/stores/RouterScopeProvider.tsx
|
|
722
|
-
function
|
|
713
|
+
function $e({ children: e }) {
|
|
723
714
|
let [t] = p(() => ({
|
|
724
|
-
history:
|
|
715
|
+
history: x(),
|
|
725
716
|
navigate: S(),
|
|
726
|
-
transition:
|
|
717
|
+
transition: ce(),
|
|
727
718
|
screen: k(),
|
|
728
|
-
driver:
|
|
729
|
-
markSelfInduced:
|
|
730
|
-
consume:
|
|
719
|
+
driver: ne(),
|
|
720
|
+
markSelfInduced: _e,
|
|
721
|
+
consume: v,
|
|
731
722
|
life: { alive: !0 }
|
|
732
723
|
}));
|
|
733
724
|
return /* @__PURE__ */ L(R.Provider, {
|
|
@@ -736,4 +727,4 @@ function Qe({ children: e }) {
|
|
|
736
727
|
});
|
|
737
728
|
}
|
|
738
729
|
//#endregion
|
|
739
|
-
export {
|
|
730
|
+
export { Qe as Part, X as Route, ze as Router, $e as RouterScopeProvider, Xe as Screen, B as ScreenContext, qe as ScreenDecorator, We as ScreenFreeze, Ye as ScreenMotion, je as Slot, b as createBrowserHistoryDriver, re as createDecorator, w as createPartTransition, T as createRawDecorator, E as createRawPartTransition, D as createRawTransition, oe as createTransition, be as partTransitionMap, G as useHistoryStore, Be as useNavigate, Q as useNavigateStore, Ue as useParams, Ve as usePathname, V as useScreen, $ as useScreenStore, He as useStep, z as useStores, Je as useViewportScrollHeight };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flemo/react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.0",
|
|
4
4
|
"description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
|
|
5
5
|
"main": "./dist/index.mjs",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"path-to-regexp": "^8.4.2",
|
|
38
38
|
"zustand": "^5.0.14",
|
|
39
|
-
"@flemo/core": "1.
|
|
39
|
+
"@flemo/core": "1.22.1"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@testing-library/jest-dom": "^6.9.1",
|