@conecli/cone-render 0.8.20 → 0.8.21-shop-beta.3

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  TaroEventType,
  WEBVIEW_STATE,
  M_H5_ROOT_ELE_NODE,
  props: ComponentInterFace.InOrOutViewObserverProps,
  const { children, inViewCallback, outViewCallback, threshold = 0 } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const componentObserverRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  if (isH5AndJdShopView) {
    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}>{children}</View>
  } else {
    const rootDom = document.querySelector(`${M_H5_ROOT_ELE_NODE}`)
    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}>{children}</View>
  }
  children: null, 
  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 = 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, 

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        placeholder,
        height,
        inViewCallback
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const [componentRenderShowState, setComponentRenderShowState] =
        useState(false)
    const componentLazyRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    if (isH5AndJdShopView) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                !componentShowStateRef.current && dealPageScrollInfo(res)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 店铺H5 展示啦!')
            }
        }, [componentShowState])
        
        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)
                if (!componentShowStateRef.current) {
                    if (getContainerHeightOffSetY > eleOffsetTop) {
                        componentShowStateRef.current = true
                        setComponentShowState(true)
                        Taro.nextTick(() => {
                            setComponentRenderShowState(true)
                        })
                    }
                }
            }
        }
        return (
            <View
                ref={componentLazyRef}
                className={classNames(
                    lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
                    'd-app-floor-lazy-load',
                )}
                style={{
                    minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
                        }`,
                    backgroundColor: componentRenderShowState
                        ? 'transparent'
                        : '#ffffff',
                }}
            >
                {componentShowState ? children : placeholder}
            </View>
        )
    } else {
        const rootDom = document.querySelector('#J_shopHomeRoot')
        const { ref, inView } = useInView({
            threshold: 0,
            triggerOnce: true,
            root: rootDom || null,    
            rootMargin: `0px 0px 0px 0px`,  
        })
        useEffect(() => {
            if (inView) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 其它H5 展示啦!')
            }
        }, [inView])
        return (
            <View
                ref={ref}
                style={{
                    minHeight: `${inView ? 'auto' : height + 'px'}`,
                    backgroundColor: 'transparent',
                }}
            >
                {inView ? children : placeholder}
            </View>
        )
    }
    children: null, 
    placeholder: null, 
    height: 1, 
    className: '',
    lazyNodeClassName: '',
    inViewCallback: null,
+import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        placeholder,
        height,
        className,
        inViewCallback
    } = props
    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')
    if (isH5AndJdShopView && !needShowHighVersion) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                !componentShowStateRef.current && dealPageScrollInfo(res)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 店铺H5 展示啦!')
            }
        }, [componentShowState])
        
        const dealPageScrollInfo = (res) => {
            console.log(
            	'收到滚动信息和模块元素以及容器显示状态',
            	res,
            	typeof componentLazyRef.current,
            	componentShowStateRef.current,
            )
            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)
                if (!componentShowStateRef.current) {
                    if (getContainerHeightOffSetY > eleOffsetTop) {
                        componentShowStateRef.current = true
                        setComponentShowState(true)
                        Taro.nextTick(() => {
                            setComponentRenderShowState(true)
                        })
                    }
                }
            }
        }
        return (
            <View
                ref={componentLazyRef}
                className={classNames(
                    lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
                    'd-app-floor-lazy-load',
                    className
                )}
                style={{
                    minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
                        }`,
                    backgroundColor: componentRenderShowState
                        ? 'transparent'
                        : '#ffffff',
                }}
            >
                {componentShowState ? children : placeholder}
            </View>
        )
    }else {
      const { ref, inView } = useInView({
        threshold: 0.5, 
        triggerOnce: true,
        root: rootDom || null,    
        rootMargin: `0px 0px 0px 0px`,  
        delay: 300, 
      })
      useEffect(() => {
        if (inView) {
          typeof inViewCallback === 'function' && inViewCallback()
          console.log('InViewRender -- 其它H5 展示啦!')
        }
      }, [inView])
        return (
            <View
                className={className}
                ref={ref}
                style={{
                    minHeight: inView ? 'auto' : typeof height === 'number' ? `${height}px` : height,
                    backgroundColor: 'transparent',
                }}
            >
                {inView ? children : placeholder}
            </View>
        )
    }
    children: null, 
    placeholder: null, 
    height: 1, 
    className: '',
    lazyNodeClassName: '',
    inViewCallback: null,

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro'

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

@@ -0,0 +1,8 @@
+
+.d-item-point-layout{
+  position: relative;
+  .d-item-chart-point{
+    opacity: 1;
+    z-index: 100;
+  }
+}

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

@@ -0,0 +1 @@
+import React from 'react'
  const { className, pointClassName, children, reportData, trackCallback, ...otherProps } =
    props
  const [floorData, mInfo] = reportData
  const checkReportDataState = floorData && mInfo
  
  checkReportDataState && !mInfo.hasOwnProperty('pos') && (mInfo.pos = 0)
  return (
    <View
      ref={ref}
      className={classNames(
        itemViewExposureSmartStyle['d-item-point-layout'],
        className,
      )}
      {...otherProps}
    >
      {children ? children : null}
      {checkReportDataState && (
        <ExposureSmart
          className={classNames(pointClassName,{
            [itemViewExposureSmartStyle['d-item-chart-point']]: isChartH5,
          })}
          reportData={reportData}
          trackCallback={trackCallback}
          markPoint
        />
      )}
    </View>
  )

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'
        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}