@conecli/cone-render 0.8.35 → 0.9.1-shop2.0

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

@@ -1 +1 @@
-import React, {useRef, useEffect} from 'react'
  isH5AndJdShopView,
  isAndroidDevice,
  isIosDevice,
  isJdApp,
  isWxMin,
  isH5AndJdShopViewH5Scroll,
  isH5,
  const rootEleNode = isH5 && document ? document.querySelector('body') : null
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
    e && e.stopPropagation()
      if(!verticalScrolling) {
        needShowHighVersion && rootEleNode &&  rootEleNode.classList.add('over-hidden')
      }
    e && e.stopPropagation()
    e && e.stopPropagation()
        if(!verticalScrolling) {
          needShowHighVersion && rootEleNode &&  rootEleNode.classList.add('over-hidden')
        }
        if(!verticalScrolling) {
          needShowHighVersion && rootEleNode &&  rootEleNode.classList.remove('over-hidden')
        }
      <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>
  verticalScrolling: false,
+import React, {useRef, useEffect} from 'react'
  isH5AndJdShopView,
  isAndroidDevice,
  isIosDevice,
  isJdApp,
  isWxMin,
  isH5AndJdShopViewH5Scroll,
  isH5,
  const rootEleNode = isH5 && document ? document.querySelector('body') : null
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
  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;
  }
      needShowHighVersion && rootEleNode &&  rootEleNode.classList.add('over-hidden')
      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(isAndroidDevice) {
        if (xDiff >= window.JDJshopViewInfo.androidTouchSlop) {
          console.log(
            '横向滚动触发',
            xDiff,
            touchEvent,
            window.JDJshopViewInfo.androidTouchSlop,
          )
        } else if (yDiff > window.JDJshopViewInfo.androidTouchSlop) {
          console.log(
            '纵向滚动触发',
            yDiff,
            touchEvent,
            window.JDJshopViewInfo.androidTouchSlop,
          )
          androidDeviceStopNativeScrollEvent(false)
        }
      }
      if(needShowHighVersion) {
        const direction = GetSlideDirection(mLastClientPosRef.current.mLastClientX, mLastClientPosRef.current.mLastClientY, touchEvent.clientX, touchEvent.clientY);
        if(direction === 1 || direction === 2) {
          rootEleNode &&  rootEleNode.classList.remove('over-hidden')
        }
      }
      <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>

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  TaroEventType,
  WEBVIEW_STATE,
  M_H5_ROOT_ELE_NODE,
  latestFromNativeMsgStorage,
  getNativePageScrollRes,
  props: ComponentInterFace.InOrOutViewObserverProps,
  const {
    children,
    style,
    inViewCallback,
    outViewCallback,
    threshold = 0,
  } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const componentObserverRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector(`${M_H5_ROOT_ELE_NODE}`)
  if (isH5AndJdShopView && !needShowHighVersion) {
    useEffect(() => {
      const latestRes =
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        dealPageScrollInfo(res)
      })
      Taro.eventCenter.on(
        TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
        (state) => {
          state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
        },
      )
      return function cleanup() {
        Taro.eventCenter.off(TaroEventType.PAGE_SCROLL, (res) => {
          dealPageScrollInfo(res)
        })
        Taro.eventCenter.off(
          TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
          (state) => {
            state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
          },
        )
      }
    }, [])
    useEffect(() => {
      if (componentShowState) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('app=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('app=>out可视区域')
      }
    }, [componentShowState])
    
    const handleInOrOutView = (type: boolean) => {
      componentShowStateRef.current = type
      setComponentShowState(type)
      console.log('handleInOrOutView', type)
    }
    
    const dealPageScrollInfo = (res) => {
      console.log('dealPageScrollInfo===', res)
      const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
      if (
        typeof displayHeight === 'undefined' ||
        typeof offSetY === 'undefined'
      )
        return
      console.log(
        '处理后dealPageScrollInfo===displayHeight=offSetY',
        displayHeight,
        offSetY,
      )
      if (componentObserverRef.current) {
        const eleClientRect =
          componentObserverRef.current.getBoundingClientRect()
        const eleOffsetTop = Math.ceil(eleClientRect.top)
        const eleHeight = Math.ceil(eleClientRect.height)
        console.log(
          '==========================eleOffsetTop, eleHeight',
          eleOffsetTop,
          eleHeight,
        )
        if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
          const isOutView =
            offSetY > eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)) ||
            displayHeight - (eleOffsetTop - offSetY) <
              Math.ceil(eleHeight * threshold)
          console.log(
            '比较isOutView',
            isOutView,
            offSetY,
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
            displayHeight - (eleOffsetTop - offSetY),
            Math.ceil(eleHeight * threshold),
          )
          handleInOrOutView(!isOutView)
        } else {
          const isInView =
            offSetY >
              eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold) &&
            offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
          console.log(
            '比较isInView',
            isInView,
            offSetY,
            eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold),
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
          )
          handleInOrOutView(isInView)
        }
      }
    }
    return (
      <View ref={componentObserverRef} style={style}>
        {children}
      </View>
    )
  } else {
    const { ref, inView } = useInView({
      threshold, 
      triggerOnce: false, 
      root: rootDom || null, 
      rootMargin: `0px 0px 0px 0px`, 
    })
    useEffect(() => {
      if (inView) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('其他h5=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('其他h5=>out可视区域')
      }
    }, [inView])
    return (
      <View ref={ref} style={style}>
        {children}
      </View>
    )
  }
  children: null, 
  style: {},
  className: '',
  inViewCallback: null, 
  outViewCallback: null, 
  threshold: 0, 
+import Taro from '@tarojs/taro'
  TaroEventType,
  WEBVIEW_STATE,
  M_H5_ROOT_ELE_NODE,
  latestFromNativeMsgStorage,
  getNativePageScrollRes,
  props: ComponentInterFace.InOrOutViewObserverProps,
  const {
    children,
    style,
    inViewCallback,
    outViewCallback,
    threshold = 0,
  } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const componentObserverRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion = isAppClassifyPage || (isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true"))
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector(`${M_H5_ROOT_ELE_NODE}`)
  if (isH5AndJdShopView && !needShowHighVersion) {
    console.log('视频========属于app原生滚动')
    useEffect(() => {
      const latestRes =
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        dealPageScrollInfo(res)
      })
      Taro.eventCenter.on(
        TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
        (state) => {
          state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
        },
      )
      return function cleanup() {
        Taro.eventCenter.off(TaroEventType.PAGE_SCROLL, (res) => {
          dealPageScrollInfo(res)
        })
        Taro.eventCenter.off(
          TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
          (state) => {
            state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
          },
        )
      }
    }, [])
    useEffect(() => {
      if (componentShowState) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('app=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('app=>out可视区域')
      }
    }, [componentShowState])
    
    const handleInOrOutView = (type: boolean) => {
      componentShowStateRef.current = type
      setComponentShowState(type)
      console.log('handleInOrOutView', type)
    }
    
    const dealPageScrollInfo = (res) => {
      console.log('dealPageScrollInfo===', res)
      const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
      if (
        typeof displayHeight === 'undefined' ||
        typeof offSetY === 'undefined'
      )
        return
      console.log(
        '处理后dealPageScrollInfo===displayHeight=offSetY',
        displayHeight,
        offSetY,
      )
      if (componentObserverRef.current) {
        const eleClientRect =
          componentObserverRef.current.getBoundingClientRect()
        const eleOffsetTop = Math.ceil(eleClientRect.top)
        const eleHeight = Math.ceil(eleClientRect.height)
        console.log(
          '==========================eleOffsetTop, eleHeight',
          eleOffsetTop,
          eleHeight,
        )
        if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
          const isOutView =
            offSetY > eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)) ||
            displayHeight - (eleOffsetTop - offSetY) <
              Math.ceil(eleHeight * threshold)
          console.log(
            '比较isOutView',
            isOutView,
            offSetY,
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
            displayHeight - (eleOffsetTop - offSetY),
            Math.ceil(eleHeight * threshold),
          )
          handleInOrOutView(!isOutView)
        } else {
          const isInView =
            offSetY >
              eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold) &&
            offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
          console.log(
            '比较isInView',
            isInView,
            offSetY,
            eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold),
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
          )
          handleInOrOutView(isInView)
        }
      }
    }
    return (
      <View ref={componentObserverRef} style={style}>
        {children}
      </View>
    )
  } else {
    console.log('视频========h5滚动')
    const { ref, inView } = useInView({
      threshold, 
      triggerOnce: false, 
      root: rootDom || null, 
      rootMargin: `0px 0px 0px 0px`, 
    })
    useEffect(() => {
      if (inView) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('其他h5=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('其他h5=>out可视区域')
      }
    }, [inView])
    return (
      <View ref={ref} style={style}>
        {children}
      </View>
    )
  }
  children: null, 
  style: {},
  className: '',
  inViewCallback: null, 
  outViewCallback: null, 
  threshold: 0, 

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

@@ -1 +1 @@
-import Taro, { useRouter } from '@tarojs/taro'
        floorData = {},
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
        root: rootDom,    
        rootMargin: `0px 0px ${window.innerHeight}px 0px`,  
  useEffect(() => {
    if(needShowHighVersion) return
    if (type === LazyType.FLOOR) {
      const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      !componentShowStateRef.current && dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        !componentShowStateRef.current && dealPageScrollInfo(res)
      })
    }
  }, [])
    useEffect(() => {
        if((!needShowHighVersion && componentShowState === true) ||
          (needShowHighVersion && inView && isH5AndJdShopView)
        ) {
            console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染！')
            const modularPackResult = floorData?.floorExtInfo?.modularPackResult
                nativePageRegisterMessage(
                    Message_Type.NATIVE_INJECT_JS_FILE,
                    {
                        data: {
                            "bundleUrl": [bundleUrl]
                        },
                    },
                )
            }
        }
    }, [componentShowState,inView])
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            ref={ref}
+import Taro, { useRouter } from "@tarojs/taro";
  SECTION_HOME_TAB_TYPE,
  SECTION_HOME_TAB_NAME_TYPE,
  TaroEventType,
  latestFromNativeMsgStorage,
  nativePageRegisterMessage,
  Message_Type,
  getNativePageScrollRes,
  const {
    children,
    containerId,
    type,
    placeholder,
    height,
    floorData = {},
    sectionType,
    lazyNodeClassName,
  } = props;
  const getRouterInfo = useRouter();
  const getQueryData = getRouterInfo?.params || {};
  const [componentShowState, setComponentShowState] = useState(false);
  const [componentRenderShowState, setComponentRenderShowState] =
    useState(false);
  const componentLazyRef = useRef<HTMLElement | null>(null);
  const componentShowStateRef = useRef(false);
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === "true"
    );
  const rootDom =
    isH5AndJdShopView && needShowHighVersion
      ? null
      : document.querySelector("#J_shopHomeRoot");
  const { ref, inView } = useInView({
    threshold: 0,
    triggerOnce: true,
    root: rootDom, 
    rootMargin: `0px 0px ${window.innerHeight}px 0px`, 
  });
  useEffect(() => {
    if (needShowHighVersion) return;
    if (type === LazyType.FLOOR) {
      const latestRes =
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {};
      !componentShowStateRef.current && dealPageScrollInfo(latestRes);
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        !componentShowStateRef.current && dealPageScrollInfo(res);
      });
    }
  }, []);
  useEffect(() => {
    if (
      (!needShowHighVersion && componentShowState === true) ||
      (needShowHighVersion && inView && isH5AndJdShopView)
    ) {
      console.log(
        ">>>>>>>>>>>>>>>>>>> 楼层【id=" + containerId + "】已经渲染！"
      );
      const modularPackResultObj = formatPackResult(
        floorData?.floorExtInfo?.modularPackResult
      );
      const bundleUrl = getBundleUrl(modularPackResultObj);
      if (bundleUrl) {
        nativePageRegisterMessage(Message_Type.NATIVE_INJECT_JS_FILE, {
          data: {
            bundleUrl: [bundleUrl],
          },
        });
      }
    }
  }, [componentShowState, inView]);
  
  const dealPageScrollInfo = (res) => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {};
    if (typeof displayHeight === "undefined" || typeof offSetY === "undefined")
      return;
    if (componentLazyRef.current) {
      const eleClientRect = componentLazyRef.current.getBoundingClientRect();
      const getContainerHeightOffSetY = displayHeight + offSetY;
      const eleOffsetTop = Math.ceil(eleClientRect.top);
      const eleOffsetHeight = Math.ceil(eleClientRect.height);
      const eleOffsetTopHeight = eleOffsetTop + eleOffsetHeight;
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true;
          setComponentShowState(true);
          Taro.nextTick(() => {
            setComponentRenderShowState(true);
          });
        }
      }
    }
  };
  return isH5AndJdShopView && !needShowHighVersion ? (
    <div
      id={`${containerId}_lazy`}
      ref={componentLazyRef}
      className={classNames(
        lazyLayoutLoadStyle["d-app-floor-lazy-layout-load"],
        "d-app-floor-lazy-load"
      )}
      style={{
        minHeight: `${componentRenderShowState ? "auto" : height + "px"}`,
        backgroundColor: componentRenderShowState ? "transparent" : "#ffffff",
      }}
    >
      {componentShowState ? children : placeholder}
    </div>
  ) : (
    <div
      id={`${containerId}_lazy`}
      className={classNames(
        lazyLayoutLoadStyle["d-mobile-floor-lazy-layout-load"],
        "d-mobile-floor-lazy-load"
      )}
      ref={ref}
      style={{
        minHeight: `${inView ? "auto" : height + "px"}`,
        backgroundColor: inView ? "transparent" : "#ffffff",
      }}
    >
      {inView ? children : placeholder}
    </div>
  );
  sectionType:
    SECTION_HOME_TAB_NAME_TYPE[SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN],
  type: LazyType.FLOOR, 
  children: null, 
  placeholder: null, 
  height: 200, 
  className: "",
  lazyNodeClassName: "",

package/dist/components/base/LazyLayoutLoad/index.weapp.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro'
  SECTION_HOME_TAB_TYPE,
  SECTION_HOME_TAB_NAME_TYPE,
  const {
    children,
    containerId,
    type,
    placeholder,
    height,
    sectionType,
    lazyNodeClassName,
  } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const lazyLayoutLoadFloor =
    'lazy-layout-load-floor' + Math.floor(Math.random() * 10000000)
  useEffect(() => {
    Taro.nextTick(() => {
      const createIntersectionObserver = new intersectionObserver({
        selector: `.${lazyLayoutLoadFloor}`,
        context: this,
        onFinal: () => {
          setComponentShowState(true)
          createIntersectionObserver.disconnect()
        },
      })
      createIntersectionObserver.connect()
    })
  }, [])
  return type === LazyType.IMAGE ? (
    children
  ) : (
    <View
      id={`${containerId}_lazy`}
      ref={componentLazyRef}
      className={classNames(
        lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
        'd-app-floor-lazy-load',
        lazyLayoutLoadFloor,
      )}
      style={{
        minHeight: `${componentShowState ? 'auto' : height + 'px'}`,
        backgroundColor: componentShowState ? 'transparent' : '#ffffff',
      }}
    >
      {componentShowState ? children : placeholder}
    </View>
  )
  sectionType:
    SECTION_HOME_TAB_NAME_TYPE[SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN],
  type: LazyType.FLOOR, 
  children: null, 
  placeholder: null, 
  height: 200, 
  className: '',
  lazyNodeClassName: '',