Blame view

LoadingFooter.js 1.44 KB
75c87a8d   张志伟   init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
  /**
   * Author: Shi(bolan0000@icloud.com)
   * Date: 2019/1/18
   * Copyright (c) 2018, AoTang, Inc.
   *
   * Description:
   */
  
  import React from 'react';
  import {Animated, Text} from 'react-native';
  
  export class LoadingFooter extends React.Component<FooterPropType, FooterStateType> {
    static height = 80;
  
    static style = 'stickyContent';
  
    constructor(props: FooterPropType) {
      super(props);
      this.state = {status: props.allLoaded ? 'allLoaded' : 'waiting'};
    }
  
    static getDerivedStateFromProps(nextProps: FooterPropType) {
      if (nextProps.allLoaded) return {status: 'allLoaded'};
      return {};
    }
  
    changeToState(newStatus: FooterStatus) {
      !this.props.allLoaded &&
        this.state.status !== newStatus &&
        this.onStateChange(this.state.status, newStatus);
    }
  
    onStateChange(oldStatus: FooterStatus, newStatus: FooterStatus) {
      this.setState({status: newStatus});
    }
  
    render() {
      return (
        <Text
          style={{
            flex: 1,
            alignSelf: 'center',
            lineHeight: this.props.maxHeight,
            textAlign: 'center',
          }}>
          {this.state.status}
        </Text>
      );
    }
  }
  
  export type FooterStatus =
    | 'waiting'
    | 'dragging'
    | 'draggingEnough'
    | 'draggingCancel'
    | 'loading'
    | 'rebound'
    | 'allLoaded';
  
  interface FooterPropType {
    offset?: Animated.Value;
    maxHeight?: number;
    allLoaded?: boolean;
    bottomOffset?: number;
  }
  
  interface FooterStateType {
    status?: FooterStatus;
  }