Blame view

天文台pc/tianwentai-ui/node_modules/react-smooth/src/AnimateGroupChild.js 2.02 KB
bc518174   王天杨   提交两个项目文件
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
  import React, { Component, Children } from 'react';
  import { Transition } from 'react-transition-group';
  import PropTypes from 'prop-types';
  import Animate from './Animate';
  
  const parseDurationOfSingleTransition = (options = {}) => {
    const { steps, duration } = options;
  
    if (steps && steps.length) {
      return steps.reduce(
        (result, entry) => result + (Number.isFinite(entry.duration) && entry.duration > 0 ? entry.duration : 0),
        0,
      );
    }
  
    if (Number.isFinite(duration)) {
      return duration;
    }
  
    return 0;
  };
  
  class AnimateGroupChild extends Component {
    constructor() {
      super();
      this.state = {
        isActive: false,
      };
    }
  
    handleStyleActive(style) {
      if (style) {
        const onAnimationEnd = style.onAnimationEnd
          ? () => {
              style.onAnimationEnd();
            }
          : null;
  
        this.setState({
          ...style,
          onAnimationEnd,
          isActive: true,
        });
      }
    }
  
    handleEnter = (node, isAppearing) => {
      const { appearOptions, enterOptions } = this.props;
  
      this.handleStyleActive(isAppearing ? appearOptions : enterOptions);
    };
  
    handleExit = () => {
      const { leaveOptions } = this.props;
      this.handleStyleActive(leaveOptions);
    };
  
    parseTimeout() {
      const { appearOptions, enterOptions, leaveOptions } = this.props;
  
      return (
        parseDurationOfSingleTransition(appearOptions) +
        parseDurationOfSingleTransition(enterOptions) +
        parseDurationOfSingleTransition(leaveOptions)
      );
    }
  
    render() {
      const { children, appearOptions, enterOptions, leaveOptions, ...props } = this.props;
  
      return (
        <Transition {...props} onEnter={this.handleEnter} onExit={this.handleExit} timeout={this.parseTimeout()}>
          {() => <Animate {...this.state}>{Children.only(children)}</Animate>}
        </Transition>
      );
    }
  }
  
  AnimateGroupChild.propTypes = {
    appearOptions: PropTypes.object,
    enterOptions: PropTypes.object,
    leaveOptions: PropTypes.object,
    children: PropTypes.element,
  };
  
  export default AnimateGroupChild;