@conecli/cone-render 0.10.1-shop-beta.11 → 0.10.1-shop-beta.13

package/dist/components/base/CustomScrollView/index.tsx

@@ -1 +1 @@
-import React, { useRef, useEffect } from 'react';
  isH5AndJdShopView,
  isAndroidDevice,
  isJdAndAndroidDevice,
  isJdAndIosDevice,
  isIosDevice,
  isJdApp,
  isWxMin,
  isH5AndJdShopViewH5Scroll,
  isH5AndJdShopH5CustomScrollView,
  isH5,
  isAppClassifyPage,
  lodashThrottle,
  START: 'start',
  MOVE: 'move',
  END: 'end',
  const {
    scrollX,
    children,
    style = {},
    iosNeedDisableVertical,
    dispatchTouchMove,
    className,
    ...otherProps
  } = props;
  const rootEleNode = isH5 && document ? document.querySelector('body') : null;
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === 'true');
  const mLastClientPosRef = useRef({
    mLastClientX: 0,
    mLastClientY: 0,
  });
  const isJdAndH5ScrollState = needShowHighVersion || isH5AndJdShopH5CustomScrollView;
  
  const touchstartEventBubbleFunc = (e) => {
    const isH5SwiperCustomEle = e?.target?.closest('.J_h5SwiperCustom');
    if (!isH5SwiperCustomEle) {
      const hasCustomEle = e
        ? e?.target?.closest('.J_customScroll') || e?.target?.closest('.J_customLayout')
        : false;
      if (isJdAndAndroidDevice && !hasCustomEle) {
        window?.JdAndroid &&
          window?.JdAndroid?.requestEvent &&
          window.JdAndroid.requestEvent(false);
      }
      !hasCustomEle &&
        rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
      console.log(
        'customScrollView所在页面document touch start事件是否有J_customScroll元素',
        hasCustomEle,
        '根元素是否有over-hidden',
        rootEleNode.classList,
      );
    }
  };
  const touchstartEventCaptureFunc = (e) => {
    if (e && !e?.target?.closest('.J_h5SwiperCustom') && !e?.target?.closest('.J_customLayout')) {
      rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
      console.log(
        'customScrollView所在页面document touch start事件捕获阶段移除根元素是否有over-hidden',
        rootEleNode.classList,
      );
    }
  };
  useEffect(() => {
    isJdApp &&
      !window.JDJshopViewInfo.getAndroidTouchSlopState &&
      nativePageGetScaledTouchSlop((res) => {
        console.log('获取安卓系统滑动阈值', res);
        window.JDJshopViewInfo.androidTouchSlop = res;
        window.JDJshopViewInfo.getAndroidTouchSlopState = true;
      });
    if (isJdAndH5ScrollState && rootEleNode && !rootEleAddEventListenerState) {
      global?.removeJdAndroidRquestEventForTouchStart &&
        global.removeJdAndroidRquestEventForTouchStart();
      rootEleNode.addEventListener('touchstart', touchstartEventBubbleFunc, false);
      
      rootEleNode.addEventListener('touchstart', touchstartEventCaptureFunc, true);
      rootEleAddEventListenerState = true;
      console.log('customScrollView 初始化document监听完成');
    }
    return () => {
      if (isJdAndH5ScrollState && rootEleNode && rootEleAddEventListenerState) {
        console.log('customScrollView document监听取消完成');
        rootEleNode.removeEventListener('touchstart', touchstartEventBubbleFunc, false);
        rootEleNode.removeEventListener('touchstart', touchstartEventCaptureFunc, true);
      }
    };
  }, []);
  
  const androidDeviceStopNativeScrollEvent = (touchType) => {
    isJdApp &&
      isAndroidDevice &&
      window?.JdAndroid &&
      window?.JdAndroid?.requestEvent &&
      window.JdAndroid.requestEvent(touchType === TouchType.START);
    console.log('触发window?.JdAndroid.requestEvent', touchType === TouchType.START, touchType);
  };
  const iosDeviceStopNativeScrollEvent = (e, touchType, sendIosState = true) => {
    sendIosState && iosDeviceSendRouter(touchType);
  };
  
  const iosDeviceSendRouter = (state: string) => {
    window?.webkit?.messageHandlers?.MobileNavi?.postMessage?.({
      method: 'callRouterModuleWithParams',
      params: {
        routerURL: 'router://JDShopModule/processShoph5SlideState',
        routerParam: {
          slideDirection: 'horizontal',
          needDisableVertical: `${iosNeedDisableVertical}`,
          state,
        },
        callBackId: new Date().getTime(),
      },
    });
  };
  const stopNativeScrollEvent = (e: Event, touchType, sendIosState = true) => {
    if (isJdApp) {
      isIosDevice &&
        !isAppClassifyPage &&
        iosDeviceStopNativeScrollEvent(e, touchType, sendIosState);
      isAndroidDevice && androidDeviceStopNativeScrollEvent(touchType);
    }
  };
  
  const GetSlideAngle = (dx, dy) => {
    return (Math.atan2(dy, dx) * 180) / Math.PI;
  };
  
  const GetSlideDirection = (startX, startY, endX, endY) => {
    const dy = startY - endY;
    const dx = endX - startX;
    let result = 0;
    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
      return result;
    }
    const angle = GetSlideAngle(dx, dy);
    if (angle >= -45 && angle < 45) {
      result = 4;
    } else if (angle >= 45 && angle < 135) {
      result = 1;
    } else if (angle >= -135 && angle < -45) {
      result = 2;
    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
      result = 3;
    }
    return result;
  };
  const changeTouchStart = (e) => {
    if (isJdApp) {
      stopNativeScrollEvent(e, TouchType.START, !iosNeedDisableVertical);
      if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
        isJdAndH5ScrollState && rootEleNode && rootEleNode.classList.add('over-hidden');
        const touchEvent = e?.originalEvent?.targetTouches[0] || e?.targetTouches[0];
        mLastClientPosRef.current.mLastClientX = touchEvent.clientX;
        mLastClientPosRef.current.mLastClientY = touchEvent.clientY;
      }
    }
  };
  const changeTouchEnd = (e) => {
    stopNativeScrollEvent(e, TouchType.END);
    mLastClientPosRef.current.mLastClientX = 0;
    mLastClientPosRef.current.mLastClientY = 0;
  };
  const triggerIosTouchMove = () => {
    isJdAndIosDevice && iosDeviceStopNativeScrollEvent(null, TouchType.START, true);
  };
  
  const lodashThrottleTriggerIosTouchMove = lodashThrottle(triggerIosTouchMove, 500);
  
  const recoverRootEleVerticalScroll = (touchEvent) => {
    const direction = GetSlideDirection(
      mLastClientPosRef.current.mLastClientX,
      mLastClientPosRef.current.mLastClientY,
      touchEvent.clientX,
      touchEvent.clientY,
    );
    if (direction === 1 || direction === 2) {
      rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
    }
  };
  const changeTouchMove = (e) => {
    if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
      const touchEvent = e?.originalEvent?.targetTouches[0] || e?.targetTouches[0];
      const xDiff = Math.abs(touchEvent.clientX - mLastClientPosRef.current.mLastClientX).toFixed(
        2,
      );
      const yDiff = Math.abs(touchEvent.clientY - mLastClientPosRef.current.mLastClientY).toFixed(
        2,
      );
      if (isJdApp) {
        if (xDiff >= window.JDJshopViewInfo.androidTouchSlop) {
          iosNeedDisableVertical && isJdApp && lodashThrottleTriggerIosTouchMove();
        } else if (yDiff > window.JDJshopViewInfo.androidTouchSlop) {
          console.log('纵向滚动触发', yDiff, touchEvent, window.JDJshopViewInfo.androidTouchSlop);
          stopNativeScrollEvent(e, TouchType.END);
        }
      }
      isJdAndH5ScrollState && recoverRootEleVerticalScroll(touchEvent);
    }
    if (!dispatchTouchMove) {
      return;
    }
    const parentNode = e.target?.parentNode;
    if (!parentNode) {
      return;
    }
    const event = new TouchEvent('touchmove', e);
    parentNode.dispatchEvent(event);
  };
  if (scrollX && isJdApp && !isIgnorePreventNative) {
    return (
      <ScrollView
        scrollX
        onTouchStart={changeTouchStart}
        onTouchEnd={changeTouchEnd}
        onTouchCancel={changeTouchEnd}
        onTouchMove={changeTouchMove}
        enhanced
        showScrollbar={false}
        style={style}
        className={classNames(
          className,
          {
            [customScrollViewStyle['d-custom-ios-h5-extend-border-radius']]: isIosDevice,
          },
          'J_customScroll',
        )}
        {...otherProps}
      >
        {children}
      </ScrollView>
    );
  } else {
    return (
      <ScrollView
        scrollX
        enhanced
        showScrollbar={false}
        {...otherProps}
        className={classNames(
          className,
          {
            [customScrollViewStyle['d-custom-ios-mini-extend-border-radius']]:
              isIosDevice && isWxMin && scrollX && style['borderRadius'],
          },
          {
            [customScrollViewStyle['d-custom-ios-h5-extend-border-radius']]: isIosDevice,
          },
          {
            [customScrollViewStyle['d-custom-mini-hide-scroll']]: isWxMin,
          },
        )}
        style={style}
      >
        {children}
      </ScrollView>
    );
  }
  style: {},
  scrollX: false,
  scrollY: false,
  scrollWithAnimation: true,
  iosNeedDisableVertical: false, 
  className: null,
  dispatchTouchMove: true, 
+import React, { useRef, useEffect } from 'react';
  isH5AndJdShopView,
  isAndroidDevice,
  isJdAndAndroidDevice,
  isJdAndHarmonyDevice,
  isJdAndIosDevice,
  isIosDevice,
  isJdApp,
  isWxMin,
  isH5AndJdShopViewH5Scroll,
  isH5AndJdShopH5CustomScrollView,
  isH5,
  isAppClassifyPage,
  lodashThrottle,
  START: 'start',
  MOVE: 'move',
  END: 'end',
  const {
    scrollX,
    children,
    style = {},
    iosNeedDisableVertical,
    dispatchTouchMove,
    className,
    ...otherProps
  } = props;
  const rootEleNode = isH5 && document ? document.querySelector('body') : null;
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === 'true');
  const mLastClientPosRef = useRef({
    mLastClientX: 0,
    mLastClientY: 0,
  });
  const isJdAndH5ScrollState = needShowHighVersion || isH5AndJdShopH5CustomScrollView;
  
  const touchstartEventBubbleFunc = (e) => {
    const isH5SwiperCustomEle = e?.target?.closest('.J_h5SwiperCustom');
    if (!isH5SwiperCustomEle) {
      const hasCustomEle = e
        ? e?.target?.closest('.J_customScroll') || e?.target?.closest('.J_customLayout')
        : false;
      if (isJdAndAndroidDevice && !hasCustomEle) {
        window?.JdAndroid &&
          window?.JdAndroid?.requestEvent &&
          window.JdAndroid.requestEvent(false);
      }
      !hasCustomEle &&
        rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
      console.log(
        'customScrollView所在页面document touch start事件是否有J_customScroll元素',
        hasCustomEle,
        '根元素是否有over-hidden',
        rootEleNode.classList,
      );
    }
  };
  const touchstartEventCaptureFunc = (e) => {
    if (e && !e?.target?.closest('.J_h5SwiperCustom') && !e?.target?.closest('.J_customLayout')) {
      rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
      console.log(
        'customScrollView所在页面document touch start事件捕获阶段移除根元素是否有over-hidden',
        rootEleNode.classList,
      );
    }
  };
  useEffect(() => {
    isJdApp &&
      !window.JDJshopViewInfo.getAndroidTouchSlopState &&
      nativePageGetScaledTouchSlop((res) => {
        console.log('获取安卓系统滑动阈值', res);
        window.JDJshopViewInfo.androidTouchSlop = res;
        window.JDJshopViewInfo.getAndroidTouchSlopState = true;
      });
    if (isJdAndH5ScrollState && rootEleNode && !rootEleAddEventListenerState) {
      global?.removeJdAndroidRquestEventForTouchStart &&
        global.removeJdAndroidRquestEventForTouchStart();
      rootEleNode.addEventListener('touchstart', touchstartEventBubbleFunc, false);
      
      rootEleNode.addEventListener('touchstart', touchstartEventCaptureFunc, true);
      rootEleAddEventListenerState = true;
      console.log('customScrollView 初始化document监听完成');
    }
    return () => {
      if (isJdAndH5ScrollState && rootEleNode && rootEleAddEventListenerState) {
        console.log('customScrollView document监听取消完成');
        rootEleNode.removeEventListener('touchstart', touchstartEventBubbleFunc, false);
        rootEleNode.removeEventListener('touchstart', touchstartEventCaptureFunc, true);
      }
    };
  }, []);
  
  const androidDeviceStopNativeScrollEvent = (touchType) => {
    isJdApp &&
      isAndroidDevice &&
      window?.JdAndroid &&
      window?.JdAndroid?.requestEvent &&
      window.JdAndroid.requestEvent(touchType === TouchType.START);
    console.log('触发window?.JdAndroid.requestEvent', touchType === TouchType.START, touchType);
  };
  const iosDeviceStopNativeScrollEvent = (e, touchType, sendIosState = true) => {
    sendIosState && iosDeviceSendRouter(touchType);
  };
  
  const iosDeviceSendRouter = (state: string) => {
    window?.webkit?.messageHandlers?.MobileNavi?.postMessage?.({
      method: 'callRouterModuleWithParams',
      params: {
        routerURL: 'router://JDShopModule/processShoph5SlideState',
        routerParam: {
          slideDirection: 'horizontal',
          needDisableVertical: `${iosNeedDisableVertical}`,
          state,
        },
        callBackId: new Date().getTime(),
      },
    });
  };
  const stopNativeScrollEvent = (e: Event, touchType, sendIosState = true) => {
    if (isJdApp) {
      isIosDevice &&
        !isAppClassifyPage &&
        iosDeviceStopNativeScrollEvent(e, touchType, sendIosState);
      isAndroidDevice && androidDeviceStopNativeScrollEvent(touchType);
    }
  };
  
  const GetSlideAngle = (dx, dy) => {
    return (Math.atan2(dy, dx) * 180) / Math.PI;
  };
  
  const GetSlideDirection = (startX, startY, endX, endY) => {
    const dy = startY - endY;
    const dx = endX - startX;
    let result = 0;
    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
      return result;
    }
    const angle = GetSlideAngle(dx, dy);
    if (angle >= -45 && angle < 45) {
      result = 4;
    } else if (angle >= 45 && angle < 135) {
      result = 1;
    } else if (angle >= -135 && angle < -45) {
      result = 2;
    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
      result = 3;
    }
    return result;
  };
  const changeTouchStart = (e) => {
    if (isJdApp) {
      stopNativeScrollEvent(e, TouchType.START, !iosNeedDisableVertical);
      if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
        isJdAndH5ScrollState && rootEleNode && rootEleNode.classList.add('over-hidden');
        const touchEvent = e?.originalEvent?.targetTouches[0] || e?.targetTouches[0];
        mLastClientPosRef.current.mLastClientX = touchEvent.clientX;
        mLastClientPosRef.current.mLastClientY = touchEvent.clientY;
      }
    }
  };
  const changeTouchEnd = (e) => {
    stopNativeScrollEvent(e, TouchType.END);
    mLastClientPosRef.current.mLastClientX = 0;
    mLastClientPosRef.current.mLastClientY = 0;
  };
  const triggerIosTouchMove = () => {
    isJdAndIosDevice && iosDeviceStopNativeScrollEvent(null, TouchType.START, true);
  };
  
  const lodashThrottleTriggerIosTouchMove = lodashThrottle(triggerIosTouchMove, 500);
  
  const recoverRootEleVerticalScroll = (touchEvent) => {
    const direction = GetSlideDirection(
      mLastClientPosRef.current.mLastClientX,
      mLastClientPosRef.current.mLastClientY,
      touchEvent.clientX,
      touchEvent.clientY,
    );
    if (direction === 1 || direction === 2) {
      rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
    }
  };
  const changeTouchMove = (e) => {
    if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
      const touchEvent = e?.originalEvent?.targetTouches[0] || e?.targetTouches[0];
      const xDiff = Math.abs(touchEvent.clientX - mLastClientPosRef.current.mLastClientX).toFixed(
        2,
      );
      const yDiff = Math.abs(touchEvent.clientY - mLastClientPosRef.current.mLastClientY).toFixed(
        2,
      );
      if (isJdApp) {
        if (xDiff >= window.JDJshopViewInfo.androidTouchSlop) {
          iosNeedDisableVertical && isJdApp && lodashThrottleTriggerIosTouchMove();
        } else if (yDiff > window.JDJshopViewInfo.androidTouchSlop) {
          console.log('纵向滚动触发', yDiff, touchEvent, window.JDJshopViewInfo.androidTouchSlop);
          stopNativeScrollEvent(e, TouchType.END);
        }
      }
      isJdAndH5ScrollState && recoverRootEleVerticalScroll(touchEvent);
    }
    if (!dispatchTouchMove) {
      return;
    }
    const parentNode = e.target?.parentNode;
    if (!parentNode) {
      return;
    }
    const event = new TouchEvent('touchmove', e);
    parentNode.dispatchEvent(event);
  };
  if (scrollX && isJdApp && !isIgnorePreventNative) {
    return (
      <ScrollView
        scrollX
        onTouchStart={changeTouchStart}
        onTouchEnd={changeTouchEnd}
        onTouchCancel={changeTouchEnd}
        onTouchMove={changeTouchMove}
        enhanced
        showScrollbar={false}
        style={style}
        className={classNames(
          className,
          {
            [customScrollViewStyle['d-custom-ios-h5-extend-border-radius']]: isIosDevice,
          },
          'J_customScroll',
        )}
        {...otherProps}
      >
        {children}
      </ScrollView>
    );
  } else {
    return (
      <ScrollView
        scrollX
        enhanced
        showScrollbar={false}
        {...otherProps}
        className={classNames(
          className,
          {
            [customScrollViewStyle['d-custom-ios-mini-extend-border-radius']]:
              isIosDevice && isWxMin && scrollX && style['borderRadius'],
          },
          {
            [customScrollViewStyle['d-custom-ios-h5-extend-border-radius']]: isIosDevice,
          },
          {
            [customScrollViewStyle['d-custom-mini-hide-scroll']]: isWxMin,
          },
        )}
        style={style}
      >
        {children}
      </ScrollView>
    );
  }
  style: {},
  scrollX: false,
  scrollY: false,
  scrollWithAnimation: true,
  iosNeedDisableVertical: false, 
  className: null,
  dispatchTouchMove: true, 

package/dist/components/base/Dialog/index.dynamic.module.scss

@@ -0,0 +1,126 @@
+
+.d-dialog-layout {
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 222;
+	.d-dialog-wrap {
+    position: relative;
+		width: 100%;
+		height: 100%;
+		opacity: 0.01;
+		transform: scale(0);
+		animation: zoomIn 250ms ease-in-out;
+		animation-fill-mode: forwards;
+    box-sizing: border-box;
+    &.d-dialog-jdapp-wrap{
+      padding-bottom: 80px;
+    }
+	}
+	.d-dialog-content {
+		padding-top: 30px;
+		width: 80%;
+		background-color: #fff;
+		border-radius: 18px;
+		overflow: hidden;
+	}
+	.d-dialog-header {
+		padding: 12px 30px;
+		margin: 0;
+		line-height: 44px;
+		font-size: 32px;
+		color: #333;
+		text-align: center;
+	}
+	.d-dialog-body {
+		padding: 30px;
+		font-size: 32px;
+		color: #333;
+		overflow: auto;
+		text-align: center;
+	}
+	.d-dialog-footer {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    border-top: 1px solid  #dadada;
+    &.d-dialog-footer-btn-line{
+      &:after {
+        content: '';
+        position: absolute;
+        display: flex;
+        top: 0;
+        left: 50%;
+        width: 1px;
+        height: 100%;
+        background-color: #dadada;
+        z-index: 2;
+      }
+    }
+		.d-dialog-btn {
+			position: relative;
+      margin: 0;
+			display: block;
+			height: 88px;
+			line-height: 88px;
+			font-size: 30px;
+			text-align: center;
+			color: #e93b3d;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			box-sizing: border-box;
+      background-color: #fff;
+      border-radius: 0;
+		}
+		.d-dialog-cancel-btn {
+			color: #000;
+		}
+	}
+}
+@-webkit-keyframes zoomIn {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+  80% {
+    opacity: 0.95;
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+	100% {
+		opacity: 1;
+		transform: scale3d(1, 1, 1);
+	}
+}
+@keyframes zoomIn {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+  80% {
+    opacity: 0.95;
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+	100% {
+		opacity: 1;
+		transform: scale3d(1, 1, 1);
+	}
+}
+:global{
+  .d-shop-pad{
+    :local{
+      
+      .d-dialog-content{
+        max-width: 520PX;
+      }
+    }
+  }
+
+}