@react-native-ohos/pull-to-refresh/src/PullToRefresh/index.ts

A react-native PullToRefresh component.

import React from 'react';
import {StyleSheet} from 'react-native';
import {PullToRefreshFooterProps, PullToRefreshHeaderProps, PullToRefreshProps} from '../types';
import {DefaultPullToRefreshFooter} from '../Footer';
import {DefaultPullToRefreshHeader} from '../Header';
import {NativePullToRefresh} from './native';

export class PullToRefresh extends React.Component<PullToRefreshProps> {
  private static DefaultHeader: React.ComponentType<PullToRefreshHeaderProps> =
    DefaultPullToRefreshHeader;
  private static DefaultFooter: React.ComponentType<PullToRefreshFooterProps> =
    DefaultPullToRefreshFooter;

  static setDefaultHeader(Header: React.ComponentType<PullToRefreshHeaderProps>) {
    PullToRefresh.DefaultHeader = Header ?? DefaultPullToRefreshHeader;
  }

  static setDefaultFooter(Footer: React.ComponentType<PullToRefreshFooterProps>) {
    PullToRefresh.DefaultFooter = Footer ?? DefaultPullToRefreshFooter;
  }

  renderHeader() {
    const {onRefresh, refreshing, header} = this.props;

    if (header) {
      return header;
    }

    if (onRefresh) {
      return React.createElement(
        PullToRefresh.DefaultHeader, 
        { onRefresh, refreshing: !!refreshing }
      );
    }

    return null;
  }

  renderFooter() {
    const {onLoadMore, loadingMore, noMoreData, footer} = this.props;
    if (footer) {
      return footer;
    }
    if (onLoadMore) {
      return React.createElement(
        PullToRefresh.DefaultFooter,
        {
          onRefresh: onLoadMore,
          refreshing: !!loadingMore,
          noMoreData: noMoreData
        }
      );
    }

    return null;
  }

  render() {
    const { children, style } = this.props;
    
    return React.createElement(
      NativePullToRefresh,
      { 
        style: [styles.fill, style] 
      },
      // 子元素列表
      this.renderHeader(),
      children,
      this.renderFooter()
    );
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1,
  },
});