principles-ui-components/UI_Component/ProgressCircle.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, fromJS } from 'immutable';
import { IMAGE_SIZE, FONT_SIZE } from './common/CommonDefine';


export const PROGRESS_CIRCLE_THEME = {
    BLACK: 'BLACK',
    WHITE: 'WHITE',
    HIGHCONTRAST: 'HIGHCONTRAST',
};

export const PROGRESS_CIRCLE_SIZE = {
    LARGE: 'L',
    MEDIUM: 'M',
    SMALL: 'S',
};

const ResourceMap = {
    BLACK: {
        L: 'images/progresscircle/circle_progress_black_l/',
        M: 'images/progresscircle/circle_progress_black_m/',
        S: 'images/progresscircle/circle_progress_black_s/',
    },
    WHITE: {
        L: 'images/progresscircle/circle_progress_l/',
        M: 'images/progresscircle/circle_progress_m/',
        S: 'images/progresscircle/circle_progress_s/',
    },
    HIGHCONTRAST: {
        L: 'images/progresscircle/highcontrast_circle_progress_l/',
        M: 'images/progresscircle/highcontrast_circle_progress_m/',
        S: 'images/progresscircle/highcontrast_circle_progress_s/',
    },
};


const SizeMap = {
    L: IMAGE_SIZE.LARGE,
    M: IMAGE_SIZE.MEDIUM,
    S: IMAGE_SIZE.SMALL,
};

const FontSizeMap = {
    L: FONT_SIZE.LARGE,
    M: FONT_SIZE.MEDIUM,
    S: FONT_SIZE.SMALL,
};

export default class ProgressCircle extends React.Component {

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

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

    componentDidUpdate(prevProps, prevState) {
        // console.error('componentDidUpdate');
    }

    componentWillUnmount() {
    }

    getImage() {
        const { theme, size, progress } = this.props;

        let strProgress;
        if (progress < 10) {
            strProgress = `0${progress}`;
        } else {
            strProgress = progress.toString();
        }

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

    render() {
        const { size, progress, text, fontFamily, fontColor, enlarge } = this.props;
        const Style = {
            position: 'relative',
            width: SizeMap[size],
            height: SizeMap[size],
        };

        const TextStyle = {
            position: 'absolute',
            lineHeight: `${SizeMap[size]}px`,
            fontSize: `${enlarge ? (FontSizeMap[size] * 1.2) : FontSizeMap[size]}px`,
            fontFamily,
            color: fontColor,
            opacity: 1,
            textAlign: 'center',
            top: 0,
            left: 0,
            width: SizeMap[size],
            height: SizeMap[size],
        };

        return (
          <div style={Style} >
            <img src={this.getImage()} />
            <p style={TextStyle}>
              {text}
            </p>
          </div>
        );
    }
}

ProgressCircle.defaultProps = {
    theme: PROGRESS_CIRCLE_THEME.WHITE,
    size: PROGRESS_CIRCLE_SIZE.LARGE,
    fontFamily: 'SamsungOneGui_400',
    fontColor: '#111111',
    text: null,
    enlarge: false,
};

ProgressCircle.propTypes = {
    theme: PropTypes.string,
    size: PropTypes.string,
    fontFamily: PropTypes.string,
    fontColor: PropTypes.string,
    enlarge: PropTypes.bool,
    progress: PropTypes.number.isRequired,
};