@conecli/cone-render 0.10.1-shop3.8 → 0.10.1-shop3.80

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

@@ -0,0 +1 @@
+const CustomVideo = (props) => {
  console.log('CustomVideo 小程序端 暂无实现',props)
  return null

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

@@ -1 +1 @@
-import React, { useMemo } from 'react';
  const {
    type,
    className,
    reportData,
    customReportDataKey,
    customReportDataFn,
    trackCallback,
    markPoint,
    innerRef,
  } = props;
  const isCustomReport = customReportDataKey && customReportDataFn;
  const isViewOnlineState = taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE;
  const showRenderState = isCustomReport ? true : reportData;
  const inViewCallback = () => {
    const getInsertFlowMapEle =
      innerRef?.current?.querySelector('.d-report-exposure-point') || createDefaultFlowMapEle;
    if (!isCustomReport) {
      addReportData(reportData, getInsertFlowMapEle);
      typeof trackCallback === 'function' && trackCallback(reportData);
    } else {
      if (typeof customReportDataFn === 'function') {
        const getReportData = customReportDataFn(customReportDataKey);
        getReportData &&
          getReportData?.eventId &&
          getReportData?.jsonParam &&
          track.reportExposureEventLog({
            ...getReportData,
            target: getInsertFlowMapEle,
          });
      }
    }
  };
  let chartPointClassName = '';
  
  if (isChartH5 && markPoint && Array.isArray(reportData)) {
    const [floorData, mInfo] = reportData;
    if (floorData && mInfo && mInfo.hasOwnProperty('pos')) {
      chartPointClassName = track.getFloorPointIndexClassName(floorData, mInfo.pos);
    }
  } else if (isCustomReport) {
    chartPointClassName = `J_custom_${customReportDataKey}`;
  }
  return isViewOnlineState && showRenderState ? (
    <InViewRender
      className={classNames(
        'd-report-exposure-point',
        {
          [exposureStyle['d-report-point']]: type === TrackType.point,
        },
        {
          [exposureStyle['d-report-floor']]: type === TrackType.floor,
        },
        {
          'd-report-exposure-jd-point': isJdApp,
        },
        className,
        chartPointClassName,
      )}
      height={'100%'}
      inViewCallback={inViewCallback}
    ></InViewRender>
  ) : null;
  return useMemo(() => {
    return <Exposure {...props} />;
  }, []);
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,
  markPoint: false, 
+import React, { useMemo } from 'react';
  const {
    type,
    className,
    reportData,
    customReportDataKey,
    customReportDataFn,
    trackCallback,
    markPoint,
    innerRef,
  } = props;
  const isCustomReport = customReportDataKey && customReportDataFn;
  const isViewOnlineState = taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE;
  const showRenderState = isCustomReport ? true : reportData;
  const inViewCallback = () => {
    const getInsertFlowMapEle =
      innerRef?.current?.querySelector('.d-report-exposure-point') || createDefaultFlowMapEle;
    if (!isCustomReport) {
      addReportData(reportData, getInsertFlowMapEle);
      typeof trackCallback === 'function' && trackCallback(reportData);
    } else {
      if (typeof customReportDataFn === 'function') {
        const getReportData = customReportDataFn(customReportDataKey);
        if(getReportData){
          const { eventId, spmAllCode, spmCodeForCD, jsonParam } = getReportData;
          (eventId || spmAllCode || spmCodeForCD) &&
          jsonParam &&
          track.reportExposureEventLog({
            ...getReportData,
            target: getInsertFlowMapEle,
          });
        }
      }
    }
  };
  let chartPointClassName = '';
  
  if (isChartH5 && markPoint && Array.isArray(reportData)) {
    const [floorData, mInfo] = reportData;
    if (floorData && mInfo && mInfo.hasOwnProperty('pos')) {
      chartPointClassName = track.getFloorPointIndexClassName(floorData, mInfo.pos);
    }
  } else if (isCustomReport) {
    chartPointClassName = `J_custom_${customReportDataKey}`;
  }
  return isViewOnlineState && showRenderState ? (
    <InViewRender
      className={classNames(
        'd-report-exposure-point',
        {
          [exposureStyle['d-report-point']]: type === TrackType.point,
        },
        {
          [exposureStyle['d-report-floor']]: type === TrackType.floor,
        },
        {
          'd-report-exposure-jd-point': isJdApp,
        },
        className,
        chartPointClassName,
      )}
      height={'100%'}
      inViewCallback={inViewCallback}
    ></InViewRender>
  ) : null;
  return useMemo(() => {
    return <Exposure {...props} />;
  }, []);
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,
  markPoint: false, 

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

@@ -1 +1 @@
-import track from '../../../open/api/track';
  const { arr: arrTask, startWaitTime } = floorTask;
  const isTimeout = startWaitTime != 0 && Date.now() - startWaitTime >= 1000; 
  const arrTaskNum = arrTask.length;
  const isOverMax = arrTaskNum >= 10; 
  const hasData = arrTaskNum > 0;
  if (hasData && (isTimeout || isOverMax)) {
    const reduceData = connactData(arrTask);
    track.reportExposureEventLog(reduceData);
    floorTask.arr = [];
    floorTask.startWaitTime = 0;
    clearTimeout(floorTask.timer);
  }
  const initData = JSON.parse(JSON.stringify(arr[0]));
  if (initData.jsonParam.etModelInfo) {
    initData.jsonParam.logBaseInfo = [];
    initData.jsonParam.etModelInfo.lstms = [];
    return arr.reduce((acc, cur) => {
      acc.jsonParam.logBaseInfo.push(cur.jsonParam.logBaseInfo);
      return acc;
    }, initData);
  } else {
    return arr.reduce((acc) => {
      return acc;
    });
  }
  if (!Array.isArray(data)) {
    console.log('坑位曝光埋点原始数据参类型错误，期望是数组，实际是：', data);
    return;
  }
  const [floorData, mInfo, etModelInfo] = data;
  if (floorData && mInfo && etModelInfo) {
    const isIsvReportModule = isvReportModuleTypeList.includes(floorData?.floorExtInfo?.moduleFlag);
    try {
      const reportJson = track.getExposureInfo(
        floorData,
        mInfo,
        etModelInfo,
        true,
        isIsvReportModule,
      );
      console.log(`${floorData?.floorExtInfo?.moduleFlag}===reportJson===`, reportJson);
      const { floorIdx } = floorData;
      if (!task[floorIdx]) {
        task[floorIdx] = {
          arr: [],
          startWaitTime: 0,
          timer: 0,
        };
      }
      const floorTask = task[floorIdx];
      if (floorTask.arr.length === 0) {
        floorTask.startWaitTime = Date.now();
      }
      if (reportJson) {
        floorTask.arr.push(reportJson);
        clearTimeout(floorTask.timer);
        floorTask.timer = setTimeout(() => {
          check(floorTask);
        }, 1000);
        check(floorTask);
      }
    } catch (e) {
      {
        console.log('坑位曝光埋点出错啦', e);
      }
    }
  } else {
    console.log(
      '坑位曝光埋点原始数据参数缺失，期望是[floorData, mInfo, etModelInfo]，实际是：',
      data,
    );
  }
+import track from '../../../open/api/track';
  if (!Array.isArray(data)) {
    console.log('坑位曝光埋点原始数据参类型错误，期望是数组，实际是：', data);
    return;
  }
  const [floorData, mInfo, etModelInfo] = data;
  if (floorData && mInfo && etModelInfo) {
    const isIsvReportModule = isvReportModuleTypeList.includes(floorData?.floorExtInfo?.moduleFlag);
    try {
      const reportJson = track.getExposureInfo(
        floorData,
        mInfo,
        etModelInfo,
        true,
        isIsvReportModule,
      );
      reportJson['target'] = target;
      console.log(`${floorData?.floorExtInfo?.moduleFlag}===reportJson===`, reportJson);
      track.reportExposureEventLog(reportJson);
    } catch (e) {
      console.log('坑位曝光埋点出错啦', e);
    }
  } else {
    console.log(
      '坑位曝光埋点原始数据参数缺失，期望是[floorData, mInfo, etModelInfo]，实际是：',
      data,
    );
  }

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

@@ -0,0 +1 @@
+const InOrOutViewObserver = (props) => {
  console.log('InOrOutViewObserver props  暂无实现', props)
  return null

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

@@ -1 +1 @@
-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,
+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,

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

@@ -1 +1 @@
-import Taro, { useRouter } from '@tarojs/taro'
  isH5AndJdShopView,
  isH5AndJdShopViewH5Scroll,
  sgmCustomReport,
  getSgmCustomCode,
  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,
        }
        sgmCustomReport({
          code: getSgmCustomCode(SgmCustomCode.FLOORLAZYLOAD_DATA),
          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>
  )
+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>
  )