@conecli/cone-render 0.8.20-shop.221 → 0.8.20-shop.223

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