@flemo/react 1.6.7 → 1.6.8
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
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
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
|
|
2
|
-
import { animHoldKey as
|
|
3
|
-
import { jsx as
|
|
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 ee, useRef as d, useState as f } from "react";
|
|
2
|
+
import { animHoldKey as te, appendParamsQuery as p, buildRoutePath as m, computeBarRiding as h, computeScreenFreeze as ne, consumeSelfInducedPop as g, createAnimHoldCoordinator as _, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as re, createNavigateStore as x, createNavigationController as S, createPartTransition as C, createRawDecorator as w, createRawPartTransition as T, createRawTransition as E, createRouterScope as D, createScreenSelector as O, createScreenStore as k, createStepController as ie, createSwipeController as A, createTransition as j, createTransitionEngine as ae, createTransitionStore as M, decoratorMap as oe, eagerlyDecodeImages as se, ensureScopeHistorySync as ce, enteringInitialStyle as le, getMatchedPathPattern as N, isOpaqueColor as ue, isServer as de, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as ge, readStepParams as P, registerTransitionDefinitions as _e, releaseScopeHistorySync as ve, resolveTransition as ye, seedRouterEntry as be, subscribeStepParamsRestore as F } from "@flemo/core";
|
|
3
|
+
import { jsx as I, jsxs as xe } from "react/jsx-runtime";
|
|
4
4
|
//#region src/stores/StoreContext.ts
|
|
5
|
-
var
|
|
5
|
+
var L = r(null);
|
|
6
6
|
//#endregion
|
|
7
7
|
//#region src/stores/useStores.ts
|
|
8
|
-
function
|
|
9
|
-
let e = a(
|
|
8
|
+
function R() {
|
|
9
|
+
let e = a(L);
|
|
10
10
|
if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
|
|
11
11
|
return e;
|
|
12
12
|
}
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/history/HistoryListener.tsx
|
|
15
|
-
function
|
|
16
|
-
let e =
|
|
17
|
-
return o(() => (
|
|
15
|
+
function z() {
|
|
16
|
+
let e = R();
|
|
17
|
+
return o(() => (ce(e), () => ve(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 Se = r({}),
|
|
41
|
+
var Se = r({}), Ce = r(() => {});
|
|
42
42
|
//#endregion
|
|
43
43
|
//#region src/screen/ParamsProvider/ParamsReducer.ts
|
|
44
|
-
function
|
|
44
|
+
function we(e, t) {
|
|
45
45
|
switch (t.type) {
|
|
46
46
|
case "SET": return t.params;
|
|
47
47
|
default: return e;
|
|
@@ -49,10 +49,10 @@ function Ce(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 } =
|
|
52
|
+
function Te({ children: e }) {
|
|
53
|
+
let { isActive: t, params: n } = V(), { driver: r } = R(), [i, a] = ee(we, n);
|
|
54
54
|
return o(() => {
|
|
55
|
-
if (t) return
|
|
55
|
+
if (t) return F(r, (e) => a({
|
|
56
56
|
type: "SET",
|
|
57
57
|
params: e
|
|
58
58
|
}));
|
|
@@ -60,9 +60,9 @@ function U({ children: e }) {
|
|
|
60
60
|
t,
|
|
61
61
|
a,
|
|
62
62
|
r
|
|
63
|
-
]), /* @__PURE__ */
|
|
63
|
+
]), /* @__PURE__ */ I(Ce.Provider, {
|
|
64
64
|
value: a,
|
|
65
|
-
children: /* @__PURE__ */
|
|
65
|
+
children: /* @__PURE__ */ I(Se.Provider, {
|
|
66
66
|
value: i,
|
|
67
67
|
children: e
|
|
68
68
|
})
|
|
@@ -70,41 +70,41 @@ function U({ 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 H = (e) => e;
|
|
74
|
+
function U(t, n = H) {
|
|
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 W(e) {
|
|
81
|
+
return U(R().history, e);
|
|
82
82
|
}
|
|
83
83
|
//#endregion
|
|
84
84
|
//#region src/renderer/Renderer.tsx
|
|
85
|
-
function
|
|
86
|
-
let t =
|
|
87
|
-
return
|
|
85
|
+
function G({ children: e }) {
|
|
86
|
+
let t = W((e) => e.index);
|
|
87
|
+
return O(W((e) => e.histories), t).map((t) => {
|
|
88
88
|
let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
|
|
89
|
-
return r ? /* @__PURE__ */
|
|
89
|
+
return r ? /* @__PURE__ */ I(B.Provider, {
|
|
90
90
|
value: {
|
|
91
91
|
...t,
|
|
92
|
-
routePath:
|
|
92
|
+
routePath: N(r.props.path, t.pathname)
|
|
93
93
|
},
|
|
94
|
-
children: /* @__PURE__ */
|
|
94
|
+
children: /* @__PURE__ */ I(Te, { children: r })
|
|
95
95
|
}, t.id) : null;
|
|
96
96
|
});
|
|
97
97
|
}
|
|
98
98
|
//#endregion
|
|
99
99
|
//#region src/screen/ScreenViewportContext.ts
|
|
100
|
-
var
|
|
101
|
-
function
|
|
102
|
-
return a(
|
|
100
|
+
var K = r({ contained: !1 });
|
|
101
|
+
function Ee() {
|
|
102
|
+
return a(K);
|
|
103
103
|
}
|
|
104
104
|
//#endregion
|
|
105
105
|
//#region src/transition/styles.ts
|
|
106
|
-
function
|
|
107
|
-
l(() =>
|
|
106
|
+
function q(e, t, n = []) {
|
|
107
|
+
l(() => _e(e, t, n), [
|
|
108
108
|
e,
|
|
109
109
|
t,
|
|
110
110
|
n
|
|
@@ -112,109 +112,109 @@ function Ee(e, t, n = []) {
|
|
|
112
112
|
}
|
|
113
113
|
//#endregion
|
|
114
114
|
//#region src/RouterDepthContext.ts
|
|
115
|
-
var De = r(0),
|
|
116
|
-
function
|
|
117
|
-
return /* @__PURE__ */
|
|
115
|
+
var De = r(0), J = { contained: !0 };
|
|
116
|
+
function Oe({ children: e, className: t, style: n }) {
|
|
117
|
+
return /* @__PURE__ */ I("div", {
|
|
118
118
|
className: t,
|
|
119
119
|
style: {
|
|
120
120
|
position: "relative",
|
|
121
121
|
overflow: "hidden",
|
|
122
122
|
...n
|
|
123
123
|
},
|
|
124
|
-
children: /* @__PURE__ */
|
|
125
|
-
value:
|
|
126
|
-
children: /* @__PURE__ */
|
|
124
|
+
children: /* @__PURE__ */ I(K.Provider, {
|
|
125
|
+
value: J,
|
|
126
|
+
children: /* @__PURE__ */ I(G, { children: e })
|
|
127
127
|
})
|
|
128
128
|
});
|
|
129
129
|
}
|
|
130
130
|
//#endregion
|
|
131
131
|
//#region src/Router.tsx
|
|
132
|
-
function
|
|
132
|
+
function ke(e) {
|
|
133
133
|
let t = null;
|
|
134
134
|
return n.forEach(e, (e) => {
|
|
135
135
|
if (t || !i(e)) return;
|
|
136
|
-
if (e.type ===
|
|
136
|
+
if (e.type === Oe) {
|
|
137
137
|
t = n.toArray(e.props.children).filter(i);
|
|
138
138
|
return;
|
|
139
139
|
}
|
|
140
140
|
let r = e.props.children;
|
|
141
141
|
if (r) {
|
|
142
|
-
let e =
|
|
142
|
+
let e = ke(r);
|
|
143
143
|
e && (t = e);
|
|
144
144
|
}
|
|
145
145
|
}), t;
|
|
146
146
|
}
|
|
147
|
-
var
|
|
148
|
-
function
|
|
149
|
-
let
|
|
150
|
-
routePaths: (
|
|
151
|
-
pathname:
|
|
152
|
-
search:
|
|
147
|
+
var Ae = typeof window > "u" ? o : u, je = [], Me = [], Ne = [], Y = { contained: !0 };
|
|
148
|
+
function Pe({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = je, decorators: c = Me, partTransitions: l = Ne, history: u = "browser", createDriver: ee, className: d, style: te }) {
|
|
149
|
+
let p = a(De), m = p > 0, h = u === "memory", ne = s(), g = a(B), _ = m && g.id ? `_F_${g.id}_` : ne, v = ke(e), b = v !== null, re = a(L), x = m ? null : re, S = x !== null, C = ee ?? y, [w] = f(() => h ? null : C(S ? void 0 : _)), T = !m && !h && !de(), E = T && w ? w.readPathname() : t || "/", O = E.indexOf("?"), k = (O >= 0 ? E.slice(0, O) : E) || "/", ie = T ? window.location.search : O >= 0 ? E.slice(O) : "", [A] = f(() => D({
|
|
150
|
+
routePaths: (v ?? n.toArray(e)).map((e) => e.props.path).flat(),
|
|
151
|
+
pathname: k,
|
|
152
|
+
search: ie,
|
|
153
153
|
defaultTransitionName: r,
|
|
154
|
-
memory:
|
|
155
|
-
browserDriver:
|
|
156
|
-
hostedScope:
|
|
157
|
-
routerKey:
|
|
158
|
-
zoneEntryId:
|
|
159
|
-
persistKey:
|
|
154
|
+
memory: h,
|
|
155
|
+
browserDriver: w,
|
|
156
|
+
hostedScope: x,
|
|
157
|
+
routerKey: S ? void 0 : _,
|
|
158
|
+
zoneEntryId: m && !S && g.id || void 0,
|
|
159
|
+
persistKey: m && !h && !S ? _ : void 0
|
|
160
160
|
}));
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}), [
|
|
164
|
-
|
|
165
|
-
driver:
|
|
166
|
-
routerKey:
|
|
167
|
-
nested:
|
|
168
|
-
seedPathname:
|
|
161
|
+
A.transition.setState({ defaultTransitionName: r }), Ae(() => (A.life.alive = !0, () => {
|
|
162
|
+
A.life.alive = !1;
|
|
163
|
+
}), [A]), q(i, c, l), o(() => {
|
|
164
|
+
h || !w || be({
|
|
165
|
+
driver: w,
|
|
166
|
+
routerKey: S ? null : _,
|
|
167
|
+
nested: m && !S,
|
|
168
|
+
seedPathname: k,
|
|
169
169
|
defaultTransitionName: r,
|
|
170
|
-
rootParams:
|
|
170
|
+
rootParams: A.history.getState().histories[0]?.params ?? {}
|
|
171
171
|
});
|
|
172
172
|
}, [
|
|
173
|
-
g,
|
|
174
|
-
w,
|
|
175
173
|
h,
|
|
176
|
-
|
|
177
|
-
|
|
174
|
+
S,
|
|
175
|
+
m,
|
|
176
|
+
_,
|
|
177
|
+
k,
|
|
178
178
|
r,
|
|
179
|
-
|
|
180
|
-
|
|
179
|
+
A.history,
|
|
180
|
+
w
|
|
181
181
|
]);
|
|
182
|
-
let
|
|
183
|
-
value:
|
|
184
|
-
children: /* @__PURE__ */
|
|
185
|
-
value:
|
|
186
|
-
children: [!
|
|
187
|
-
value:
|
|
188
|
-
children:
|
|
189
|
-
}) :
|
|
182
|
+
let j = b ? e : /* @__PURE__ */ I(G, { children: e }), ae = /* @__PURE__ */ I(De.Provider, {
|
|
183
|
+
value: p + 1,
|
|
184
|
+
children: /* @__PURE__ */ xe(L.Provider, {
|
|
185
|
+
value: A,
|
|
186
|
+
children: [!h && /* @__PURE__ */ I(z, {}), m ? /* @__PURE__ */ I(K.Provider, {
|
|
187
|
+
value: Y,
|
|
188
|
+
children: j
|
|
189
|
+
}) : j]
|
|
190
190
|
})
|
|
191
191
|
});
|
|
192
|
-
return
|
|
193
|
-
className:
|
|
192
|
+
return m ? /* @__PURE__ */ I("div", {
|
|
193
|
+
className: d,
|
|
194
194
|
style: {
|
|
195
195
|
position: "relative",
|
|
196
196
|
overflow: "hidden",
|
|
197
|
-
...
|
|
197
|
+
...te
|
|
198
198
|
},
|
|
199
|
-
children:
|
|
200
|
-
}) :
|
|
199
|
+
children: ae
|
|
200
|
+
}) : ae;
|
|
201
201
|
}
|
|
202
202
|
//#endregion
|
|
203
203
|
//#region src/Route.tsx
|
|
204
|
-
function
|
|
204
|
+
function Fe({ element: e }) {
|
|
205
205
|
return e;
|
|
206
206
|
}
|
|
207
207
|
//#endregion
|
|
208
208
|
//#region src/utils/buildRoutePath.ts
|
|
209
|
-
function
|
|
210
|
-
return
|
|
209
|
+
function Ie(e, t) {
|
|
210
|
+
return m(e, t);
|
|
211
211
|
}
|
|
212
212
|
//#endregion
|
|
213
213
|
//#region src/navigate/useNavigate.ts
|
|
214
|
-
function
|
|
215
|
-
let e =
|
|
214
|
+
function Le() {
|
|
215
|
+
let e = R(), t = S({
|
|
216
216
|
stores: e,
|
|
217
|
-
buildPathname: (e, t) =>
|
|
217
|
+
buildPathname: (e, t) => Ie(e, t),
|
|
218
218
|
driver: e.driver,
|
|
219
219
|
markSelfInduced: e.markSelfInduced
|
|
220
220
|
});
|
|
@@ -226,21 +226,21 @@ function Fe() {
|
|
|
226
226
|
}
|
|
227
227
|
//#endregion
|
|
228
228
|
//#region src/navigate/usePathname.ts
|
|
229
|
-
function
|
|
230
|
-
return
|
|
229
|
+
function Re() {
|
|
230
|
+
return W((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
|
|
231
231
|
}
|
|
232
232
|
//#endregion
|
|
233
233
|
//#region src/navigate/useStep.ts
|
|
234
|
-
function
|
|
235
|
-
let { routePath: e } = V(), t =
|
|
234
|
+
function X() {
|
|
235
|
+
let { routePath: e } = V(), t = R(), n = a(Ce), { driver: r, markSelfInduced: i } = t, [s, c] = f(null);
|
|
236
236
|
o(() => {
|
|
237
|
-
if (!e) return c(
|
|
237
|
+
if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
|
|
238
238
|
}, [e, r]);
|
|
239
|
-
let l =
|
|
239
|
+
let l = ie({
|
|
240
240
|
stores: t,
|
|
241
241
|
driver: r,
|
|
242
242
|
markSelfInduced: i,
|
|
243
|
-
buildStepPathname: (t) => e ?
|
|
243
|
+
buildStepPathname: (t) => e ? Ie(e, t).pathname : p(r.readPathname(), t),
|
|
244
244
|
applyParams: (t) => {
|
|
245
245
|
n({
|
|
246
246
|
type: "SET",
|
|
@@ -257,13 +257,13 @@ function Le() {
|
|
|
257
257
|
}
|
|
258
258
|
//#endregion
|
|
259
259
|
//#region src/screen/ParamsProvider/useParams.ts
|
|
260
|
-
function
|
|
260
|
+
function Z() {
|
|
261
261
|
return a(Se);
|
|
262
262
|
}
|
|
263
263
|
//#endregion
|
|
264
264
|
//#region src/screen/ScreenFreeze.tsx
|
|
265
265
|
function ze({ freeze: e, children: n }) {
|
|
266
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ I(t, {
|
|
267
267
|
mode: e ? "hidden" : "visible",
|
|
268
268
|
children: n
|
|
269
269
|
});
|
|
@@ -273,20 +273,20 @@ function ze({ freeze: e, children: n }) {
|
|
|
273
273
|
var Be = /* @__PURE__ */ new WeakMap();
|
|
274
274
|
function Ve(e) {
|
|
275
275
|
let t = Be.get(e);
|
|
276
|
-
return t || (t =
|
|
276
|
+
return t || (t = _(), Be.set(e, t)), t;
|
|
277
277
|
}
|
|
278
278
|
//#endregion
|
|
279
279
|
//#region src/stores/useNavigateStore.ts
|
|
280
280
|
function Q(e) {
|
|
281
|
-
return
|
|
281
|
+
return U(R().navigate, e);
|
|
282
282
|
}
|
|
283
283
|
//#endregion
|
|
284
284
|
//#region src/screen/ScreenDecorator.tsx
|
|
285
285
|
function He({ ref: e, style: t, ...n }) {
|
|
286
|
-
let { isActive: r, transitionName: i } = V(), a =
|
|
286
|
+
let { isActive: r, transitionName: i } = V(), a = d(null);
|
|
287
287
|
c(e, () => a.current);
|
|
288
|
-
let o = Q((e) => e.status), { decoratorName: s } =
|
|
289
|
-
return l ? /* @__PURE__ */
|
|
288
|
+
let o = Q((e) => e.status), { decoratorName: s } = ye(i), l = oe.get(s);
|
|
289
|
+
return l ? /* @__PURE__ */ I("div", {
|
|
290
290
|
ref: a,
|
|
291
291
|
"data-flemo-decorator": !0,
|
|
292
292
|
"data-flemo-decorator-name": l.name,
|
|
@@ -308,7 +308,7 @@ function He({ ref: e, style: t, ...n }) {
|
|
|
308
308
|
//#endregion
|
|
309
309
|
//#region src/screen/useViewportScrollHeight.ts
|
|
310
310
|
function Ue() {
|
|
311
|
-
let [e, t] =
|
|
311
|
+
let [e, t] = f(0), [n, r] = f(0);
|
|
312
312
|
return o(() => he((e, n) => {
|
|
313
313
|
r(n), t(e);
|
|
314
314
|
}), []), {
|
|
@@ -319,102 +319,102 @@ function Ue() {
|
|
|
319
319
|
//#endregion
|
|
320
320
|
//#region src/stores/useScreenStore.ts
|
|
321
321
|
function $(e) {
|
|
322
|
-
return
|
|
322
|
+
return U(R().screen, e);
|
|
323
323
|
}
|
|
324
324
|
//#endregion
|
|
325
325
|
//#region src/screen/ScreenMotion.tsx
|
|
326
|
-
function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar:
|
|
327
|
-
let { id:
|
|
328
|
-
|
|
326
|
+
function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: ee, hideSystemNavigationBar: p, backgroundColor: m = "white", contentScrollable: g = !0, ..._ }) {
|
|
327
|
+
let { id: v, isActive: y, isRoot: b, isPrev: re, zIndex: x, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Ee(), T = w ? "absolute" : "fixed", E = R(), D = Q((e) => e.status), O = $((e) => e.dragStatus), k = $((e) => e.replaceTransitionStatus), ie = E.screen.getState().setDragStatus, j = E.screen.getState().setReplaceTransitionStatus, M = W((e) => e.index), ce = W((e) => e.histories), N = y ? ce[M - 1]?.id : ce[M]?.id, de = $((e) => N ? e.sharedBars[N] : void 0), fe = $((e) => N ? e.screenSurfaces[N] : void 0), pe = d(null);
|
|
328
|
+
pe.current ||= ae({
|
|
329
329
|
getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
|
|
330
|
-
setDragStatus:
|
|
331
|
-
setReplaceTransitionStatus:
|
|
330
|
+
setDragStatus: ie,
|
|
331
|
+
setReplaceTransitionStatus: j
|
|
332
332
|
});
|
|
333
|
-
let
|
|
334
|
-
|
|
335
|
-
let
|
|
336
|
-
transition:
|
|
337
|
-
decorator:
|
|
333
|
+
let he = pe.current, ge = d(null);
|
|
334
|
+
ge.current ||= Ve(E.navigate);
|
|
335
|
+
let P = ye(S), { initial: _e, swipeDirection: ve, decoratorName: be } = P, F = oe.get(be), { viewportScrollHeight: L } = Ue(), z = L > 0, [B, Se] = f(0), [Ce, we] = f(0), Te = d(null), H = d(null), U = d(null), G = d(null), K = d(null), q = d({
|
|
336
|
+
transition: P,
|
|
337
|
+
decorator: F,
|
|
338
338
|
hasSharedTopBar: !!a,
|
|
339
339
|
hasSharedBottomBar: !!s,
|
|
340
|
-
viewportScrollHeight:
|
|
341
|
-
isRoot:
|
|
342
|
-
isActive:
|
|
340
|
+
viewportScrollHeight: L,
|
|
341
|
+
isRoot: b,
|
|
342
|
+
isActive: y,
|
|
343
343
|
status: D,
|
|
344
344
|
dragStatus: O,
|
|
345
|
-
index:
|
|
345
|
+
index: M
|
|
346
346
|
});
|
|
347
|
-
|
|
348
|
-
transition:
|
|
349
|
-
decorator:
|
|
347
|
+
q.current = {
|
|
348
|
+
transition: P,
|
|
349
|
+
decorator: F,
|
|
350
350
|
hasSharedTopBar: !!a,
|
|
351
351
|
hasSharedBottomBar: !!s,
|
|
352
|
-
viewportScrollHeight:
|
|
353
|
-
isRoot:
|
|
354
|
-
isActive:
|
|
352
|
+
viewportScrollHeight: L,
|
|
353
|
+
isRoot: b,
|
|
354
|
+
isActive: y,
|
|
355
355
|
status: D,
|
|
356
356
|
dragStatus: O,
|
|
357
|
-
index:
|
|
357
|
+
index: M
|
|
358
358
|
};
|
|
359
|
-
let
|
|
360
|
-
|
|
361
|
-
getTransition: () =>
|
|
362
|
-
getDecorator: () =>
|
|
359
|
+
let De = d(null);
|
|
360
|
+
De.current ||= A({
|
|
361
|
+
getTransition: () => q.current.transition,
|
|
362
|
+
getDecorator: () => q.current.decorator,
|
|
363
363
|
getElements: () => ({
|
|
364
364
|
scope: H.current,
|
|
365
|
-
screenContainer:
|
|
366
|
-
decorator:
|
|
367
|
-
sharedTopBar:
|
|
368
|
-
sharedBottomBar:
|
|
365
|
+
screenContainer: Te.current,
|
|
366
|
+
decorator: U.current,
|
|
367
|
+
sharedTopBar: G.current,
|
|
368
|
+
sharedBottomBar: K.current
|
|
369
369
|
}),
|
|
370
|
-
hasSharedTopBar: () =>
|
|
371
|
-
hasSharedBottomBar: () =>
|
|
372
|
-
getViewportScrollHeight: () =>
|
|
370
|
+
hasSharedTopBar: () => q.current.hasSharedTopBar,
|
|
371
|
+
hasSharedBottomBar: () => q.current.hasSharedBottomBar,
|
|
372
|
+
getViewportScrollHeight: () => q.current.viewportScrollHeight,
|
|
373
373
|
isReadyForDrag: () => {
|
|
374
|
-
let e =
|
|
374
|
+
let e = q.current;
|
|
375
375
|
return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
|
|
376
376
|
},
|
|
377
377
|
getPartnerBars: () => {
|
|
378
|
-
let e =
|
|
378
|
+
let e = q.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
|
|
379
379
|
return n ? E.screen.getState().sharedBars[n] : void 0;
|
|
380
380
|
},
|
|
381
|
-
setDragStatus:
|
|
381
|
+
setDragStatus: ie,
|
|
382
382
|
back: () => window.history.back()
|
|
383
383
|
});
|
|
384
|
-
let
|
|
384
|
+
let J = De.current, Oe = (e) => J.pointerDown(e.nativeEvent), ke = (e) => J.pointerMove(e.nativeEvent), Ae = (e) => J.pointerUp(e.nativeEvent);
|
|
385
385
|
o(() => {
|
|
386
|
-
|
|
386
|
+
se(H.current);
|
|
387
387
|
}, []), o(() => {
|
|
388
388
|
let e = H.current;
|
|
389
389
|
if (!e) return;
|
|
390
390
|
let t = (e) => {
|
|
391
|
-
|
|
391
|
+
J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
|
|
392
392
|
};
|
|
393
393
|
return e.addEventListener("touchmove", t, { passive: !1 }), () => {
|
|
394
394
|
e.removeEventListener("touchmove", t);
|
|
395
395
|
};
|
|
396
|
-
}, [
|
|
397
|
-
let e =
|
|
396
|
+
}, [J]), u(() => {
|
|
397
|
+
let e = G.current;
|
|
398
398
|
if (!e) {
|
|
399
|
-
|
|
399
|
+
Se(0);
|
|
400
400
|
return;
|
|
401
401
|
}
|
|
402
|
-
return me(e,
|
|
402
|
+
return me(e, Se);
|
|
403
403
|
}, [a]), u(() => {
|
|
404
|
-
let e =
|
|
404
|
+
let e = K.current;
|
|
405
405
|
if (!e) {
|
|
406
|
-
|
|
406
|
+
we(0);
|
|
407
407
|
return;
|
|
408
408
|
}
|
|
409
|
-
return me(e,
|
|
409
|
+
return me(e, we);
|
|
410
410
|
}, [s]), u(() => {
|
|
411
411
|
let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
|
|
412
|
-
return e(
|
|
412
|
+
return e(v, {
|
|
413
413
|
topBar: !!a,
|
|
414
414
|
bottomBar: !!s
|
|
415
|
-
}), () => t(
|
|
415
|
+
}), () => t(v);
|
|
416
416
|
}, [
|
|
417
|
-
|
|
417
|
+
v,
|
|
418
418
|
a,
|
|
419
419
|
s,
|
|
420
420
|
E.screen
|
|
@@ -422,70 +422,81 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
422
422
|
let e = H.current;
|
|
423
423
|
if (!e) return;
|
|
424
424
|
let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
|
|
425
|
-
return t(
|
|
425
|
+
return t(v, { opaqueBackground: ue(getComputedStyle(e).backgroundColor) }), () => n(v);
|
|
426
426
|
}, [
|
|
427
|
-
|
|
428
|
-
|
|
427
|
+
v,
|
|
428
|
+
m,
|
|
429
429
|
D,
|
|
430
430
|
E.screen
|
|
431
431
|
]);
|
|
432
|
-
let
|
|
432
|
+
let je = y || x === M - 1, { app: Me, nav: Ne } = h({
|
|
433
433
|
status: D,
|
|
434
|
-
isTopOrTopPrev:
|
|
434
|
+
isTopOrTopPrev: je,
|
|
435
435
|
hasTopBar: !!a,
|
|
436
436
|
hasNavBar: !!s,
|
|
437
|
-
partnerBars:
|
|
438
|
-
}),
|
|
437
|
+
partnerBars: de
|
|
438
|
+
}), Y = te({
|
|
439
439
|
status: D,
|
|
440
|
-
isTopOrTopPrev:
|
|
440
|
+
isTopOrTopPrev: je,
|
|
441
441
|
transitionName: S
|
|
442
|
-
}),
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
442
|
+
}), Pe = ne({
|
|
443
|
+
isActive: y,
|
|
444
|
+
isPrev: re,
|
|
445
|
+
zIndex: x,
|
|
446
|
+
index: M,
|
|
447
|
+
status: D,
|
|
448
|
+
dragStatus: O,
|
|
449
|
+
replaceTransitionStatus: k
|
|
450
|
+
}), Fe = d(Pe), Ie = d(Y !== null && Pe), [Le, Re] = f({
|
|
451
|
+
key: Y,
|
|
452
|
+
released: Y === null
|
|
449
453
|
});
|
|
450
|
-
|
|
451
|
-
|
|
454
|
+
Le.key !== Y && (Re({
|
|
455
|
+
key: Y,
|
|
456
|
+
released: Y === null
|
|
457
|
+
}), Ie.current = Y !== null && Fe.current), Fe.current = Pe;
|
|
458
|
+
let X = Y !== null && Le.key === Y && !Le.released, Z = X ? !y && fe?.opaqueBackground ? "park" : y && (D === "PUSHING" || D === "REPLACING") && fe?.opaqueBackground ? "park-under" : "true" : "false";
|
|
459
|
+
u(() => he.driveScreenLifecycle({
|
|
452
460
|
getElements: () => ({
|
|
453
461
|
scope: H.current,
|
|
454
|
-
decorator:
|
|
455
|
-
bars: [
|
|
462
|
+
decorator: U.current,
|
|
463
|
+
bars: [G.current, K.current]
|
|
456
464
|
}),
|
|
457
465
|
transitionName: S,
|
|
458
466
|
prevTransitionName: C,
|
|
459
467
|
status: D,
|
|
460
|
-
isActive:
|
|
468
|
+
isActive: y,
|
|
461
469
|
animHoldReleased: !X
|
|
462
470
|
}), [
|
|
463
|
-
|
|
471
|
+
he,
|
|
464
472
|
D,
|
|
465
|
-
|
|
473
|
+
y,
|
|
466
474
|
C,
|
|
467
475
|
S,
|
|
468
476
|
X
|
|
469
477
|
]), o(() => {
|
|
470
|
-
if (!X ||
|
|
471
|
-
let e =
|
|
472
|
-
return
|
|
478
|
+
if (!X || Y === null) return;
|
|
479
|
+
let e = Y, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
|
|
480
|
+
return ge.current.join(n, () => Re((t) => t.key === e && !t.released ? {
|
|
473
481
|
key: e,
|
|
474
482
|
released: !0
|
|
475
|
-
} : t), {
|
|
483
|
+
} : t), {
|
|
484
|
+
scope: H.current,
|
|
485
|
+
decodeWait: Ie.current
|
|
486
|
+
});
|
|
476
487
|
}, [
|
|
477
488
|
X,
|
|
478
|
-
|
|
489
|
+
Y,
|
|
479
490
|
Z,
|
|
480
491
|
E.navigate
|
|
481
492
|
]);
|
|
482
|
-
let
|
|
483
|
-
initial:
|
|
484
|
-
isActive:
|
|
493
|
+
let ze = Z === "park-under" ? {} : le({
|
|
494
|
+
initial: _e,
|
|
495
|
+
isActive: y,
|
|
485
496
|
status: D
|
|
486
497
|
});
|
|
487
|
-
return /* @__PURE__ */
|
|
488
|
-
ref:
|
|
498
|
+
return /* @__PURE__ */ xe("div", {
|
|
499
|
+
ref: Te,
|
|
489
500
|
style: {
|
|
490
501
|
position: T,
|
|
491
502
|
top: 0,
|
|
@@ -500,7 +511,7 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
500
511
|
overscrollBehavior: "contain"
|
|
501
512
|
},
|
|
502
513
|
children: [
|
|
503
|
-
/* @__PURE__ */
|
|
514
|
+
/* @__PURE__ */ I("div", {
|
|
504
515
|
"data-swipe-at-edge-bar": !0,
|
|
505
516
|
style: {
|
|
506
517
|
position: T,
|
|
@@ -511,32 +522,32 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
511
522
|
zIndex: 1
|
|
512
523
|
}
|
|
513
524
|
}),
|
|
514
|
-
/* @__PURE__ */
|
|
525
|
+
/* @__PURE__ */ xe("div", {
|
|
515
526
|
ref: H,
|
|
516
|
-
...
|
|
517
|
-
onPointerDown:
|
|
518
|
-
onPointerMove:
|
|
519
|
-
onPointerUp:
|
|
520
|
-
onPointerCancel:
|
|
527
|
+
..._,
|
|
528
|
+
onPointerDown: Oe,
|
|
529
|
+
onPointerMove: ke,
|
|
530
|
+
onPointerUp: Ae,
|
|
531
|
+
onPointerCancel: Ae,
|
|
521
532
|
"data-flemo-screen": !0,
|
|
522
533
|
"data-flemo-transition": S,
|
|
523
534
|
"data-flemo-status": D,
|
|
524
|
-
"data-flemo-active":
|
|
535
|
+
"data-flemo-active": y ? "true" : "false",
|
|
525
536
|
"data-flemo-anim-hold": Z,
|
|
526
537
|
style: {
|
|
527
538
|
display: "flex",
|
|
528
539
|
flexDirection: "column",
|
|
529
540
|
height: "100%",
|
|
530
|
-
backgroundColor:
|
|
531
|
-
overflowY:
|
|
532
|
-
touchAction:
|
|
533
|
-
...
|
|
534
|
-
...
|
|
541
|
+
backgroundColor: m,
|
|
542
|
+
overflowY: g ? void 0 : "auto",
|
|
543
|
+
touchAction: ve === "x" ? "pan-y" : ve === "y" ? "pan-x" : "auto",
|
|
544
|
+
...ze,
|
|
545
|
+
..._.style
|
|
535
546
|
},
|
|
536
547
|
children: [
|
|
537
|
-
!
|
|
548
|
+
!ee && t && /* @__PURE__ */ I("div", {
|
|
538
549
|
style: { minHeight: t },
|
|
539
|
-
children: /* @__PURE__ */
|
|
550
|
+
children: /* @__PURE__ */ I("div", { style: {
|
|
540
551
|
position: T,
|
|
541
552
|
top: 0,
|
|
542
553
|
width: "100%",
|
|
@@ -544,32 +555,32 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
544
555
|
backgroundColor: n
|
|
545
556
|
} })
|
|
546
557
|
}),
|
|
547
|
-
a && /* @__PURE__ */
|
|
558
|
+
a && /* @__PURE__ */ I("div", { style: {
|
|
548
559
|
width: "100%",
|
|
549
|
-
minHeight:
|
|
560
|
+
minHeight: B
|
|
550
561
|
} }),
|
|
551
562
|
c,
|
|
552
|
-
/* @__PURE__ */
|
|
563
|
+
/* @__PURE__ */ I("div", {
|
|
553
564
|
style: {
|
|
554
565
|
display: "flex",
|
|
555
566
|
flexDirection: "column",
|
|
556
567
|
flexGrow: 1,
|
|
557
|
-
overflowY:
|
|
568
|
+
overflowY: g ? "auto" : void 0
|
|
558
569
|
},
|
|
559
570
|
children: e
|
|
560
571
|
}),
|
|
561
572
|
l,
|
|
562
|
-
s && /* @__PURE__ */
|
|
563
|
-
display:
|
|
573
|
+
s && /* @__PURE__ */ I("div", { style: {
|
|
574
|
+
display: z ? "none" : void 0,
|
|
564
575
|
width: "100%",
|
|
565
|
-
minHeight:
|
|
576
|
+
minHeight: Ce
|
|
566
577
|
} }),
|
|
567
|
-
!
|
|
578
|
+
!p && r && /* @__PURE__ */ I("div", {
|
|
568
579
|
style: {
|
|
569
|
-
display:
|
|
580
|
+
display: z ? "none" : void 0,
|
|
570
581
|
minHeight: r
|
|
571
582
|
},
|
|
572
|
-
children: /* @__PURE__ */
|
|
583
|
+
children: /* @__PURE__ */ I("div", { style: {
|
|
573
584
|
position: T,
|
|
574
585
|
bottom: 0,
|
|
575
586
|
width: "100%",
|
|
@@ -579,46 +590,46 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
579
590
|
})
|
|
580
591
|
]
|
|
581
592
|
}),
|
|
582
|
-
a && /* @__PURE__ */
|
|
583
|
-
ref:
|
|
593
|
+
a && /* @__PURE__ */ I("div", {
|
|
594
|
+
ref: G,
|
|
584
595
|
"data-flemo-bar": "app",
|
|
585
596
|
"data-flemo-bar-transition": S,
|
|
586
597
|
"data-flemo-bar-status": D,
|
|
587
|
-
"data-flemo-bar-active":
|
|
588
|
-
"data-flemo-bar-riding":
|
|
598
|
+
"data-flemo-bar-active": y ? "true" : "false",
|
|
599
|
+
"data-flemo-bar-riding": Me ? "true" : "false",
|
|
589
600
|
"data-flemo-anim-hold": Z,
|
|
590
601
|
style: {
|
|
591
602
|
position: T,
|
|
592
|
-
top:
|
|
603
|
+
top: ee ? 0 : t,
|
|
593
604
|
left: 0,
|
|
594
605
|
width: "100%",
|
|
595
606
|
zIndex: 1
|
|
596
607
|
},
|
|
597
608
|
children: a
|
|
598
609
|
}),
|
|
599
|
-
s && /* @__PURE__ */
|
|
600
|
-
ref:
|
|
610
|
+
s && /* @__PURE__ */ I("div", {
|
|
611
|
+
ref: K,
|
|
601
612
|
"data-flemo-bar": "nav",
|
|
602
613
|
"data-flemo-bar-transition": S,
|
|
603
614
|
"data-flemo-bar-status": D,
|
|
604
|
-
"data-flemo-bar-active":
|
|
605
|
-
"data-flemo-bar-riding":
|
|
615
|
+
"data-flemo-bar-active": y ? "true" : "false",
|
|
616
|
+
"data-flemo-bar-riding": Ne ? "true" : "false",
|
|
606
617
|
"data-flemo-anim-hold": Z,
|
|
607
618
|
style: {
|
|
608
|
-
display:
|
|
619
|
+
display: z ? "none" : void 0,
|
|
609
620
|
position: T,
|
|
610
|
-
bottom:
|
|
621
|
+
bottom: p ? 0 : r,
|
|
611
622
|
left: 0,
|
|
612
623
|
width: "100%",
|
|
613
624
|
zIndex: 1
|
|
614
625
|
},
|
|
615
626
|
children: s
|
|
616
627
|
}),
|
|
617
|
-
|
|
618
|
-
ref:
|
|
628
|
+
F && /* @__PURE__ */ I(He, {
|
|
629
|
+
ref: U,
|
|
619
630
|
"data-flemo-anim-hold": Z
|
|
620
631
|
}),
|
|
621
|
-
/* @__PURE__ */
|
|
632
|
+
/* @__PURE__ */ I("div", {
|
|
622
633
|
"data-swipe-at-edge-bar": !0,
|
|
623
634
|
style: {
|
|
624
635
|
position: T,
|
|
@@ -636,17 +647,17 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
636
647
|
//#region src/screen/Screen.tsx
|
|
637
648
|
function Ge({ children: e, ...t }) {
|
|
638
649
|
let { isActive: n, isPrev: r, zIndex: i } = V();
|
|
639
|
-
return /* @__PURE__ */
|
|
640
|
-
freeze:
|
|
650
|
+
return /* @__PURE__ */ I(ze, {
|
|
651
|
+
freeze: ne({
|
|
641
652
|
isActive: n,
|
|
642
653
|
isPrev: r,
|
|
643
654
|
zIndex: i,
|
|
644
|
-
index:
|
|
655
|
+
index: W((e) => e.index),
|
|
645
656
|
status: Q((e) => e.status),
|
|
646
657
|
dragStatus: $((e) => e.dragStatus),
|
|
647
658
|
replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
|
|
648
659
|
}),
|
|
649
|
-
children: /* @__PURE__ */
|
|
660
|
+
children: /* @__PURE__ */ I(We, {
|
|
650
661
|
...t,
|
|
651
662
|
children: e
|
|
652
663
|
})
|
|
@@ -656,7 +667,7 @@ function Ge({ children: e, ...t }) {
|
|
|
656
667
|
//#region src/screen/Part.tsx
|
|
657
668
|
function Ke({ ref: e, name: t, style: n, children: r, ...i }) {
|
|
658
669
|
let { isActive: a } = V();
|
|
659
|
-
return /* @__PURE__ */
|
|
670
|
+
return /* @__PURE__ */ I("div", {
|
|
660
671
|
ref: e,
|
|
661
672
|
"data-flemo-part-name": t,
|
|
662
673
|
"data-flemo-status": Q((e) => e.status),
|
|
@@ -669,20 +680,20 @@ function Ke({ ref: e, name: t, style: n, children: r, ...i }) {
|
|
|
669
680
|
//#endregion
|
|
670
681
|
//#region src/stores/RouterScopeProvider.tsx
|
|
671
682
|
function qe({ children: e }) {
|
|
672
|
-
let [t] =
|
|
673
|
-
history:
|
|
674
|
-
navigate:
|
|
675
|
-
transition:
|
|
676
|
-
screen:
|
|
677
|
-
driver:
|
|
683
|
+
let [t] = f(() => ({
|
|
684
|
+
history: re(),
|
|
685
|
+
navigate: x(),
|
|
686
|
+
transition: M(),
|
|
687
|
+
screen: k(),
|
|
688
|
+
driver: y(),
|
|
678
689
|
markSelfInduced: fe,
|
|
679
|
-
consume:
|
|
690
|
+
consume: g,
|
|
680
691
|
life: { alive: !0 }
|
|
681
692
|
}));
|
|
682
|
-
return /* @__PURE__ */ L
|
|
693
|
+
return /* @__PURE__ */ I(L.Provider, {
|
|
683
694
|
value: t,
|
|
684
695
|
children: e
|
|
685
696
|
});
|
|
686
697
|
}
|
|
687
698
|
//#endregion
|
|
688
|
-
export { Ke as Part,
|
|
699
|
+
export { Ke as Part, Fe as Route, Pe as Router, qe as RouterScopeProvider, Ge as Screen, B as ScreenContext, He as ScreenDecorator, ze as ScreenFreeze, We as ScreenMotion, Oe as Slot, v as createBrowserHistoryDriver, b as createDecorator, C as createPartTransition, w as createRawDecorator, T as createRawPartTransition, E as createRawTransition, j as createTransition, ge as partTransitionMap, W as useHistoryStore, Le as useNavigate, Q as useNavigateStore, Z as useParams, Re as usePathname, V as useScreen, $ as useScreenStore, X as useStep, R as useStores, Ue as useViewportScrollHeight };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flemo/react",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.8",
|
|
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.18.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@testing-library/jest-dom": "^6.9.1",
|