All files / UI_Component/common PressFeedback.js

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
87
88
89
90
91
92
93
 
 
 
 
 
 
 
 
 
113x
113x
113x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113x
113x
 
 
 
 
 
113x
113x
 
 
 
163x
163x
6x
3x
3x
1x
2x
1x
 
 
157x
 
163x
 
 
 
164x
 
 
 
7x
7x
7x
6x
5x
4x
 
 
 
 
 
 
 
277x
277x
554x
 
 
 
 
 
3x
 
 
 
 
3x
 
 
 
 
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { is, Map } from 'immutable';
import ReactDOM from 'react-dom';
import { AnimationEffect } from './CommonDefine';
import '../css/PressFeedback.css';
 
export default class PressFeedback extends Component {
    constructor(props) {
        super(props);
        this.animationDone = this.animationDone.bind(this);
        this.styles = [
            {
                animationName: '',
                animationDelay: '',
                animationDuration: '0s',
                animationTimingFunction: '',
            },
            {
                animationName: 'pressFeedback',
                animationDelay: '0s',
                animationDuration: '0.581s',
                animationTimingFunction: AnimationEffect.Basic,
            },
            {
                animationName: 'pressFeedback1',
                animationDelay: '0s',
                animationDuration: '0.581s',
                animationTimingFunction: AnimationEffect.Basic,
            }];
        const { start } = props;
        this.state = {
            styleIndex: start ? 1 : 0,
        };
    }
    componentDidMount() {
        // let elem = ReactDOM.findDOMNode(this.refs.motionContent);
        const elem = this.motionContent;
        elem.addEventListener('animationend', this.animationDone, false);
    }
 
    componentWillReceiveProps(nextProps) {
        let value = 0;
        if (nextProps.start) {
            if (this.state.styleIndex === 0) {
                value = 1;
            } else if (this.state.styleIndex === 1) {
                value = 2;
            } else if (this.state.styleIndex === 2) {
                value = 1;
            }
        } else {
            value = 0;
        }
        this.setState({ styleIndex: value });
    }
 
    shouldComponentUpdate(nextProps, nextState) {
        return (nextProps.start !== this.props.start) || (nextProps.children !== this.props.children) || (nextState.styleIndex !== this.state.styleIndex);
    }
 
    animationDone(e) {
        e.preventDefault();
        const target = e.target;
        if (target === e.currentTarget) {
            if (e.type === 'animationend') {
                if (this.props.animationDoneCB && typeof this.props.animationDoneCB === 'function') {
                    this.props.animationDoneCB();
                }
            }
        }
    }
 
 
    render() {
        const { children } = this.props;
        const { styleIndex } = this.state;
        return (<div style={this.styles[styleIndex]} ref={(motionContent) => { this.motionContent = motionContent; }}>
          {children}
        </div>);
    }
}
 
PressFeedback.defaultProps = {
    start: false,
    animationDoneCB: null,
};
 
PressFeedback.propTypes = {
    start: PropTypes.bool.isRequired,
    animationDoneCB: PropTypes.func,
};