office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
59 lines • 3 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, customizable, } from '../../Utilities';
var getClassNames = classNamesFunction();
// if the percentComplete is near 0, don't animate it.
// This prevents animations on reset to 0 scenarios
var ZERO_THRESHOLD = 0.01;
/**
* ProgressIndicator with no default styles.
* [Use the `getStyles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling)
*/
var ProgressIndicatorBase = /** @class */ (function (_super) {
tslib_1.__extends(ProgressIndicatorBase, _super);
function ProgressIndicatorBase(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
title: 'label'
});
return _this;
}
ProgressIndicatorBase.prototype.render = function () {
var _a = this.props, ariaValueText = _a.ariaValueText, barHeight = _a.barHeight, className = _a.className, description = _a.description, getStyles = _a.getStyles, theme = _a.theme, title = _a.title;
var _b = this.props, label = _b.label, percentComplete = _b.percentComplete;
var classNames = getClassNames(getStyles, {
theme: theme,
className: className,
barHeight: barHeight,
indeterminate: percentComplete === undefined ? true : false,
});
// Handle deprecated value.
if (title) {
label = title;
}
if (this.props.percentComplete !== undefined) {
percentComplete = Math.min(100, Math.max(0, percentComplete * 100));
}
var progressBarStyles = {
width: percentComplete !== undefined ? percentComplete + '%' : undefined,
transition: (percentComplete !== undefined && percentComplete < ZERO_THRESHOLD) ? 'none' : undefined,
};
return (React.createElement("div", { className: classNames.root },
React.createElement("div", { className: classNames.itemName }, label),
React.createElement("div", { className: classNames.itemProgress },
React.createElement("div", { className: classNames.progressTrack }),
React.createElement("div", { className: classNames.progressBar, style: progressBarStyles, role: 'progressbar', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.floor(percentComplete), "aria-valuetext": ariaValueText })),
React.createElement("div", { className: classNames.itemDescription }, description)));
};
ProgressIndicatorBase.defaultProps = {
label: '',
description: '',
width: 180
};
ProgressIndicatorBase = tslib_1.__decorate([
customizable('ProgressIndicator', ['theme'])
], ProgressIndicatorBase);
return ProgressIndicatorBase;
}(BaseComponent));
export { ProgressIndicatorBase };
//# sourceMappingURL=ProgressIndicator.base.js.map