@conecli/cone-render 0.10.1-shop-beta.5 → 0.10.1-shop-beta.6

package/dist/modules/ContainerFloorList/index.h5.module.scss

@@ -1,63 +1,76 @@
 
 .d-shop-container-list {
-    position: relative;
-    overflow: hidden;
-    z-index: 2;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
 
-    .d-container-item,
-    .d-floor-item {
-        position: relative;
-        // 不能加overflow 防止IntersectionObserver监听异常
-        //overflow: hidden;
-    }
+  // 容器列表底部间距，不做适配转换，固定8px
+  .d-container-list-with-margin-bottom {
+    margin-bottom: 8px;
+  }
 
-    
-    .d-floor-item {
-        overflow: hidden;
-        display: block; // 由于taro的View属于一种自定义标签，虽然taro自己会给View设置display为block，但是这个是一个异步过程，而自定义标签的默认display是inline，inline状态下即使设置了overflow:hidden，也会由于内容过大导致宽度被撑大而超出容器实际宽度。所以为了保证楼层容器节点在加载过程中不被撑大，需要显示设置display:block
-    }
-    .d-floor-chart-item{
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: auto;
-      z-index: 99;
-    }
-    .d-container-item {
-        //opacity: 0;
-        //animation: containerShowToOpacity 500ms;
-        //animation-fill-mode: forwards;
-        :global {
-            .lazyload-placeholder {
-                background: url('https://img13.360buyimg.com/imagetools/jfs/t1/151010/32/14284/30214/5ff66791Ea1bc6cc6/698c0772b377aef5.png')
-                    center center / 40px 40px no-repeat;
-            }
-        }
-    }
-    .d-luxury-header {
-      border-top-left-radius: 40px;
-      border-top-right-radius: 40px;
-      width: 100%;
-      height: 8PX;
-      margin-top: -8PX;
-      background-clip: padding-box;
-      position: relative;
-      z-index: 999;
-      background: #F2F2F2;
-      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-    }
-    .d-luxury-header-black {
-      width: 100%;
-      z-index: 999;
-      background: black;
-      margin-bottom: 16px;
+  .d-container-list-no-margin-bottom {
+    margin-bottom: 0;
+  }
+
+  .d-container-item,
+  .d-floor-item {
+    position: relative;
+    // 不能加overflow 防止IntersectionObserver监听异常
+    //overflow: hidden;
+  }
+
+  
+  .d-floor-item {
+    overflow: hidden;
+    display: block; // 由于taro的View属于一种自定义标签，虽然taro自己会给View设置display为block，但是这个是一个异步过程，而自定义标签的默认display是inline，inline状态下即使设置了overflow:hidden，也会由于内容过大导致宽度被撑大而超出容器实际宽度。所以为了保证楼层容器节点在加载过程中不被撑大，需要显示设置display:block
+  }
+  .d-floor-chart-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: auto;
+    z-index: 99;
+  }
+  .d-container-item {
+    //opacity: 0;
+    //animation: containerShowToOpacity 500ms;
+    //animation-fill-mode: forwards;
+    :global {
+      .lazyload-placeholder {
+        background: url('https://img13.360buyimg.com/imagetools/jfs/t1/151010/32/14284/30214/5ff66791Ea1bc6cc6/698c0772b377aef5.png')
+          center center / 40px 40px no-repeat;
+      }
     }
-    .d-container-list-no-data {
-        min-height: 400px;
+  }
+  .d-luxury-header {
+    border-top-left-radius: 40px;
+    border-top-right-radius: 40px;
+    width: 100%;
+    height: 8px;
+    margin-top: -8px;
+    background-clip: padding-box;
+    position: relative;
+    z-index: 999;
+    background: #f2f2f2;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  }
+  .d-luxury-header-black {
+    width: 100%;
+    z-index: 999;
+    background: black;
+    margin-bottom: 16px;
+  }
+  .d-container-list-no-data {
+    min-height: 400px;
+    &.d-sage-shop-no-data {
+      background: #fff;
     }
+  }
 }
+
 //@keyframes containerShowToOpacity {
 //	from {
 //		opacity: 0;

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,
  containerFloorListData: ComponentInterFace.ContainerItemData[];
  className?: string;
  containerItemClass?: object;
  style?: object;
  hasGoodsFeeds?: boolean;
  builtInComponents?: Object;
  loadingEndComponentFn?: Function;
  sectionType?: string;
  updateShopFloorDataFn?: Function;
  updateContainerFloorListDataFn?: Function;
  refreshFloorListDataFn?: Function;
  refreshFloorListDataBtnLabel?: string;
  customErrorIsvFloorModule?: React.ReactElement;
  componentExtend?: React.ReactElement;
  luxuryFixedIndex?: number;
  const { windowHeight } = taroJdBaseInfo.info.sysInfo;
  const {
    className,
    style,
    containerItemClass = null,
    containerFloorListData,
    builtInComponents,
    loadingEndComponentFn,
    sectionType,
    updateShopFloorDataFn,
    updateContainerFloorListDataFn,
    refreshFloorListDataFn,
    refreshFloorListDataBtnLabel,
    customErrorIsvFloorModule,
    luxuryFixedIndex = -1,
  } = props;
  
  const renderFloorItem = (
    item,
    floorItem,
    floorIndex,
    containerLayoutLeftRightMargin,
    lazyLoadState = false,
    index
  ) => {
    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={{
          borderRadius: `${item?.borderRadius || 0}px`,
        }}
      >
        {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
          floorIndex={floorIndex}
          floorData={floorItem}
          layoutLeftRightMargin={containerLayoutLeftRightMargin}
          containerBorderRadius={item?.borderRadius || 0}
          updateShopFloorDataFn={updateShopFloorDataFn}
          loadingEndComponentFn={loadingEndComponentFn}
          key={floorItem.uid}
          builtInComponents={builtInComponents}
          updateContainerFloorListDataFn={updateContainerFloorListDataFn}
          customErrorIsvFloorModule={customErrorIsvFloorModule}
        />
        {index === luxuryFixedIndex ? props.children : null}
      </View>
    );
  };
  
  const getFloorSetHeight = (item) => {
    const getHeight = item?.floorExtInfo?.floorHeight
      ? Number(item?.floorExtInfo?.floorHeight)
      : 200;
    return getHeight > 0 ? getHeight : 200;
  };
  return (
    <View
      className={classNames(
        className,
        shopContainerListStyle["d-shop-container-list"]
      )}
      style={style}
    >
      <View id="J_shopContainerFloorList">
        {containerFloorListData.length > 0 ? (
          containerFloorListData.map((item, index) => {
            const containerLayoutLeftRightMargin =
              (item.marginLeft || 0) + (item.marginRight || 0);
            const getContainerId = `J_container_${item.containerId}`;
            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}
                  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,
                    borderRadius: item.borderRadius
                      ? `${item.borderRadius}px`
                      : 0,
                  }}
                >
                  {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
                          )}
                        </LazyLayoutLoad>
                      ) : (
                        renderFloorItem(
                          item,
                          floorItem,
                          floorIndex,
                          containerLayoutLeftRightMargin,
                          false,
                          index
                        )
                      );
                    })}
                </View>
              </React.Fragment>
            );
          })
        ) : (
          <View
            className={shopContainerListStyle["d-container-list-no-data"]}
            style={{
              height: `${
                windowHeight -
                (isJdApp
                  ? APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT
                  : M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT)
              }px`,
            }}
          >
            <NetworkDataError
              netWorkShowType={NetWorkShowType.PART}
              netWorkDataType={NETWORK_DATA_TYPE.DATA_ERROR}
              refreshCallBackFn={
                refreshFloorListDataFn ? refreshFloorListDataFn : null
              }
              btnLabel={refreshFloorListDataBtnLabel || ""}
            />
          </View>
        )}
      </View>
    </View>
  );
+import React from 'react';
  NETWORK_DATA_TYPE,
  M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
  APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
  containerFloorListData: ComponentInterFace.ContainerItemData[];
  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;
  };
  const { windowHeight } = taroJdBaseInfo.info.sysInfo;
  const {
    className,
    style,
    containerItemClass = null,
    containerFloorListData,
    builtInComponents,
    loadingEndComponentFn,
    sectionType,
    updateShopFloorDataFn,
    updateContainerFloorListDataFn,
    refreshFloorListDataFn,
    refreshFloorListDataBtnLabel,
    customErrorIsvFloorModule,
    luxuryFixedIndex = -1,
    isContainerListHasMarginBottom,
    switchConfig,
  } = props;
  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
          floorIndex={floorIndex}
          floorData={floorItem}
          layoutLeftRightMargin={containerLayoutLeftRightMargin}
          containerBorderRadius={borderStyle}
          updateShopFloorDataFn={updateShopFloorDataFn}
          loadingEndComponentFn={loadingEndComponentFn}
          key={floorItem.uid}
          builtInComponents={builtInComponents}
          updateContainerFloorListDataFn={updateContainerFloorListDataFn}
          customErrorIsvFloorModule={customErrorIsvFloorModule}
        />
        {index === luxuryFixedIndex ? props.children : null}
      </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 changeHeight = hasLiveForSageShop
      ? windowHeight
      : windowHeight -
        (isJdApp
          ? APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT
          : M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT);
    return {
      height: `${changeHeight}px`,
    };
  };
  return (
    <View
      className={classNames(className, shopContainerListStyle['d-shop-container-list'])}
      style={style}
    >
      <View
        id="J_shopContainerFloorList"
        className={
          isHasMarginBottom
            ? shopContainerListStyle['d-container-list-with-margin-bottom']
            : shopContainerListStyle['d-container-list-no-margin-bottom']
        }
      >
        {containerFloorListDataLen > 0 ? (
          containerFloorListData.map((item, index) => {
            const containerLayoutLeftRightMargin = (item.marginLeft || 0) + (item.marginRight || 0);
            const getContainerId = `J_container_${item.containerId}`;
            const borderStyle = getBorderStyle(
              item,
              index,
              containerFloorListData,
              containerFloorListDataLen,
            );
            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}
                  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>
    </View>
  );
  updateShopDataFn: null,