Sha256: a6eba8e0c2d0e7045b7e6be00f62b9c74dd471328b7ac5304431fc6029fd73f9

Contents?: true

Size: 1.98 KB

Versions: 208

Compression:

Stored size: 1.98 KB

Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'

import { buildAriaProps, buildDataProps } from '../utilities/props'

import Icon from '../pb_icon/_icon'

type StarRatingProps = {
  aria?: object,
  className?: string,
  data?: object,
  fixedWidth?: boolean,
  hideRating: boolean,
  icon?: string,
  id?: string,
  rating: number,
}

const StarRating = ({
  aria = {},
  className,
  data = {},
  hideRating = false,
  id,
  rating = 0,
}: StarRatingProps) => {
  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const css = classnames([
    'pb_star_rating_kit', className,
  ])

  const starCount = () => (
    [...Array(parseInt(rating))]
  )

  const hasHalfStar = () => (
    parseFloat(rating) % 1 !== 0
  )

  return (
    <div
        {...ariaProps}
        {...dataProps}
        className={css}
        id={id}
    >
      <If condition={!hideRating}>
        <div className="pb_star_rating_number">
          {rating}
        </div>
      </If>

      <div className="pb_star_rating_wrapper">
        <div className="pb_star_rating_highlight">
          {starCount().map((_, index) => (
            <Icon
                fixedWidth={false}
                icon="star"
                key={index}
            />
          ))}

          <If condition={hasHalfStar()}>
            <Icon
                fixedWidth={false}
                icon="star-half"
            />
          </If>
        </div>

        <div className="pb_star_rating_base">
          <Icon
              fixedWidth={false}
              icon="star"
          />
          <Icon
              fixedWidth={false}
              icon="star"
          />
          <Icon
              fixedWidth={false}
              icon="star"
          />
          <Icon
              fixedWidth={false}
              icon="star"
          />
          <Icon
              fixedWidth={false}
              icon="star"
          />
        </div>
      </div>
    </div>
  )
}

export default StarRating

Version data entries

208 entries across 208 versions & 1 rubygems

Version Path
playbook_ui-12.14.0.pre.alpha.lightboxcurrentphotoprop460 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown457 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.14.0 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.13.0.pre.alpha.PLAY693tooltipwrongbg440 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.13.0.pre.alpha.addingProductTokens439 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.13.0.pre.alpha.PLAY705phonenumberkit438 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.13.0 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.12.0 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.11.0 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.10.0.pre.alpha.PLAY705phonenumberreturn372 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.10.0.pre.alpha.PLAY677richtexteditorts370 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.10.0 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.9.1.pre.alpha.play664tiptapinvestigation353 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.9.1.pre.alpha.PLAY689bugtxtinputlabel346 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.9.1.pre.alpha.menucleanup345 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.9.1.pre.alpha.menucleanup342 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.9.1 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
playbook_ui-12.9.0 app/pb_kits/playbook/pb_star_rating/_star_rating.jsx