principles-ui-components/UI_Component/Loading.js

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

/**
 * @author Xiuliang Li (xiuliang.li@samsung.com)
 * @fileoverview This module manages list item.
 * @date    2017/06/20 (last modified date)
 *
 * Copyright 2017 by Samsung Electronics, Inc.,
 *
 * This software is the confidential and proprietary information
 * of Samsung Electronics, Inc. ("Confidential Information").  You
 * shall not disclose such Confidential Information and shall use
 * it only in accordance with the terms of the license agreement
 * you entered into with Samsung.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { is, Map, fromJS } from 'immutable';

const MAX_NUM = 36;

const ResourceMap = {
    BLACK: {
        L: 'images/loading/loading_blackl/',
        M: 'images/loading/loading_blackm/',
        S: 'images/loading/loading_blacks/',
        XS: 'images/loading/loading_blackxs/',
    },
    WHITE: {
        L: 'images/loading/loading_whitel/',
        M: 'images/loading/loading_whitem/',
        S: 'images/loading/loading_whites/',
        XS: 'images/loading/loading_whitexs/',
    },
};

const SizeMap = {
    XS: 36,
    S: 57,
    M: 86,
    L: 100,
};

export default class Loading extends Component {

    constructor(props) {
        super(props);

        this.state = {
            index: 0,
            display: true,
        };

        this.playLoadingID = null;
    }

    componentDidMount() {
        clearInterval(this.playLoadingID);
        this.playLoadingID = null;

        this.playLoadingID = setInterval(() => {
            if (this.node) {                    // checking if the ref exists before setting the state:
                let idx = this.state.index;
                idx = (idx === (MAX_NUM - 1)) ? 0 : (idx + 1);
                this.setState({ index: idx });
            }
        }, 70);
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return (JSON.stringify(nextProps) !== JSON.stringify(this.props)) || (JSON.stringify(nextState) !== JSON.stringify(this.state));
    }

    componentDidUpdate(prevProps, prevState) {
        if (!prevState.display) {
            if (this.playLoadingID) {
                clearInterval(this.playLoadingID);
                this.playLoadingID = null;
            }
        }
    }

    componentWillUnmount() {
        if (this.playLoadingID) {
            clearInterval(this.playLoadingID);
            this.playLoadingID = null;
        }
    }

    /**
    * show or hide the loading component
    * @name setShowState
    * @method
    * @param  {flag}
    * @memberof
    */
    setShowState(flag) {
        if (this.node) {
            this.setState({ display: flag });
        }
    }

    getThumbnail() {
        const { theme, size } = this.props;
        let idx;
        if (this.state.index < 10) {
            idx = `0${this.state.index}`;
        } else {
            idx = `${this.state.index}`;
        }

        return `${ResourceMap[theme][size]}loading_${theme.toLowerCase()}${size.toLowerCase()}_${idx}.png`;
    }

    render() {
        const { size, theme, OSD } = this.props;
        const dimStyle = {
            position: 'absolute',
            top: OSD.t,
            left: OSD.l,
            width: OSD.w,
            height: OSD.h,
            zIndex: 200,
            backgroundColor: 'rgba(19,29,34,0.4)',
            display: this.state.display ? 'inline' : 'none',
        };

        const loadingStyle = {
            position: 'absolute',
            top: (OSD.h - SizeMap[size]) / 2,
            left: (OSD.w - SizeMap[size]) / 2,
            width: SizeMap[size],
            height: SizeMap[size],
            zIndex: 300,
        };

        return (
          <div ref={(node) => { this.node = node; }} style={dimStyle} >
            <img style={loadingStyle} src={this.getThumbnail()} />
          </div>
        );
    }
}

Loading.defaultProps = {
    theme: 'BLACK',
    size: 'L',
    OSD: {
        l: 0,
        t: 0,
        w: 1920,
        h: 1080,
    },
};

Loading.propTypes = {
    theme: PropTypes.oneOf(['WHITE', 'BLACK']),
    size: PropTypes.oneOf(['XS', 'S', 'M', 'L']),
    OSD: PropTypes.shape({
        l: PropTypes.number,
        t: PropTypes.number,
        w: PropTypes.number,
        h: PropTypes.number,
    }),
};