chowa
Version:
UI component library based on React
135 lines (134 loc) • 4.5 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classNames = require("classnames");
const utils_1 = require("../utils");
const _nprogress_1 = require("./$nprogress");
class Nprogress extends React.PureComponent {
constructor(props) {
super(props);
this.timer = null;
this.state = {
visible: false,
percentage: 0
};
this.onTransitionEndHandler = this.onTransitionEndHandler.bind(this);
}
start() {
const { visible } = this.state;
if (visible) {
return;
}
this.setState({
visible: true,
percentage: 0
});
const { trickleSpeed } = this.props;
this.timer = window.setInterval(() => {
const { percentage } = this.state;
if (percentage === 1) {
return this.done();
}
this.set(percentage + Math.random() / 50);
}, trickleSpeed);
}
done() {
this.setState({ percentage: 1 });
if (this.timer !== null) {
clearInterval(this.timer);
this.timer = null;
}
}
set(percent) {
if (!this.state.visible) {
this.start();
}
const { minimum } = this.props;
if (percent < minimum) {
percent = minimum;
}
if (percent > 0.99) {
percent = 0.99;
}
this.setState({ percentage: percent });
}
inc() {
const { visible, percentage } = this.state;
if (!visible) {
return this.start();
}
let amount = 0;
if (percentage >= 0 && percentage < 0.2) {
amount = 0.1;
}
else if (percentage >= 0.2 && percentage < 0.5) {
amount = 0.04;
}
else if (percentage >= 0.5 && percentage < 0.8) {
amount = 0.02;
}
else if (percentage >= 0.8 && percentage < 0.99) {
amount = 0.005;
}
this.set(percentage + amount);
}
onTransitionEndHandler(e) {
if (e.target !== e.currentTarget) {
return;
}
if (this.state.percentage === 1) {
this.setState({
visible: false
}, () => {
if (this.props.onHide) {
this.props.onHide();
}
});
}
}
render() {
const { className, style, showSpinner, trickleSpeed, trickleEffect } = this.props;
const { percentage, visible } = this.state;
const componentClass = classNames({
[utils_1.preClass('nprogress')]: true,
[className]: utils_1.isExist(className)
});
const componentStyle = Object.assign(Object.assign({}, (utils_1.isExist(style) ? style : {})), { display: visible ? 'block' : 'none' });
const barStyle = {
transform: `translate3d(-${(1 - percentage) * 100}%, 0px, 0px)`,
transition: `all ${trickleSpeed / 1000}s ${trickleEffect}`
};
return (React.createElement("div", { className: componentClass, style: componentStyle },
React.createElement("div", { className: utils_1.preClass('nprogress-bar'), style: barStyle, onTransitionEnd: this.onTransitionEndHandler },
React.createElement("div", { className: utils_1.preClass('nprogress-shadow') })),
showSpinner &&
React.createElement("div", { className: utils_1.preClass('nprogress-spinner-wrapper') },
React.createElement("span", { className: utils_1.preClass('nprogress-spinner') }))));
}
}
Nprogress.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
trickleSpeed: PropTypes.number,
trickleEffect: PropTypes.oneOf(['ease-in', 'ease-in-out', 'linear', 'ease', 'ease-out']),
minimum: PropTypes.number,
showSpinner: PropTypes.bool,
onHide: PropTypes.func
};
Nprogress.defaultProps = {
trickleSpeed: 500,
trickleEffect: 'linear',
minimum: 0.08,
showSpinner: true
};
Nprogress.$nprogress = _nprogress_1.default;
exports.default = Nprogress;