principles-ui-components/UI_Component/common/PressFeedback.js

Supporting UI controller for Tizen TV web application, which developed base on React Framework.

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,
};