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