import BScroll from '@better-scroll/core'
import { BScrollConstructor } from '@better-scroll/core/dist/types/BScroll'
import ObserveDOM from '@better-scroll/observe-dom'
import MouseWheel from '@better-scroll/mouse-wheel'
import ScrollBar from '@better-scroll/scroll-bar'
import PullDown from '@better-scroll/pull-down'
import Pullup from '@better-scroll/pull-up'
 
export interface ScrollProps {
  wrapHeight: string;
  prop?: any;
  onPullup?: Function;
  onPulldown?: Function;
}
 
const Scroll: React.FC<ScrollProps> = ({  
  wrapHeight,
  prop,
  onPullup,
  onPulldown,
  children,}) => {
  BScroll.use(ObserveDOM)
  BScroll.use(MouseWheel)
  BScroll.use(ScrollBar)
  BScroll.use(PullDown)
  BScroll.use(Pullup)
 
 // ...
 
  return (
    <div className="scroll-warpper" ref={wrapRef} style={{ height: wrapHeight, overflow: 'hidden' }}>
      <div className="scroll-content">
        {children}
      </div>
    </div>
  )
}
 
export default Scroll

//  外層的wrap實(shí)例
const wrapRef = useRef<HTMLDivElement>(null)
 
//  記錄Better-scroll是否實(shí)例化，為后續(xù)掛載下拉刷新和上拉加載做準(zhǔn)備
const initRef = useRef(false)
 
//  存儲(chǔ)better-scroll的實(shí)例
const [scrollObj, setscrollObj] = useState<BScrollConstructor>()
 
//  better-scroll的配置參數(shù)
const initBScroll = () => {
  setscrollObj(
    new BScroll(wrapRef.current as HTMLDivElement, {
      //probeType 為 3，任何時(shí)候都派發(fā) scroll 事件，包括調(diào)用 scrollTo 或者觸發(fā) momentum 滾動(dòng)動(dòng)畫(huà)
      probetype: 3,
      //  可以使用原生的點(diǎn)擊
      click: true,
      //  檢測(cè)dom變化
      observeDOM: true,
      //  鼠標(biāo)滾輪設(shè)置
      mouseWheel: {
        speed: 20,
        invert: false,
        easeTime: 300
      },
      //  顯示滾動(dòng)條
      scrollY: true,
      scrollbar: true,
      //  過(guò)度動(dòng)畫(huà), 在下載更多的時(shí)候滾動(dòng)條會(huì)有個(gè)過(guò)度動(dòng)畫(huà)
      useTransition: true,
      //  下拉刷新
      pullDownRefresh: {
        threshold: 70,
        stop: 0
      },
      //  上拉加載更多
      pullUpLoad: {
        threshold: 90,
        stop: 10
      }
    })
  )
}

//  對(duì)象初始化
useEffect(() => {
  initBScroll()
  return () => {
    //  組件卸載時(shí)記得將其銷毀
    scrollObj?.destroy()
  }
}, [])
 
//  下拉刷新
const pulldown = async () => {
  onPulldown && (await onPulldown())
  setTimeout(() => {
    //  記得使用finishPullDown，不然你只能下拉一次
    scrollObj?.finishPullDown()
    //  下拉之后你的content會(huì)發(fā)生變化，如果不使用refresh，你需要滑動(dòng)一下才能刷新content的高度
    scrollObj?.refresh()
  }, 500)
}
 
//  上拉加載
const pullup = async () => {
  onPullup && (await onPullup())
  setTimeout(() => {
    scrollObj?.finishPullUp()
    scrollObj?.refresh()
  }, 500)
}
 
//  對(duì)象事件掛載
useEffect(() => {
  if (initRef.current === true) {
    //  下拉刷新
    //  每次更新都需要先把之前的pullingDown事件清除，不然會(huì)累加
    scrollObj?.off("pullingDown");
    scrollObj?.once("pullingDown", pulldown);
 
    //  上拉加載
    //  每次更新都需要先把之前的pullingUp事件清除，不然會(huì)累加
    scrollObj?.off("pullingUp");
    scrollObj?.once("pullingUp", pullup);
  } else {
    initRef.current = true;
  }
  //  為什么監(jiān)聽(tīng)prop是因?yàn)檫@邊監(jiān)聽(tīng)不到外面的state變化
  //  handlePullUp的[...state, ...res.data]中的state會(huì)中始終為一開(kāi)始的[]
}, [prop]);

import React, { CSSProperties, useEffect, useState, useCallback } from "react";
import Scroll from "./scroll";
import axios, { Method } from "axios";
 
export interface TestProps {}
 
interface ResponseType {
  code: number;
  data: any;
}
 
const Test: React.FC<TestProps> = () => {
  const style: CSSProperties = {
    width: "500px",
  };
 
  const request = (url: string, method: Method): Promise<ResponseType> => {
    return new Promise((resolve, reject) => {
      const options = {
        url,
        method,
      };
      axios(options)
        .then((res) => {
          const data = res.data as ResponseType;
          resolve(data);
        })
        .catch((err) => reject(err));
    });
  };
 
  const getData = () => request("/api/datasource", "GET");
 
  const getMore = () => request("/api/abc", "GET");
 
  const [state, setstate] = useState<any[]>([]);
 
  // 一開(kāi)始拉取數(shù)據(jù)
  useEffect(() => {
    (async function () {
      const res = await getData();
      console.log(res);
      res.code === 0 && setstate(res.data);
    })();
  }, []);
 
  const handlePullUp = useCallback(async () => {
    const res = await getMore();
    res.code === 0 && setstate(state.concat(res.data));
  }, [state]);
 
  async function handlePullDown() {
    const res = await getData();
    res.code === 0 && setstate(res.data);
  }
 
  return (
    <div style={style}>
      <Scroll
        wrapHeight="300px"
        prop={state}
        onPullup={handlePullUp}
        onPulldown={handlePullDown}
      >
        {state.map((item, idx) =>
          idx % 2 === 0 ? (
            <div key={idx} style={{ height: "200px", background: "red" }}>
              {item}
            </div>
          ) : (
            <div key={idx} style={{ height: "200px", background: "green" }}>
              {item}
            </div>
          )
        )}
      </Scroll>
    </div>
  );
};
export default Test;