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

package/dist/components/base/ShopLeGaoTag/index.h5.module.scss

@@ -0,0 +1,35 @@
+
+// 默认标签高度14 部分特殊的16，因此设置最大高度16
+
+.d-shop-tag-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+  align-items: center;
+  align-self: flex-start;
+  overflow: hidden;
+  font-size: 0;
+  line-height: 10px; // 解决换行后上下无间隙导致看到线条的问题
+  max-height: 16PX;
+  
+  &.d-shop-sku-tag-list{
+    margin: -2PX 8px 0 0;
+    display: inline-flex;
+    //height: 14PX;
+    //line-height: 14PX;
+    vertical-align: middle;
+  }
+  
+  .d-tag-item{
+    margin-right: 8px;
+    &:last-child{
+      margin-right: 0;
+    }
+    .d-tag-item-canvas{
+      display: inline-flex;
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+import React, { useEffect, useMemo, useState } from 'react';
  const getThisLeGaoTagKey = `${tagId}-${tagText}}`;
  const getLeGaoTagCacheNode = shopLeGaoTagNodeMap.get(getThisLeGaoTagKey) || false;
  return getLeGaoTagCacheNode
    ? getLeGaoTagCacheNode
    : useMemo(() => {
        const createCanVasTag = (
          <canvas-tag
            className={classNames(shopTagStyle['d-tag-item-canvas'])}
            tagId={tagId}
            text={tagText}
            appVersion={getJdAppVersionStr}
            lang={languageNowType}
          />
        );
        shopLeGaoTagNodeMap.set(getThisLeGaoTagKey, createCanVasTag);
        return createCanVasTag;
      }, [tagId, tagText]);
  const {
    tagInfoList = [],
    className,
    itemClassName,
    isSkuBaseTag = false,
    itemClickCallback,
  } = props;
  const getTagInfoList = Array.isArray(tagInfoList) ? tagInfoList : [];
  const getTagInfoListNum = getTagInfoList.length;
  const isCallBackFn = typeof itemClickCallback === 'function';
  const needAsyncLoad = useMemo(() => {
    if (window.CanvasTag) return false;
    const h5TagJs = taroJdBaseInfo.loadJsSdkList.find((e) => e.fileName === 'h5TagJs');
    return !!(h5TagJs && h5TagJs.initTriggerType === LoadJsInitTriggerType.NRXT_TICK);
  }, []);
  const [loadOver, setLoadOver] = useState(!needAsyncLoad);
  useEffect(() => {
    async function loadTagSdk() {
      try {
        await taroJdBaseInfo.loadH5tagReayPromise();
      } catch (error) {}
      setLoadOver(true);
    }
    needAsyncLoad && loadTagSdk();
  }, []);
  if (!loadOver) return null;
  return getTagInfoListNum > 0 ? (
    <View
      className={classNames(
        shopTagStyle['d-shop-tag-list'],
        {
          [shopTagStyle['d-shop-sku-tag-list']]: isSkuBaseTag,
        },
        className,
      )}
    >
      {}
      <View style={{ width: '1px', height: '100%' }} />
      {getTagInfoList.map((item, index) => {
        const { tagId, tabIconId, tagText, type, tabIconType, tabText } = item;
        const getTagId = tagId || tabIconId;
        const getTagType = type || tabIconType;
        const getTagText = tagText || tabText;
        return getTagId ? (
          <View
            key={getTagId + getTagType + index}
            className={classNames(shopTagStyle['d-tag-item'], itemClassName)}
            onClick={isCallBackFn && itemClickCallback.bind(this, item, index)}
          >
            <LeGaoTagComponent tagId={getTagId} tagText={getTagText} />
          </View>
        ) : null;
      })}
    </View>
  ) : null;

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

@@ -0,0 +1,33 @@
+
+// 默认标签高度14 部分特殊的16，因此设置最大高度16
+
+.d-shop-tag-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+  align-items: center;
+  align-self: flex-start;
+  overflow: hidden;
+  font-size: 0;
+  line-height: 10px; // 解决换行后上下无间隙导致看到线条的问题
+  max-height: 32px;
+  
+  &.d-shop-sku-tag-list{
+    margin: -6px 8px 0 0;
+    display: inline-flex;
+    height: 28px;
+    line-height: 28px;
+    vertical-align: middle;
+  }
+  .d-tag-item{
+    display: inline-flex;
+    margin-right: 8px;
+    width: auto;
+    height: 28px;
+    &:last-child{
+      margin-right: 0;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+import React from 'react';
  "tab_054": "https://m.360buyimg.com/cc/jfs/t1/88382/20/39502/894/64d36235Fc720ec9d/908e4378fec75555.png",
  "tab_054_home": "https://m.360buyimg.com/cc/jfs/t1/88382/20/39502/894/64d36235Fc720ec9d/908e4378fec75555.png",
  "tab_665": "https://m.360buyimg.com/cc/jfs/t1/252765/17/9937/2555/677c9155F246ead31/55243d94eb9ca8db.png",
  "tab_6209_dp": "https://m.360buyimg.com/cc/jfs/t1/252765/17/9937/2555/677c9155F246ead31/55243d94eb9ca8db.png",
  const { tagInfoList = [], className, itemClassName, isSkuBaseTag = false } = props;
  const getTagInfoList = Array.isArray(tagInfoList) ? tagInfoList : [];
  const getTagInfoListNum = getTagInfoList.length;
  return getTagInfoListNum > 0 ? (
    <View className={classNames(shopTagStyle['d-shop-tag-list'],{
      [shopTagStyle['d-shop-sku-tag-list']]: isSkuBaseTag
    }, className)}>
      {}
      <View style={{ width: '1px', height: '100%' }} />
      {getTagInfoList.map((item, index) => {
        const {  tabIconId,tagId, tabImageUrl,type, tabIconType} = item;
        const getTagId = tagId || tabIconId;
        const getTagType = type || tabIconType;
        const getUrl =
          typeof tabImageUrl === 'string' ? tabImageUrl : shopTagIconDefaultUrl[getTagId];
        return getUrl && getUrl !== "" ? (
          <Image
            key={index + getTagId + getTagType}
            className={classNames(shopTagStyle['d-tag-item'], itemClassName)}
            mode="heightFix"
            src={getUrl}
          />
        ) : null;
      })}
    </View>
  ) : 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.tsx

@@ -1 +1 @@
-import React from 'react'
  const {
    floorData,
    renderSourceType = BUSINESS_TYPE.ONLINE, 
    builtInComponents = {},
  } = props
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE
  const specificModuleFlag = ['mHeaderVideo']
  const frontEndSpecificModuleFlag = ['header_mVideo']
  const luxuryContainerPosition = 'luxuryFixed'
  const floorPosition = floorData?.floorPosition
  let floorModuleType: any = floorData?.floorExtInfo?.moduleFlag
  specificModuleFlag.includes(floorModuleType) &&
    floorPosition === luxuryContainerPosition &&
    (floorModuleType = frontEndSpecificModuleFlag)
  const FloorContentItem =
    (floorModuleType && builtInComponents[floorModuleType]) || null
  const dataDefines = getFloorDataToDataDefines(floorData)
  
  const renderDecorateDefaultModule = () => {
    return (
      <View
        style={{
          lineHeight: '120px',
          textAlign: 'center',
        }}
      >
        当前模块是{floorData.moduleName}
      </View>
    )
  }
  if (
    floorModuleType &&
    (RemoteLoadFloorList.includes(floorModuleType) ||
      floorData?.floorExtInfo?.floorLoadWay === 2)
  ) {
    return (
      <RemoteFloorItem {...props} dataDefines={dataDefines}></RemoteFloorItem>
    )
  } else {
    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, { memo, useMemo } from 'react';
  const {
    floorData,
    renderSourceType = BUSINESS_TYPE.ONLINE, 
    builtInComponents = {},
  } = props;
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE;
  const specificModuleFlag = ['mHeaderVideo'];
  const frontEndSpecificModuleFlag = ['header_mVideo'];
  const luxuryContainerPosition = 'luxuryFixed';
  const floorPosition = floorData?.floorPosition;
  let floorModuleType: any = floorData?.floorExtInfo?.moduleFlag;
  specificModuleFlag.includes(floorModuleType) &&
    floorPosition === luxuryContainerPosition &&
    (floorModuleType = frontEndSpecificModuleFlag);
  const FloorContentItem = (floorModuleType && builtInComponents[floorModuleType]) || null;
  const dataDefines = useMemo(() => {
    return getFloorDataToDataDefines(floorData);
  }, [floorData]);
  
  const renderDecorateDefaultModule = () => {
    return (
      <View
        style={{
          lineHeight: '120px',
          textAlign: 'center',
        }}
      >
        当前模块是{floorData.moduleName}
      </View>
    );
  };
  if (
    floorModuleType &&
    (RemoteLoadFloorList.includes(floorModuleType) || floorData?.floorExtInfo?.floorLoadWay === 2)
  ) {
    return <RemoteFloorItem {...props} dataDefines={dataDefines}></RemoteFloorItem>;
  } else {
    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;
      }
    }
  });
  if (nextProps.source !== 'appView') return false;
  return (
    prevProps.floorData === nextProps.floorData &&
    prevProps.extendInfoData === nextProps.extendInfoData
  );

package/dist/components/isv/Floor/index.tsx

@@ -1 +1 @@
-import React, { useCallback } from 'react'
  const {
    style,
    dataDefines,
    containerBorderRadius,
    floorData,
    isRealTimeRender,
    forceRenderTime,
  } = props
  const getRenderRealTimeKeyObj = {
    key: isRealTimeRender ? Date.now() : forceRenderTime,
  }
  console.log('远程加载楼层渲染key信息', getRenderRealTimeKeyObj)
  return (
    <View className={floorStyle['wrap']} style={style}>
      {floorData?.showCommonFloorHead === false ? null : (
        <CommonFloorHead
          dataDefines={dataDefines}
          floorData={floorData}
          {...getRenderRealTimeKeyObj}
        />
      )}
      <View
        className={floorStyle['wrap']}
        style={
          typeof containerBorderRadius === 'number'
            ? {
                borderRadius: containerBorderRadius + 'px',
              }
            : containerBorderRadius
        }
      >
        {}
        {props.children &&
          React.cloneElement(props.children, {
            dataDefines: dataDefines,
            ...getRenderRealTimeKeyObj,
          })}
      </View>
    </View>
  )
  isRealTimeRender: false, 
  forceRenderTime: 1, 
+import React, { useState, useMemo, useRef, useCallback } from 'react';
  const {
    style,
    dataDefines,
    containerBorderRadius,
    floorData,
    isRealTimeRender,
    forceRenderTime,
    containerIndex = 0,
  } = props;
  const domRef = useRef<HTMLDivElement>(null);
  const [wrapperHeight, setWrapperHeight] = useState<number | string>('auto');
  const hasBeenInViewRef = useRef(false);
  
  const globalSwitch = useMemo(() => {
    let contentVisibilityShieldAll = true;
    let contentVisibilityShieldModuleId: number[] = [];
    if (window.shopGlobalSwitch) {
      contentVisibilityShieldAll =
        typeof window.shopGlobalSwitch.contentVisibilityShieldAll === 'boolean'
          ? window.shopGlobalSwitch.contentVisibilityShieldAll
          : true;
      contentVisibilityShieldModuleId = Array.isArray(
        window.shopGlobalSwitch.contentVisibilityShieldModuleId,
      )
        ? window.shopGlobalSwitch.contentVisibilityShieldModuleId
        : [];
    }
    return { contentVisibilityShieldAll, contentVisibilityShieldModuleId };
  }, []);
  
  const handleInViewCallback = useCallback(() => {
    if (globalSwitch.contentVisibilityShieldAll) return;
    if (
      floorData.moduleId &&
      globalSwitch.contentVisibilityShieldModuleId.indexOf(floorData.moduleId) > -1
    ) {
      return;
    }
    if (!hasBeenInViewRef.current) {
      hasBeenInViewRef.current = true;
      setWrapperHeight('auto');
    }
  }, [containerIndex]);
  
  const handleOutViewCallback = useCallback(() => {
    if (globalSwitch.contentVisibilityShieldAll) return;
    if (
      floorData.moduleId &&
      globalSwitch.contentVisibilityShieldModuleId.indexOf(floorData.moduleId) > -1
    ) {
      return;
    }
    if (hasBeenInViewRef.current && domRef.current) {
      hasBeenInViewRef.current = false;
      const height = domRef.current.getBoundingClientRect().height;
      if (height > 0) {
        setWrapperHeight(height);
      }
    }
  }, [containerIndex]);
  const getRenderRealTimeKeyObj = useMemo(() => {
    return {
      key: isRealTimeRender ? Date.now() : forceRenderTime,
    };
  }, [isRealTimeRender, forceRenderTime]);
  const innerStyle = useMemo(() => {
    const baseStyle = style || {};
    let borderRadius = {};
    if (typeof containerBorderRadius === 'number') {
      borderRadius = { borderRadius: containerBorderRadius + 'px' };
    } else if (containerBorderRadius && typeof containerBorderRadius === 'object') {
      borderRadius = containerBorderRadius;
    }
    if (typeof wrapperHeight === 'number') {
      return {
        ...baseStyle,
        ...borderRadius,
        height: `${wrapperHeight}px`,
        overflow: 'hidden', 
        contentVisibility: 'auto',
        containIntrinsicSize: `${wrapperHeight}px`,
      };
    }
    return { ...baseStyle, ...borderRadius };
  }, [containerBorderRadius, wrapperHeight]);
  return (
    <InOrOutViewObserver
      inViewCallback={handleInViewCallback}
      outViewCallback={handleOutViewCallback}
      threshold={0}
    >
      <View ref={domRef} style={innerStyle} className={floorStyle['wrap']}>
        {floorData?.showCommonFloorHead === false ? null : (
          <CommonFloorHead
            dataDefines={dataDefines}
            floorData={floorData}
            {...getRenderRealTimeKeyObj}
          />
        )}
        {props.children &&
          React.cloneElement(props.children, {
            dataDefines: dataDefines,
            ...getRenderRealTimeKeyObj,
          })}
      </View>
    </InOrOutViewObserver>
  );
  isRealTimeRender: false, 
  forceRenderTime: 1,