@heycar-uikit/core/review-rating/modern/ReviewRating.js

The React UI library from HeyCar

import React, { useEffect } from 'react';
import { v4 } from 'uuid';
import { useReviewRating } from './hooks/useReviewRating.js';
import { getParsedScore, getPositionData } from './utils/reviewRatingHelpers.js';
import { ARROW_START_DEG, MAX_SCORE, MAX_CIRCLE_POINT, DONUT_DASH_LENGTH } from './constants/ReviewRating.constants.js';

var styles = {"wrapper":"review-rating__wrapper_1l51k","xs":"review-rating__xs_1l51k","arrow":"review-rating__arrow_1l51k","plainCircle":"review-rating__plainCircle_1l51k","completeScore":"review-rating__completeScore_1l51k","score":"review-rating__score_1l51k","max":"review-rating__max_1l51k","scoreCircle":"review-rating__scoreCircle_1l51k","scoreCircleTrack":"review-rating__scoreCircleTrack_1l51k","s":"review-rating__s_1l51k","m":"review-rating__m_1l51k","l":"review-rating__l_1l51k","background":"review-rating__background_1l51k","donut":"review-rating__donut_1l51k","active":"review-rating__active_1l51k"};
 require('./styles/default.css');

/* eslint-disable react-hooks/exhaustive-deps */
const ReviewRating = React.forwardRef(({ className, score = 0, size = 'S', dataTestId, ...restProps }, ref) => {
    const elementId = restProps.id || `rr-${v4()}`;
    delete restProps.id;
    const { isVisible, setIntersectionObserver } = useReviewRating();
    const parsedScore = getParsedScore(score);
    const { arrowRotation, donutStrokeLength } = getPositionData(parsedScore);
    useEffect(() => {
        setIntersectionObserver(elementId);
    }, [setIntersectionObserver]);
    return (React.createElement("div", { "aria-label": "Rating", className: `${styles[size.toLowerCase()]} ${styles.wrapper} ${className}`, "data-test-id": dataTestId, id: elementId, ref: ref, ...restProps },
        React.createElement("svg", { className: styles.background, fill: "none", viewBox: "0 0 176 177", xmlns: "http://www.w3.org/2000/svg" },
            React.createElement("circle", { cx: "88", cy: "88.75", fill: `url(#lg_${elementId})`, r: "88" }),
            React.createElement("defs", null,
                React.createElement("linearGradient", { gradientUnits: "userSpaceOnUse", id: `lg_${elementId}`, x1: "44", x2: "143", y1: "16.4643", y2: "165.75" },
                    React.createElement("stop", { stopColor: "#F3F3F3" }),
                    React.createElement("stop", { offset: "1", stopColor: "white" })))),
        React.createElement("svg", { className: styles.arrow, fill: "none", height: "12", style: isVisible
                ? { transform: `rotate(${ARROW_START_DEG + arrowRotation}deg)` }
                : {}, viewBox: "0 0 12 12", width: "12", xmlns: "http://www.w3.org/2000/svg" },
            React.createElement("path", { d: "M0.408276 11.5864L11.7165 10.8571L6.69399 0.699226L0.408276 11.5864Z", fill: "#164CA3" })),
        React.createElement("div", { "aria-label": `${parsedScore} / ${MAX_SCORE}`, className: styles.plainCircle },
            React.createElement("span", { className: styles.completeScore },
                React.createElement("span", { className: styles.score }, parsedScore),
                React.createElement("span", { className: styles.max }, `/${MAX_SCORE}`))),
        React.createElement("svg", { className: styles.donut, key: `donut-${size}`, viewBox: "0 0 42 42" },
            React.createElement("circle", { className: `${styles.scoreCircleTrack}`, cx: "21", cy: "21", fill: "transparent", r: "17", strokeLinecap: "round", style: {
                    strokeDasharray: `${MAX_CIRCLE_POINT}, ${DONUT_DASH_LENGTH}`,
                } }),
            React.createElement("circle", { className: `${styles.scoreCircle} ${isVisible ? styles.active : ''}`, cx: "21", cy: "21", fill: "transparent", r: "17", strokeLinecap: "round", style: {
                    strokeDasharray: `${isVisible ? donutStrokeLength : '0'}, ${DONUT_DASH_LENGTH}`,
                } }))));
});
ReviewRating.displayName = 'ReviewRating';

export { ReviewRating as default };