@conecli/cone-render 0.8.19 → 0.8.20-beta.2

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

@@ -1 +1 @@
-import Taro, { useRouter } from '@tarojs/taro'
        floorData = {},
    const rootDom = document.querySelector('#J_shopHomeRoot')
        root: rootDom,    
        rootMargin: `0px 0px ${window.innerHeight}px 0px`,  
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    useEffect(() => {
        if(componentShowState === true){
            console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染！')
            const modularPackResult = floorData?.floorExtInfo?.modularPackResult
                nativePageRegisterMessage(
                    Message_Type.NATIVE_INJECT_JS_FILE,
                    {
                        data: {
                            "bundleUrl": [bundleUrl]
                        },
                    },
                )
            }
        }
    }, [componentShowState])
    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,
  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 || !isH5AndJdShopView) return
    if (type === LazyType.FLOOR) {
      const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      !componentShowStateRef.current && dealPageScrollInfo(latestRes,false)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        !componentShowStateRef.current && dealPageScrollInfo(res,true)
      })
    }
  }, [])
  useEffect(() => {
    if((!needShowHighVersion && componentShowState === true) ||
      (needShowHighVersion && inView && isH5AndJdShopView)
    ) {
      console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染！')
      const modularPackResult = floorData?.floorExtInfo?.modularPackResult
      const modularPackResultObj = typeof modularPackResult === 'string' ? JSON.parse(modularPackResult) : modularPackResult
      if (modularPackResultObj && modularPackResultObj.bundleUrl) {
        const { bundleUrl } = modularPackResultObj
        nativePageRegisterMessage(
          Message_Type.NATIVE_INJECT_JS_FILE,
          {
            data: {
              "bundleUrl": [bundleUrl]
            },
          },
        )
      }
    }
  }, [componentShowState,inView])
  
  const dealPageScrollInfo = (res,pageScrollTrigger) => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') {
      const shopId = floorData?.floorExtInfo?.shopId
      if(!lazyLayoutLoadErrorShopId[`${shopId}`] && pageScrollTrigger) {
        const opt = {
          msg: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
          uid: floorData?.uid,
          floorIdx: floorData?.floorIdx,
          shopId: shopId,
          moduleId: floorData?.moduleId,
          moduleName: floorData?.moduleName,
          middleTemplateId: floorData?.middleTemplateId
        }
        sgmCustomReport({
          code: getSgmCustomCode(SgmCustomCode.FLOORLAZYLOAD_DATA),
          msg: opt,
        })
        lazyLayoutLoadErrorShopId[`${shopId}`] = true
      }
      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',
        lazyNodeClassName,
      )}
      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: '',

package/dist/components/base/LazyLoadImage/const.ts

@@ -1 +1 @@
-export const NetWorkTypeQuality = {
+export const NetWorkTypeQuality = {

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

@@ -1,24 +1,28 @@
 
 .d-lazy-image,
 .d-app-lazy-image {
-	//background: #F8F8F8 url("../../resoure/jd_logo_bg.png") center center/50% no-repeat;
-	background: #fff
-		url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=')
-		center center no-repeat;
-	&.d-lazy-sku-image {
-		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png');
-		background-size: cover;
-	}
-	&.d-load-completed {
-		background: none;
-	}
-	img {
-		display: block;
-		width: 100%;
-	}
-	&.d-hide-image-error {
-		img {
-			opacity: 0;
-		}
-	}
+  //background: #F8F8F8 url("../../resoure/jd_logo_bg.png") center center/50% no-repeat;
+  background: #fff
+    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=')
+    center center no-repeat;
+  &.d-lazy-sku-image {
+    background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png');
+    background-size: cover;
+  }
+  &.d-load-completed {
+    background: none;
+  }
+  // 暂时注释修复taro中Image组件已高度为准，宽度需要自适应的样式处理，需要调研和埋点上报看下有没有这种使用场景 20241122
+  //&[mode="heightFix"] > img{
+  //  width: auto;
+  //}
+  img {
+    display: block;
+    width: 100%;
+  }
+  &.d-hide-image-error {
+    img {
+      opacity: 0;
+    }
+  }
 }