jiti-meet/react/features/overlay/components/ReloadTimer.js

167 lines
4.3 KiB
JavaScript
Raw Normal View History

2017-02-19 00:42:11 +00:00
import React, { Component } from 'react';
2017-03-01 02:55:12 +00:00
import { translate } from '../../base/i18n';
2017-02-19 00:42:11 +00:00
declare var AJS: Object;
/**
* Implements a React Component for the reload timer. Starts counter from
* props.start, adds props.step to the current value on every props.interval
* seconds until the current value reaches props.end. Also displays progress
* bar.
*/
class ReloadTimer extends Component {
2017-02-19 00:42:11 +00:00
/**
* ReloadTimer component's property types.
*
* @static
*/
static propTypes = {
/**
* The end of the timer. When this.state.current reaches this value the
* timer will stop and call onFinish function.
*
* @public
* @type {number}
*/
end: React.PropTypes.number,
/**
* The interval in sec for adding this.state.step to this.state.current.
*
* @public
* @type {number}
*/
interval: React.PropTypes.number,
/**
* The function that will be executed when timer finish (when
* this.state.current === this.props.end)
*/
onFinish: React.PropTypes.func,
/**
* The start of the timer. The initial value for this.state.current.
*
* @public
* @type {number}
*/
start: React.PropTypes.number,
/**
* The value which will be added to this.state.current on every step.
*
* @public
* @type {number}
*/
step: React.PropTypes.number,
/**
2017-03-01 02:55:12 +00:00
* The function to translate human-readable text.
*
* @public
2017-03-01 02:55:12 +00:00
* @type {Function}
*/
t: React.PropTypes.func
};
2017-02-19 00:42:11 +00:00
/**
* Initializes a new ReloadTimer instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
* @public
*/
constructor(props) {
super(props);
this.state = {
2017-02-22 18:57:07 +00:00
/**
* Current value(time) of the timer.
*
* @type {number}
*/
2017-02-19 00:42:11 +00:00
current: this.props.start,
2017-02-22 18:57:07 +00:00
/**
* The absolute value of the time from the start of the timer until
* the end of the timer.
*
* @type {number}
*/
2017-02-19 00:42:11 +00:00
time: Math.abs(this.props.end - this.props.start)
};
}
/**
* React Component method that executes once component is mounted.
*
* @inheritdoc
* @returns {void}
* @protected
*/
componentDidMount() {
AJS.progressBars.update('#reloadProgressBar', 0);
const intervalId
= setInterval(
2017-06-15 00:40:51 +00:00
() => {
if (this.state.current === this.props.end) {
clearInterval(intervalId);
this.props.onFinish();
} else {
this.setState((prevState, props) => {
return {
current: prevState.current + props.step
};
});
}
},
Math.abs(this.props.interval) * 1000);
2017-02-19 00:42:11 +00:00
}
/**
* React Component method that executes once component is updated.
*
* @inheritdoc
* @returns {void}
* @protected
*/
componentDidUpdate() {
AJS.progressBars.update(
2017-06-15 00:40:51 +00:00
'#reloadProgressBar',
Math.abs(this.state.current - this.props.start) / this.state.time);
2017-02-19 00:42:11 +00:00
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement|null}
* @public
*/
render() {
const { t } = this.props;
2017-02-19 00:42:11 +00:00
return (
<div>
<div
className = 'aui-progress-indicator'
id = 'reloadProgressBar'>
<span className = 'aui-progress-indicator-value' />
</div>
2017-02-22 18:57:07 +00:00
<span className = 'reload_overlay_text'>
2017-02-19 00:42:11 +00:00
{
this.state.current
}
<span>
{ t('dialog.conferenceReloadTimeLeft') }
</span>
2017-02-19 00:42:11 +00:00
</span>
</div>
);
}
}
export default translate(ReloadTimer);