office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
74 lines • 5.21 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Rating", "../../../Styling", "./Rating.Basic.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, Rating_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RatingBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(RatingBasicExample, _super);
function RatingBasicExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
largeStarRating: undefined,
smallStarRating: 3,
tenStarRating: undefined,
themedStarRating: undefined
};
_this._customTheme = Styling_1.createTheme(Styling_1.getTheme());
_this._customTheme.semanticColors.bodySubtext = '#DFDFDF';
_this._customTheme.semanticColors.bodyTextChecked = '#1E9FE8';
return _this;
}
// tslint:disable:jsx-no-lambda
RatingBasicExample.prototype.render = function () {
return (React.createElement("div", { className: 'ms-RatingBasicExample' },
"Large Stars:",
React.createElement(Rating_1.Rating, { id: 'largeRatingStar', min: 1, max: 5, size: Rating_1.RatingSize.Large, rating: this.state.largeStarRating, getAriaLabel: this._getRatingComponentAriaLabel, onChanged: this._onLargeStarChanged, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected' }),
"Small Stars",
React.createElement(Rating_1.Rating, { id: 'smallRatingStar', min: 1, max: 5, rating: this.state.smallStarRating, onChanged: this._onSmallStarChanged, getAriaLabel: this._getRatingComponentAriaLabel, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected' }),
"10 Small Stars",
React.createElement(Rating_1.Rating, { id: 'tenRatingStar', min: 1, max: 10, rating: this.state.tenStarRating, onChanged: this._onTenStarChanged, getAriaLabel: this._getRatingComponentAriaLabel, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected' }),
"Disabled:",
React.createElement(Rating_1.Rating, { min: 1, max: 5, rating: this.state.rating, disabled: true, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected' }),
"Half star in readOnly mode:",
React.createElement(Rating_1.Rating, { id: 'readOnlyRatingStar', min: 1, max: 5, rating: 2.5, getAriaLabel: this._getRatingComponentAriaLabel, readOnly: true, ariaLabelFormat: '{0} of {1} stars selected' }),
"Themed star",
React.createElement(Rating_1.Rating, { id: 'themedRatingStar', min: 1, max: 5, rating: this.state.themedStarRating, onChanged: this._onThemedStarChanged, getAriaLabel: this._getRatingComponentAriaLabel, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected', theme: this._customTheme })));
};
RatingBasicExample.prototype._onLargeStarChanged = function (rating) {
this.setState({
largeStarRating: rating
});
};
RatingBasicExample.prototype._onSmallStarChanged = function (rating) {
this.setState({
smallStarRating: rating
});
};
RatingBasicExample.prototype._onTenStarChanged = function (rating) {
this.setState({
tenStarRating: rating
});
};
RatingBasicExample.prototype._onThemedStarChanged = function (rating) {
this.setState({
themedStarRating: rating
});
};
RatingBasicExample.prototype._getRatingComponentAriaLabel = function (rating, maxRating) {
return 'Rating value is ' + rating + ' of ' + maxRating;
};
tslib_1.__decorate([
Utilities_1.autobind
], RatingBasicExample.prototype, "_onLargeStarChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], RatingBasicExample.prototype, "_onSmallStarChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], RatingBasicExample.prototype, "_onTenStarChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], RatingBasicExample.prototype, "_onThemedStarChanged", null);
return RatingBasicExample;
}(React.Component));
exports.RatingBasicExample = RatingBasicExample;
});
//# sourceMappingURL=Rating.Basic.Example.js.map