@stackflow/plugin-basic-ui 0.19.2-alpha.3 → 0.19.2
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.js +1 -1
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +3 -3
- package/package.json +2 -2
- package/src/components/AppScreen.tsx +1 -1
- package/src/hooks/useStyleEffectHide.ts +19 -9
- package/src/hooks/useStyleEffectOffset.ts +32 -16
- package/src/hooks/useStyleEffectSwipeBack.ts +51 -39
|
@@ -95,54 +95,65 @@ export function useStyleEffectSwipeBack({
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
function resetPaper({ swiped }: { swiped: boolean }) {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
$paper.style.overflowY = "hidden";
|
|
104
|
-
$paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
|
|
105
|
-
$paper.style.transition = "var(--stackflow-transition-duration)";
|
|
106
|
-
|
|
107
|
-
refs.forEach((ref) => {
|
|
108
|
-
if (!ref.current) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
ref.current.style.transition = `var(--stackflow-transition-duration)`;
|
|
113
|
-
ref.current.style.transform = `translateX(${
|
|
114
|
-
swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`
|
|
115
|
-
})`;
|
|
116
|
-
});
|
|
98
|
+
function resetPaper({ swiped }: { swiped: boolean }): Promise<void> {
|
|
99
|
+
return new Promise((resolve) => {
|
|
100
|
+
requestAnimationFrame(() => {
|
|
101
|
+
$dim.style.opacity = `${swiped ? 0 : 1}`;
|
|
102
|
+
$dim.style.transition = "var(--stackflow-transition-duration)";
|
|
117
103
|
|
|
118
|
-
|
|
119
|
-
$
|
|
120
|
-
$paper.style.
|
|
121
|
-
|
|
104
|
+
$paper.style.overflowY = "hidden";
|
|
105
|
+
$paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
|
|
106
|
+
$paper.style.transition =
|
|
107
|
+
"var(--stackflow-transition-duration)";
|
|
122
108
|
|
|
123
|
-
refs.forEach((ref
|
|
109
|
+
refs.forEach((ref) => {
|
|
124
110
|
if (!ref.current) {
|
|
125
111
|
return;
|
|
126
112
|
}
|
|
127
113
|
|
|
128
|
-
|
|
114
|
+
ref.current.style.transition = `var(--stackflow-transition-duration)`;
|
|
115
|
+
ref.current.style.transform = `translateX(${
|
|
116
|
+
swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`
|
|
117
|
+
})`;
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
const _cachedRefs = [...cachedRefs];
|
|
129
121
|
|
|
130
|
-
|
|
131
|
-
ref.current.style.transition = "";
|
|
132
|
-
ref.current.style.transform = "";
|
|
122
|
+
resolve();
|
|
133
123
|
|
|
134
|
-
|
|
135
|
-
|
|
124
|
+
listenOnce($paper, "transitionend", () => {
|
|
125
|
+
$dim.style.opacity = "";
|
|
126
|
+
$paper.style.overflowY = "";
|
|
127
|
+
$paper.style.transform = "";
|
|
128
|
+
|
|
129
|
+
refs.forEach((ref, i) => {
|
|
130
|
+
if (!ref.current) {
|
|
131
|
+
return;
|
|
136
132
|
}
|
|
137
|
-
} else if (cachedRef) {
|
|
138
|
-
ref.current.style.transition = cachedRef.style.transition;
|
|
139
|
-
ref.current.style.transform = cachedRef.style.transform;
|
|
140
133
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
134
|
+
const _cachedRef = _cachedRefs[i];
|
|
135
|
+
|
|
136
|
+
if (swiped) {
|
|
137
|
+
ref.current.style.transition = "";
|
|
138
|
+
ref.current.style.transform = "";
|
|
139
|
+
|
|
140
|
+
if (ref.current.parentElement) {
|
|
141
|
+
ref.current.parentElement.style.display = "";
|
|
142
|
+
}
|
|
143
|
+
} else if (_cachedRef) {
|
|
144
|
+
ref.current.style.transition =
|
|
145
|
+
_cachedRef.style.transition;
|
|
146
|
+
ref.current.style.transform = _cachedRef.style.transform;
|
|
147
|
+
|
|
148
|
+
if (
|
|
149
|
+
ref.current.parentElement &&
|
|
150
|
+
_cachedRef.parentElement
|
|
151
|
+
) {
|
|
152
|
+
ref.current.parentElement.style.display =
|
|
153
|
+
_cachedRef.parentElement.style.display;
|
|
154
|
+
}
|
|
144
155
|
}
|
|
145
|
-
}
|
|
156
|
+
});
|
|
146
157
|
});
|
|
147
158
|
});
|
|
148
159
|
});
|
|
@@ -207,8 +218,9 @@ export function useStyleEffectSwipeBack({
|
|
|
207
218
|
onSwiped?.();
|
|
208
219
|
}
|
|
209
220
|
|
|
210
|
-
|
|
211
|
-
|
|
221
|
+
Promise.resolve()
|
|
222
|
+
.then(() => resetPaper({ swiped }))
|
|
223
|
+
.then(() => resetState());
|
|
212
224
|
};
|
|
213
225
|
|
|
214
226
|
$edge.addEventListener("touchstart", onTouchStart, { passive: true });
|