@conecli/cone-render 0.9.1-shop2.10 → 0.9.1-shop2.12

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

@@ -1 +1 @@
-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, 
+import React, { useCallback, useEffect, useRef, useState } from 'react'
  TaroEventType,
  const {
    src,
    lazyLoad,
    imagRenderingSet,
    width,
    height,
    className,
    isSkuImage,
    hideErrorImage,
    style,
    backgroundColor,
    errorSrc,
    onLoad,
    onError,
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
    (getNetWorkType = global.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const measureRef = useRef < HTMLElement | null > (null)
  const [measureComplete, setMeasureComplete] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const [hasRetrySuccess, setHasRetrySuccess] = useState(false) 
  const hasRetryRef = useRef(false)   
  const componentShowStateRef = useRef(false)
  const requestSrcRef = useRef(src)
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
  const enableAvifOptimize = isImageOptimizeEnable()
  
  const getRequestSrc = useCallback((src) => {
    const requestSrc = getQualityImage(
      imgSrc,
      { isSkuImage, size: measureRef?.current?.offsetWidth }
    )
    requestSrcRef.current = requestSrc
    return requestSrc
  }, [src])
  const imageErrorRetry = (src) => {
    return new Promise((resolve, reject) => {
        if(fetch && window && window.Image){
            fetch(src)
                .then(response => {
                    const {ok, status} = response
                    if (ok) {
                        response.blob().then(blob => {
                            const url = URL.createObjectURL(blob)
                            const img = new window.Image()
                            img.src = url;
                            img.onload = () => {
                                resolve({
                                    ok: true,
                                    url
                                })
                                setTimeout(() => {
                                    URL.revokeObjectURL(url)
                                }, 1000)
                            };
                            img.onerror = () => {
                                resolve({
                                    ok: false,
                                    text: '图片解析异常',
                                    type: 'imageParseError',
                                })
                                URL.revokeObjectURL(url)
                            };
                        })
                    }else {
                        if(status === 404){
                            resolve({
                                ok: false,
                                text: '访问图片不存在',
                                type: 'noSuchUrlImage',
                            })
                        }else{
                            resolve({
                                ok: false,
                                status: status, 
                                text: '其它图片问题',
                                type: 'otherImageError',
                            })
                        }
                    }
                })
                .catch(error => {
                    resolve({
                        ok: false,
                        text: '网络异常',
                        type: 'networkError',
                    })
                    console.error('LazyLoadImage imageErrorRetry() error:', error)
                });
        }else{
            resolve({
                ok: false,
                text: '不支持重试',
                type: 'notSupportRetry',
            })
        }
    })
    
  const imageErrorHandle = useCallback(
    (e) => {
        console.log(' ==============> 图片加载错误', e)
        if (!hasRetryRef.current) {
            hasRetryRef.current = true
            if(src){
                try{
                    imageErrorRetry(requestSrcRef.current).then((result) => {
                        const { status, ok, text, type, url } = result || {}
                        if(ok){
                            setImgSrc(url)
                            setHasRetrySuccess(true)
                        }else{
                            errorSrc && setImgSrc(errorSrc)
                            hideErrorImage && setImageErrState(true)
                            typeof onError === 'function' && onError(e, src, props)
                            const { shopId, venderId } = global.info.queryInfo || {}
                            sgmCustomReport({
                                code: getSgmCustomCode(`${SgmCustomCode.IMAGE_LOAD}_${type}`),
                                msg: {
                                    shopId,
                                    venderId,
                                    originSrc: src,
                                    requestSrc: requestSrcRef.current,
                                    status,
                                    text
                                },
                            })
                        }
                    })
                }catch(e){
                    console.error('LazyLoadImage imageErrorHandle() error:', e)
                    errorSrc && setImgSrc(errorSrc)
                    hideErrorImage && setImageErrState(true)
                    typeof onError === 'function' && onError(e, src, props)
                }
            }
        }
    },
    [src, hasRetryRef.current],
  )
  
  
  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(() => {
    setMeasureComplete(true)
    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 (measureRef.current) {
      const eleClientRect =
        measureRef.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={measureRef}
        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":
            !global.info.pageInfo.isVipShop && imagRenderingSet,
        },
        "J_html5ImageBg",
        className
        )}
        style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
        }}
        {...otherOption}
    >
        {(componentShowState || lazyLoad === false) && (
        <img
            src={getQualityImage(
            imgSrc,
            global.info.pageInfo.isVipShop
                ? NetWorkTypeQuality["perfect"]
                : NetWorkTypeQuality[getNetWorkType]
            )}
            onLoad={imageLoad.bind(this, imgSrc)}
            onError={imageErrorHandle}
        />
        )}
    </View>
    ) : enableAvifOptimize ? (
    [
        measureComplete ? (
        <Image
            key={hasRetrySuccess? "realImageRetry": "realImage"}
            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={hasRetrySuccess? imgSrc: getRequestSrc(imgSrc)}
            lazyLoad={isChartH5 ? false : lazyLoad}
            onError={imageErrorHandle}
            onLoad={imageLoad.bind(this, imgSrc)}
            {...otherOption}
        />
        ) : (
        <Image
            key={"defaultImage"}
            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={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
        />
        ),
        loadSuccess ? null : <View key={"measureRef"} ref={measureRef}></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={imageErrorHandle}
        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, 

package/dist/components/base/MobileCommonHeader/index.module.scss

@@ -7,3 +7,11 @@
 		position: relative;
 	}
 }
+:global {
+  .d-mobile-header-sticky {
+    position: fixed;
+    top: 0;
+    width: 100%; 
+    z-index: 999;
+  }
+}

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

@@ -1 +1 @@
-import React, { useEffect, useContext, useState } from 'react'
  const { title, openAppParams, style, hasCommonHeader = true, hasDownloadTips = true, headerParams } = props
  useEffect(() => {
    hasCommonHeader && initCommonHeader()
    hasDownloadTips && initDownloadAppLayerConfigData()
  }, [])
  const initCommonHeader = () => {
    if (window?.MCommonHeaderBottom) {
      const mchb = new MCommonHeaderBottom()
      const headerArg = {
        moduleName: 'shop',
        hrederId: 'm_common_header',
        title,
        stype: 1,
        onClickJdkey: function () {
          console.log('==>m_common_header jdkey click.')
        },
        ...headerParams
      }
      mchb.header(headerArg)
    }
  }
  const initDownloadAppLayerConfigData = () => {
    const getEle = document.getElementById('m_common_tip')
    getEle &&
      window.$ &&
      window.$.downloadAppLayerConfigData &&
      window.$.downloadAppLayerConfigData({
        tipId: 'm_common_tip',
        M_sourceFrom: 'jshop',
        bottom: 74,
        onClickTipX: () => {
          Taro.eventCenter.trigger(
            TaroEventType.DOWN_LOAD_APP_CLOSE_CHANGE,
            true,
          )
        },
        downloadAppPlugIn: {
          M_sourceFrom: 'jshop',
          openAppBtnId: 'download_openapp',
          downAppURl: '//conecli.com/downloadApp/download.html?channel=jd-m',
          inteneUrl: 'openapp.jdmobile://virtual?',
          inteneUrlParams: {
            category: 'jump',
            des: 'jshopMain',
            shopId: `${global.info.queryInfo.shopId || ''}`,
            venderId: `${global.info.queryInfo.venderId || ''}`,
            sourceType: global.info.queryInfo?.sourceType || 'M-H5',
            sourceValue: global.info.queryInfo?.sourceValue || 'Mshop',
            ...openAppParams,
          },
        },
      })
  }
  return !isWxMiniH5View && !isJdApp ? (
    <View
      className={mobileCommonHeaderStyle['d-mobile-header-layout']}
      style={style}
    >
      <View
        id="m_common_tip"
        className={mobileCommonHeaderStyle['d-mobile-common-tip']}
      />
      {hasCommonHeader && (
        <View
          id="m_common_header"
          className={mobileCommonHeaderStyle['d-mobile-common-header']}
        />
      )}
    </View>
  ) : null
  title: '店铺',
  openAppParams: {},
+import React, {useEffect, useRef} from 'react'
  const { title, openAppParams, style, hasCommonHeader = true, hasDownloadTips = true, headerParams } = props
  const headerRef:any = useRef(null)
  useEffect(() => {
    hasCommonHeader && initCommonHeader()
    hasDownloadTips && initDownloadAppLayerConfigData()
  }, [])
  const scrollEventFunc = () => {
    const stickyTop = headerRef.current?.getBoundingClientRect()?.top || 0;
    const rootScrollEleNode = document.querySelector('#J_shopHomeRoot')
    if (rootScrollEleNode && rootScrollEleNode.scrollTop > stickyTop) {
      headerRef.current.classList.add('d-mobile-header-sticky');
    } else {
      headerRef.current.classList.remove('d-mobile-header-sticky');
    }
  }
  useEffect(() => {
    if(!headerRef.current) return
    const rootScrollEleNode = document.querySelector('#J_shopHomeRoot')
    rootScrollEleNode && rootScrollEleNode.addEventListener('scroll', scrollEventFunc);
    return () => {
      rootScrollEleNode && rootScrollEleNode.removeEventListener('scroll', scrollEventFunc)
    }
  },[])
  const initCommonHeader = () => {
    if (window?.MCommonHeaderBottom) {
      const mchb = new MCommonHeaderBottom()
      const headerArg = {
        moduleName: 'shop',
        hrederId: 'm_common_header',
        title,
        stype: 1,
        onClickJdkey: function () {
          console.log('==>m_common_header jdkey click.')
        },
        ...headerParams
      }
      mchb.header(headerArg)
    }
  }
  const initDownloadAppLayerConfigData = () => {
    const getEle = document.getElementById('m_common_tip')
    getEle &&
      window.$ &&
      window.$.downloadAppLayerConfigData &&
      window.$.downloadAppLayerConfigData({
        tipId: 'm_common_tip',
        M_sourceFrom: 'jshop',
        bottom: 74,
        onClickTipX: () => {
          Taro.eventCenter.trigger(
            TaroEventType.DOWN_LOAD_APP_CLOSE_CHANGE,
            true,
          )
        },
        downloadAppPlugIn: {
          M_sourceFrom: 'jshop',
          openAppBtnId: 'download_openapp',
          downAppURl: '//conecli.com/downloadApp/download.html?channel=jd-m',
          inteneUrl: 'openapp.jdmobile://virtual?',
          inteneUrlParams: {
            category: 'jump',
            des: 'jshopMain',
            shopId: `${global.info.queryInfo.shopId || ''}`,
            venderId: `${global.info.queryInfo.venderId || ''}`,
            sourceType: global.info.queryInfo?.sourceType || 'M-H5',
            sourceValue: global.info.queryInfo?.sourceValue || 'Mshop',
            ...openAppParams,
          },
        },
      })
  }
  return !isWxMiniH5View && !isJdApp ? (
    <View
      className={mobileCommonHeaderStyle['d-mobile-header-layout']}
      style={style}
      ref={headerRef}
    >
      <View
        id="m_common_tip"
        className={mobileCommonHeaderStyle['d-mobile-common-tip']}
      />
      {hasCommonHeader && (
        <View
          id="m_common_header"
          className={mobileCommonHeaderStyle['d-mobile-common-header']}
        />
      )}
    </View>
  ) : null
  title: '店铺',
  openAppParams: {},