principles-ui-components
Version:
Supporting UI controller for Tizen TV web application, which developed base on React Framework.
241 lines (212 loc) • 9.06 kB
JavaScript
/**
* @author Haipeng Zhang(hp.zhang@samsung.com)
* @fileoverview This module manages progress bar.
* @date 2017/06/16 (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';
import { AnimationEffect } from './common/CommonDefine';
/* ProgressBar Define */
export const ProgressBarLength = 1360;
export const ProgressDuration = 16.567 / 1127.4;
const ResourceMap = {
NORMAL: 'images/progressbar/c_progressbar_white_buffering.png',
HIGHCONTRAST: 'images/progressbar/c_progressbar_highcontrast_buffering.png',
};
export default class ProgressBar extends React.Component {
constructor(props) {
super(props);
this.state = {
movePx: 0,
time: 0,
bufferingOpacity: 0,
};
this.animationDone = this.animationDone.bind(this);
this.startTimer = null;
this.barHeight = props.highContarstValue ? 6 : 3;
}
componentDidMount() {
const elem = this.buffering;
elem.removeEventListener('transitionend', this.animationDone, false);
elem.addEventListener('transitionend', this.animationDone, false);
if (this.state.movePx === 0 && this.props.progressRate === 100 && this.props.bufferingShowValue) {
this.clearTimer();
this.setTimer();
}
}
componentWillReceiveProps(nextProps) {
this.barHeight = nextProps.highContarstValue ? 6 : 3;
}
shouldComponentUpdate(nextProps, nextState) {
return (JSON.stringify(nextProps) !== JSON.stringify(this.props)) || (JSON.stringify(nextState) !== JSON.stringify(this.state));
}
componentDidUpdate() {
if (this.state.movePx === 0 && this.props.progressRate === 100 && this.props.bufferingShowValue) {
this.clearTimer();
this.setTimer();
}
}
componentWillUnmount() {
const elem = this.buffering;
elem.removeEventListener('transitionend', this.animationDone, false);
this.clearTimer();
}
/**
* set timer of progress bar
* @name setTimer
* @method
* @memberof
* @param
*/
setTimer() {
const { duration, bgWidth } = this.props;
this.startTimer = setTimeout(() => {
this.setState({ movePx: (ProgressBarLength - bgWidth), time: (ProgressDuration * (ProgressBarLength - bgWidth)), bufferingOpacity: 1 });
}, duration);// The timeout applies as 1 sec.
}
animationDone(e) {
e.preventDefault();
const target = e.target;
if (target === e.currentTarget) {
if (e.type === 'transitionend') {
this.setState({ movePx: 0, time: 0 });
}
}
}
/**
* clear timer of progress bar
* @name clearTimer
* @method
* @memberof
* @param
*/
clearTimer() {
if (this.startTimer) {
clearTimeout(this.startTimer);
this.startTimer = null;
}
}
render() {
const { left, top, bgWidth, bgColor, bgOpacity, barColor, barOpacity, highContarstValue,
highContarstBgColor, highContarstBarColor, transAnimation, progressRate } = this.props;
// Normal style,highContarstValue=false
const bgOpacityStyle = {
opacity: !this.state.bufferingOpacity,
};
const bgStyle = {
position: 'absolute',
width: bgWidth,
height: this.barHeight,
backgroundColor: bgColor,
opacity: bgOpacity,
zIndex: 10,
};
const barWidth = (progressRate >= 0 && progressRate <= 100) ? Math.floor((progressRate / 100) * bgWidth) : 0;
const barStyle = {
position: 'absolute',
width: barWidth,
height: this.barHeight,
backgroundColor: barColor,
opacity: barOpacity,
// transition: transAnimation,
zIndex: 20,
};
// HighContrast style, highContarstValue=true
const highContrastBgStyle = {
position: 'absolute',
width: bgWidth,
height: this.barHeight,
backgroundColor: highContarstBgColor,
opacity: bgOpacity,
zIndex: 10,
};
const highContrastBarStyle = {
position: 'absolute',
width: barWidth,
height: this.barHeight,
backgroundColor: highContarstBarColor,
opacity: barOpacity,
// transition: transAnimation,
zIndex: 20,
};
const imgOpacityStyle = {
position: 'relative',
overflow: 'hidden',
width: bgWidth,
height: this.barHeight,
zIndex: 50,
opacity: this.state.bufferingOpacity,
};
const imgPosStyle = {
position: 'absolute',
width: ProgressBarLength,
height: this.barHeight,
left: bgWidth - ProgressBarLength,
};
const imgAniStyle = {
transform: `translateX(${this.state.movePx}px) translateZ(100px)`,
transition: `all ${this.state.time}s ${AnimationEffect.Basic}`,
};
const imgSrc = highContarstValue ? ResourceMap.HIGHCONTRAST : ResourceMap.NORMAL;
const posStyle = {
position: 'absolute',
left,
top,
display: (progressRate >= 0 && progressRate <= 100) ? 'inline' : 'none',
overflow: 'hidden',
};
return (
<div ref={(node) => { this.node = node; }} style={posStyle}>
<div style={bgOpacityStyle}>
<div style={(highContarstValue) ? highContrastBgStyle : bgStyle} />
<div style={(highContarstValue) ? highContrastBarStyle : barStyle} />
</div>
<div style={imgOpacityStyle}>
<div style={imgAniStyle} ref={(buffering) => { this.buffering = buffering; }}>
<img src={imgSrc} style={imgPosStyle} />
</div>
</div>
</div>
);
}
}
ProgressBar.propTypes = {
left: PropTypes.number, // Background left of progress control
top: PropTypes.number, // Background top of progress control
bgWidth: PropTypes.number.isRequired, // Background width of progress control
bgColor: PropTypes.string, // Background color of progress control
bgOpacity: PropTypes.string, // Background opacity of progress control
barColor: PropTypes.string, // Color of progress bar
barOpacity: PropTypes.string, // Opacity of progress bar
highContarstValue: PropTypes.bool, // HighContarst flag,it should be true or false
highContarstBgColor: PropTypes.string, // HighContarst background color
highContarstBarColor: PropTypes.string, // HighContarst background color of progress bar
bufferingShowValue: PropTypes.bool, // Buffering png show flag, it should be true or false
duration: PropTypes.number, // Start value of progress bar
// transAnimation: PropTypes.string, // Transition value
progressRate: PropTypes.number,
};
ProgressBar.defaultProps = {
left: 0, // Background left of progress control
top: 0, // Background top of progress control
bgColor: '#60696e', // Background color of progress control
bgOpacity: '0.6', // Background opacity of progress control
barColor: '#0d0d0d', // Color of progress bar
barOpacity: '1', // Opacity of progress bar
highContarstValue: false, // HighContarst flag,it should be true or false
highContarstBgColor: '#ffffff', // HighContarst background color
highContarstBarColor: '#ffff00', // HighContarst background color of progress bar
bufferingShowValue: false, // Buffering png show flag, it should be true or false
duration: 1000, // Start value of progress bar
// transAnimation: `0.07s ${AnimationEffect.Basic}`, // Transition value
progressRate: -1, // progress,[0~100], -1: hide
};