Dingdong_app/components/ListComponentParent.js

/* eslint-disable no-console */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-underscore-dangle */
import * as React from "react";
import { Divider, List, Layout } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
// import { useModel } from "flooks";
import { useBoolean, useCreation } from "@umijs/hooks";
import EmptyComponent from "./EmptyComponent";

export default function ListComponent(props) {
  const loading = useBoolean();
  const refreshing = useBoolean();

  const {
    dataList,
    getInfo,
    renderItem,
    ListHeaderComponent,
    style,
    separatorStyle,
    ListFooterComponent,
    showEmpty,
    showList,
    extraData,
    initialNumToRender,
  } = props;

  function getList() {
    if (getInfo != null) {
      return getInfo();
    }
    return Promise.reject();
  }

  // 刷新接口
  function onRefresh() {
    refreshing.setTrue();

    getList().finally(() => {
      refreshing.setFalse();
    });
  }

  // 到页面底部加载更多
  function gotEnd() {
    loading.setTrue();
    getList().finally(() => {
      loading.setFalse();
    });
  }

  useFocusEffect(
    React.useCallback(() => {
      onRefresh();
    }, [])
  );

  const showdataList = useCreation(() => {
    const returnList = [];
    if (!refreshing.state) {
      dataList.forEach(value => {
        returnList.push(value);
        if (value.children.length > 0) {
          returnList.push(
            value.children.map((item, index) => {
              return { ...item, childIndex: index };
            })
          );
        }
      });
    }
    return [
      ...returnList.flat().map(item => {
        if (item.amount != null) {
          item.amount = item.amount.toString();
        }
        return item;
      }),
    ];
  }, [dataList, refreshing.state]);

  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.state]);

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