office-ui-fabric-react/lib-amd/components/Rating/Rating.js

Reusable React components for building experiences for Office 365.

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", "react", "./Rating.Props", "../../common/BaseComponent", "../../utilities/object", "../../utilities/css", "./Rating.scss"], function (require, exports, React, Rating_Props_1, BaseComponent_1, object_1, css_1) {
    "use strict";
    var Rating = (function (_super) {
        __extends(Rating, _super);
        function Rating(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                rating: _this._getInitialValue(props),
                focusedRating: null
            };
            _this._id = object_1.getId('Rating');
            _this._labelId = object_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: css_1.css('ms-Rating', this.props.className, {
                    'ms-Rating--large': this.props.size === Rating_Props_1.RatingSize.Large
                }), role: 'application' },
                React.createElement("div", { className: 'ms-Rating-container', role: 'radiogroup', "aria-labelledby": this.props.ariaLabelId }, stars));
        };
        Rating.prototype._renderStar = function (rating) {
            var inputId = this._id + "-" + rating;
            return React.createElement("div", { className: css_1.css('ms-Rating-star', {
                    'is-selected': rating <= this.state.rating,
                    'is-inFocus': rating === this.state.focusedRating,
                    'is-disabled': this.props.disabled
                }), key: rating },
                React.createElement("input", { className: 'ms-Rating-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: 'ms-Rating-label', htmlFor: inputId },
                    this._getLabel(rating),
                    this._getIcon()));
        };
        Rating.prototype._onFocus = function (value, ev) {
            this.setState({
                focusedRating: value
            });
        };
        Rating.prototype._onBlur = function (option, ev) {
            this.setState({
                focusedRating: null
            });
        };
        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: 'ms-Rating-labelText' }, rating + " " + text);
        };
        Rating.prototype._getIcon = function () {
            return React.createElement("i", { className: css_1.css('ms-Icon', this.props.icon || 'ms-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);
        };
        return Rating;
    }(BaseComponent_1.BaseComponent));
    Rating.defaultProps = {
        min: 1,
        max: 5
    };
    exports.Rating = Rating;
});

//# sourceMappingURL=Rating.js.map