zkit-ui 2.0.21 → 2.0.22

package/dist/ui/SliderCaptcha/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/SliderCaptcha/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,SAAS,EAGT,SAAS,EAEV,MAAM,cAAc,CAAC;AA+BtB,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AACzF,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,CACpC,UAAU,SAAS,sBAAsB,GAAG,sBAAsB,IAChE;IACF,SAAS,EAAE,UAAU,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GACjC,OAAO,GACP,IAAI,GACJ;IACE,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEN,MAAM,MAAM,sBAAsB,CAChC,UAAU,SAAS,sBAAsB,GAAG,sBAAsB,IAChE;IACF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAC5B,UAAU,SAAS,sBAAsB,GAAG,sBAAsB,IAChE;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACrC,aAAa,EACT,CAAC,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,uBAAuB,CAAA;KAAE,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,GACvE,CAAC,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,uBAAuB,CAAA;KAAE,KAAK,UAAU,CAAC,CAAC;IACnE,eAAe,EACX,CAAC,CACC,OAAO,EAAE,0BAA0B,CAAC,UAAU,CAAC,KAC5C,OAAO,CAAC,yBAAyB,CAAC,CAAC,GACxC,CAAC,CAAC,OAAO,EAAE,0BAA0B,CAAC,UAAU,CAAC,KAAK,yBAAyB,CAAC,CAAC;IACrF,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,0BAA0B,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,sBAAsB,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACpC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAwJF,wBAAgB,aAAa,CAAC,UAAU,SAAS,sBAAsB,GAAG,sBAAsB,EAAE,EAChG,OAAO,EACP,OAAO,EACP,gBAAuB,EACvB,aAAa,EACb,eAAe,EACf,UAAU,EACV,OAAO,EACP,KAAK,EACL,sBAA6B,EAC7B,YAAmB,EACnB,uBAAkD,EAClD,qBAA8C,EAC9C,YAAqC,EACrC,SAAS,GACV,EAAE,kBAAkB,CAAC,UAAU,CAAC,kDA2iBhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/SliderCaptcha/index.tsx"],"names":[],"mappings":"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"}

package/dist/ui/SliderCaptcha/index.js

@@ -55,6 +55,8 @@ const CARD_HORIZONTAL_PADDING = (0, zkit_tools_1.wp)(24);
 const CANVAS_BORDER_WIDTH = (0, zkit_tools_1.wp)(1);
 const CAPTCHA_LAYER_Z_INDEX = 4000;
 const SLIDER_THUMB_SIZE = (0, zkit_tools_1.wp)(44);
+const WEB_SLIDER_EDGE_GESTURE_INSET = react_native_1.Platform.OS === 'web' ? (0, zkit_tools_1.wp)(16) : 0;
+const SLIDER_CANCEL_DURATION = 160;
 const CAPTCHA_ENTER_DURATION = 280;
 const CAPTCHA_EXIT_DURATION = 220;
 const CAPTCHA_CARD_OFFSET_Y = (0, zkit_tools_1.wp)(18);
@@ -89,6 +91,51 @@ function getSafePositiveNumber(value, fallback) {
     }
     return value;
 }
+let webHorizontalOverscrollLockCount = 0;
+let webHorizontalOverscrollSnapshots = [];
+function acquireWebHorizontalOverscrollLock() {
+    if (react_native_1.Platform.OS !== 'web')
+        return undefined;
+    const webDocument = globalThis.document;
+    const targets = [webDocument === null || webDocument === void 0 ? void 0 : webDocument.documentElement, webDocument === null || webDocument === void 0 ? void 0 : webDocument.body].filter((target) => Boolean(target));
+    if (targets.length === 0)
+        return undefined;
+    if (webHorizontalOverscrollLockCount === 0) {
+        webHorizontalOverscrollSnapshots = targets.map((target) => ({
+            previousValue: target.style.overscrollBehaviorX,
+            target,
+        }));
+    }
+    webHorizontalOverscrollLockCount += 1;
+    targets.forEach((target) => {
+        target.style.overscrollBehaviorX = 'none';
+    });
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        webHorizontalOverscrollLockCount = Math.max(webHorizontalOverscrollLockCount - 1, 0);
+        if (webHorizontalOverscrollLockCount > 0)
+            return;
+        webHorizontalOverscrollSnapshots.forEach(({ previousValue, target }) => {
+            if (target.style.overscrollBehaviorX === 'none') {
+                target.style.overscrollBehaviorX = previousValue;
+            }
+        });
+        webHorizontalOverscrollSnapshots = [];
+    };
+}
+function resolveWebSliderInteractionStyle(canSlide) {
+    if (react_native_1.Platform.OS !== 'web')
+        return undefined;
+    return {
+        cursor: canSlide ? 'grab' : 'default',
+        overscrollBehaviorX: 'none',
+        touchAction: 'none',
+        userSelect: 'none',
+    };
+}
 const styles = react_native_1.StyleSheet.create({
     modalRoot: {
         ...react_native_1.StyleSheet.absoluteFillObject,
@@ -192,7 +239,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     sliderThumb: {
         position: 'absolute',
-        left: 0,
+        left: WEB_SLIDER_EDGE_GESTURE_INSET,
         width: SLIDER_THUMB_SIZE,
         height: SLIDER_THUMB_SIZE,
         borderRadius: SLIDER_THUMB_SIZE / 2,
@@ -265,7 +312,7 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
     const blockDisplayHeight = blockHeight * scale;
     const blockTop = Math.max(0, ((_a = challenge === null || challenge === void 0 ? void 0 : challenge.blockY) !== null && _a !== void 0 ? _a : 0) * scale);
     const maxBlockOffset = Math.max(canvasContentWidth - blockDisplayWidth, 0);
-    const maxThumbOffset = Math.max(canvasOuterWidth - SLIDER_THUMB_SIZE, 0);
+    const maxThumbOffset = Math.max(canvasOuterWidth - SLIDER_THUMB_SIZE - WEB_SLIDER_EDGE_GESTURE_INSET * 2, 0);
     const blockTranslateRatio = maxThumbOffset > 0 ? maxBlockOffset / maxThumbOffset : 0;
     const isBusy = status === 'loading' || status === 'verifying';
     const canSlide = visible && Boolean(challenge) && !isBusy;
@@ -292,6 +339,7 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
         opacity: 0.15,
         radius: (0, zkit_tools_1.wp)(4),
     }), [theme.colors.onSurface]);
+    const webSliderInteractionStyle = React.useMemo(() => resolveWebSliderInteractionStyle(canSlide), [canSlide]);
     const requestChallenge = React.useCallback(async (reason) => {
         if (!visibleRef.current)
             return;
@@ -476,6 +524,11 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
         });
         return () => subscription.remove();
     }, [onClose, visible]);
+    React.useEffect(() => {
+        if (!visible || react_native_1.Platform.OS !== 'web')
+            return;
+        return acquireWebHorizontalOverscrollLock();
+    }, [visible]);
     const handleCanvasLayout = React.useCallback((event) => {
         const nextWidth = event.nativeEvent.layout.width;
         if (!Number.isFinite(nextWidth) || nextWidth <= 0)
@@ -521,6 +574,14 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
     const blockAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
         transform: [{ translateX: thumbX.value * blockTranslateRatio }],
     }));
+    const cancelCurrentDrag = React.useCallback(() => {
+        const startPosition = clamp(thumbStartRef.current, 0, maxThumbOffset);
+        thumbXRef.current = startPosition;
+        thumbX.value = (0, react_native_reanimated_1.withTiming)(startPosition, {
+            duration: SLIDER_CANCEL_DURATION,
+            easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+        });
+    }, [maxThumbOffset, thumbX]);
     const panResponder = React.useMemo(() => react_native_1.PanResponder.create({
         onStartShouldSetPanResponder: () => canSlide,
         onMoveShouldSetPanResponder: () => canSlide,
@@ -537,7 +598,10 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
         onPanResponderRelease: () => {
             void verifyCurrentChallenge();
         },
-    }), [canSlide, maxThumbOffset, thumbX, verifyCurrentChallenge]);
+        onPanResponderTerminate: cancelCurrentDrag,
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
+    }), [canSlide, cancelCurrentDrag, maxThumbOffset, thumbX, verifyCurrentChallenge]);
     if (!mounted)
         return null;
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "box-none", style: styles.modalRoot, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.overlayBackdrop, backdropAnimatedStyle] }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.overlayPressable, onPress: handleBackdropPress, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.cardContainer, cardAnimatedStyle], collapsable: false, renderToHardwareTextureAndroid: react_native_1.Platform.OS === 'android', shouldRasterizeIOS: react_native_1.Platform.OS === 'ios', needsOffscreenAlphaCompositing: react_native_1.Platform.OS === 'android', children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: [
@@ -584,6 +648,7 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
                                         ], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: styles.feedbackText, children: feedbackMessage }) })) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                     styles.sliderTrack,
                                     { backgroundColor: theme.colors.secondary, borderColor: theme.colors.border },
+                                    webSliderInteractionStyle,
                                 ], ...panResponder.panHandlers, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                                         styles.sliderThumb,
                                         thumbAnimatedStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "2.0.21",
+  "version": "2.0.22",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ui/SliderCaptcha/README.md

@@ -8,6 +8,7 @@
   - 弹层展示
   - 图片缩放与坐标换算
   - 滑块拖拽与释放触发校验
+  - Web 端浏览器滚动、侧滑历史返回与 Android 边缘返回冲突规避
   - `loading / verifying / success / error` 状态反馈
   - 校验失败后的自动重载
 - 业务方负责：

package/src/ui/SliderCaptcha/index.tsx

@@ -37,6 +37,8 @@ const CARD_HORIZONTAL_PADDING = wp(24);
 const CANVAS_BORDER_WIDTH = wp(1);
 const CAPTCHA_LAYER_Z_INDEX = 4000;
 const SLIDER_THUMB_SIZE = wp(44);
+const WEB_SLIDER_EDGE_GESTURE_INSET = Platform.OS === 'web' ? wp(16) : 0;
+const SLIDER_CANCEL_DURATION = 160;
 const CAPTCHA_ENTER_DURATION = 280;
 const CAPTCHA_EXIT_DURATION = 220;
 const CAPTCHA_CARD_OFFSET_Y = wp(18);
@@ -152,6 +154,73 @@ function getSafePositiveNumber(value: number | undefined, fallback: number) {
   return value;
 }
 
+type WebOverscrollTarget = {
+  style: {
+    overscrollBehaviorX: string;
+  };
+};
+
+type WebDocument = {
+  body?: WebOverscrollTarget;
+  documentElement?: WebOverscrollTarget;
+};
+
+type WebOverscrollSnapshot = {
+  previousValue: string;
+  target: WebOverscrollTarget;
+};
+
+let webHorizontalOverscrollLockCount = 0;
+let webHorizontalOverscrollSnapshots: WebOverscrollSnapshot[] = [];
+
+function acquireWebHorizontalOverscrollLock() {
+  if (Platform.OS !== 'web') return undefined;
+
+  const webDocument = (globalThis as { document?: WebDocument }).document;
+  const targets = [webDocument?.documentElement, webDocument?.body].filter(
+    (target): target is WebOverscrollTarget => Boolean(target)
+  );
+  if (targets.length === 0) return undefined;
+
+  if (webHorizontalOverscrollLockCount === 0) {
+    webHorizontalOverscrollSnapshots = targets.map((target) => ({
+      previousValue: target.style.overscrollBehaviorX,
+      target,
+    }));
+  }
+
+  webHorizontalOverscrollLockCount += 1;
+  targets.forEach((target) => {
+    target.style.overscrollBehaviorX = 'none';
+  });
+
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    webHorizontalOverscrollLockCount = Math.max(webHorizontalOverscrollLockCount - 1, 0);
+    if (webHorizontalOverscrollLockCount > 0) return;
+
+    webHorizontalOverscrollSnapshots.forEach(({ previousValue, target }) => {
+      if (target.style.overscrollBehaviorX === 'none') {
+        target.style.overscrollBehaviorX = previousValue;
+      }
+    });
+    webHorizontalOverscrollSnapshots = [];
+  };
+}
+
+function resolveWebSliderInteractionStyle(canSlide: boolean): StyleProp<ViewStyle> {
+  if (Platform.OS !== 'web') return undefined;
+
+  return {
+    cursor: canSlide ? 'grab' : 'default',
+    overscrollBehaviorX: 'none',
+    touchAction: 'none',
+    userSelect: 'none',
+  } as unknown as ViewStyle;
+}
+
 const styles = StyleSheet.create({
   modalRoot: {
     ...StyleSheet.absoluteFillObject,
@@ -255,7 +324,7 @@ const styles = StyleSheet.create({
   },
   sliderThumb: {
     position: 'absolute',
-    left: 0,
+    left: WEB_SLIDER_EDGE_GESTURE_INSET,
     width: SLIDER_THUMB_SIZE,
     height: SLIDER_THUMB_SIZE,
     borderRadius: SLIDER_THUMB_SIZE / 2,
@@ -352,7 +421,10 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
   const blockDisplayHeight = blockHeight * scale;
   const blockTop = Math.max(0, (challenge?.blockY ?? 0) * scale);
   const maxBlockOffset = Math.max(canvasContentWidth - blockDisplayWidth, 0);
-  const maxThumbOffset = Math.max(canvasOuterWidth - SLIDER_THUMB_SIZE, 0);
+  const maxThumbOffset = Math.max(
+    canvasOuterWidth - SLIDER_THUMB_SIZE - WEB_SLIDER_EDGE_GESTURE_INSET * 2,
+    0
+  );
   const blockTranslateRatio = maxThumbOffset > 0 ? maxBlockOffset / maxThumbOffset : 0;
   const isBusy = status === 'loading' || status === 'verifying';
   const canSlide = visible && Boolean(challenge) && !isBusy;
@@ -392,6 +464,10 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
       }),
     [theme.colors.onSurface]
   );
+  const webSliderInteractionStyle = React.useMemo(
+    () => resolveWebSliderInteractionStyle(canSlide),
+    [canSlide]
+  );
 
   const requestChallenge = React.useCallback(
     async (reason: SliderCaptchaLoadReason) => {
@@ -603,6 +679,11 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
     return () => subscription.remove();
   }, [onClose, visible]);
 
+  React.useEffect(() => {
+    if (!visible || Platform.OS !== 'web') return;
+    return acquireWebHorizontalOverscrollLock();
+  }, [visible]);
+
   const handleCanvasLayout = React.useCallback((event: LayoutChangeEvent) => {
     const nextWidth = event.nativeEvent.layout.width;
     if (!Number.isFinite(nextWidth) || nextWidth <= 0) return;
@@ -654,6 +735,15 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
     transform: [{ translateX: thumbX.value * blockTranslateRatio }],
   }));
 
+  const cancelCurrentDrag = React.useCallback(() => {
+    const startPosition = clamp(thumbStartRef.current, 0, maxThumbOffset);
+    thumbXRef.current = startPosition;
+    thumbX.value = withTiming(startPosition, {
+      duration: SLIDER_CANCEL_DURATION,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [maxThumbOffset, thumbX]);
+
   const panResponder = React.useMemo(
     () =>
       PanResponder.create({
@@ -672,8 +762,11 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
         onPanResponderRelease: () => {
           void verifyCurrentChallenge();
         },
+        onPanResponderTerminate: cancelCurrentDrag,
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
       }),
-    [canSlide, maxThumbOffset, thumbX, verifyCurrentChallenge]
+    [canSlide, cancelCurrentDrag, maxThumbOffset, thumbX, verifyCurrentChallenge]
   );
 
   if (!mounted) return null;
@@ -809,6 +902,7 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
               style={[
                 styles.sliderTrack,
                 { backgroundColor: theme.colors.secondary, borderColor: theme.colors.border },
+                webSliderInteractionStyle,
               ]}
               {...panResponder.panHandlers}
             >