@conecli/cone-render 0.10.1-shop3.9 → 0.10.1-shop3.91

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

@@ -1 +1 @@
-import React, {useEffect, useRef} from 'react'
  const { title, openAppParams, style, hasCommonHeader = true, hasDownloadTips = true, headerParams } = props
  const headerRef:any = useRef(null)
  useEffect(() => {
    hasCommonHeader && initCommonHeader()
    hasDownloadTips && initDownloadAppLayerConfigData()
  }, [])
  const isScrolledToTop = () => {
    return window.scrollY !== undefined ? window.scrollY === 0 :
      document.documentElement.scrollTop === 0 || document.body.scrollTop === 0;
  }
  const scrollEventFunc = () => {
    if(!headerRef.current) return
    const stickyTop = headerRef.current?.getBoundingClientRect()?.top || 0;
    if(Math.trunc(stickyTop) <= 0 && !isScrolledToTop()) {
      console.log('scroll 添加class',Math.trunc(stickyTop), isScrolledToTop())
      headerRef.current.classList.add('d-mobile-header-sticky');
    }else {
      console.log('scroll 移除class',Math.trunc(stickyTop), isScrolledToTop())
      headerRef.current.classList.remove('d-mobile-header-sticky');
    }
  }
  useEffect(() => {
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL,() => {
      scrollEventFunc()
    })
  },[])
  const initCommonHeader = () => {
    if (window?.MCommonHeaderBottom) {
      const mchb = new MCommonHeaderBottom()
      const headerArg = {
        moduleName: 'shop',
        hrederId: 'm_common_header',
        title,
        stype: 1,
        onClickJdkey: function () {
          console.log('==>m_common_header jdkey click.')
        },
        ...headerParams
      }
      mchb.header(headerArg)
    }
  }
  const initDownloadAppLayerConfigData = () => {
    const getEle = document.getElementById('m_common_tip')
    getEle &&
      window.$ &&
      window.$.downloadAppLayerConfigData &&
      window.$.downloadAppLayerConfigData({
        tipId: 'm_common_tip',
        M_sourceFrom: 'jshop',
        bottom: 74,
        onClickTipX: () => {
          Taro.eventCenter.trigger(
            TaroEventType.DOWN_LOAD_APP_CLOSE_CHANGE,
            true,
          )
        },
        downloadAppPlugIn: {
          M_sourceFrom: 'jshop',
          openAppBtnId: 'download_openapp',
          downAppURl: '//conecli.com/downloadApp/download.html?channel=jd-m',
          inteneUrl: 'openapp.jdmobile://virtual?',
          inteneUrlParams: {
            category: 'jump',
            des: 'jshopMain',
            shopId: `${global.info.queryInfo.shopId || ''}`,
            venderId: `${global.info.queryInfo.venderId || ''}`,
            sourceType: global.info.queryInfo?.sourceType || 'M-H5',
            sourceValue: global.info.queryInfo?.sourceValue || 'Mshop',
            ...openAppParams,
          },
        },
      })
  }
  return !isWxMiniH5View && !isJdApp ? (
    <View
      className={mobileCommonHeaderStyle['d-mobile-header-layout']}
      style={style}
      ref={headerRef}
    >
      <View
        id="m_common_tip"
        className={mobileCommonHeaderStyle['d-mobile-common-tip']}
      />
      {hasCommonHeader && (
        <View
          id="m_common_header"
          className={mobileCommonHeaderStyle['d-mobile-common-header']}
        />
      )}
    </View>
  ) : null
  title: '店铺',
  openAppParams: {},
+import Taro from '@tarojs/taro'
  const { title, openAppParams, style, hasCommonHeader = true, hasDownloadTips = true, headerParams } = props
  const headerRef:any = useRef(null)
  useEffect(() => {
    hasCommonHeader && initCommonHeader()
    !isTjScence && hasDownloadTips && initDownloadAppLayerConfigData()
  }, [])
  const isScrolledToTop = () => {
    return window.scrollY !== undefined ? window.scrollY === 0 :
      document.documentElement.scrollTop === 0 || document.body.scrollTop === 0;
  }
  const scrollEventFunc = () => {
    if(!headerRef.current) return
    const stickyTop = headerRef.current?.getBoundingClientRect()?.top || 0;
    if(Math.trunc(stickyTop) <= 0 && !isScrolledToTop()) {
      console.log('scroll 添加class',Math.trunc(stickyTop), isScrolledToTop())
      headerRef.current.classList.add('d-mobile-header-sticky');
    }else {
      console.log('scroll 移除class',Math.trunc(stickyTop), isScrolledToTop())
      headerRef.current.classList.remove('d-mobile-header-sticky');
    }
  }
  useEffect(() => {
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL,() => {
      scrollEventFunc()
    })
  },[])
  const initCommonHeader = () => {
    if (window?.MCommonHeaderBottom) {
      const mchb = new MCommonHeaderBottom()
      const headerArg = {
        moduleName: 'shop',
        hrederId: 'm_common_header',
        title,
        stype: 1,
        onClickJdkey: function () {
          console.log('==>m_common_header jdkey click.')
        },
        ...headerParams
      }
      mchb.header(headerArg)
    }
  }
  const initDownloadAppLayerConfigData = () => {
    const getEle = document.getElementById('m_common_tip')
    getEle &&
      window.$ &&
      window.$.downloadAppLayerConfigData &&
      window.$.downloadAppLayerConfigData({
        tipId: 'm_common_tip',
        M_sourceFrom: 'jshop',
        bottom: 74,
        onClickTipX: () => {
          Taro.eventCenter.trigger(
            TaroEventType.DOWN_LOAD_APP_CLOSE_CHANGE,
            true,
          )
        },
        downloadAppPlugIn: {
          M_sourceFrom: 'jshop',
          openAppBtnId: 'download_openapp',
          downAppURl: '//conecli.com/downloadApp/download.html?channel=jd-m',
          inteneUrl: 'openapp.jdmobile://virtual?',
          inteneUrlParams: {
            category: 'jump',
            des: 'jshopMain',
            shopId: `${global.info.queryInfo.shopId || ''}`,
            venderId: `${global.info.queryInfo.venderId || ''}`,
            sourceType: global.info.queryInfo?.sourceType || 'M-H5',
            sourceValue: global.info.queryInfo?.sourceValue || 'Mshop',
            ...openAppParams,
          },
        },
      })
  }
  return !isWxMiniH5View && !isJdApp ? (
    <View
      className={mobileCommonHeaderStyle['d-mobile-header-layout']}
      style={style}
      ref={headerRef}
    >
      {hasDownloadTips && (
        <View
          id="m_common_tip"
          className={mobileCommonHeaderStyle['d-mobile-common-tip']}
        />
      )}
      {hasCommonHeader && (
        <View
          id="m_common_header"
          className={mobileCommonHeaderStyle['d-mobile-common-header']}
        />
      )}
    </View>
  ) : null
  title: '店铺',
  openAppParams: {},

package/dist/components/base/MobileCommonHeader/index.weapp.tsx

@@ -0,0 +1 @@
+const MobileCommonHeader = (props) => {
  console.log("MobileCommonHeader 京购暂无实现", props);
  return null

package/dist/components/base/NetworkDataError/const.ts

@@ -1 +1 @@
-import { NETWORK_DATA_TYPE } from '../../../common/const'
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '网络连接已断开',
  [NETWORK_DATA_TYPE.DATA_ERROR]: '数据加载失败',
  [NETWORK_DATA_TYPE.NO_DATA]: '你访问的内容飞到太空了', 
  [NETWORK_DATA_TYPE.RISK]: '活动太火爆',
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '请检查您的网络设置',
  [NETWORK_DATA_TYPE.DATA_ERROR]: '请稍后重试',
  [NETWORK_DATA_TYPE.NO_DATA]: '', 
  [NETWORK_DATA_TYPE.RISK]: '页面加载失败，请稍后再试',
  NETWORK_DATA_TYPE.NO_NET_WORK,
  NETWORK_DATA_TYPE.DATA_ERROR,
  NETWORK_DATA_TYPE.NO_DATA,
  NETWORK_DATA_TYPE.RISK,
  No_Data_Bmall:'no-data-bmall',
+import { NETWORK_DATA_TYPE } from '../../../common/const';
  [NETWORK_DATA_TYPE.NO_NET_WORK]: global?.languageJsonData?.loseNetwork || '网络连接已断开',
  [NETWORK_DATA_TYPE.DATA_ERROR]:
    global?.languageJsonData?.highTraffic || '活动太火爆，访问人数较多',
  [NETWORK_DATA_TYPE.NO_DATA]: global?.languageJsonData?.highTraffic || '活动太火爆，访问人数较多', 
  [NETWORK_DATA_TYPE.RISK]: global?.languageJsonData?.highTraffic || '活动太火爆，访问人数较多',
  [NETWORK_DATA_TYPE.NOT_LOGIN]: global?.languageJsonData?.notLogin || '登录后，购物更轻松~',
  [NETWORK_DATA_TYPE.NO_NET_WORK]: global?.languageJsonData?.checkNetwork || '请检查您的网络设置',
  [NETWORK_DATA_TYPE.DATA_ERROR]:
    global?.languageJsonData?.pageLoadFailed || '排队进场中，请稍后再试',
  [NETWORK_DATA_TYPE.NO_DATA]: global?.languageJsonData?.pageLoadFailed || '排队进场中，请稍后再试',
  [NETWORK_DATA_TYPE.RISK]: `${global?.languageJsonData?.pageLoadFailed || '排队进场中，请稍后再试'
    }。`,
  [NETWORK_DATA_TYPE.NOT_LOGIN]: '', 
  NETWORK_DATA_TYPE.NO_NET_WORK,
  NETWORK_DATA_TYPE.DATA_ERROR,
  NETWORK_DATA_TYPE.NO_DATA,
  NETWORK_DATA_TYPE.RISK,
  NETWORK_DATA_TYPE.NOT_LOGIN,
  PART: 'part', 
  FULL: 'full', 
  No_Data_Default_Tip: 'no-data-default-tip',
  No_Data_Tip_1: 'no-data-tip-1',
  No_Data_Tip_2: 'no-data-tip-2',
  No_Network_Err_Tip: 'no-network',
  No_Data_Bmall: 'no-data-bmall',
  OLD: 'old',
  NEW: 'new',

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

@@ -1,94 +1,140 @@
 
 .d-shop-network {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: #e5e5e5;
-	&.d-shop-network-white {
-		background-color: #fff;
-	}
-	.d-error-content {
-		text-align: center;
-	}
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #e5e5e5;
+  &.d-shop-network-white {
+    background-color: #fff;
+  }
+  .d-error-content {
+    text-align: center;
+    &.d-new-style-content {
+      .d-data-error,
+      .d-no-data,
+      .d-no-data-tip-1,
+      .d-no-data-tip-2 {
+        width: 240px;
+        height: 240px;
+        background: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png')
+          0 0 /240px 240px no-repeat;
+      }
+      .d-data-error-tip {
+        padding-bottom: 24px;
+        line-height: 38px;
+        font-size: 32px;
+        font-weight: 600;
+        color: #1a1a1a;
+      }
+      .d-data-error-sub-tip {
+        margin: 0;
+        font-size: 24px;
+        color: #505259;
+      }
+      .d-no-data-tip {
+        line-height: 44px;
+        font-size: 24px;
+        font-weight: normal;
+        color: #505259;
+      }
+      .d-no-data-sub-tip {
+        margin: 0;
+        font-weight: normal;
+        color: #505259;
+      }
+      .d-opt-btn {
+        width: 160px;
+        height: 64px;
+        line-height: 64px;
+        font-size: 28px;
+        color: #1a1a1a;
+        border-radius: 12px;
+        border: none;
+        
+        &:after{
+          border: 1PX solid #C2C4CC;
+        }
+      }
+    }
+  }
 
-	.d-error-tip {
-		font-size: 28px;
-        font-weight: bold;
-		line-height: 28px;
-		color: #8C8C8C;
-	}
-    .d-error-sub-tip {
-        margin-top: 16px;
-		font-size: 24px;
-		line-height: 24px;
-		color: #8C8C8C;
-	}
-	.d-error-type {
-		width: 320px;
-		height: 320px;
-		background-size: contain;
-		background-repeat: no-repeat;
+  .d-error-tip {
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 28px;
+    color: #1a1a1a;
+  }
+  .d-error-sub-tip {
+    margin-top: 16px;
+    font-size: 24px;
+    line-height: 24px;
+    color: #8c8c8c;
+  }
+  .d-error-type {
+    width: 320px;
+    height: 320px;
+    background-size: contain;
+    background-repeat: no-repeat;
     margin: 0 auto;
-	}
+  }
 
-	.d-no-network {
-		// background-image: url('https://m.360buyimg.com/imagetools/jfs/t1/219405/34/29129/32963/64892a0eF2c068392/86c3fcf9d980ff10.png');
-        background-image: url('../../../assets/networkError.png');
-	}
+  .d-no-network {
+    // background-image: url('https://m.360buyimg.com/imagetools/jfs/t1/219405/34/29129/32963/64892a0eF2c068392/86c3fcf9d980ff10.png');
+    background-image: url('../../../assets/networkError.png');
+  }
 
-	.d-data-error {
-		background-image: url('https://m.360buyimg.com/imagetools/jfs/t1/106708/34/36128/37234/64896f52Fed1530e0/7b403e068aae316c.png');
-	}
+  .d-data-error {
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
+  }
   .d-risk {
-    background-image: url('https://m.360buyimg.com/imagetools/jfs/t1/106708/34/36128/37234/64896f52Fed1530e0/7b403e068aae316c.png');
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
+  }
+  .d-no-data, .d-no-login {
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
+  }
+  .d-no-data-tip-1 {
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
   }
-	.d-no-data {
-		background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/190994/19/325/42717/6088fed0Ec4b502d5/0e8de7593fb0d06c.png');
-	}
-	.d-no-data-tip-1 {
-		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/152550/40/8432/21643/5fc9cae0E5391a506/523da679188ff687.png');
-	}
-
   .d-no-data-tip-2 {
-    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/142705/35/17776/5911/5fd1e62dE4fbc2300/3ee1d4160db1dac6.png');
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
+  }
+  .d-no-network-err-tip {
+    background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/146556/1/17745/7493/5fd1e62dE86e86669/96f5c91befa8e991.png');
   }
-	.d-no-network-err-tip {
-		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/146556/1/17745/7493/5fd1e62dE86e86669/96f5c91befa8e991.png');
-	}
   .d-no-data-bmall {
     background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/217798/34/32933/150484/64ccadf3Fde1a93bf/9b1b8929a9631469.png');
   }
-	
-	.d-opt-btn {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 144px;
-		height: 56px;
-        margin-top: 32px;
-		padding: 0;
-		font-size: 24px;
-		color: #fa2c19;
-		border: 1PX solid #fa2c19;
-		box-sizing: border-box;
-		border-radius: 48px;
-		&:active {
-			opacity: 0.8;
-		}
-	}
+  
+  .d-opt-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 144px;
+    height: 56px;
+    margin-top: 32px;
+    padding: 0;
+    font-size: 24px;
+    color: #fa2c19;
+    border: 1px solid #fa2c19;
+    box-sizing: border-box;
+    border-radius: 48px;
+    &:active {
+      opacity: 0.8;
+    }
+  }
 }
 
 .d-network-jd-shop-view {
-	min-height: 500px;
+  min-height: 500px;
 }
 
 .d-shop-network-part {
-	position: absolute;
-	min-height: 500px;
-	background: #f2f2f2;
+  position: absolute;
+  min-height: 500px;
+  background: #f2f2f2;
 }
 .d-shop-network-no-position {
-    position: static;
+  position: static;
 }

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

@@ -1 +1 @@
-import { Button, View } from '@tarojs/components'
  NetWorkErrorList,
  NetWorkErrorTip,
  NetWorkErrorSubTip,
  NetWorkShowType,
  NetWork_Image_Type,
  const {
    className = '',
    message = '',
    subMessage = '',
    btnLabel = '重新加载',
    backgroundColorWhite = false, 
    netWorkDataType = NETWORK_DATA_TYPE.NORMAL,
    netWorkImageType = NetWork_Image_Type.No_Data_Default_Tip,
    netWorkShowType = NetWorkShowType.FULL,
    refreshCallBackFn = null,
    viewMaxHeight = '',
    noPosition = false, 
  } = props
  const refershInitData = useCallback(() => {
    refreshCallBackFn && refreshCallBackFn(true)
  }, [])
  const useErrorTip = message != '' ? message : NetWorkErrorTip[netWorkDataType]
  const useErrorSubTip = subMessage
    ? subMessage
    : NetWorkErrorSubTip[netWorkDataType]
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
  const maxHeight = latestRes.displayHeight || 546 
  return NetWorkErrorList.includes(netWorkDataType as NETWORK_DATA_TYPE) ? (
    <View
      style={{
        maxHeight:
          viewMaxHeight !== ''
            ? viewMaxHeight
            : isMemberPage || isAppStowShop
            ? '100vh'
            : maxHeight,
      }}
      className={classNames(
        netWorkErrorStyle['d-shop-network'],
        {
          [netWorkErrorStyle['d-shop-network-white']]: backgroundColorWhite,
        },
        {
          [netWorkErrorStyle['d-shop-network-part']]:
            netWorkShowType === NetWorkShowType.PART,
        },
        {
          [netWorkErrorStyle['d-network-jd-shop-view']]: isH5AndJdShopView,
        },
        {
          [netWorkErrorStyle['d-shop-network-no-position']]: noPosition,
        },
        'flexible-center-box',
        className,
      )}
    >
      <View
        className={classNames(
          netWorkErrorStyle['d-error-content'],
          'd-error-content',
        )}
      >
        <View
          className={classNames(
            netWorkErrorStyle['d-error-type'],
            netWorkErrorStyle[`d-${netWorkDataType}`],
            netWorkErrorStyle[`d-${netWorkImageType}`],
            'd-error-type',
          )}
        />
        <View
          className={classNames(
            netWorkErrorStyle['d-error-tip'],
            'd-error-tip',
          )}
        >
          {useErrorTip}
        </View>
        {useErrorSubTip ? (
          <View
            className={classNames(
              netWorkErrorStyle['d-error-sub-tip'],
              'd-error-sub-tip',
            )}
          >
            {useErrorSubTip}
          </View>
        ) : null}
        <View className={'flexible-horizontal-center-box'}>
          {refreshCallBackFn && (
            <Button
              onClick={refershInitData}
              className={classNames(
                netWorkErrorStyle['d-opt-btn'],
                'd-button-no-border',
                'd-opt-btn',
              )}
              plain
              size="mini"
            >
              {btnLabel}
            </Button>
          )}
        </View>
      </View>
    </View>
  ) : null
+import { Button, View } from '@tarojs/components';
  NetWorkErrorList,
  NetWorkErrorTip,
  NetWorkErrorSubTip,
  NetWorkShowType,
  NetWork_Image_Type,
  NetWorkStyleType,
  const {
    className = '',
    message = '',
    subMessage = '',
    btnLabel = global?.languageJsonData?.reload || '重新加载',
    backgroundColorWhite = false, 
    netWorkDataType = NETWORK_DATA_TYPE.NORMAL,
    netWorkShowType = NetWorkShowType.FULL,
    netWorkImageType = NetWork_Image_Type.No_Data_Default_Tip,
    netWorkStyleType = NetWorkStyleType.OLD,
    refreshCallBackFn = null,
    viewMaxHeight = '',
    noPosition = false, 
  } = props;
  const refershInitData = useCallback(() => {
    refreshCallBackFn && refreshCallBackFn(true);
  }, []);
  const useErrorTip = message != '' ? message : NetWorkErrorTip[netWorkDataType];
  const useErrorSubTip = subMessage
    ? subMessage
    : message != ''
    ? ''
    : NetWorkErrorSubTip[netWorkDataType];
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {};
  const onePlusOneBottomPlaceHeight = global.info?.sysInfo?.onePlusOneBottomPlaceHeight
    ? global.info?.sysInfo?.onePlusOneBottomPlaceHeight + 20
    : 0;
  const maxHeight = latestRes.displayHeight || onePlusOneBottomPlaceHeight + 546; 
  return NetWorkErrorList.includes(netWorkDataType as NETWORK_DATA_TYPE) ? (
    <View
      style={{
        maxHeight: viewMaxHeight !== '' ? viewMaxHeight : isMemberPage ? '100vh' : maxHeight,
      }}
      className={classNames(
        netWorkErrorStyle['d-shop-network'],
        {
          [netWorkErrorStyle['d-shop-network-white']]: backgroundColorWhite,
        },
        {
          [netWorkErrorStyle['d-shop-network-part']]: netWorkShowType === NetWorkShowType.PART,
        },
        {
          [netWorkErrorStyle['d-network-jd-shop-view']]: isH5AndJdShopView,
        },
        {
          [netWorkErrorStyle['d-shop-network-no-position']]: noPosition,
        },
        'flexible-center-box',
        className,
      )}
    >
      <View
        className={classNames(
          netWorkErrorStyle['d-error-content'],
          netWorkErrorStyle[`d-${netWorkStyleType}-style-content`],
          'd-error-content',
        )}
      >
        <View
          className={classNames(
            netWorkErrorStyle['d-error-type'],
            netWorkErrorStyle[`d-${netWorkDataType}`],
            netWorkErrorStyle[`d-${netWorkImageType}`],
            `d-${netWorkDataType}`,
            `d-${netWorkImageType}`,
            'd-error-type',
          )}
        />
        <View
          className={classNames(
            netWorkErrorStyle['d-error-tip'],
            netWorkErrorStyle[`d-${netWorkDataType}-tip`],
            `d-${netWorkDataType}-tip`,
            'd-error-tip',
          )}
        >
          {useErrorTip}
        </View>
        {useErrorSubTip ? (
          <View
            className={classNames(
              netWorkErrorStyle['d-error-sub-tip'],
              netWorkErrorStyle[`d-${netWorkDataType}-sub-tip`],
              `d-${netWorkDataType}-sub-tip`,
              'd-error-sub-tip',
            )}
          >
            {useErrorSubTip}
          </View>
        ) : null}
        <View className={'flexible-horizontal-center-box'}>
          {refreshCallBackFn && (
            <Button
              onClick={refershInitData}
              className={classNames(
                netWorkErrorStyle['d-opt-btn'],
                'd-button-no-border',
                'd-opt-btn',
              )}
              plain
              size="mini"
            >
              {btnLabel}
            </Button>
          )}
        </View>
      </View>
    </View>
  ) : null;