Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 1x 3x 3x 3x 15x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import Star from './components/Star.js'
import StarHover from './components/StarHover.js'
import {BASE_CLASS, CLASS_CONTAINER_STARS, CLASS_LABEL, CLASS_LABEL_LINK, CLASS_LINK, SIZES} from './settings.js'
const MoleculeRating = ({
iconStar,
initialRating,
isHovered = false,
numStars = 5,
value,
ratingValues,
size = SIZES.SMALL,
label,
href,
target,
onClick,
// eslint-disable-next-line react/prop-types
linkFactory: Link = ({children, ...rest} = {}) => <a {...rest}>{children}</a>,
...props
}) => {
const className = cx(BASE_CLASS, `${BASE_CLASS}--${size}`, {
[CLASS_LINK]: href
})
const labelLink = href ? (
<Link className={CLASS_LABEL_LINK} href={href} target={target} rel={target === '_blank' ? 'noopener' : undefined}>
{label}
</Link>
) : (
label
)
return (
<div className={className}>
<div className={CLASS_CONTAINER_STARS}>
{!isHovered ? (
new Array(numStars)
.fill(0)
.map((_, index) => <Star size={size} key={index} index={index} value={value} {...props} />)
) : (
<StarHover
iconStar={iconStar}
initialRating={initialRating}
onClick={onClick}
ratingValues={ratingValues}
size={size}
/>
)}
</div>
{label && <p className={CLASS_LABEL}>{labelLink}</p>}
</div>
)
}
MoleculeRating.displayName = 'MoleculeRating'
MoleculeRating.propTypes = {
/** Number of Stars */
numStars: PropTypes.number,
/** Value of Rating */
value: PropTypes.number,
/** Rating value of each Star */
ratingValues: PropTypes.array,
/** Label of Rating */
label: PropTypes.string,
/** init value assigned to rating */
initialRating: PropTypes.number,
/** Prop to get the hovered behavior of the component */
isHovered: PropTypes.bool,
/** size */
size: PropTypes.oneOf(Object.values(SIZES)),
/** Target to be added on the HTML link */
target: PropTypes.string,
/** URL to be added on the HTML link */
href: PropTypes.string,
/** Factory used to create navigation links */
linkFactory: PropTypes.func,
/** Callback used component hovered */
onClick: PropTypes.func,
/** Icon custom to StarHover */
iconStar: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
}
export default MoleculeRating
export {SIZES as MoleculeRatingSizes}
|