@up-group-ui/react-controls
Version:
Up shared react controls
80 lines • 4.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpRating = exports.getStarFill = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var _ = (0, tslib_1.__importStar)(require("lodash"));
var typestyle_1 = require("typestyle");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var theming_1 = (0, tslib_1.__importStar)(require("../../../Common/theming"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var eventListener_1 = require("../../../Common/utils/eventListener");
var styles_1 = require("./styles");
var getStarFill = function (current, number, rating, max) {
var numberByStar = (1 / number) * 100;
var valeurMin = (current - 1) * numberByStar;
var valeurMax = current * numberByStar;
var ratingLevel = Math.ceil((rating / max) * 100);
if (ratingLevel >= valeurMax) {
return 'full';
}
else if (ratingLevel > valeurMin) {
return 'half';
}
return 'empty';
};
exports.getStarFill = getStarFill;
var UpRating = (function (_super) {
(0, tslib_1.__extends)(UpRating, _super);
function UpRating(props, context) {
var _this = _super.call(this, props, context) || this;
_this.isControlled = function () { return _this.props.value !== undefined; };
_this.getValue = function () { return (_this.isControlled() ? _this.props.value : _this.state.value); };
_this.setEditedValue = function (index) {
if (!_this.props.disabled) {
_this.setState({ editedValue: _this.computeValue(index) });
}
};
_this.unsetEditedValue = function () {
if (!_this.props.disabled) {
_.throttle(function () { return _this.setState({ editedValue: null }); }, 500);
}
};
_this.validEditedValue = function (index) {
if (!_this.props.disabled) {
var newValue_1 = _this.computeValue(index);
_this.setState({ value: newValue_1 }, function () {
if (_this.props.onChange) {
_this.props.onChange((0, eventListener_1.eventFactory)(_this.props.name, newValue_1), newValue_1);
}
});
}
};
_this.computeValue = function (index) {
return index * Math.floor(_this.props.max / _this.props.numberOfStars);
};
_this.state = {
editedValue: null,
value: props.value,
};
return _this;
}
UpRating.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, value = _a.value, numberOfStars = _a.numberOfStars, max = _a.max, dataFor = _a.dataFor, theme = _a.theme, onChange = _a.onChange, rest = (0, tslib_1.__rest)(_a, ["className", "value", "numberOfStars", "max", "dataFor", "theme", "onChange"]);
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)((0, styles_1.RatingWrapperStyle)(this.props), className, 'up-rating'), "data-for": dataFor, "data-tip": 'tooltip' }, rest, { children: Array(numberOfStars)
.fill(0)
.map(function (element, index) {
var fillMode = (0, exports.getStarFill)(index + 1, numberOfStars, _this.state.editedValue != null ? _this.state.editedValue : value, max);
return ((0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ onMouseOver: _this.setEditedValue.bind(_this, index + 1), onMouseOut: _this.unsetEditedValue.bind(_this, index + 1), onClick: _this.validEditedValue.bind(_this, index + 1) }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: fillMode == 'empty' ? 'star-outline' : 'star-filled', className: (0, classnames_1.default)('up-star', (0, typestyle_1.style)((0, styles_1.CommonStartCSS)(_this.props))) }, index) }), index));
}) }), void 0));
};
UpRating.defaultProps = {
theme: theming_1.default,
};
return UpRating;
}(react_1.default.PureComponent));
exports.UpRating = UpRating;
exports.default = (0, theming_1.withTheme)(UpRating);
//# sourceMappingURL=UpRating.js.map