@conecli/cone-render 0.10.1-shop-beta.44 → 0.10.1-shop-beta.46

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

@@ -1 +1 @@
-import React, { useRef, useEffect } from 'react';
  isH5AndJdShopView,
  isAndroidDevice,
  isJdAndAndroidDevice,
  isJdAndHarmonyDevice,
  isJdAndIosDevice,
  isIosDevice,
  isJdApp,
  isWxMin,
  isH5AndJdShopViewH5Scroll,
  isH5AndJdShopH5CustomScrollView,
  isH5,
  isAppClassifyPage,
  lodashThrottle,
  START: 'start',
  MOVE: 'move',
  END: 'end',
  const {
    scrollX,
    children,
    style = {},
    iosNeedDisableVertical,
    dispatchTouchMove,
    className,
    ...otherProps
  } = props;
  const rootEleNode = isH5 && document ? document.querySelector('body') : null;
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === 'true');
  const mLastClientPosRef = useRef({
    mLastClientX: 0,
    mLastClientY: 0,
  });
  const isJdAndH5ScrollState = needShowHighVersion || isH5AndJdShopH5CustomScrollView;
  
  const touchstartEventBubbleFunc = (e) => {
    const isH5SwiperCustomEle = e?.target?.closest('.J_h5SwiperCustom');
    if (!isH5SwiperCustomEle) {
      const hasCustomEle = e
        ? e?.target?.closest('.J_customScroll') || e?.target?.closest('.J_customLayout')
        : false;
      if (isJdAndAndroidDevice && !hasCustomEle) {
        window?.JdAndroid &&
          window?.JdAndroid?.requestEvent &&
          window.JdAndroid.requestEvent(false);
      }
      !hasCustomEle &&
        rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
      console.log(
        'customScrollView所在页面document touch start事件是否有J_customScroll元素',
        hasCustomEle,
        '根元素是否有over-hidden',
        rootEleNode.classList,
      );
    }
  };
  const touchstartEventCaptureFunc = (e) => {
    if (e && !e?.target?.closest('.J_h5SwiperCustom') && !e?.target?.closest('.J_customLayout')) {
      rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
      console.log(
        'customScrollView所在页面document touch start事件捕获阶段移除根元素是否有over-hidden',
        rootEleNode.classList,
      );
    }
  };
  useEffect(() => {
    isJdApp &&
      !window.JDJshopViewInfo.getAndroidTouchSlopState &&
      nativePageGetScaledTouchSlop((res) => {
        console.log('获取安卓系统滑动阈值', res);
        window.JDJshopViewInfo.androidTouchSlop = res;
        window.JDJshopViewInfo.getAndroidTouchSlopState = true;
      });
    if (isJdAndH5ScrollState && rootEleNode && !rootEleAddEventListenerState) {
      global?.removeJdAndroidRquestEventForTouchStart &&
        global.removeJdAndroidRquestEventForTouchStart();
      rootEleNode.addEventListener('touchstart', touchstartEventBubbleFunc, false);
      
      rootEleNode.addEventListener('touchstart', touchstartEventCaptureFunc, true);
      rootEleAddEventListenerState = true;
      console.log('customScrollView 初始化document监听完成');
    }
    return () => {
      if (isJdAndH5ScrollState && rootEleNode && rootEleAddEventListenerState) {
        console.log('customScrollView document监听取消完成');
        rootEleNode.removeEventListener('touchstart', touchstartEventBubbleFunc, false);
        rootEleNode.removeEventListener('touchstart', touchstartEventCaptureFunc, true);
      }
    };
  }, []);
  
  const androidDeviceStopNativeScrollEvent = (touchType) => {
    isJdApp &&
      isAndroidDevice &&
      window?.JdAndroid &&
      window?.JdAndroid?.requestEvent &&
      window.JdAndroid.requestEvent(touchType === TouchType.START);
    console.log('触发window?.JdAndroid.requestEvent', touchType === TouchType.START, touchType);
  };
  const iosDeviceStopNativeScrollEvent = (e, touchType, sendIosState = true) => {
    sendIosState && iosDeviceSendRouter(touchType);
  };
  
  const iosDeviceSendRouter = (state: string) => {
    window?.webkit?.messageHandlers?.MobileNavi?.postMessage?.({
      method: 'callRouterModuleWithParams',
      params: {
        routerURL: 'router://JDShopModule/processShoph5SlideState',
        routerParam: {
          slideDirection: 'horizontal',
          needDisableVertical: `${iosNeedDisableVertical}`,
          state,
        },
        callBackId: new Date().getTime(),
      },
    });
  };
  const stopNativeScrollEvent = (e: Event, touchType, sendIosState = true) => {
    if (isJdApp) {
      isIosDevice &&
        !isAppClassifyPage &&
        iosDeviceStopNativeScrollEvent(e, touchType, sendIosState);
      isAndroidDevice && androidDeviceStopNativeScrollEvent(touchType);
    }
  };
  
  const GetSlideAngle = (dx, dy) => {
    return (Math.atan2(dy, dx) * 180) / Math.PI;
  };
  
  const GetSlideDirection = (startX, startY, endX, endY) => {
    const dy = startY - endY;
    const dx = endX - startX;
    let result = 0;
    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
      return result;
    }
    const angle = GetSlideAngle(dx, dy);
    if (angle >= -45 && angle < 45) {
      result = 4;
    } else if (angle >= 45 && angle < 135) {
      result = 1;
    } else if (angle >= -135 && angle < -45) {
      result = 2;
    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
      result = 3;
    }
    return result;
  };
  const changeTouchStart = (e) => {
    if (isJdApp) {
      stopNativeScrollEvent(e, TouchType.START, !iosNeedDisableVertical);
      if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
        isJdAndH5ScrollState && rootEleNode && rootEleNode.classList.add('over-hidden');
        const touchEvent = e?.originalEvent?.targetTouches[0] || e?.targetTouches[0];
        mLastClientPosRef.current.mLastClientX = touchEvent.clientX;
        mLastClientPosRef.current.mLastClientY = touchEvent.clientY;
      }
    }
  };
  const changeTouchEnd = (e) => {
    stopNativeScrollEvent(e, TouchType.END);
    mLastClientPosRef.current.mLastClientX = 0;
    mLastClientPosRef.current.mLastClientY = 0;
  };
  const triggerIosTouchMove = () => {
    isJdAndIosDevice && iosDeviceStopNativeScrollEvent(null, TouchType.START, true);
  };
  
  const lodashThrottleTriggerIosTouchMove = lodashThrottle(triggerIosTouchMove, 500);
  
  const recoverRootEleVerticalScroll = (touchEvent) => {
    const direction = GetSlideDirection(
      mLastClientPosRef.current.mLastClientX,
      mLastClientPosRef.current.mLastClientY,
      touchEvent.clientX,
      touchEvent.clientY,
    );
    if (direction === 1 || direction === 2) {
      rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
    }
  };
  const changeTouchMove = (e) => {
    if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
      const touchEvent = e?.originalEvent?.targetTouches[0] || e?.targetTouches[0];
      const xDiff = Math.abs(touchEvent.clientX - mLastClientPosRef.current.mLastClientX).toFixed(
        2,
      );
      const yDiff = Math.abs(touchEvent.clientY - mLastClientPosRef.current.mLastClientY).toFixed(
        2,
      );
      if (isJdApp) {
        if (xDiff >= window.JDJshopViewInfo.androidTouchSlop) {
          iosNeedDisableVertical && isJdApp && lodashThrottleTriggerIosTouchMove();
        } else if (yDiff > window.JDJshopViewInfo.androidTouchSlop) {
          console.log('纵向滚动触发', yDiff, touchEvent, window.JDJshopViewInfo.androidTouchSlop);
          stopNativeScrollEvent(e, TouchType.END);
        }
      }
      isJdAndH5ScrollState && recoverRootEleVerticalScroll(touchEvent);
    }
    if (!dispatchTouchMove) {
      return;
    }
    const parentNode = e.target?.parentNode;
    if (!parentNode) {
      return;
    }
    const event = new TouchEvent('touchmove', e);
    parentNode.dispatchEvent(event);
  };
  if (scrollX && isJdApp && !isIgnorePreventNative) {
    return (
      <ScrollView
        scrollX
        onTouchStart={changeTouchStart}
        onTouchEnd={changeTouchEnd}
        onTouchCancel={changeTouchEnd}
        onTouchMove={changeTouchMove}
        enhanced
        showScrollbar={false}
        style={style}
        className={classNames(
          className,
          {
            [customScrollViewStyle['d-custom-ios-h5-extend-border-radius']]: isIosDevice,
          },
          'J_customScroll',
        )}
        {...otherProps}
      >
        {children}
      </ScrollView>
    );
  } else {
    return (
      <ScrollView
        scrollX
        enhanced
        showScrollbar={false}
        {...otherProps}
        className={classNames(
          className,
          {
            [customScrollViewStyle['d-custom-ios-mini-extend-border-radius']]:
              isIosDevice && isWxMin && scrollX && style['borderRadius'],
          },
          {
            [customScrollViewStyle['d-custom-ios-h5-extend-border-radius']]: isIosDevice,
          },
          {
            [customScrollViewStyle['d-custom-mini-hide-scroll']]: isWxMin,
          },
        )}
        style={style}
      >
        {children}
      </ScrollView>
    );
  }
  style: {},
  scrollX: false,
  scrollY: false,
  scrollWithAnimation: true,
  iosNeedDisableVertical: false, 
  className: null,
  dispatchTouchMove: true, 
+import React, { useRef, useEffect } from 'react';
  isH5AndJdShopView,
  isAndroidDevice,
  isJdAndAndroidDevice,
  isJdAndHarmonyDevice,
  isJdAndIosDevice,
  isIosDevice,
  isJdApp,
  isWxMin,
  isH5AndJdShopViewH5Scroll,
  isH5AndJdShopH5CustomScrollView,
  isH5,
  isAppClassifyPage,
  lodashThrottle,
  START: 'start',
  MOVE: 'move',
  END: 'end',
  const {
    scrollX,
    children,
    style = {},
    iosNeedDisableVertical,
    dispatchTouchMove,
    className,
    ...otherProps
  } = props;
  const rootEleNode = isH5 && document ? document.querySelector('body') : null;
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === 'true');
  const mLastClientPosRef = useRef({
    mLastClientX: 0,
    mLastClientY: 0,
  });
  const isJdAndH5ScrollState = needShowHighVersion || isH5AndJdShopH5CustomScrollView;
  
  const touchstartEventBubbleFunc = (e) => {
    const isH5SwiperCustomEle = e?.target?.closest('.J_h5SwiperCustom');
    if (!isH5SwiperCustomEle) {
      const hasCustomEle = e
        ? e?.target?.closest('.J_customScroll') || e?.target?.closest('.J_customLayout')
        : false;
      if (isJdAndAndroidDevice && !hasCustomEle) {
        window?.JdAndroid &&
          window?.JdAndroid?.requestEvent &&
          window.JdAndroid.requestEvent(false);
      }
      !hasCustomEle &&
        rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
      console.log(
        'customScrollView所在页面document touch start事件是否有J_customScroll元素',
        hasCustomEle,
        '根元素是否有over-hidden',
        rootEleNode.classList,
      );
    }
  };
  const touchstartEventCaptureFunc = (e) => {
    if (e && !e?.target?.closest('.J_h5SwiperCustom') && !e?.target?.closest('.J_customLayout')) {
      rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
      console.log(
        'customScrollView所在页面document touch start事件捕获阶段移除根元素是否有over-hidden',
        rootEleNode.classList,
      );
    }
  };
  useEffect(() => {
    isJdApp &&
      !window.JDJshopViewInfo.getAndroidTouchSlopState &&
      nativePageGetScaledTouchSlop((res) => {
        console.log('获取安卓系统滑动阈值', res);
        window.JDJshopViewInfo.androidTouchSlop = res;
        window.JDJshopViewInfo.getAndroidTouchSlopState = true;
      });
    if (isJdAndH5ScrollState && rootEleNode && !rootEleAddEventListenerState) {
      global?.removeJdAndroidRquestEventForTouchStart &&
        global.removeJdAndroidRquestEventForTouchStart();
      rootEleNode.addEventListener('touchstart', touchstartEventBubbleFunc, false);
      
      rootEleNode.addEventListener('touchstart', touchstartEventCaptureFunc, true);
      rootEleAddEventListenerState = true;
      console.log('customScrollView 初始化document监听完成');
    }
    return () => {
      if (isJdAndH5ScrollState && rootEleNode && rootEleAddEventListenerState) {
        rootEleNode.classList.contains('over-hidden') &&
          rootEleNode.classList.remove('over-hidden');
        rootEleAddEventListenerState = false; 
        console.log('customScrollView document监听取消完成');
        rootEleNode.removeEventListener('touchstart', touchstartEventBubbleFunc, false);
        rootEleNode.removeEventListener('touchstart', touchstartEventCaptureFunc, true);
      }
    };
  }, []);
  
  const androidDeviceStopNativeScrollEvent = (touchType) => {
    isJdApp &&
      isAndroidDevice &&
      window?.JdAndroid &&
      window?.JdAndroid?.requestEvent &&
      window.JdAndroid.requestEvent(touchType === TouchType.START);
    console.log('触发window?.JdAndroid.requestEvent', touchType === TouchType.START, touchType);
  };
  const iosDeviceStopNativeScrollEvent = (e, touchType, sendIosState = true) => {
    sendIosState && iosDeviceSendRouter(touchType);
  };
  
  const iosDeviceSendRouter = (state: string) => {
    window?.webkit?.messageHandlers?.MobileNavi?.postMessage?.({
      method: 'callRouterModuleWithParams',
      params: {
        routerURL: 'router://JDShopModule/processShoph5SlideState',
        routerParam: {
          slideDirection: 'horizontal',
          needDisableVertical: `${iosNeedDisableVertical}`,
          state,
        },
        callBackId: new Date().getTime(),
      },
    });
  };
  const stopNativeScrollEvent = (e: Event, touchType, sendIosState = true) => {
    if (isJdApp) {
      isIosDevice &&
        !isAppClassifyPage &&
        iosDeviceStopNativeScrollEvent(e, touchType, sendIosState);
      isAndroidDevice && androidDeviceStopNativeScrollEvent(touchType);
    }
  };
  
  const GetSlideAngle = (dx, dy) => {
    return (Math.atan2(dy, dx) * 180) / Math.PI;
  };
  
  const GetSlideDirection = (startX, startY, endX, endY) => {
    const dy = startY - endY;
    const dx = endX - startX;
    let result = 0;
    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
      return result;
    }
    const angle = GetSlideAngle(dx, dy);
    if (angle >= -45 && angle < 45) {
      result = 4;
    } else if (angle >= 45 && angle < 135) {
      result = 1;
    } else if (angle >= -135 && angle < -45) {
      result = 2;
    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
      result = 3;
    }
    return result;
  };
  const changeTouchStart = (e) => {
    if (isJdApp) {
      stopNativeScrollEvent(e, TouchType.START, !iosNeedDisableVertical);
      if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
        isJdAndH5ScrollState && rootEleNode && rootEleNode.classList.add('over-hidden');
        const touchEvent = e?.originalEvent?.targetTouches[0] || e?.targetTouches[0];
        mLastClientPosRef.current.mLastClientX = touchEvent.clientX;
        mLastClientPosRef.current.mLastClientY = touchEvent.clientY;
      }
    }
  };
  const changeTouchEnd = (e) => {
    stopNativeScrollEvent(e, TouchType.END);
    mLastClientPosRef.current.mLastClientX = 0;
    mLastClientPosRef.current.mLastClientY = 0;
  };
  const triggerIosTouchMove = () => {
    isJdAndIosDevice && iosDeviceStopNativeScrollEvent(null, TouchType.START, true);
  };
  
  const lodashThrottleTriggerIosTouchMove = lodashThrottle(triggerIosTouchMove, 500);
  
  const recoverRootEleVerticalScroll = (touchEvent) => {
    const direction = GetSlideDirection(
      mLastClientPosRef.current.mLastClientX,
      mLastClientPosRef.current.mLastClientY,
      touchEvent.clientX,
      touchEvent.clientY,
    );
    if (direction === 1 || direction === 2) {
      rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
    }
  };
  const changeTouchMove = (e) => {
    if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
      const touchEvent = e?.originalEvent?.targetTouches[0] || e?.targetTouches[0];
      const xDiff = Math.abs(touchEvent.clientX - mLastClientPosRef.current.mLastClientX).toFixed(
        2,
      );
      const yDiff = Math.abs(touchEvent.clientY - mLastClientPosRef.current.mLastClientY).toFixed(
        2,
      );
      if (isJdApp) {
        if (xDiff >= window.JDJshopViewInfo.androidTouchSlop) {
          iosNeedDisableVertical && isJdApp && lodashThrottleTriggerIosTouchMove();
        } else if (yDiff > window.JDJshopViewInfo.androidTouchSlop) {
          console.log('纵向滚动触发', yDiff, touchEvent, window.JDJshopViewInfo.androidTouchSlop);
          stopNativeScrollEvent(e, TouchType.END);
        }
      }
      isJdAndH5ScrollState && recoverRootEleVerticalScroll(touchEvent);
    }
    if (!dispatchTouchMove) {
      return;
    }
    const parentNode = e.target?.parentNode;
    if (!parentNode) {
      return;
    }
    const event = new TouchEvent('touchmove', e);
    parentNode.dispatchEvent(event);
  };
  if (scrollX && isJdApp && !isIgnorePreventNative) {
    return (
      <ScrollView
        scrollX
        onTouchStart={changeTouchStart}
        onTouchEnd={changeTouchEnd}
        onTouchCancel={changeTouchEnd}
        onTouchMove={changeTouchMove}
        enhanced
        showScrollbar={false}
        style={style}
        className={classNames(
          className,
          {
            [customScrollViewStyle['d-custom-ios-h5-extend-border-radius']]: isIosDevice,
          },
          'J_customScroll',
        )}
        {...otherProps}
      >
        {children}
      </ScrollView>
    );
  } else {
    return (
      <ScrollView
        scrollX
        enhanced
        showScrollbar={false}
        {...otherProps}
        className={classNames(
          className,
          {
            [customScrollViewStyle['d-custom-ios-mini-extend-border-radius']]:
              isIosDevice && isWxMin && scrollX && style['borderRadius'],
          },
          {
            [customScrollViewStyle['d-custom-ios-h5-extend-border-radius']]: isIosDevice,
          },
          {
            [customScrollViewStyle['d-custom-mini-hide-scroll']]: isWxMin,
          },
        )}
        style={style}
      >
        {children}
      </ScrollView>
    );
  }
  style: {},
  scrollX: false,
  scrollY: false,
  scrollWithAnimation: true,
  iosNeedDisableVertical: false, 
  className: null,
  dispatchTouchMove: true, 

package/dist/modules/ContainerFloorList/index.h5.tsx

@@ -1 +1 @@
-import React from 'react';
  NETWORK_DATA_TYPE,
  M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
  APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
  (window.navigator.userAgent.includes('jdappPuppeteer') && window?.loadPuppeteerPageLocalData) ||
  window.location.href.includes('loadMasterJsType=xingyun');
  memberBaseInfo?: {
    shopId?: string;
    venderId?: string;
    channel?: string;
    venderType?: string;
    showDefaultModule?: boolean;
    customerLevel?: string;
    isUserForMember?: boolean;
    isLv0?: boolean;
    levelZeroMenuUrl?: string;
    totalRefresh?: functionType;
    callOpenCardPopPage?: functionType;
  };
  source?: string;
  containerFloorListData: ComponentInterFace.ContainerItemData[];
  extendInfoData?: object;
  className?: string;
  containerItemClass?: object;
  style?: object;
  hasGoodsFeeds?: boolean;
  builtInComponents?: object;
  loadingEndComponentFn?: functionType;
  sectionType?: string;
  updateShopFloorDataFn?: functionType;
  updateContainerFloorListDataFn?: functionType;
  refreshFloorListDataFn?: functionType;
  refreshFloorListDataBtnLabel?: string;
  customErrorIsvFloorModule?: React.ReactElement;
  componentExtend?: React.ReactElement;
  luxuryFixedIndex?: number;
  isContainerListHasMarginBottom?: boolean;
  switchConfig?: {
    [key: string]: any;
  };
  containerFloorListPageInfo?: {
    hasNextPage: boolean;
    isByPage: boolean;
  };
  const { windowHeight, screenHeight } = taroJdBaseInfo.info.sysInfo;
  const {
    source,
    className,
    style,
    memberBaseInfo,
    containerItemClass = null,
    containerFloorListData,
    extendInfoData,
    builtInComponents,
    loadingEndComponentFn,
    sectionType,
    updateShopFloorDataFn,
    updateContainerFloorListDataFn,
    refreshFloorListDataFn,
    refreshFloorListDataBtnLabel,
    customErrorIsvFloorModule,
    luxuryFixedIndex = -1,
    isContainerListHasMarginBottom,
    switchConfig,
    containerFloorListPageInfo = {
      hasNextPage: false,
      isByPage: false,
    },
  } = props;
  const { hasNextPage, isByPage } = containerFloorListPageInfo;
  const isContainerListHasMore = isCheckFloorListByPage && hasNextPage && isByPage;
  const emptyFloorListHidden = switchConfig?.emptyFloorListHidden || false;
  const isSageShop = taroJdBaseInfo.info?.pageInfo?.isSageShop;
  const isHasMarginBottom = isContainerListHasMarginBottom ?? !isSageShop;
  
  const hasLiveForSageShop =
    isSageShop && taroJdBaseInfo.info?.pageInfo?.isJdShowNativeImmersivePlayer;
  
  const renderFloorItem = (
    item,
    floorItem,
    floorIndex,
    containerLayoutLeftRightMargin,
    lazyLoadState = false,
    index,
    borderStyle,
  ) => {
    return (
      <View
        className={classNames(shopContainerListStyle['d-floor-item'])}
        data-floor-uid={floorItem?.uid}
        data-floor-type={floorItem?.floorExtInfo?.moduleFlag || ''}
        data-lazy-load={lazyLoadState}
        key={floorItem.uid}
        id={`J_floor_${floorItem.uid}`}
        style={borderStyle}
      >
        {isChartH5 && (
          <View
            className={shopContainerListStyle['d-floor-chart-item']}
            id={`J_chart_floor_${floorItem?.uid}`}
            data-floor-uid={floorItem?.uid}
            data-floor-type={floorItem?.floorExtInfo?.moduleFlag || ''}
          />
        )}
        <FloorListItem
          memberBaseInfo={memberBaseInfo}
          source={source}
          floorIndex={floorIndex}
          floorData={floorItem}
          containerIndex={index}
          layoutLeftRightMargin={containerLayoutLeftRightMargin}
          containerBorderRadius={borderStyle}
          updateShopFloorDataFn={updateShopFloorDataFn}
          loadingEndComponentFn={loadingEndComponentFn}
          extendInfoData={
            passExtendInfoModuleWhiteList.includes(floorItem?.floorExtInfo?.moduleFlag)
              ? extendInfoData
              : undefined
          }
          key={floorItem.uid}
          builtInComponents={builtInComponents}
          updateContainerFloorListDataFn={updateContainerFloorListDataFn}
          customErrorIsvFloorModule={customErrorIsvFloorModule}
        />
        {index === luxuryFixedIndex ? props.children : null}
        {floorItem?.inspectResult === '1' && (
          <View className={shopContainerListStyle['d-floor-inspect-mask']} />
        )}
      </View>
    );
  };
  
  const getFloorSetHeight = (item) => {
    const getHeight = item?.floorExtInfo?.floorHeight
      ? Number(item?.floorExtInfo?.floorHeight)
      : 200;
    return getHeight > 0 ? getHeight : 200;
  };
  const containerFloorListDataLen = containerFloorListData.length;
  
  const getNoDataContainerHeight = () => {
    const getWindowHeight = windowHeight > 10 ? windowHeight : screenHeight;
    const changeHeight = hasLiveForSageShop
      ? getWindowHeight
      : getWindowHeight -
        (isJdApp
          ? APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT
          : M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT);
    return {
      height: `${changeHeight}px`,
    };
  };
  return (
    <View
      id="J_shopContainerFloorList"
      className={classNames(
        className,
        shopContainerListStyle['d-shop-container-list'],
        isHasMarginBottom
          ? shopContainerListStyle['d-container-list-with-margin-bottom']
          : shopContainerListStyle['d-container-list-no-margin-bottom'],
      )}
      style={style}
    >
      {containerFloorListDataLen > 0 ? (
        <>
          {containerFloorListData.map((item, index) => {
            const containerLayoutLeftRightMargin = (item.marginLeft || 0) + (item.marginRight || 0);
            const getContainerId = `J_container_${item.containerId}`;
            const getDealContainerFloorListLen = isContainerListHasMore
              ? 1000
              : containerFloorListDataLen;
            const borderStyle = getBorderStyle(
              item,
              index,
              containerFloorListData,
              getDealContainerFloorListLen,
            );
            return (
              <React.Fragment key={item.containerId + index}>
                {item.addLuxuryStyle ? (
                  <View className={shopContainerListStyle['d-luxury-header']} />
                ) : null}
                {item.addLuxuryBackupStyle ? (
                  <View
                    style={{
                      height: taroJdBaseInfo?.info?.sysInfo?.jdNativeHeaderHeight + 'px',
                    }}
                    className={shopContainerListStyle['d-luxury-header-black']}
                  />
                ) : null}
                {typeof item?.renderExtendComponent === 'function'
                  ? item?.renderExtendComponent(item?.floorExtendData)
                  : null}
                <View
                  className={classNames(
                    shopContainerListStyle['d-container-item'],
                    containerItemClass,
                  )}
                  id={getContainerId}
                  key={item.containerId}
                  data-container-id={item?.containerId}
                  data-container-type={item?.typeCode}
                  data-container-index={index}
                  style={{
                    marginBottom: item.marginBottom ? `${item.marginBottom}px` : 0,
                    marginTop: item.marginTop ? `${item.marginTop}px` : 0,
                    marginLeft: item.marginLeft ? `${item.marginLeft}px` : 0,
                    marginRight: item.marginRight ? `${item.marginRight}px` : 0,
                    borderTopLeftRadius: borderStyle?.borderTopLeftRadius || `0px`,
                    borderTopRightRadius: borderStyle?.borderTopRightRadiu || `0px`,
                    borderBottomLeftRadius: borderStyle?.borderBottomLeftRadius || `0px`,
                    borderBottomRightRadius: borderStyle?.borderBottomRightRadius || `0px`,
                    '--container-layout-left-right-margin': `${containerLayoutLeftRightMargin}px`,
                  }}
                >
                  {typeof item?.insertContainerStartComponent === 'function'
                    ? item?.insertContainerStartComponent(item)
                    : null}
                  {item.floors &&
                    item.floors.length > 0 &&
                    item.floors?.map((floorItem, floorIndex) => {
                      return index > lazyLoadStartIndex ? (
                        <LazyLayoutLoad
                          key={item.containerId}
                          sectionType={sectionType}
                          containerId={getContainerId}
                          height={getFloorSetHeight(floorItem)}
                          floorData={floorItem}
                        >
                          {renderFloorItem(
                            item,
                            floorItem,
                            floorIndex,
                            containerLayoutLeftRightMargin,
                            true,
                            index,
                            borderStyle,
                          )}
                        </LazyLayoutLoad>
                      ) : (
                        renderFloorItem(
                          item,
                          floorItem,
                          floorIndex,
                          containerLayoutLeftRightMargin,
                          false,
                          index,
                          borderStyle,
                        )
                      );
                    })}
                </View>
              </React.Fragment>
            );
          })}
        </>
      ) : !emptyFloorListHidden ? (
        <View
          className={classNames(shopContainerListStyle['d-container-list-no-data'], {
            [shopContainerListStyle['d-sage-shop-no-data']]: hasLiveForSageShop,
          })}
          style={getNoDataContainerHeight()}
        >
          <NetworkDataError
            netWorkShowType={NetWorkShowType.PART}
            netWorkDataType={NETWORK_DATA_TYPE.DATA_ERROR}
            backgroundColorWhite={hasLiveForSageShop}
            refreshCallBackFn={refreshFloorListDataFn ? refreshFloorListDataFn : null}
            btnLabel={refreshFloorListDataBtnLabel || ''}
          />
        </View>
      ) : null}
    </View>
  );
  updateShopDataFn: null,
+import React from 'react';
  NETWORK_DATA_TYPE,
  M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
  APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
  (window.navigator.userAgent.includes('jdappPuppeteer') && window?.loadPuppeteerPageLocalData) ||
  window.location.href.includes('loadMasterJsType=xingyun');
  memberBaseInfo?: {
    shopId?: string;
    venderId?: string;
    channel?: string;
    venderType?: string;
    showDefaultModule?: boolean;
    customerLevel?: string;
    isUserForMember?: boolean;
    isLv0?: boolean;
    levelZeroMenuUrl?: string;
    totalRefresh?: functionType;
    callOpenCardPopPage?: functionType;
  };
  source?: string;
  containerFloorListData: ComponentInterFace.ContainerItemData[];
  extendInfoData?: object;
  className?: string;
  containerItemClass?: object;
  style?: object;
  hasGoodsFeeds?: boolean;
  builtInComponents?: object;
  loadingEndComponentFn?: functionType;
  sectionType?: string;
  updateShopFloorDataFn?: functionType;
  updateContainerFloorListDataFn?: functionType;
  refreshFloorListDataFn?: functionType;
  refreshFloorListDataBtnLabel?: string;
  customErrorIsvFloorModule?: React.ReactElement;
  componentExtend?: React.ReactElement;
  luxuryFixedIndex?: number;
  isContainerListHasMarginBottom?: boolean;
  switchConfig?: {
    [key: string]: any;
  };
  containerFloorListPageInfo?: {
    hasNextPage: boolean;
    isByPage: boolean;
  };
  const { windowHeight, screenHeight } = taroJdBaseInfo.info.sysInfo;
  const {
    source,
    className,
    style,
    memberBaseInfo,
    containerItemClass = null,
    containerFloorListData,
    extendInfoData,
    builtInComponents,
    loadingEndComponentFn,
    sectionType,
    updateShopFloorDataFn,
    updateContainerFloorListDataFn,
    refreshFloorListDataFn,
    refreshFloorListDataBtnLabel,
    customErrorIsvFloorModule,
    luxuryFixedIndex = -1,
    isContainerListHasMarginBottom,
    switchConfig,
    containerFloorListPageInfo = {
      hasNextPage: false,
      isByPage: false,
    },
  } = props;
  const { hasNextPage, isByPage } = containerFloorListPageInfo;
  const isContainerListHasMore = isCheckFloorListByPage && hasNextPage && isByPage;
  const emptyFloorListHidden = switchConfig?.emptyFloorListHidden || false;
  const isSageShop = taroJdBaseInfo.info?.pageInfo?.isSageShop;
  const isHasMarginBottom = isContainerListHasMarginBottom ?? !isSageShop;
  
  const hasLiveForSageShop =
    isSageShop && taroJdBaseInfo.info?.pageInfo?.isJdShowNativeImmersivePlayer;
  
  const renderFloorItem = (
    item,
    floorItem,
    floorIndex,
    containerLayoutLeftRightMargin,
    lazyLoadState = false,
    index,
    borderStyle,
  ) => {
    return (
      <View
        className={classNames(shopContainerListStyle['d-floor-item'])}
        data-floor-uid={floorItem?.uid}
        data-floor-type={floorItem?.floorExtInfo?.moduleFlag || ''}
        data-lazy-load={lazyLoadState}
        key={floorItem.uid}
        id={`J_floor_${floorItem.uid}`}
        style={borderStyle}
      >
        {isChartH5 && (
          <View
            className={shopContainerListStyle['d-floor-chart-item']}
            id={`J_chart_floor_${floorItem?.uid}`}
            data-floor-uid={floorItem?.uid}
            data-floor-type={floorItem?.floorExtInfo?.moduleFlag || ''}
          />
        )}
        <FloorListItem
          memberBaseInfo={memberBaseInfo}
          source={source}
          floorIndex={floorIndex}
          floorData={floorItem}
          containerIndex={index}
          layoutLeftRightMargin={containerLayoutLeftRightMargin}
          containerBorderRadius={borderStyle}
          updateShopFloorDataFn={updateShopFloorDataFn}
          loadingEndComponentFn={loadingEndComponentFn}
          extendInfoData={
            passExtendInfoModuleWhiteList.includes(floorItem?.floorExtInfo?.moduleFlag)
              ? extendInfoData
              : undefined
          }
          key={floorItem.uid}
          builtInComponents={builtInComponents}
          updateContainerFloorListDataFn={updateContainerFloorListDataFn}
          customErrorIsvFloorModule={customErrorIsvFloorModule}
        />
        {index === luxuryFixedIndex ? props.children : null}
        {floorItem?.inspectResult === '1' && (
          <View className={shopContainerListStyle['d-floor-inspect-mask']} />
        )}
      </View>
    );
  };
  
  const getFloorSetHeight = (item) => {
    const getHeight = item?.floorExtInfo?.floorHeight
      ? Number(item?.floorExtInfo?.floorHeight)
      : 200;
    return getHeight > 0 ? getHeight : 200;
  };
  const containerFloorListDataLen = containerFloorListData.length;
  
  const getNoDataContainerHeight = () => {
    const getWindowHeight = windowHeight > 10 ? windowHeight : screenHeight;
    const changeHeight = hasLiveForSageShop
      ? getWindowHeight
      : getWindowHeight -
        (isJdApp
          ? APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT
          : M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT);
    return {
      height: `${changeHeight}px`,
    };
  };
  return (
    <View
      id="J_shopContainerFloorList"
      className={classNames(
        className,
        shopContainerListStyle['d-shop-container-list'],
        isHasMarginBottom
          ? shopContainerListStyle['d-container-list-with-margin-bottom']
          : shopContainerListStyle['d-container-list-no-margin-bottom'],
      )}
      style={style}
    >
      {containerFloorListDataLen > 0 ? (
        <>
          {containerFloorListData.map((item, index) => {
            const containerLayoutLeftRightMargin = (item.marginLeft || 0) + (item.marginRight || 0);
            const getContainerId = `J_container_${item.containerId}`;
            const getDealContainerFloorListLen = isContainerListHasMore
              ? 1000
              : containerFloorListDataLen;
            const borderStyle = getBorderStyle(
              item,
              index,
              containerFloorListData,
              getDealContainerFloorListLen,
            );
            return (
              <React.Fragment key={item.containerId + index}>
                {item.addLuxuryStyle ? (
                  <View className={shopContainerListStyle['d-luxury-header']} />
                ) : null}
                {item.addLuxuryBackupStyle ? (
                  <View
                    style={{
                      height: taroJdBaseInfo?.info?.sysInfo?.jdNativeHeaderHeight + 'px',
                    }}
                    className={shopContainerListStyle['d-luxury-header-black']}
                  />
                ) : null}
                {typeof item?.renderExtendComponent === 'function'
                  ? item?.renderExtendComponent(item?.floorExtendData)
                  : null}
                <View
                  className={classNames(
                    shopContainerListStyle['d-container-item'],
                    containerItemClass,
                  )}
                  id={getContainerId}
                  key={item.containerId}
                  data-container-id={item?.containerId}
                  data-container-type={item?.typeCode}
                  data-container-index={index}
                  style={{
                    marginBottom: item.marginBottom ? `${item.marginBottom}px` : 0,
                    marginTop: item.marginTop ? `${item.marginTop}px` : 0,
                    marginLeft: item.marginLeft ? `${item.marginLeft}px` : 0,
                    marginRight: item.marginRight ? `${item.marginRight}px` : 0,
                    borderTopLeftRadius: borderStyle?.borderTopLeftRadius || `0px`,
                    borderTopRightRadius: borderStyle?.borderTopRightRadiu || `0px`,
                    borderBottomLeftRadius: borderStyle?.borderBottomLeftRadius || `0px`,
                    borderBottomRightRadius: borderStyle?.borderBottomRightRadius || `0px`,
                    '--container-layout-left-right-margin': `${containerLayoutLeftRightMargin}px`,
                  }}
                >
                  {typeof item?.insertContainerStartComponent === 'function'
                    ? item?.insertContainerStartComponent(item)
                    : null}
                  {item.floors &&
                    item.floors.length > 0 &&
                    item.floors?.map((floorItem, floorIndex) => {
                      return index > lazyLoadStartIndex ? (
                        <LazyLayoutLoad
                          key={item.containerId}
                          sectionType={sectionType}
                          containerId={getContainerId}
                          height={getFloorSetHeight(floorItem)}
                          floorData={floorItem}
                        >
                          {renderFloorItem(
                            item,
                            floorItem,
                            floorIndex,
                            containerLayoutLeftRightMargin,
                            true,
                            index,
                            borderStyle,
                          )}
                        </LazyLayoutLoad>
                      ) : (
                        renderFloorItem(
                          item,
                          floorItem,
                          floorIndex,
                          containerLayoutLeftRightMargin,
                          false,
                          index,
                          borderStyle,
                        )
                      );
                    })}
                </View>
              </React.Fragment>
            );
          })}
        </>
      ) : !emptyFloorListHidden ? (
        <View
          className={classNames(shopContainerListStyle['d-container-list-no-data'], {
            [shopContainerListStyle['d-sage-shop-no-data']]: hasLiveForSageShop,
          })}
          style={getNoDataContainerHeight()}
        >
          <NetworkDataError
            netWorkShowType={NetWorkShowType.PART}
            netWorkDataType={NETWORK_DATA_TYPE.DATA_ERROR}
            backgroundColorWhite={hasLiveForSageShop}
            refreshCallBackFn={refreshFloorListDataFn ? refreshFloorListDataFn : null}
            btnLabel={refreshFloorListDataBtnLabel || ''}
          />
        </View>
      ) : null}
    </View>
  );
  updateShopDataFn: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conecli/cone-render",
-  "version": "0.10.1-shop-beta.44",
+  "version": "0.10.1-shop-beta.46",
   "private": false,
   "files": [
     "dist/"