@conecli/cone-render 0.10.1-shop3.113 → 0.10.1-shop3.115

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

@@ -1 +1 @@
-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 (
      <div
        className={className}
        ref={ref}
        style={{
          minHeight: inView ? 'auto' : typeof height === 'number' ? `${height}px` : height,
          backgroundColor: 'transparent',
        }}
      >
        {inView ? children : placeholder}
      </div>
    );
  }
  children: null, 
  placeholder: null, 
  height: 1, 
  className: '',
  lazyNodeClassName: '',
  inViewCallback: null,
+import Taro from '@tarojs/taro';
  isH5AndJdShopView,
  isH5AndJdShopViewH5Scroll,
  isAppStowShop,
  isAppClassifyPage,
  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 && !isAppClassifyPage && !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 (
      <div
        className={className}
        ref={ref}
        style={{
          minHeight: inView ? 'auto' : typeof height === 'number' ? `${height}px` : height,
          backgroundColor: 'transparent',
        }}
      >
        {inView ? children : placeholder}
      </div>
    );
  }
  children: null, 
  placeholder: null, 
  height: 1, 
  className: '',
  lazyNodeClassName: '',
  inViewCallback: null,

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

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

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

@@ -2,16 +2,16 @@
 
 .d-mobile-floor-lazy-layout-load,
 .d-app-floor-lazy-layout-load {
-	position: relative;
-	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;
+  position: relative;
+  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-mobile-prestrain-component {
-	position: absolute;
-	//top: -50vh;
-	top: -35vh;
-	width: 100%;
-	height: 0;
+  position: absolute;
+  //top: -50vh;
+  top: -35vh;
+  width: 100%;
+  height: 0;
 }

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

@@ -1 +1 @@
-import Taro, { useRouter } from '@tarojs/taro'
  isH5AndJdShopView,
  isH5AndJdShopViewH5Scroll,
  getSgmCustomCode,
  draBusinessCustomReport
  SECTION_HOME_TAB_TYPE,
  SECTION_HOME_TAB_NAME_TYPE,
  TaroEventType,
  latestFromNativeMsgStorage,
  nativePageRegisterMessage,
  Message_Type,
  getNativePageScrollRes,
  const {
    sectionType = SECTION_HOME_TAB_NAME_TYPE[
      SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN
    ],
    type = LazyType.FLOOR, 
    children = null, 
    placeholder = null, 
    height = 200, 
    className = '',
    lazyNodeClassName = '',
    containerId,
    floorData = {},
  } = 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,
        }
        draBusinessCustomReport({
          eventName: 'business',
          errorName: getSgmCustomCode(SgmCustomCode.FLOORLAZYLOAD_DATA),
          errorMessage: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
          extraData: JSON.stringify(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>
  )
+import Taro from '@tarojs/taro';
  isH5AndJdShopView,
  isH5AndJdShopViewH5Scroll,
  getSgmCustomCode,
  draBusinessCustomReport,
  SECTION_HOME_TAB_TYPE,
  SECTION_HOME_TAB_NAME_TYPE,
  TaroEventType,
  latestFromNativeMsgStorage,
  nativePageRegisterMessage,
  Message_Type,
  getNativePageScrollRes,
  const {
    sectionType = SECTION_HOME_TAB_NAME_TYPE[SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN],
    type = LazyType.FLOOR, 
    children = null, 
    placeholder = null, 
    height = 200, 
    className = '',
    lazyNodeClassName = '',
    containerId,
    floorData = {},
    rootMargin = `0px 0px ${window.innerHeight}px 0px`,
  } = 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');
  const { ref, inView } = useInView({
    threshold: 0,
    triggerOnce: true,
    root: rootDom, 
    rootMargin,
  });
  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) {
        const url =
          window?.taroRenderVersion === 0
            ? modularPackResultObj.bundleUrl
            : modularPackResultObj.bundleUrlV2;
        if (url) {
          nativePageRegisterMessage(Message_Type.NATIVE_INJECT_JS_FILE, {
            data: {
              bundleUrl: [url],
            },
          });
        }
      }
    }
  }, [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,
        };
        draBusinessCustomReport({
          eventName: 'business',
          errorName: getSgmCustomCode(SgmCustomCode.FLOORLAZYLOAD_DATA),
          errorMessage: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
          extraData: JSON.stringify(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>
  );