@coreui/react-pro/dist/esm/components/rating/CRating.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useId, useEffect, Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CTooltip } from '../tooltip/CTooltip.js';

const CConditionalTooltip = ({ children, content, tooltip, }) => {
    return tooltip ? (React.createElement(CTooltip, { content: content },
        React.createElement("span", null, children))) : (children);
};
const CRating = forwardRef((_a, ref) => {
    var { activeIcon, allowClear, className, disabled, highlightOnlySelected, icon, itemCount = 5, name, onChange, onHover, precision = 1, readOnly, size, tooltips, value } = _a, rest = __rest(_a, ["activeIcon", "allowClear", "className", "disabled", "highlightOnlySelected", "icon", "itemCount", "name", "onChange", "onHover", "precision", "readOnly", "size", "tooltips", "value"]);
    const [cleared, setCleared] = useState(false);
    const [currentValue, setCurrentValue] = useState(value !== null && value !== void 0 ? value : null);
    const [hoverValue, setHoverValue] = useState(null);
    const [tooltipValue, setTooltipValue] = useState(null);
    const _name = name || useId();
    useEffect(() => {
        value !== undefined && setCurrentValue(value);
    }, [value]);
    const handleMouseEnter = (value) => {
        if (disabled || readOnly) {
            return;
        }
        onHover && onHover(value);
        setHoverValue(value);
        value && setTooltipValue(value);
    };
    const handleMouseLeave = () => {
        if (disabled || readOnly) {
            return;
        }
        onHover && onHover(null);
        setHoverValue(null);
    };
    const handleOnChange = (value) => {
        if (disabled || readOnly) {
            return;
        }
        if (cleared) {
            setCleared(false);
            return;
        }
        setCurrentValue(value);
        onChange && onChange(value);
    };
    const handleOnClick = (value) => {
        if (disabled || readOnly) {
            return;
        }
        if (allowClear && value === currentValue) {
            setCleared(true);
            onChange && onChange(null);
            setCurrentValue(null);
            setHoverValue(null);
        }
    };
    return (React.createElement("div", Object.assign({ className: classNames('rating', {
            [`rating-${size}`]: size,
            disabled: disabled,
            readonly: readOnly,
        }, className), role: "radiogroup" }, rest, { ref: ref }), Array.from({ length: itemCount }, (_, index) => {
        const numberOfRadios = 1 / precision;
        return (React.createElement(CConditionalTooltip, Object.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 }, (_, _index) => {
                var _a, _b;
                const isNotLastItem = _index + 1 < numberOfRadios;
                const value = numberOfRadios === 1 ? index + 1 : index + (_index + 1) * (1 * precision);
                const id = useId();
                const isItemChecked = () => value === currentValue;
                const isItemActive = () => {
                    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", Object.assign({ className: classNames('rating-item-label', {
                            active: isItemActive(),
                        }), htmlFor: id, onClick: () => handleOnClick(value), onMouseEnter: () => handleMouseEnter(value), onMouseLeave: () => handleMouseLeave() }, (isNotLastItem && {
                        style: {
                            zIndex: 1 / precision - _index,
                            position: 'absolute',
                            width: `${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: () => handleMouseLeave(), onChange: () => handleOnChange(value), onFocus: () => 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