office-ui-fabric-react/lib-es2015/components/Rating/Rating.base.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, css, customizable, format, getId } from '../../Utilities';
import { Icon } from '../../Icon';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { RatingSize } from './Rating.types';
var getClassNames = classNamesFunction();
var RatingStar = function (props) { return (React.createElement("div", { className: props.classNames.ratingStar, key: props.id },
    React.createElement(Icon, { className: props.classNames.ratingStarBack, iconName: 'FavoriteStarFill' }),
    !props.disabled &&
        React.createElement(Icon, { className: props.classNames.ratingStarFront, iconName: 'FavoriteStarFill', style: { width: props.fillPercentage + '%' } }))); };
var RatingBase = /** @class */ (function (_super) {
    tslib_1.__extends(RatingBase, _super);
    function RatingBase(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            rating: _this._getInitialValue(props)
        };
        _this._id = getId('Rating');
        _this._labelId = getId('RatingLabel');
        return _this;
    }
    RatingBase.prototype.componentWillReceiveProps = function (nextProps) {
        if (typeof nextProps.rating !== 'undefined' && nextProps.rating !== this.state.rating) {
            this.setState({
                rating: this._getClampedRating(nextProps.rating)
            });
        }
    };
    RatingBase.prototype.render = function () {
        var id = this._id;
        var stars = [];
        var starIds = [];
        var _a = this.props, disabled = _a.disabled, getAriaLabel = _a.getAriaLabel, getStyles = _a.getStyles, max = _a.max, min = _a.min, rating = _a.rating, readOnly = _a.readOnly, size = _a.size, theme = _a.theme;
        this._classNames = getClassNames(getStyles, {
            disabled: disabled,
            theme: theme
        });
        for (var i = min; i <= max; i++) {
            var ratingStarProps = {
                fillPercentage: this._getFillingPercentage(i),
                disabled: disabled ? true : false,
                classNames: this._classNames
            };
            starIds.push(this._getStarId(i - 1));
            stars.push(React.createElement("button", tslib_1.__assign({ className: css(this._classNames.ratingButton, (_b = {},
                    _b[this._classNames.rootIsLarge] = size === RatingSize.Large,
                    _b[this._classNames.rootIsSmall] = size !== RatingSize.Large,
                    _b)), id: starIds[i - 1], key: i }, ((i === Math.ceil(this.state.rating)) ? { 'data-is-current': true } : {}), { onFocus: this._onFocus.bind(this, i), disabled: disabled || readOnly ? true : false, role: 'presentation', type: 'button' }),
                this._getLabel(i),
                React.createElement(RatingStar, tslib_1.__assign({ key: i + 'rating' }, ratingStarProps))));
        }
        return (React.createElement("div", { className: 'ms-Rating-star', "aria-label": getAriaLabel ? getAriaLabel(this.state.rating ? this.state.rating : 0, this.props.max) : '', id: id },
            React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, tabIndex: readOnly ? 0 : -1, className: this._classNames.ratingFocusZone, "data-is-focusable": readOnly ? true : false, defaultActiveElement: rating ? starIds[rating - 1] && '#' + starIds[rating - 1] : undefined }, stars)));
        var _b;
    };
    RatingBase.prototype._getStarId = function (index) {
        return this._id + '-star-' + index;
    };
    RatingBase.prototype._onFocus = function (value, ev) {
        this.setState({
            rating: value
        });
        var onChanged = this.props.onChanged;
        if (onChanged) {
            onChanged(value);
        }
    };
    RatingBase.prototype._getLabel = function (rating) {
        var text = this.props.ariaLabelFormat || '';
        return (React.createElement("span", { id: this._labelId + "-" + rating, className: this._classNames.labelText }, format(text, rating, this.props.max)));
    };
    RatingBase.prototype._getInitialValue = function (props) {
        if (typeof props.rating === 'undefined') {
            return props.min;
        }
        if (props.rating === null) {
            return null;
        }
        return this._getClampedRating(props.rating);
    };
    RatingBase.prototype._getClampedRating = function (rating) {
        return Math.min(Math.max(rating, this.props.min), this.props.max);
    };
    RatingBase.prototype._getFillingPercentage = function (starPosition) {
        var ceilValue = Math.ceil(this.state.rating);
        var fillPercentage = 100;
        if (starPosition === this.state.rating) {
            fillPercentage = 100;
        }
        else if (starPosition === ceilValue) {
            fillPercentage = 100 * (this.state.rating % 1);
        }
        else if (starPosition > ceilValue) {
            fillPercentage = 0;
        }
        return fillPercentage;
    };
    RatingBase.defaultProps = {
        min: 1,
        max: 5
    };
    RatingBase = tslib_1.__decorate([
        customizable('Rating', ['theme', 'getStyles'])
    ], RatingBase);
    return RatingBase;
}(BaseComponent));
export { RatingBase };
//# sourceMappingURL=Rating.base.js.map