office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
101 lines • 5.09 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../Icon", "./Rating.Props", "./Rating.scss"], function (require, exports, tslib_1, React, Utilities_1, Icon_1, Rating_Props_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var Rating = (function (_super) {
tslib_1.__extends(Rating, _super);
function Rating(props) {
var _this = _super.call(this, props) || this;
_this.state = {
rating: _this._getInitialValue(props),
focusedRating: null
};
_this._id = Utilities_1.getId('Rating');
_this._labelId = Utilities_1.getId('RatingLabel');
return _this;
}
Rating.prototype.componentWillReceiveProps = function (nextProps) {
if (typeof nextProps.rating !== 'undefined' && nextProps.rating !== this.state.rating) {
this.setState({
rating: this._getClampedRating(nextProps.rating)
});
}
};
Rating.prototype.render = function () {
var stars = [];
for (var i = this.props.min; i <= this.props.max; ++i) {
stars.push(this._renderStar(i));
}
return React.createElement("div", { className: Utilities_1.css('ms-Rating', this.props.className, (_a = {},
_a['ms-Rating--large ' + styles.rootIsLarge] = this.props.size === Rating_Props_1.RatingSize.Large,
_a)), role: 'application' },
React.createElement("div", { className: Utilities_1.css('ms-Rating-container', styles.container), role: 'radiogroup', "aria-labelledby": this.props.ariaLabelId }, stars));
var _a;
};
Rating.prototype._renderStar = function (rating) {
var inputId = this._id + "-" + rating;
return React.createElement("div", { className: Utilities_1.css('ms-Rating-star', styles.star, (_a = {},
_a['is-selected ' + styles.starIsSelected] = rating <= this.state.rating,
_a['is-inFocus ' + styles.starIsInFocus] = rating === this.state.focusedRating,
_a['is-disabled ' + styles.starIsDisabled] = this.props.disabled,
_a)), key: rating },
React.createElement("input", { className: Utilities_1.css('ms-Rating-input', styles.input), type: 'radio', name: this._id, id: inputId, value: rating, "aria-labelledby": this._labelId + "-" + rating, disabled: this.props.disabled, checked: rating === this.state.rating, onChange: this._onChange.bind(this, rating), onFocus: this._onFocus.bind(this, rating), onBlur: this._onBlur.bind(this, rating) }),
React.createElement("label", { className: Utilities_1.css('ms-Rating-label', styles.label), htmlFor: inputId },
this._getLabel(rating),
this._getIcon()));
var _a;
};
Rating.prototype._onFocus = function (value, ev) {
this.setState({
focusedRating: value
});
if (this.props.onFocus) {
this.props.onFocus(ev);
}
};
Rating.prototype._onBlur = function (option, ev) {
this.setState({
focusedRating: null
});
if (this.props.onBlur) {
this.props.onBlur(ev);
}
};
Rating.prototype._onChange = function (rating, evt) {
this.setState({
rating: rating
});
var onChanged = this.props.onChanged;
if (onChanged) {
onChanged(rating);
}
};
Rating.prototype._getLabel = function (rating) {
var text = this.props.ariaLabelIcon || 'Star';
return (React.createElement("span", { id: this._labelId + "-" + rating, className: Utilities_1.css('ms-Rating-labelText', styles.labelText) }, rating + " " + text));
};
Rating.prototype._getIcon = function () {
return React.createElement(Icon_1.Icon, { iconName: this.props.icon || 'favoriteStarFill' });
};
Rating.prototype._getInitialValue = function (props) {
if (typeof props.rating === 'undefined') {
return props.min;
}
if (props.rating === null) {
return null;
}
return this._getClampedRating(props.rating);
};
Rating.prototype._getClampedRating = function (rating) {
rating = Math.floor(rating);
return Math.min(Math.max(rating, this.props.min), this.props.max);
};
Rating.defaultProps = {
min: 1,
max: 5
};
return Rating;
}(Utilities_1.BaseComponent));
exports.Rating = Rating;
});
//# sourceMappingURL=Rating.js.map