principles-ui-components/UI_Component/common/BreathMotion.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/BreathMotion.css';

export default class BreathMotion extends Component {
    constructor(props) {
        super(props);
        this.animationDone = this.animationDone.bind(this);
        this.styles = [
            {
                animationName: '',
                animationDelay: '',
                animationDuration: '0s',
                animationTimingFunction: '',
                transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect.
            },
            {
                animationName: 'breathIn',
                animationDelay: '5s',
                animationDuration: '0.5s',
                animationTimingFunction: AnimationEffect.BreathIn,
                transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect.
            },
            {
                animationName: 'breathOut',
                animationDelay: '0s',
                animationDuration: '0.668s',
                animationTimingFunction: AnimationEffect.BreathOut,
                transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect.
            },
            {
                animationName: 'breathIn',
                animationDelay: '0.083s',
                animationDuration: '0.5s',
                animationTimingFunction: AnimationEffect.BreathIn,
                transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect.
            },
            {
                animationName: 'breathOut',
                animationDelay: '0s',
                animationDuration: '0.668s',
                animationTimingFunction: AnimationEffect.BreathOut,
                transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect.
            }];

        this.state = {
            styleIndex: 0,
        };

        this.animationTimer = null;
        const { doBreath } = props;
        if (doBreath) {
            this.animationTimer = setTimeout(() => {
                this.setState({ styleIndex: 1 });
            }, 10000);
        }
    }

    componentDidMount() {
        // let elem = ReactDOM.findDOMNode(this.refs.motionContent);
        const elem = this.motionContent;
        elem.addEventListener('animationend', this.animationDone, false);
    }


    componentWillReceiveProps(nextProps) {
        if (this.props.doBreath === false && nextProps.doBreath === true) {
            clearTimeout(this.animationTimer);
            this.animationTimer = null;

            this.animationTimer = setTimeout(() => {
                this.animationTimer = null;
                this.setState({ styleIndex: 1 });
            }, 10000);
        } else if (this.props.doBreath === true && nextProps.doBreath === false) {
            if (this.animationTimer) {
                clearTimeout(this.animationTimer);
                this.animationTimer = null;
            }
            this.setState({ styleIndex: 0 });
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return (nextProps.doBreath !== this.props.doBreath) || (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') {
                let index = this.state.styleIndex;
                if (index === 0) {
                    return;
                }
                if (index === 4) {
                    index = 1;
                } else {
                    index += 1;
                }
                this.setState({ styleIndex: index });
            }
        }
    }


    render() {
        const { children } = this.props;
        const { styleIndex } = this.state;
        return (<div style={this.styles[styleIndex]} ref={(motionContent) => { this.motionContent = motionContent; }}>
          {children}
        </div>);
    }
}

BreathMotion.defaultProps = {
    doBreath: false,
};

BreathMotion.propTypes = {
    doBreath: PropTypes.bool.isRequired,
};