@kiwicom/orbit-components/es/RatingStars/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled from "styled-components";
import { warning } from "@kiwicom/js";
import StarEmpty from "../icons/StarEmpty";
import StarFull from "../icons/StarFull";
import defaultTheme from "../defaultTheme";
import MAX_STARS from "./consts";
import { ICON_COLORS, ICON_SIZES } from "../Icon/consts";
import { DictionaryContext } from "../Dictionary";
import { pureTranslate } from "../Translate";
const StyledRatingStars = styled.div.withConfig({
  displayName: "RatingStars__StyledRatingStars",
  componentId: "vyfznx-0"
})(["display:flex;flex-direction:row;justify-content:flex-start;flex-shrink:0;svg{flex-shrink:0;}"]);
StyledRatingStars.defaultProps = {
  theme: defaultTheme
};

const RatingStars = ({
  rating,
  size = ICON_SIZES.SMALL,
  dataTest,
  color = ICON_COLORS.PRIMARY,
  showEmpty = false
}) => {
  warning(color !== ICON_COLORS.ATTENTION, "Warning: attention color of RatingStars component is deprecated. Please use primary color instead. Check https://orbit.kiwi/roadmap/road-to-1-0-0/#planned-breaking-changes for more information");
  const dictionary = React.useContext(DictionaryContext);
  const ratingRounded = Math.round(rating);
  const starsCount = showEmpty ? MAX_STARS : ratingRounded;
  return React.createElement(StyledRatingStars, {
    "data-test": dataTest,
    size: size,
    "aria-label": pureTranslate(dictionary, "ratingstar_description", {
      number: ratingRounded,
      total: starsCount
    })
  }, Array(...Array(starsCount)).map((_, index) => {
    const key = `star-${index}`;
    return index <= ratingRounded - 1 ? React.createElement(StarFull, {
      key: key,
      size: size,
      color: color
    }) : React.createElement(StarEmpty, {
      key: key,
      size: size,
      color: color
    });
  }));
};

export default RatingStars;