@conecli/cone-render 0.9.1-shop2.3 → 0.9.1-shop2.4

package/dist/modules/ContainerFloorList/index.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  NETWORK_DATA_TYPE,
  TaroEventType,
  MINI_APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
  SHOP_TAB_CONTENT_BOTTOM,
  listData,
  num = LOAD_FLOOR_BATCH_NUM,
  let thisListData: ComponentInterFace.ContainerItemData[] | [] =
    listData.slice(0)
  const thisListDataLen = thisListData.length
  const res: any[] = []
  if (thisListDataLen) {
    if (thisListDataLen < num) {
      res.push(thisListData)
    } else {
      while (thisListData.length) {
        if (thisListData.length >= num) {
          res.push(thisListData.splice(0, num))
        } else {
          res.push(thisListData)
          thisListData = []
        }
      }
    }
  }
  return res
  containerFloorListData: ComponentInterFace.ContainerItemData[]
  className?: string
  sectionType?: string
  style?: object
  hasGoodsFeeds?: boolean
  miniScrollSelf?: boolean 
  tabContentShowState?: boolean 
  loadingEndComponentFn?: Function
  updateShopFloorDataFn?: Function
  builtInComponents?: Object
  changeScrollToLowerStateFn: Function | null
  changeLayoutScrollToTopFn?: Function
  triggerMiniLoadProductWithFilterFn?: Function
  const {
    className,
    style,
    loadingEndComponentFn,
    hasGoodsFeeds,
    sectionType,
    tabContentShowState,
    containerFloorListData,
    updateShopFloorDataFn,
    changeScrollToLowerStateFn,
    changeLayoutScrollToTopFn,
    triggerMiniLoadProductWithFilterFn,
    builtInComponents,
    miniScrollSelf = false,
  } = props
  const [containerFloorListScrollTop, setContainerFloorListScrollTop] =
    useState(0)
  const loadMoreContainerFloorListDataRef = useRef({
    needFirstLoadState: true, 
    loadingState: false, 
  })
  const isFuncForChangeScrollToLowerStateFn =
    typeof changeScrollToLowerStateFn == 'function'
  const loadSectionTypeContainerFloorListRef = useRef<{
    [key: string]: ComponentInterFace.MiniLoadFloorListRef
  }>({
    [`${sectionType}`]: {
      index: 1,
      itemNum: 0,
      list: [],
      loadList: [], 
      max: 1,
    },
  })
  const [containerFloorList, setContainerFloorList] = useState<
    ComponentInterFace.ContainerItemData[]
  >(() => {
    
    const getLoadDataArr = containerFloorListDataSpliceToPromise(
      containerFloorListData,
    )
    const getThisSectionTypeListData =
      loadSectionTypeContainerFloorListRef.current[`${sectionType}`]
    getThisSectionTypeListData.list = getLoadDataArr
    getThisSectionTypeListData.itemNum = containerFloorListData.length
    getThisSectionTypeListData.max = getLoadDataArr.length
    console.log('获取加载数据总数据----' + sectionType, getLoadDataArr)
    const getThisLoadList = getLoadDataArr.shift()
    if (getThisLoadList) {
      getThisSectionTypeListData.loadList = getThisLoadList
      return getThisLoadList
    } else {
      return []
    }
  })
  useEffect(() => {
    if (containerFloorList.length > 0) {
      Taro.nextTick(() => {
        const getThisSectionTypeListData =
          loadSectionTypeContainerFloorListRef.current[`${sectionType}`]
        console.log(
          `加载${sectionType}中第${getThisSectionTypeListData.index}批次${LOAD_FLOOR_BATCH_NUM}个模块完毕,共计${getThisSectionTypeListData.max}轮，楼层总计${getThisSectionTypeListData.itemNum}`,
        )
        loadMoreContainerFloorListDataRef.current.needFirstLoadState &&
          checkLoadFloorListLoadState().then((needLoadState) => {
            console.log('检查是否需要继续加载状态', needLoadState)
            if (needLoadState) {
              const getThisLoadList = getThisSectionTypeListData.list.shift()
              if (getThisLoadList) {
                getThisSectionTypeListData.index++
                const changeContainerList: ComponentInterFace.ContainerItemData[] =
                  [...getThisSectionTypeListData.loadList, ...getThisLoadList]
                getThisSectionTypeListData.loadList = changeContainerList
                setContainerFloorList(changeContainerList)
              } else {
                Taro.hideLoading()
                loadMoreContainerFloorListDataRef.current.needFirstLoadState =
                  false
              }
            } else {
              Taro.hideLoading()
              loadMoreContainerFloorListDataRef.current.needFirstLoadState =
                false
            }
          })
      })
    }
  }, [containerFloorList])
  
  const checkLoadFloorListLoadState = () => {
    return new Promise((resolve) => {
      Taro.createSelectorQuery()
        .select('#J_shopContainerFloorList')
        .boundingClientRect(function (rect) {
          if (rect) {
            if (rect.height && rect.height < windowHeight + 100) {
              resolve(true)
            } else {
              resolve(false)
            }
          } else {
            resolve(true)
          }
        })
        .exec()
    })
  }
  
  const loadMoreContainerFloorList = (evt: any = false) => {
    const getThisSectionTypeListData =
      loadSectionTypeContainerFloorListRef.current[`${sectionType}`]
    if (
      !loadMoreContainerFloorListDataRef.current.loadingState &&
      getThisSectionTypeListData.list.length > 0
    ) {
      loadMoreContainerFloorListDataRef.current.loadingState = true
      getThisSectionTypeListData.index++
      console.log(
        `当前即将加载${sectionType}中第${getThisSectionTypeListData.index}轮`,
      )
      const getThisLoadList = getThisSectionTypeListData.list.shift()
      if (getThisLoadList) {
        const changeFloorList = [
          ...getThisSectionTypeListData.loadList,
          ...getThisLoadList,
        ]
        getThisSectionTypeListData.loadList = changeFloorList
        loadMoreContainerFloorListDataRef.current.loadingState = false
        isFuncForChangeScrollToLowerStateFn && changeScrollToLowerStateFn(false)
        setContainerFloorList(changeFloorList)
        Taro.nextTick(() => {
          if (getThisSectionTypeListData.list.length == 0) {
            typeof triggerMiniLoadProductWithFilterFn == 'function' &&
              triggerMiniLoadProductWithFilterFn()
          }
        })
      } else {
        isFuncForChangeScrollToLowerStateFn && changeScrollToLowerStateFn(false)
      }
    }
    if (
      miniScrollSelf &&
      evt &&
      !loadMoreContainerFloorListDataRef.current.loadingState &&
      getThisSectionTypeListData.index >= getThisSectionTypeListData.max
    ) {
      pageScrollToLower(evt)
    }
  }
  useEffect(() => {
    if (!miniScrollSelf) {
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL_END, (tabActiveType) => {
        if (tabActiveType == sectionType && tabContentShowState) {
          loadMoreContainerFloorList()
        }
      })
    }
  }, [])
  const pageScrollToLower = useCallback((evt) => {
    console.log('触发滚动底部位置', evt.detail)
    Taro.eventCenter.trigger(TaroEventType.PAGE_SCROLL_END)
  }, [])
  
  const onScrollRecord = (event) => {
    const { detail } = event
    if (detail) {
      taroJdBaseInfo.info.pageInfo.miniScrollInfo = detail
    }
  }
  const renderFloorItem = useCallback(
    (item, floorItem, floorIndex, containerLayoutLeftRightMargin) => {
      return (
        <View
          className={classNames(shopContainerListStyle['d-floor-item'])}
          id={`J_floor_${floorItem?.uid}`}
          key={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}
            changeScrollToLowerStateFn={changeScrollToLowerStateFn}
            key={floorItem.uid}
            changeScrollTopFn={changeContainerFloorListScrollTop}
            builtInComponents={builtInComponents}
          />
        </View>
      )
    },
    [],
  )
  const changeContainerFloorListScrollTop = (top) => {
    if (miniScrollSelf) {
      setContainerFloorListScrollTop(top)
    } else {
      typeof changeLayoutScrollToTopFn == 'function' &&
        changeLayoutScrollToTopFn(top)
    }
  }
  const renderContainerList = () => {
    const listNum = containerFloorList.length || 0
    const getThisSectionTypeListData =
      loadSectionTypeContainerFloorListRef.current[`${sectionType}`]
    return (
      <View id="J_shopContainerFloorList">
        {containerFloorListData && containerFloorListData.length > 0 ? (
          listNum > 0 && (
            <>
              {containerFloorList.map((item) => {
                const containerLayoutLeftRightMargin =
                  (item.marginLeft || 0) + (item.marginRight || 0)
                const getContainerId = `J_container_${item.containerId}`
                const getContainerStyle = {
                  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,
                }
                item.borderTopLeftRadius &&
                  (getContainerStyle['borderTopLeftRadius'] =
                    `${item.borderTopLeftRadius}px`)
                item.borderTopRightRadius &&
                  (getContainerStyle['borderTopRightRadius'] =
                    `${item.borderTopRightRadius}px`)
                item.borderBottomLeftRadius &&
                  (getContainerStyle['borderBottomLeftRadius'] =
                    `${item.borderBottomLeftRadius}px`)
                item.borderBottomRightRadius &&
                  (getContainerStyle['borderBottomRightRadius'] =
                    `${item.borderBottomRightRadius}px`)
                return (
                  <View
                    className={shopContainerListStyle['d-container-item']}
                    id={getContainerId}
                    key={item.containerId + item.key}
                    style={getContainerStyle}
                  >
                    {item.floors.length > 0 && (
                      <>
                        {item.floors?.map((floorItem, floorIndex) => {
                          return renderFloorItem(
                            item,
                            floorItem,
                            floorIndex,
                            containerLayoutLeftRightMargin,
                          )
                        })}
                      </>
                    )}
                  </View>
                )
              })}
              {getThisSectionTypeListData.index <
                getThisSectionTypeListData.max && (
                <JdLoading localState={true} text="加载中..." />
              )}
              {!hasGoodsFeeds &&
                getThisSectionTypeListData.index >=
                  getThisSectionTypeListData.max &&
                loadingEndComponentFn &&
                loadingEndComponentFn()}
            </>
          )
        ) : (
          <View
            className={shopContainerListStyle['d-container-list-no-data']}
            style={{
              height: `${
                windowHeight -
                actualNavBarHeight -
                MINI_APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT +
                SHOP_TAB_CONTENT_BOTTOM
              }px`,
            }}
          >
            <NetworkDataError
              netWorkShowType={NetWorkShowType.PART}
              netWorkDataType={NETWORK_DATA_TYPE.DATA_ERROR}
              refreshCallBackFn={updateShopFloorDataFn}
            />
          </View>
        )}
      </View>
    )
  }
  return miniScrollSelf ? (
    <ScrollView
      scrollY
      scrollTop={containerFloorListScrollTop}
      className={classNames(
        className,
        shopContainerListStyle['d-shop-container-list'],
      )}
      onScroll={onScrollRecord}
      lowerThreshold={windowHeight / 2}
      onScrollToLower={loadMoreContainerFloorList}
      style={style}
    >
      {tabContentShowState && renderContainerList()}
    </ScrollView>
  ) : (
    <View
      className={classNames(
        className,
        shopContainerListStyle['d-shop-container-list'],
      )}
      style={style}
    >
      {tabContentShowState && renderContainerList()}
    </View>
  )
+import Taro from '@tarojs/taro'
  NETWORK_DATA_TYPE,
  TaroEventType,
  MINI_APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
  SHOP_TAB_CONTENT_BOTTOM,
  listData,
  num = LOAD_FLOOR_BATCH_NUM,
  let thisListData: ComponentInterFace.ContainerItemData[] | [] =
    listData.slice(0)
  const thisListDataLen = thisListData.length
  const res: any[] = []
  if (thisListDataLen) {
    if (thisListDataLen < num) {
      res.push(thisListData)
    } else {
      while (thisListData.length) {
        if (thisListData.length >= num) {
          res.push(thisListData.splice(0, num))
        } else {
          res.push(thisListData)
          thisListData = []
        }
      }
    }
  }
  return res
  containerFloorListData: ComponentInterFace.ContainerItemData[]
  className?: string
  sectionType?: string
  style?: object
  hasGoodsFeeds?: boolean
  miniScrollSelf?: boolean 
  tabContentShowState?: boolean 
  loadingEndComponentFn?: Function
  updateShopFloorDataFn?: Function
  builtInComponents?: Object
  changeScrollToLowerStateFn: Function | null
  changeLayoutScrollToTopFn?: Function
  triggerMiniLoadProductWithFilterFn?: Function
  const { windowHeight, actualNavBarHeight } = taroJdBaseInfo.info.sysInfo
  const {
    className,
    style,
    loadingEndComponentFn,
    hasGoodsFeeds,
    sectionType,
    tabContentShowState,
    containerFloorListData,
    updateShopFloorDataFn,
    changeScrollToLowerStateFn,
    changeLayoutScrollToTopFn,
    triggerMiniLoadProductWithFilterFn,
    builtInComponents,
    miniScrollSelf = false,
  } = props
  const [containerFloorListScrollTop, setContainerFloorListScrollTop] =
    useState(0)
  const loadMoreContainerFloorListDataRef = useRef({
    needFirstLoadState: true, 
    loadingState: false, 
  })
  const isFuncForChangeScrollToLowerStateFn =
    typeof changeScrollToLowerStateFn == 'function'
  const loadSectionTypeContainerFloorListRef = useRef<{
    [key: string]: ComponentInterFace.MiniLoadFloorListRef
  }>({
    [`${sectionType}`]: {
      index: 1,
      itemNum: 0,
      list: [],
      loadList: [], 
      max: 1,
    },
  })
  const [containerFloorList, setContainerFloorList] = useState<
    ComponentInterFace.ContainerItemData[]
  >(() => {
    
    const getLoadDataArr = containerFloorListDataSpliceToPromise(
      containerFloorListData,
    )
    const getThisSectionTypeListData =
      loadSectionTypeContainerFloorListRef.current[`${sectionType}`]
    getThisSectionTypeListData.list = getLoadDataArr
    getThisSectionTypeListData.itemNum = containerFloorListData.length
    getThisSectionTypeListData.max = getLoadDataArr.length
    console.log('获取加载数据总数据----' + sectionType, getLoadDataArr)
    const getThisLoadList = getLoadDataArr.shift()
    if (getThisLoadList) {
      getThisSectionTypeListData.loadList = getThisLoadList
      return getThisLoadList
    } else {
      return []
    }
  })
  useEffect(() => {
    if (containerFloorList.length > 0) {
      Taro.nextTick(() => {
        const getThisSectionTypeListData =
          loadSectionTypeContainerFloorListRef.current[`${sectionType}`]
        console.log(
          `加载${sectionType}中第${getThisSectionTypeListData.index}批次${LOAD_FLOOR_BATCH_NUM}个模块完毕,共计${getThisSectionTypeListData.max}轮，楼层总计${getThisSectionTypeListData.itemNum}`,
        )
        loadMoreContainerFloorListDataRef.current.needFirstLoadState &&
          checkLoadFloorListLoadState().then((needLoadState) => {
            console.log('检查是否需要继续加载状态', needLoadState)
            if (needLoadState) {
              const getThisLoadList = getThisSectionTypeListData.list.shift()
              if (getThisLoadList) {
                getThisSectionTypeListData.index++
                const changeContainerList: ComponentInterFace.ContainerItemData[] =
                  [...getThisSectionTypeListData.loadList, ...getThisLoadList]
                getThisSectionTypeListData.loadList = changeContainerList
                setContainerFloorList(changeContainerList)
              } else {
                Taro.hideLoading()
                loadMoreContainerFloorListDataRef.current.needFirstLoadState =
                  false
              }
            } else {
              Taro.hideLoading()
              loadMoreContainerFloorListDataRef.current.needFirstLoadState =
                false
            }
          })
      })
    }
  }, [containerFloorList])
  
  const checkLoadFloorListLoadState = () => {
    return new Promise((resolve) => {
      Taro.createSelectorQuery()
        .select('#J_shopContainerFloorList')
        .boundingClientRect(function (rect) {
          if (rect) {
            if (rect.height && rect.height < windowHeight + 100) {
              resolve(true)
            } else {
              resolve(false)
            }
          } else {
            resolve(true)
          }
        })
        .exec()
    })
  }
  
  const loadMoreContainerFloorList = (evt: any = false) => {
    const getThisSectionTypeListData =
      loadSectionTypeContainerFloorListRef.current[`${sectionType}`]
    if (
      !loadMoreContainerFloorListDataRef.current.loadingState &&
      getThisSectionTypeListData.list.length > 0
    ) {
      loadMoreContainerFloorListDataRef.current.loadingState = true
      getThisSectionTypeListData.index++
      console.log(
        `当前即将加载${sectionType}中第${getThisSectionTypeListData.index}轮`,
      )
      const getThisLoadList = getThisSectionTypeListData.list.shift()
      if (getThisLoadList) {
        const changeFloorList = [
          ...getThisSectionTypeListData.loadList,
          ...getThisLoadList,
        ]
        getThisSectionTypeListData.loadList = changeFloorList
        loadMoreContainerFloorListDataRef.current.loadingState = false
        isFuncForChangeScrollToLowerStateFn && changeScrollToLowerStateFn(false)
        setContainerFloorList(changeFloorList)
        Taro.nextTick(() => {
          if (getThisSectionTypeListData.list.length == 0) {
            typeof triggerMiniLoadProductWithFilterFn == 'function' &&
              triggerMiniLoadProductWithFilterFn()
          }
        })
      } else {
        isFuncForChangeScrollToLowerStateFn && changeScrollToLowerStateFn(false)
      }
    }
    if (
      miniScrollSelf &&
      evt &&
      !loadMoreContainerFloorListDataRef.current.loadingState &&
      getThisSectionTypeListData.index >= getThisSectionTypeListData.max
    ) {
      pageScrollToLower(evt)
    }
  }
  useEffect(() => {
    if (!miniScrollSelf) {
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL_END, (tabActiveType) => {
        if (tabActiveType == sectionType && tabContentShowState) {
          loadMoreContainerFloorList()
        }
      })
    }
  }, [])
  const pageScrollToLower = useCallback((evt) => {
    console.log('触发滚动底部位置', evt.detail)
    Taro.eventCenter.trigger(TaroEventType.PAGE_SCROLL_END)
  }, [])
  
  const onScrollRecord = (event) => {
    const { detail } = event
    if (detail) {
      taroJdBaseInfo.info.pageInfo.miniScrollInfo = detail
    }
  }
  const renderFloorItem = useCallback(
    (item, floorItem, floorIndex, containerLayoutLeftRightMargin) => {
      return (
        <View
          className={classNames(shopContainerListStyle['d-floor-item'])}
          id={`J_floor_${floorItem?.uid}`}
          key={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}
            changeScrollToLowerStateFn={changeScrollToLowerStateFn}
            key={floorItem.uid}
            changeScrollTopFn={changeContainerFloorListScrollTop}
            builtInComponents={builtInComponents}
          />
        </View>
      )
    },
    [],
  )
  const changeContainerFloorListScrollTop = (top) => {
    if (miniScrollSelf) {
      setContainerFloorListScrollTop(top)
    } else {
      typeof changeLayoutScrollToTopFn == 'function' &&
        changeLayoutScrollToTopFn(top)
    }
  }
  const renderContainerList = () => {
    const listNum = containerFloorList.length || 0
    const getThisSectionTypeListData =
      loadSectionTypeContainerFloorListRef.current[`${sectionType}`]
    return (
      <View id="J_shopContainerFloorList">
        {containerFloorListData && containerFloorListData.length > 0 ? (
          listNum > 0 && (
            <>
              {containerFloorList.map((item) => {
                const containerLayoutLeftRightMargin =
                  (item.marginLeft || 0) + (item.marginRight || 0)
                const getContainerId = `J_container_${item.containerId}`
                const getContainerStyle = {
                  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,
                }
                item.borderTopLeftRadius &&
                  (getContainerStyle['borderTopLeftRadius'] =
                    `${item.borderTopLeftRadius}px`)
                item.borderTopRightRadius &&
                  (getContainerStyle['borderTopRightRadius'] =
                    `${item.borderTopRightRadius}px`)
                item.borderBottomLeftRadius &&
                  (getContainerStyle['borderBottomLeftRadius'] =
                    `${item.borderBottomLeftRadius}px`)
                item.borderBottomRightRadius &&
                  (getContainerStyle['borderBottomRightRadius'] =
                    `${item.borderBottomRightRadius}px`)
                return (
                  <View
                    className={shopContainerListStyle['d-container-item']}
                    id={getContainerId}
                    key={item.containerId + item.key}
                    style={getContainerStyle}
                  >
                    {item.floors.length > 0 && (
                      <>
                        {item.floors?.map((floorItem, floorIndex) => {
                          return renderFloorItem(
                            item,
                            floorItem,
                            floorIndex,
                            containerLayoutLeftRightMargin,
                          )
                        })}
                      </>
                    )}
                  </View>
                )
              })}
              {getThisSectionTypeListData.index <
                getThisSectionTypeListData.max && (
                <JdLoading localState={true} text="加载中..." />
              )}
              {!hasGoodsFeeds &&
                getThisSectionTypeListData.index >=
                  getThisSectionTypeListData.max &&
                loadingEndComponentFn &&
                loadingEndComponentFn()}
            </>
          )
        ) : (
          <View
            className={shopContainerListStyle['d-container-list-no-data']}
            style={{
              height: `${
                windowHeight -
                actualNavBarHeight -
                MINI_APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT +
                SHOP_TAB_CONTENT_BOTTOM
              }px`,
            }}
          >
            <NetworkDataError
              netWorkShowType={NetWorkShowType.PART}
              netWorkDataType={NETWORK_DATA_TYPE.DATA_ERROR}
              refreshCallBackFn={updateShopFloorDataFn}
            />
          </View>
        )}
      </View>
    )
  }
  return miniScrollSelf ? (
    <ScrollView
      scrollY
      scrollTop={containerFloorListScrollTop}
      className={classNames(
        className,
        shopContainerListStyle['d-shop-container-list'],
      )}
      onScroll={onScrollRecord}
      lowerThreshold={windowHeight / 2}
      onScrollToLower={loadMoreContainerFloorList}
      style={style}
    >
      {tabContentShowState && renderContainerList()}
    </ScrollView>
  ) : (
    <View
      className={classNames(
        className,
        shopContainerListStyle['d-shop-container-list'],
      )}
      style={style}
    >
      {tabContentShowState && renderContainerList()}
    </View>
  )