@wix/design-system
Version:
@wix/design-system
19 lines • 1.35 kB
JavaScript
import React from 'react';
import { st, classes } from './StarsRatingBar.st.css.js';
import { dataHooks, starValues } from '../constants';
import { StarFilled } from '@wix/wix-ui-icons-common';
import semanticClassNames from '../StarsRatingBar.semanticClassNames';
import { getRatingLabel, getStarSizePx } from '../utils/common';
export const ReadOnlyStarsRatingBar = (props) => {
const { dataHook, className, value = 0 } = props;
const sizePx = getStarSizePx(props);
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, { readOnly: true }, className) },
React.createElement("div", { role: "img", "aria-label": getRatingLabel(props, value), className: classes.starsContainer }, starValues.map(starValue => {
const filled = value >= starValue;
return (React.createElement("div", { key: starValue, "data-hook": filled ? dataHooks.filledStar : dataHooks.emptyStar, "data-index": starValue, className: st(classes.starContainer, semanticClassNames.button) },
React.createElement(StarFilled, { "aria-hidden": true, className: st(classes.star, { filled }, filled
? semanticClassNames.filledIcon
: semanticClassNames.emptyIcon), size: sizePx })));
}))));
};
//# sourceMappingURL=ReadOnlyStarsRatingBar.js.map