office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
127 lines • 6.38 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, css, 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._warnDeprecations({
onChanged: 'onChange'
});
_this._id = getId('Rating');
_this._min = _this.props.allowZeroStars ? 0 : 1;
if (_this.props.min !== undefined && _this.props.min !== 1) {
_this._min = _this.props.min;
}
_this._labelId = getId('RatingLabel');
_this.state = {
rating: _this._getInitialValue(props)
};
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, styles = _a.styles, max = _a.max, rating = _a.rating, readOnly = _a.readOnly, size = _a.size, theme = _a.theme;
this._classNames = getClassNames(styles, {
disabled: disabled,
readOnly: readOnly,
theme: theme
});
for (var i = this._min; i <= max; i++) {
if (i !== 0) {
var ratingStarProps = {
fillPercentage: this._getFillingPercentage(i),
disabled: disabled ? true : false,
readOnly: readOnly ? 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.ratingStarIsLarge] = size === RatingSize.Large,
_b[this._classNames.ratingStarIsSmall] = 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), onClick: 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: css('ms-Rating-star', this._classNames.root, (_c = {},
_c[this._classNames.rootIsLarge] = size === RatingSize.Large,
_c[this._classNames.rootIsSmall] = size !== RatingSize.Large,
_c)), "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: css(this._classNames.ratingFocusZone, (_d = {},
_d[this._classNames.rootIsLarge] = size === RatingSize.Large,
_d[this._classNames.rootIsSmall] = size !== RatingSize.Large,
_d)), "data-is-focusable": readOnly ? true : false, defaultActiveElement: rating ? starIds[rating - 1] && '#' + starIds[rating - 1] : undefined }, stars)));
var _b, _c, _d;
};
RatingBase.prototype._getStarId = function (index) {
return this._id + '-star-' + index;
};
RatingBase.prototype._onFocus = function (value, ev) {
if (this.state.rating !== value) {
this.setState({
rating: value
});
var _a = this.props, onChange = _a.onChange, onChanged = _a.onChanged;
if (onChange) {
onChange(ev, value);
}
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 this._min;
}
if (props.rating === null) {
return undefined;
}
return this._getClampedRating(props.rating);
};
RatingBase.prototype._getClampedRating = function (rating) {
return Math.min(Math.max(rating, this._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
};
return RatingBase;
}(BaseComponent));
export { RatingBase };
//# sourceMappingURL=Rating.base.js.map