@conecli/cone-render 0.10.1-shop3.5 → 0.10.1-shop3.6

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

@@ -1,148 +1,163 @@
 .d-root {
-	position: relative;
-	width: 100%;
-	margin-bottom: -24px;
-	background-color: #ffffff;
+  position: relative;
+  width: 100%;
+  margin-bottom: -24px;
+  background-color: #ffffff;
 }
 
 .d-content-wrap {
-	position: absolute;
-	// display: flex;
-	// align-items: center;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 96px;
-	// height: 100%;
-
-	&.d-has-title-bg {
-		background-size: cover;
-
-		.d-text {
-			// margin-top: -14px;
-			color: #ffffff;
-		}
-
-		.d-sub-text {
-			// margin-top: -8px;
-			color: #ffffff;
-		}
-
-		.d-content {
-			bottom: 40px;
-		}
-	}
-
-	&.d-type-is-img {
-		.d-content {
-			bottom: 44%; // 当图片标题类型渲染时，兼容新老数据，下发的图片高度会有几个尺寸，所以这里改成百分比
-		}
-	}
-
-	.d-text {
-		// margin-top: 16px;
-		margin-left: 20px;
-		font-family: 'PingFang SC';
-		font-size: 32px;
-		// line-height: 32px;
-		font-weight: bold;
-		color: #1a1a1a;
-
-		// hack修复在使用overflowhidden（为了实现过长自动出现省略号）前提下，某些字体，例如PingFang SC，默认行高时，基线和底线部分的字体内容（例如：jpqy）有可能显示不完整的问题
-		position: relative;
-		top: 2px;
-		padding-bottom: 2px;
+  position: absolute;
+  // display: flex;
+  // align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 96px;
+  // height: 100%;
+
+  &.d-has-title-bg {
+    background-size: cover;
+
+    .d-text {
+      // margin-top: -14px;
+      color: #ffffff;
+    }
+
+    .d-sub-text {
+      // margin-top: -8px;
+      color: #ffffff;
+    }
+
+    .d-content {
+      bottom: 40px;
+    }
+  }
+
+  &.d-type-is-img {
+    .d-content {
+      bottom: 44%; // 当图片标题类型渲染时，兼容新老数据，下发的图片高度会有几个尺寸，所以这里改成百分比
+    }
+  }
+
+  .d-text {
+    // margin-top: 16px;
+    margin-left: 20px;
+    font-family: 'PingFang SC';
+    font-size: 32px;
+    // line-height: 32px;
+    font-weight: bold;
+    color: #1a1a1a;
+
+    // hack修复在使用overflowhidden（为了实现过长自动出现省略号）前提下，某些字体，例如PingFang SC，默认行高时，基线和底线部分的字体内容（例如：jpqy）有可能显示不完整的问题
+    position: relative;
+    top: 2px;
+    padding-bottom: 2px;
     // 文字titile行高不够被遮盖问题 比如“g”字母
     line-height: 1.3;
-	}
-
-	.d-vertical-line {
-		position: relative;
-		top: -4px;
-		width: 1px;
-		height: 24px;
-		margin-left: 12px;
-		opacity: 0.3;
-		background: #ffffff;
-	}
-
-	.d-sub-text {
-		position: relative;
-		top: -2px;
-		margin-left: 12px;
-		font-family: 'PingFang SC';
-		font-size: 24px;
-		color: #808080;
-	}
+  }
+
+  .d-vertical-line {
+    position: relative;
+    top: -4px;
+    width: 1px;
+    height: 24px;
+    margin-left: 12px;
+    opacity: 0.3;
+    background: #ffffff;
+  }
+
+  .d-sub-text {
+    position: relative;
+    top: -2px;
+    margin-left: 12px;
+    font-family: 'PingFang SC';
+    font-size: 24px;
+    color: #808080;
+  }
 }
 
 .d-content-wrap-relative {
-	position: relative;
+  position: relative;
 }
 
 .d-content {
-	position: absolute;
-	bottom: 22px;
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-end;
+  position: absolute;
+  bottom: 22px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
 }
 
 .d-content-left {
-	flex: 1;
-	display: flex;
-	justify-content: flex-start;
-	align-items: flex-end;
-	max-width: calc(100% - 108px);
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  max-width: calc(100% - 108px);
 }
 
 .d-content-right {
-	display: flex;
-	align-items: flex-end;
-	flex-shrink: 0;
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
 }
 
 .d-title-more {
-	position: relative;
-	top: 16px;
-	display: flex;
-	align-items: flex-end;
-	height: 56px;
-	padding-bottom: 20px;
-	padding-left: 20px;
-	padding-right: 20px;
+  position: relative;
+  top: 16px;
+  display: flex;
+  align-items: flex-end;
+  height: 56px;
+  padding-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .d-title-more-text {
-	font-family: 'PingFang SC';
-	font-size: 24px;
-	color: #808080;
-	display: flex;
-	align-items: center;
-	font-weight: normal;
+  font-family: 'PingFang SC';
+  font-size: 24px;
+  color: #808080;
+  display: flex;
+  align-items: center;
+  font-weight: normal;
 }
 
 .d-title-more-text-white {
-	color: #ffffff;
+  color: #ffffff;
 }
 
 .d-title-more-arrow {
-	position: relative;
-	top: -4px;
-	width: 12px;
-	height: 20px;
-	margin-left: 10px;
+  position: relative;
+  top: -4px;
+  width: 12px;
+  height: 20px;
+  margin-left: 10px;
 }
 
 .d-img {
-	width: 100%;
-	display: block;
-	// height: auto;
-	height: 96px;
-	background: no-repeat top/100% auto;
+  width: 100%;
+  display: block;
+  // height: auto;
+  height: 96px;
+  background: no-repeat top/100% auto;
 }
 
 .d-place-holder {
-	height: 24px;
+  height: 24px;
+}
+
+:global {
+  .d-shop-pad {
+    :local {
+      .d-root {
+        .d-content-wrap-for-img {
+          height: 164px;
+        }
+        .d-img-bg {
+          height: 164px;
+        }
+      }
+    }
+  }
 }

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

@@ -1 +1 @@
-import React, { useMemo } from 'react'
  key: 1, 
+import React, { useMemo } from 'react';
  'https://m.360buyimg.com/imagetools/jfs/t1/170321/15/27425/230/61c1839aE0514462b/0b4d278fe18d91bb.png';
  'https://m.360buyimg.com/imagetools/jfs/t1/94671/2/26921/257/623d630aE681512e3/ded2e640c4a0a7ea.png';
  const getLogInfo = ReportContainerData.getReportClickFloorInfo(
    floorData,
    dataDefines,
    {
      clickArea: `title`,
      skuid: ``,
      tagList: [],
      labelList: [],
      pos: ``,
    },
    {
      la_p: ``,
    },
  );
  if (config) {
    JumpEventReport.jdJumpConfigUrl(config, {
      eventId: `TerminatorNew_${floorData.floorExtInfo?.moduleFlag}_Click`,
      jsonParam: getLogInfo,
    });
  }
  dataDefines,
  floorData,
  oldModuleFloorTitle, 
  titleText,
  titleMoreClick,
  additionalRenderContent,
  customClassName,
  const floorTitleDataDefine = dataDefines
    ? dataDefines.filter((item) => {
        return item.type === 'floorTitle';
      })
    : [];
  const floorTitle = oldModuleFloorTitle
    ? oldModuleFloorTitle
    : (floorTitleDataDefine[0]?.nodeText?.data ?? {});
  const { detail, imageUrl, text, textBackground, type: floorTitleType = 1, subText } = floorTitle;
  if (floorTitleType === 1) {
    return null;
  }
  const bgMap = {
    '1': null,
    '2': textBackground || '',
    '3': imageUrl || '',
  };
  const useFloorTitleBgImg = bgMap[floorTitleType];
  return (
    <View
      className={classNames(styles['d-root'], customClassName)}
      onClick={floorTitleType === 3 ? gotoMPage.bind(this, dataDefines, floorData, detail) : {}}
    >
      <View
        className={classNames(styles['d-img'], {
          [styles['d-img-bg']]: useFloorTitleBgImg,
        })}
        style={useFloorTitleBgImg ? { backgroundImage: `url(${useFloorTitleBgImg})` } : {}}
      />
      <View
        className={classNames(
          styles['d-content-wrap'],
          floorTitleType === 2 && textBackground ? styles['d-has-title-bg'] : null,
          floorTitleType === 3 ? styles['d-type-is-img'] : null,
          useFloorTitleBgImg ? styles['d-content-wrap-for-img'] : null,
        )}
      >
        <View className={classNames(styles['d-content'], 'd-content')}>
          <View className={styles['d-content-left']}>
            {floorTitleType === 2 && text ? (
              <Text className={classNames(styles['d-text'], 'text-ellipsis')}>
                {titleText ? titleText : text}
              </Text>
            ) : null}
            {floorTitleType === 2 && subText
              ? [
                  textBackground ? <View key={1} className={styles['d-vertical-line']} /> : null,
                  <Text key={2} className={styles['d-sub-text']}>
                    {subText}
                  </Text>,
                ]
              : null}
            {additionalRenderContent ? additionalRenderContent(textBackground) : null}
          </View>
          <View className={styles['d-content-right']}>
            {titleMoreClick ? (
              <View
                className={styles['d-title-more']}
                onClick={(e) => {
                  typeof titleMoreClick === 'function' && titleMoreClick(e);
                  e.stopPropagation();
                }}
              >
                <Text
                  className={classNames(
                    styles['d-title-more-text'],
                    textBackground || floorTitleType === 3
                      ? styles['d-title-more-text-white']
                      : null,
                  )}
                >
                  更多
                </Text>
                <Image
                  className={styles['d-title-more-arrow']}
                  src={textBackground || floorTitleType === 3 ? ICON_ARROW_WHITE : ICON_ARROW_GRAY}
                  mode="widthFix"
                />
              </View>
            ) : null}
          </View>
        </View>
      </View>
    </View>
  );
  return useMemo(() => {
    return <CommonFloorHeader {...props} />;
  }, [props.key]);
  titleText: null,
  titleMoreClick: null,
  additionalRenderContent: null,
  customClassName: null,
  key: 1, 

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

@@ -0,0 +1 @@
+import React, { useRef, useEffect } from 'react';
  isH5AndJdShopView,
  isAndroidDevice,
  isJdAndAndroidDevice,
  isJdAndIosDevice,
  isIosDevice,
  isJdApp,
  isWxMin,
  isH5AndJdShopViewH5Scroll,
  isH5AndJdShopH5CustomScrollView,
  isH5,
  isAppClassifyPage,
  lodashThrottle,
  START: 'start',
  MOVE: 'move',
  END: 'end',
  const {
    style = {},
    scrollX = false,
    scrollY = false,
    scrollWithAnimation = true,
    iosNeedDisableVertical = false, 
    className = null,
    dispatchTouchMove = true, 
    children,
    ...otherProps
  } = props;
  const rootEleNode = isH5 && document?.querySelector('body');
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll && 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(false);
      }
      !hasCustomEle &&
        rootEleNode &&
        rootEleNode.classList.contains('over-hidden') &&
        rootEleNode.classList.remove('over-hidden');
    }
  };
  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');
    }
  };
  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(touchType === TouchType.START);
  };
  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) {
      if (isIosDevice && !isAppClassifyPage) {
        iosDeviceStopNativeScrollEvent(e, touchType, sendIosState);
      } else if (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) {
          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',
        )}
        scrollY
        scrollWithAnimation
        {...otherProps}
      >
        {children}
      </ScrollView>
    );
  } else {
    return (
      <ScrollView
        scrollX
        scrollY
        scrollWithAnimation
        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>
    );
  }