@coreui/react-pro
Version:
UI Components Library for React.js
132 lines (129 loc) • 6.67 kB
JavaScript
import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useId, useEffect, Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../node_modules/classnames/index.js';
import { CTooltip } from '../tooltip/CTooltip.js';
var CConditionalTooltip = function (_a) {
var children = _a.children, content = _a.content, tooltip = _a.tooltip;
return tooltip ? (React.createElement(CTooltip, { content: content },
React.createElement("span", null, children))) : (children);
};
var CRating = forwardRef(function (_a, ref) {
var _b;
var activeIcon = _a.activeIcon, allowClear = _a.allowClear, className = _a.className, disabled = _a.disabled, highlightOnlySelected = _a.highlightOnlySelected, icon = _a.icon, _c = _a.itemCount, itemCount = _c === void 0 ? 5 : _c, name = _a.name, onChange = _a.onChange, onHover = _a.onHover, _d = _a.precision, precision = _d === void 0 ? 1 : _d, readOnly = _a.readOnly, size = _a.size, tooltips = _a.tooltips, value = _a.value, rest = __rest(_a, ["activeIcon", "allowClear", "className", "disabled", "highlightOnlySelected", "icon", "itemCount", "name", "onChange", "onHover", "precision", "readOnly", "size", "tooltips", "value"]);
var _e = useState(false), cleared = _e[0], setCleared = _e[1];
var _f = useState(value !== null && value !== void 0 ? value : null), currentValue = _f[0], setCurrentValue = _f[1];
var _g = useState(null), hoverValue = _g[0], setHoverValue = _g[1];
var _h = useState(null), tooltipValue = _h[0], setTooltipValue = _h[1];
var _name = name || useId();
useEffect(function () {
value !== undefined && setCurrentValue(value);
}, [value]);
var handleMouseEnter = function (value) {
if (disabled || readOnly) {
return;
}
onHover && onHover(value);
setHoverValue(value);
value && setTooltipValue(value);
};
var handleMouseLeave = function () {
if (disabled || readOnly) {
return;
}
onHover && onHover(null);
setHoverValue(null);
};
var handleOnChange = function (value) {
if (disabled || readOnly) {
return;
}
if (cleared) {
setCleared(false);
return;
}
setCurrentValue(value);
onChange && onChange(value);
};
var handleOnClick = function (value) {
if (disabled || readOnly) {
return;
}
if (allowClear && value === currentValue) {
setCleared(true);
onChange && onChange(null);
setCurrentValue(null);
setHoverValue(null);
}
};
return (React.createElement("div", __assign({ className: classNames('rating', (_b = {},
_b["rating-".concat(size)] = size,
_b.disabled = disabled,
_b.readonly = readOnly,
_b), className), role: "radiogroup" }, rest, { ref: ref }), Array.from({ length: itemCount }, function (_, index) {
var numberOfRadios = 1 / precision;
return (React.createElement(CConditionalTooltip, __assign({ key: index }, (tooltips && {
content: Array.isArray(tooltips)
? tooltips[index]
: precision
? tooltipValue
: index + 1,
tooltip: true,
})),
React.createElement("div", { className: "rating-item" }, Array.from({ length: numberOfRadios }, function (_, _index) {
var _a, _b;
var isNotLastItem = _index + 1 < numberOfRadios;
var value = numberOfRadios === 1 ? index + 1 : index + (_index + 1) * (1 * precision);
var id = useId();
var isItemChecked = function () { return value === currentValue; };
var isItemActive = function () {
if (highlightOnlySelected
? hoverValue === value
: hoverValue && hoverValue >= value) {
return true;
}
if (hoverValue === null &&
(highlightOnlySelected
? isItemChecked()
: currentValue && currentValue >= value)) {
return true;
}
return false;
};
return (React.createElement(Fragment, { key: value },
React.createElement("label", __assign({ className: classNames('rating-item-label', {
active: isItemActive(),
}), htmlFor: id, onClick: function () { return handleOnClick(value); }, onMouseEnter: function () { return handleMouseEnter(value); }, onMouseLeave: function () { return handleMouseLeave(); } }, (isNotLastItem && {
style: {
zIndex: 1 / precision - _index,
position: 'absolute',
width: "".concat(precision * (_index + 1) * 100, "%"),
overflow: 'hidden',
opacity: 0,
},
})),
icon ? (React.createElement("div", { className: "rating-item-custom-icon" }, (_a = icon[value]) !== null && _a !== void 0 ? _a : icon)) : (React.createElement("div", { className: "rating-item-icon" })),
activeIcon && (React.createElement("div", { className: "rating-item-custom-icon-active" }, (_b = activeIcon[value]) !== null && _b !== void 0 ? _b : activeIcon))),
React.createElement("input", { className: "rating-item-input", checked: isItemChecked(), disabled: disabled || readOnly, id: id, name: _name, onBlur: function () { return handleMouseLeave(); }, onChange: function () { return handleOnChange(value); }, onFocus: function () { return handleMouseEnter(value); }, type: "radio", value: value })));
}))));
})));
});
CRating.propTypes = {
children: PropTypes.node,
activeIcon: PropTypes.any,
allowClear: PropTypes.bool,
disabled: PropTypes.bool,
highlightOnlySelected: PropTypes.bool,
icon: PropTypes.any,
itemCount: PropTypes.number,
name: PropTypes.string,
onChange: PropTypes.func,
onHover: PropTypes.func,
precision: PropTypes.number,
readOnly: PropTypes.bool,
size: PropTypes.oneOf(['sm', 'lg', 'custom']),
value: PropTypes.number,
};
CRating.displayName = 'CRating';
export { CRating };
//# sourceMappingURL=CRating.js.map