Dingdong_app/components/ListComponent.js

/* eslint-disable no-console */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-underscore-dangle */
import React from "react";
import { Divider, List, Layout } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import { useModel } from "flooks";
import { initDataState, DataListReducer } from "../Redux/DataListRedux";
import EmptyComponent from "./EmptyComponent";

export default function ListComponent(props) {
  const { clearLoading } = useModel("loadingModel");
  const [state, dispatch] = React.useReducer(DataListReducer, initDataState);
  const { page, size, loading, refreshing, dataList } = state;
  const {
    getInfo,
    renderItem,
    ListHeaderComponent,
    style,
    separatorStyle,
    ListFooterComponent,
    showEmpty,
    emptyEvent,
    showList,
    extraData,
    delId,
    startState, // 父级调刷新
    initialNumToRender,
    saveList, // 保持状态
    list$,
  } = props;

  function setList(newList) {
    dispatch({
      type: "setInfo",
      payload: { list: newList, finish: true },
    });
  }

  if (list$) {
    list$.useSubscription(info => {
      const list = [...dataList];
      let newList = [];
      newList = info.changeEvent(list, info.list, info.type, info.extra);
      setList(newList);
    });
  }

  function getList() {
    if (getInfo != null) {
      return getInfo(page, size).then(res => {
        if (emptyEvent) {
          if (res.numberOfElements === 0) {
            emptyEvent(true);
          } else {
            emptyEvent(false);
          }
        }

        dispatch({
          type: "setInfo",
          payload: { list: res.content, finish: res.last },
        });
      });
    }
    return Promise.reject();
  }

  React.useEffect(() => {
    if (delId) {
      const list = [...dataList];
      const Index = list.findIndex(item => {
        return item.id === delId;
      });
      if (Index !== -1) {
        dispatch({
          type: "remove",
          payload: { index: Index },
        });
      }
    }
  }, [delId]);

  // 刷新接口
  function onRefresh() {
    dispatch({ type: "startRefresh" });

    getList()
      .then(() => {
        dispatch({ type: "refreshSuccess" });
      })
      .catch(e => {
        dispatch({
          type: "refreshError",
          payload: { error: e.message },
        });
      })
      .finally(() => {
        clearLoading();
      });
  }

  // 到页面底部加载更多
  function gotEnd() {
    dispatch({ type: "startPageMore" });
    getList()
      .then(() => {
        dispatch({ type: "pageMoreSuccess" });
      })
      .catch(e => {
        dispatch({
          type: "pageMoreError",
          payload: { error: e.message },
        });
      })
      .finally(() => {
        clearLoading();
      });
  }

  useFocusEffect(
    React.useCallback(() => {
      if (saveList !== true) {
        dispatch({
          type: "clear",
        });
      }
      if (startState !== false) {
        onRefresh();
      }
    }, [])
  );
  React.useEffect(() => {
    if (startState) {
      onRefresh();
    }
  }, [startState]);

  const changePorps = React.useMemo(() => {
    let _props = { renderItem: () => <Layout /> };
    if (showList !== false) {
      _props = { renderItem };

      if (extraData) {
        _props = {
          ..._props,
          extraData,
        };
      }
    }
    return _props;
  }, [showList, extraData]);

  const ListEmptyComponent = React.useMemo(() => {
    if (showEmpty && !refreshing && !loading) {
      return EmptyComponent;
    }
    return <></>;
  }, [showEmpty, refreshing, loading]);

  return (
    <List
      refreshing={refreshing}
      style={[style]}
      data={dataList}
      removeClippedSubviews
      initialNumToRender={initialNumToRender || 10}
      ListHeaderComponent={ListHeaderComponent}
      ListEmptyComponent={ListEmptyComponent}
      onRefresh={onRefresh}
      onEndReached={0.2}
      ItemSeparatorComponent={() => <Divider style={[separatorStyle]} />}
      onEndReachedThreshold={gotEnd}
      ListFooterComponent={ListFooterComponent}
      {...changePorps}
    />
  );
}