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

Reusable React components for building experiences for Office 365.

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
            });
        };
        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: 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);
        };
        return Rating;
    }(Utilities_1.BaseComponent));
    Rating.defaultProps = {
        min: 1,
        max: 5
    };
    exports.Rating = Rating;
});

//# sourceMappingURL=Rating.js.map