@conecli/cone-render 0.10.1-shop3.3 → 0.10.1-shop3.5

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 {
    style = {},
    scrollX = false,
    scrollY = false,
    scrollWithAnimation = true,
    iosNeedDisableVertical = false, 
    className = null,
    dispatchTouchMove = true, 
    children,
    ...otherProps
  } = props
  const rootEleNode = isH5 && document?.querySelector('body')
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll && 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(false)
      }
      !hasCustomEle &&
        rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden')
    }
  }
  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')
    }
  }
  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(touchType === TouchType.START)
  }
  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) {
      if (isIosDevice && !isAppClassifyPage) {
        iosDeviceStopNativeScrollEvent(e, touchType, sendIosState)
      } else if (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) {
          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>
    )
  }
+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 {
    style = {},
    scrollX = false,
    scrollY = false,
    scrollWithAnimation = true,
    iosNeedDisableVertical = false, 
    className = null,
    dispatchTouchMove = true, 
    children,
    ...otherProps
  } = props;
  const rootEleNode = isH5 && document?.querySelector('body');
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll && 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(false);
      }
      !hasCustomEle &&
        rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
    }
  };
  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');
    }
  };
  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(touchType === TouchType.START);
  };
  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) {
      if (isIosDevice && !isAppClassifyPage) {
        iosDeviceStopNativeScrollEvent(e, touchType, sendIosState);
      } else if (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) {
          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',
        )}
        scrollY
        scrollWithAnimation
        {...otherProps}
      >
        {children}
      </ScrollView>
    );
  } else {
    return (
      <ScrollView
        scrollX
        scrollY
        scrollWithAnimation
        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>
    );
  }

package/dist/components/base/ExposureSmart/index.h5.module.scss

@@ -6,8 +6,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-	opacity: 0;
-	pointer-events: none;
+  opacity: 0;
+  pointer-events: none;
   z-index: -1;
 }
 //楼层曝光
@@ -20,3 +20,13 @@
   pointer-events: none;
   z-index: -1;
 }
+
+:global{
+  .d-report-exposure-jd-point{
+    &:not(:empty){
+      opacity: 1;
+      z-index: 20;
+    }
+  }
+}
+

package/dist/components/base/ExposureSmart/index.h5.tsx

@@ -1 +1 @@
-import React, { useMemo } from 'react'
  const { type, className, reportData, customReportDataKey, customReportDataFn, trackCallback, markPoint } = props
  const isCustomReport = customReportDataKey && customReportDataFn
  const isViewOnlineState =
    taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE
  const showRenderState = isCustomReport ? true : reportData
  const inViewCallback = () => {
    console.log('埋点收到进入可视区域的回调啦！', reportData)
    if(!isCustomReport){
      addReportData(reportData)
      typeof trackCallback === 'function' && trackCallback(reportData)
    }else {
      typeof customReportDataFn === 'function' && customReportDataFn(customReportDataKey)
    }
  }
  let chartPointClassName = ""
  
  if(isChartH5 && markPoint && Array.isArray(reportData)){
    const [floorData, mInfo] = reportData
    if(floorData && mInfo && mInfo.hasOwnProperty('pos') ){
      chartPointClassName = track.getFloorPointIndexClassName(floorData, mInfo.pos)
    }
  }else if(isCustomReport){
    chartPointClassName = `J_custom_${customReportDataKey}`
  }
  return isViewOnlineState && showRenderState
    ? <InViewRender className={classNames(
      {
        [exposureStyle['d-report-point']]: type === TrackType.point,
      },
      {
        [exposureStyle['d-report-floor']]: type === TrackType.floor,
      },
      className,
      chartPointClassName
    )} height={'100%'} inViewCallback={inViewCallback}></InViewRender>
    : null
  return useMemo(() => {
    return <Exposure {...props} />
  }, [])
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,
  markPoint: false 
+import React, { useMemo } from 'react';
  const {
    type,
    className,
    reportData,
    customReportDataKey,
    customReportDataFn,
    trackCallback,
    markPoint,
    innerRef,
  } = props;
  const isCustomReport = customReportDataKey && customReportDataFn;
  const isViewOnlineState = taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE;
  const showRenderState = isCustomReport ? true : reportData;
  const inViewCallback = () => {
    const getInsertFlowMapEle =
      innerRef?.current?.querySelector('.d-report-exposure-point') || createDefaultFlowMapEle;
    if (!isCustomReport) {
      addReportData(reportData, getInsertFlowMapEle);
      typeof trackCallback === 'function' && trackCallback(reportData);
    } else {
      if (typeof customReportDataFn === 'function') {
        const getReportData = customReportDataFn(customReportDataKey);
        getReportData &&
          getReportData?.eventId &&
          getReportData?.jsonParam &&
          track.reportExposureEventLog({
            ...getReportData,
            target: getInsertFlowMapEle,
          });
      }
    }
  };
  let chartPointClassName = '';
  
  if (isChartH5 && markPoint && Array.isArray(reportData)) {
    const [floorData, mInfo] = reportData;
    if (floorData && mInfo && mInfo.hasOwnProperty('pos')) {
      chartPointClassName = track.getFloorPointIndexClassName(floorData, mInfo.pos);
    }
  } else if (isCustomReport) {
    chartPointClassName = `J_custom_${customReportDataKey}`;
  }
  return isViewOnlineState && showRenderState ? (
    <InViewRender
      className={classNames(
        'd-report-exposure-point',
        {
          [exposureStyle['d-report-point']]: type === TrackType.point,
        },
        {
          [exposureStyle['d-report-floor']]: type === TrackType.floor,
        },
        {
          'd-report-exposure-jd-point': isJdApp,
        },
        className,
        chartPointClassName,
      )}
      height={'100%'}
      inViewCallback={inViewCallback}
    ></InViewRender>
  ) : null;
  return useMemo(() => {
    return <Exposure {...props} />;
  }, []);
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,
  markPoint: false,