@conecli/cone-render 0.10.1-beta.6 → 0.10.1-beta.8

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

@@ -1 +1 @@
-import React, { useMemo } from 'react'
  const { type, className, reportData, customReportDataKey, customReportDataFn, trackCallback, markPoint } = props
  const isCustomReport = customReportDataKey && customReportDataFn
  const isViewOnlineState =
    taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE
  const showRenderState = isCustomReport ? true : reportData
  const inViewCallback = () => {
    console.log('埋点收到进入可视区域的回调啦！', reportData)
    if(!isCustomReport){
      addReportData(reportData)
      typeof trackCallback === 'function' && trackCallback(reportData)
    }else {
      typeof customReportDataFn === 'function' && customReportDataFn(customReportDataKey)
    }
  }
  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(
      {
        [exposureStyle['d-report-point']]: type === TrackType.point,
      },
      {
        [exposureStyle['d-report-floor']]: type === TrackType.floor,
      },
      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);
        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, 

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';
  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,
    );
  }

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 (
      <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 (
      <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.module.scss

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

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

@@ -1 +1 @@
-import React from 'react'
  const { className, pointClassName, children, reportData, customReportDataKey,customReportDataFn, trackCallback, ...otherProps } =
    props
  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={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}
          customReportDataFn={customReportDataFn}
          customReportDataKey={customReportDataKey}
          markPoint
        />
      )}
    </View>
  )
  reportData: [],
  customReportDataKey: null,
  customReportDataFn: 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/debug/DebugLayout/index.module.scss

@@ -6,7 +6,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 50;
+  z-index: 9999;
 
 	.debug-layout {
 		position: absolute;
@@ -58,7 +58,7 @@
 	.d-info {
 		position: relative;
 		cursor: pointer;
-		z-index: 3;
+		z-index: 9999;
 		margin: 3PX 3PX;
 		width: 22PX;
 		height: 22PX;

package/dist/components/floorItem.weapp.tsx

@@ -1 +1 @@
-import React from 'react'
  const {
    floorData,
    renderSourceType = BUSINESS_TYPE.ONLINE, 
    builtInComponents = {},
    updateContainerFloorListDataFn,
  } = props
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE
  const floorModuleType = floorData?.floorExtInfo?.moduleFlag
  const FloorContentItem =
    (floorModuleType && builtInComponents[floorModuleType]) || null
  const dataDefines = getFloorDataToDataDefines(floorData)
  
  const renderDecorateDefaultModule = () => {
    return (
      <View
        style={{
          lineHeight: '120px',
          textAlign: 'center',
        }}
      >
        当前模块是{floorData.moduleName}
      </View>
    )
  }
  return FloorContentItem ? (
    <ErrorBoundary {...props}>
      <FloorContentItem {...props} dataDefines={dataDefines} />
    </ErrorBoundary>
  ) : isDevMode ? (
    renderDecorateDefaultModule()
  ) : null
  switch (moduleId) {
    case 83158:
      return 'freeLayout'
    case 99654:
      return 'activeText'
    case 100382:
      return 'superGoods'
  }
  floorList.map((item) => {
    if (!item.floorExtInfo) {
      return null
    }
    const moduleFlag = item.floorExtInfo.moduleFlag
    if (!moduleFlag) {
      const newModuleFlag = moduleId2ModuleFlag(item.moduleId)
      if (newModuleFlag) {
        item.floorExtInfo.moduleFlag = newModuleFlag
      }
    }
  })
+import React from 'react'
  const { floorData, renderSourceType, builtInComponents = {} } = props
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE
  const floorModuleType = floorData?.floorExtInfo?.moduleFlag
  const FloorContentItem =
    (floorModuleType && builtInComponents[floorModuleType]) || null
  const dataDefines = getFloorDataToDataDefines(floorData)
  
  const renderDecorateDefaultModule = () => {
    return (
      <View
        style={{
          lineHeight: '120px',
          textAlign: 'center',
        }}
      >
        当前模块是{floorData.moduleName}
      </View>
    )
  }
  return FloorContentItem ? (
    <ErrorBoundary {...props}>
      <FloorContentItem {...props} dataDefines={dataDefines} />
    </ErrorBoundary>
  ) : isDevMode ? (
    renderDecorateDefaultModule()
  ) : null
  renderSourceType: BUSINESS_TYPE.ONLINE, 
  switch (moduleId) {
    case 83158:
      return 'freeLayout'
    case 99654:
      return 'activeText'
    case 100382:
      return 'superGoods'
  }
  floorList.map((item) => {
    if (!item.floorExtInfo) {
      return null
    }
    const moduleFlag = item.floorExtInfo.moduleFlag
    if (!moduleFlag) {
      const newModuleFlag = moduleId2ModuleFlag(item.moduleId)
      if (newModuleFlag) {
        item.floorExtInfo.moduleFlag = newModuleFlag
      }
    }
  })