@conecli/cone-render 0.8.39 → 0.8.41

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  const { type, className, reportData, trackCallback } = props
  const checkReportData = Array.isArray(reportData)
  const [floorData, mInfo] = checkReportData ? reportData : []
  const getFloorPointClassName =  `J_floor_${floorData?.uid}_index_${mInfo?.pos}`
        if (
          !taroJdBaseInfo.info.pageInfo.floorExposureInfo[
            getFloorPointClassName
            ]
        ){
          const createIntersectionObserver = new intersectionObserver({
            selector: `#J_floor_${floorData?.uid} >>> .${getFloorPointClassName}`,
            context: this,
            onFinal: (res) => {
              taroJdBaseInfo.info.pageInfo.floorExposureInfo[
                getFloorPointClassName
                ] = true
              console.log('小程序曝光埋点收到进入可视区域啦！', getFloorPointClassName, reportData, res)
              addReportData(reportData)
              typeof trackCallback === 'function' && trackCallback(reportData)
              createIntersectionObserver.disconnect()
            },
          })
          createIntersectionObserver.connect()
        }
    floorData &&
    mInfo && (
          {
            [exposureStyle['d-report-point']]: type === TrackType.point,
          },
          {
            [exposureStyle['d-report-floor']]: type === TrackType.floor,
          },
          getFloorPointClassName,
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,
+import Taro from '@tarojs/taro'
  const { type, className, reportData, customReportDataKey, customReportDataFn, trackCallback } = props
  const isViewOnlineState =
    taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE
  const isCustomReport = customReportDataKey && customReportDataFn
  const checkReportData = Array.isArray(reportData)
  const [floorData, mInfo] = checkReportData ? reportData : []
  const showRenderState = isCustomReport ? true : floorData && mInfo
  const getFloorPointClassName =  isCustomReport ? `J_custom_${customReportDataKey}` : `J_floor_${floorData?.uid}_index_${mInfo?.pos}`
  const getTaroSelector = isCustomReport ? `#J_miniShopRoot >>> ${getFloorPointClassName}` : `#J_floor_${floorData?.uid} >>> .${getFloorPointClassName}`
  useEffect(() => {
    if (isViewOnlineState && reportData) {
      Taro.nextTick(() => {
        if (
          !taroJdBaseInfo.info.pageInfo.floorExposureInfo[
            getFloorPointClassName
            ]
        ){
          const createIntersectionObserver = new intersectionObserver({
            selector: getTaroSelector,
            context: this,
            onFinal: (res) => {
              taroJdBaseInfo.info.pageInfo.floorExposureInfo[
                getFloorPointClassName
                ] = true
              console.log('小程序曝光埋点收到进入可视区域啦！', getFloorPointClassName, reportData, res)
              if(!isCustomReport){
                addReportData(reportData)
                typeof trackCallback === 'function' && trackCallback(reportData)
              }else {
                typeof customReportDataFn === 'function' && customReportDataFn(customReportDataKey)
              }
              createIntersectionObserver.disconnect()
            },
          })
          createIntersectionObserver.connect()
        }
      })
    }
  }, [])
  return (showRenderState ? (
      <View
        className={classNames(
          {
            [exposureStyle['d-report-point']]: type === TrackType.point,
          },
          {
            [exposureStyle['d-report-floor']]: type === TrackType.floor,
          },
          getFloorPointClassName,
          className,
        )}
      />
    ) : null
  )
  return useMemo(() => {
    return <ExposureFloor {...props} />
  }, [])
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,

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 = 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, 
+import Taro from '@tarojs/taro'
  isH5AndJdShopView,
  isH5AndJdShopViewH5Scroll,
  isAppClassifyPage,
  lodashThrottle,
  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({
      delay: 100,
      threshold, 
      triggerOnce: false, 
      root: rootDom || null, 
      rootMargin: `0px 0px 0px 0px`, 
    })
    const throttledViewChanged: ViewChangeHandler = useCallback<
      ViewChangeHandler
    >(
      lodashThrottle(
        (inView: boolean) => {
          if (inView) {
            typeof inViewCallback === 'function' && inViewCallback()
            console.log('其他h5=>in可视区域')
          } else {
            typeof outViewCallback === 'function' && outViewCallback()
            console.log('其他h5=>out可视区域')
          }
        },
        300,
        { leading: false, trailing: true },
      ),
      [],
    )
    useEffect(() => {
      throttledViewChanged(inView)
    }, [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,
        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,
+import Taro from '@tarojs/taro'
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  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 && !isAppStowShop) {
    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()
      }
    }, [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',
          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()
      }
    }, [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,