@conecli/cone-render 0.9.1-shop2.7 → 0.9.1-shop2.8

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

@@ -1 +1 @@
-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 || !isH5AndJdShopView) 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') {
      const shopId = floorData?.floorExtInfo?.shopId
      if(!lazyLayoutLoadErrorShopId[`${shopId}`]) {
        const opt = {
          msg: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
          uid: floorData?.uid,
          floorIdx: floorData?.floorIdx,
          shopId: shopId,
          moduleId: floorData?.moduleId,
          moduleName: floorData?.moduleName,
          middleTemplateId: floorData?.middleTemplateId,
          modularPackResult: typeof floorData?.floorExtInfo?.modularPackResult == 'string' ? JSON.parse(floorData?.floorExtInfo?.modularPackResult) : floorData?.floorExtInfo?.modularPackResult,
        }
        sgmCustomReport({
          code: 'lazyLayoutLoadError',
          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: "",
+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 || !isH5AndJdShopView) 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
      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) => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {};
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') {
      const shopId = floorData?.floorExtInfo?.shopId
      if(!lazyLayoutLoadErrorShopId[`${shopId}`]) {
        const opt = {
          msg: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
          uid: floorData?.uid,
          floorIdx: floorData?.floorIdx,
          shopId: shopId,
          moduleId: floorData?.moduleId,
          moduleName: floorData?.moduleName,
          middleTemplateId: floorData?.middleTemplateId,
          modularPackResult: typeof floorData?.floorExtInfo?.modularPackResult == 'string' ? JSON.parse(floorData?.floorExtInfo?.modularPackResult) : floorData?.floorExtInfo?.modularPackResult,
        }
        sgmCustomReport({
          code: 'lazyLayoutLoadError',
          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/LazyLoadImage/index.h5.tsx

@@ -1 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
  getQualityImage,
  isH5AndJdShopView,
  isJdApp,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  isAppStowShop
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  const {
    src,
    lazyLoad,
    imagRenderingSet,
    width,
    height,
    className,
    isSkuImage,
    hideErrorImage,
    style,
    backgroundColor,
    errorSrc,
    onLoad,
    onError,
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
  (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const imageError = useCallback(
    (e) => {
      console.log('图片加载错误', e)
      errorSrc && setImgSrc(errorSrc)
      hideErrorImage && setImageErrState(true)
      typeof onError === 'function' && onError(e, src, props)
    },
    [src],
  )
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  useEffect(() => {
    if (needShowHighVersion) return
    const latestRes =
      latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
      !componentShowStateRef.current && dealPageScrollInfo(res)
    })
  }, [])
  
  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 * 1.5 + offSetY 
      const eleOffsetTop = Math.ceil(eleClientRect.top)
      const eleOffsetHeight = Math.ceil(eleClientRect.height)
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true
          setComponentShowState(true)
        }
      }
    }
  }
  return (
    (isH5AndJdShopView && global?.config?.needImageLazy !== false && !needShowHighVersion && !isAppStowShop) ? (
      <View
        ref={ componentLazyRef }
        className={classNames(
          imageStyle['d-app-lazy-image'],
          {
            [imageStyle['d-lazy-sku-image']]: isSkuImage,
          },
          {
            [imageStyle['d-hide-image-error']]: imageErrState,
          },
          {
            [imageStyle['d-load-completed']]: loadSuccess,
          },
          {
            'd-imag-rendering-crisp-edges':
              !taroJdBaseInfo.info.pageInfo.isVipShop &&
              imagRenderingSet,
          },
          'J_html5ImageBg',
          className,
        )}
        style={{
          ...style,
          ...changeStyleIncludeWidthAndHeightAndBgColor(),
        }}
        {...otherOption}
      >
        {(componentShowState || lazyLoad === false) && <img
          src={getQualityImage(
            imgSrc,
            taroJdBaseInfo.info.pageInfo.isVipShop
              ? NetWorkTypeQuality['perfect']
              : NetWorkTypeQuality[getNetWorkType],
          )}
          onLoad={imageLoad.bind(this, imgSrc)}
          onError={imageError}
        />}
      </View>
    ) : (
      <Image
        style={{
          ...style,
          ...changeStyleIncludeWidthAndHeightAndBgColor(),
        }}
        className={classNames(
          imageStyle['d-lazy-image'],
          {
            [imageStyle['d-lazy-sku-image']]: isSkuImage,
          },
          {
            [imageStyle['d-hide-image-error']]: imageErrState,
          },
          {
            [imageStyle['d-load-completed']]: loadSuccess,
          },
          {
            'd-imag-rendering-crisp-edges': imagRenderingSet,
          },
          className,
        )}
        src={getQualityImage(
          imgSrc,
          NetWorkTypeQuality[getNetWorkType],
        )}
        lazyLoad={isChartH5 ? false : lazyLoad}
        onError={imageError}
        onLoad={imageLoad.bind(this, imgSrc)}
        {...otherOption}
      />
    )
  )
  lazyLoad: true, 
  isSkuImage: false,
  hideErrorImage: false, 
  imagRenderingSet: true, 
  src: null,
  style: null, 
  width: null,
  height: null,
  backgroundColor: null, 
  className: null, 
  errorSrc: null, 
  onLoad: null, 
  onError: null, 
+import React, { useCallback, useEffect, useRef, useState } from 'react'
  TaroEventType,
  getQualityImage,
  isH5AndJdShopView,
  isJdApp,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  isAppStowShop
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  const {
    src,
    lazyLoad,
    imagRenderingSet,
    width,
    height,
    className,
    isSkuImage,
    hideErrorImage,
    style,
    backgroundColor,
    errorSrc,
    onLoad,
    onError,
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
  (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const imageError = useCallback(
    (e) => {
      console.log('图片加载错误', e)
      errorSrc && setImgSrc(errorSrc)
      hideErrorImage && setImageErrState(true)
      typeof onError === 'function' && onError(e, src, props)
    },
    [src],
  )
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  useEffect(() => {
    if(needShowHighVersion) return
    const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
      !componentShowStateRef.current && dealPageScrollInfo(res)
    })
  }, [])
  
  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 * 1.5 + offSetY   
      const eleOffsetTop = Math.ceil(eleClientRect.top)
      const eleOffsetHeight = Math.ceil(eleClientRect.height)
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true
          setComponentShowState(true)
        }
      }
    }
  }
  return (
    (isH5AndJdShopView && global?.config?.needImageLazy !== false && !needShowHighVersion && !isAppStowShop) ? (
      <View
        ref={ componentLazyRef }
        className={classNames(
          imageStyle['d-app-lazy-image'],
          {
            [imageStyle['d-lazy-sku-image']]: isSkuImage,
          },
          {
            [imageStyle['d-hide-image-error']]: imageErrState,
          },
          {
            [imageStyle['d-load-completed']]: loadSuccess,
          },
          {
            'd-imag-rendering-crisp-edges':
              !taroJdBaseInfo.info.pageInfo.isVipShop &&
              imagRenderingSet,
          },
          'J_html5ImageBg',
          className,
        )}
        style={{
          ...style,
          ...changeStyleIncludeWidthAndHeightAndBgColor(),
        }}
        {...otherOption}
      >
        {(componentShowState || lazyLoad === false) && <img
          src={getQualityImage(
            imgSrc,
            taroJdBaseInfo.info.pageInfo.isVipShop
              ? NetWorkTypeQuality['perfect']
              : NetWorkTypeQuality[getNetWorkType],
          )}
          onLoad={imageLoad.bind(this, imgSrc)}
          onError={imageError}
        />}
      </View>
    ) : (
      <Image
        style={{
          ...style,
          ...changeStyleIncludeWidthAndHeightAndBgColor(),
        }}
        className={classNames(
          imageStyle['d-lazy-image'],
          {
            [imageStyle['d-lazy-sku-image']]: isSkuImage,
          },
          {
            [imageStyle['d-hide-image-error']]: imageErrState,
          },
          {
            [imageStyle['d-load-completed']]: loadSuccess,
          },
          {
            'd-imag-rendering-crisp-edges': imagRenderingSet,
          },
          className,
        )}
        src={getQualityImage(
          imgSrc,
          NetWorkTypeQuality[getNetWorkType],
        )}
        lazyLoad={isChartH5 ? false : lazyLoad}
        onError={imageError}
        onLoad={imageLoad.bind(this, imgSrc)}
        {...otherOption}
      />
    )
  )
  lazyLoad: true, 
  isSkuImage: false,
  hideErrorImage: false, 
  imagRenderingSet: true, 
  src: null,
  style: null, 
  width: null,
  height: null,
  backgroundColor: null, 
  className: null, 
  errorSrc: null, 
  onLoad: null, 
  onError: null,