Skip to content

Commit

Permalink
Merge pull request #19 from juwain/main
Browse files Browse the repository at this point in the history
feat: add allowHoverOnDefault prop & update docs
  • Loading branch information
awran5 authored Sep 22, 2022
2 parents 473129d + c0b59b3 commit b275ec1
Show file tree
Hide file tree
Showing 7 changed files with 114 additions and 37 deletions.
60 changes: 31 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,35 +51,37 @@ export default function MyComponent() {

### Available Props

| Prop | Type | Options | Description | Default |
| -------------------- | --------------- | -------- | --------------------------------------------- | :------------------------: |
| `ratingValue` | number | Required | Rating value passed from the Rating component | `-` |
| `onClick` | function | Optional | Handles the returned rating value | `-` |
| `initialValue` | number | Optional | Set initial value (needed to reset the value) | `0` |
| `iconsCount` | number | Optional | Number of the icons | `5` |
| `size` | number | Optional | Icon width / height in `px` | `25` |
| `readonly` | boolean | Optional | Readonly mode | `false` |
| `fillColor` | string | Optional | Full icons color | `#f1a545` |
| `fillColorArray` | array | Optional | Array of string to add color range | `[]` |
| `emptyColor` | string | Optional | Empty icons color | `#cccccc` |
| `fullIcon` | ReactElement | Optional | Custom full icon SVG | `null` |
| `emptyIcon` | ReactElement | Optional | Custom empty icon SVG | `null` |
| `customIcons` | array of object | Optional | Add a group of icons | `[]` |
| `rtl` | boolean | Optional | RTL mode | `false` |
| `allowHalfIcon` | boolean | Optional | Enable a fractional icon (half icon) | `false` |
| `allowHover` | boolean | Optional | Enable / Disable hover effect | `true` |
| `transition` | boolean | Optional | Adds a transition effect on mouse hover | `false` |
| `className` | string | Optional | Applied to the `main` span | `react-simple-star-rating` |
| `style` | CSSProperties | Optional | Inline style applied to the `main` span | `basic style` |
| `fullClassName` | string | Optional | Applied to the `filled` icon span | `filled-icons` |
| `emptyClassName` | string | Optional | Applied to the `empty` icon span | `empty-icons` |
| `fullStyle` | CSSProperties | Optional | Inline style applied to `filled` icon span | `basic style` |
| `emptyStyle` | CSSProperties | Optional | Inline style applied to `empty` icon span | `basic style` |
| `showTooltip` | string | Optional | Show a tooltip with live values | `false` |
| `tooltipDefaultText` | string | Optional | Initial tooltip text if no rating value | `Your Rate` |
| `tooltipArray` | array | Optional | Array of strings to show inside tooltip | `[]` |
| `tooltipClassName` | string | Optional | Tooltip CSS class | `rating-tooltip` |
| `tooltipStyle` | CSSProperties | Optional | Inline style applied to the `tooltip` span | `basic style` |
| Prop | Type | Options | Description | Default |
| --------------------- | --------------- | -------- | --------------------------------------------------------- | :------------------------: |
| `ratingValue` | number | Required | Rating value passed from the Rating component | `-` |
| `onClick` | function | Optional | Handles the returned rating value | `-` |
| `initialValue` | number | Optional | Set initial value (needed to reset the value) | `0` |
| `iconsCount` | number | Optional | Number of the icons | `5` |
| `size` | number | Optional | Icon width / height in `px` | `25` |
| `readonly` | boolean | Optional | Readonly mode | `false` |
| `fillColor` | string | Optional | Full icons color | `#f1a545` |
| `fillColorArray` | array | Optional | Array of string to add color range | `[]` |
| `emptyColor` | string | Optional | Empty icons color | `#cccccc` |
| `fullIcon` | ReactElement | Optional | Custom full icon SVG | `null` |
| `emptyIcon` | ReactElement | Optional | Custom empty icon SVG | `null` |
| `customIcons` | array of object | Optional | Add a group of icons | `[]` |
| `rtl` | boolean | Optional | RTL mode | `false` |
| `allowHalfIcon` | boolean | Optional | Enable a fractional icon (half icon) | `false` |
| `allowHover` | boolean | Optional | Enable / Disable hover effect | `true` |
| `allowHoverOnDefault` | boolean | Optional | Enable / Disable hover effect on fulled stars | `true` |
| `transition` | boolean | Optional | Adds a transition effect on mouse hover | `false` |
| `className` | string | Optional | Applied to the `main` span | `react-simple-star-rating` |
| `style` | CSSProperties | Optional | Inline style applied to the `main` span | `basic style` |
| `fullClassName` | string | Optional | Applied to the `filled` icon span | `filled-icons` |
| `emptyClassName` | string | Optional | Applied to the `empty` icon span | `empty-icons` |
| `fullStyle` | CSSProperties | Optional | Inline style applied to `filled` icon span | `basic style` |
| `emptyStyle` | CSSProperties | Optional | Inline style applied to `empty` icon span | `basic style` |
| `showTooltip` | string | Optional | Show a tooltip with live values | `false` |
| `tooltipDefaultText` | string | Optional | Initial tooltip text if no rating value | `Your Rate` |
| `tooltipArray` | array | Optional | Array of strings to show inside tooltip | `[]` |
| `tooltipClassName` | string | Optional | Tooltip CSS class | `rating-tooltip` |
| `tooltipStyle` | CSSProperties | Optional | Inline style applied to the `tooltip` span | `basic style` |
| `titleSeparator` | string | Optional | Separator word in a title of a rating star `(1 out of 5)` | `out of` |

---

Expand Down
35 changes: 35 additions & 0 deletions dist/Components/Rating.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
export interface Props {
onClick?: (value: number) => void;
initialValue?: number;
ratingValue: number;
iconsCount?: number;
size?: number;
readonly?: boolean;
fillColor?: string;
fillColorArray?: string[];
emptyColor?: string;
fullIcon?: React.ReactElement | null;
emptyIcon?: React.ReactElement | null;
customIcons?: {
icon: React.ReactElement;
}[];
rtl?: boolean;
allowHalfIcon?: boolean;
allowHover?: boolean;
allowHoverOnDefault?: boolean;
transition?: boolean;
className?: string;
style?: React.CSSProperties;
fullClassName?: string;
emptyClassName?: string;
fullStyle?: React.CSSProperties;
emptyStyle?: React.CSSProperties;
showTooltip?: boolean;
tooltipDefaultText?: string;
tooltipArray?: string[];
tooltipClassName?: string;
tooltipStyle?: React.CSSProperties;
titleSeparator?: string;
}
export declare function Rating({ onClick, initialValue, ratingValue, iconsCount, size, readonly, fillColor, fillColorArray, emptyColor, fullIcon, emptyIcon, customIcons, rtl, allowHalfIcon, allowHover, allowHoverOnDefault, transition, className, style, fullClassName, emptyClassName, fullStyle, emptyStyle, showTooltip, tooltipDefaultText, tooltipArray, tooltipClassName, tooltipStyle, titleSeparator, }: Props): JSX.Element;
10 changes: 10 additions & 0 deletions dist/Components/StarIcon.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
interface StarIconProps {
size?: number;
strokeColor?: string;
storkeWidth?: number;
className?: string;
style?: React.CSSProperties;
}
export declare function StarIcon({ size, strokeColor, storkeWidth, className, style }: StarIconProps): JSX.Element;
export {};
3 changes: 3 additions & 0 deletions dist/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { Rating, Props } from './Components/Rating';
export { Rating };
export type { Props };
16 changes: 16 additions & 0 deletions dist/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/index.js.map

Large diffs are not rendered by default.

26 changes: 18 additions & 8 deletions src/Components/Rating.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export interface Props {
rtl?: boolean
allowHalfIcon?: boolean
allowHover?: boolean
allowHoverOnDefault?: boolean
transition?: boolean
className?: string
style?: React.CSSProperties
Expand All @@ -90,6 +91,7 @@ export interface Props {
tooltipArray?: string[]
tooltipClassName?: string
tooltipStyle?: React.CSSProperties
titleSeparator?: string
}

export function Rating({
Expand All @@ -108,6 +110,7 @@ export function Rating({
rtl = false,
allowHalfIcon = false,
allowHover = true,
allowHoverOnDefault = true,
transition = false,
className = 'react-simple-star-rating',
style,
Expand All @@ -119,7 +122,8 @@ export function Rating({
tooltipDefaultText = 'Your Rate',
tooltipArray = [],
tooltipClassName = 'react-simple-star-rating-tooltip',
tooltipStyle
tooltipStyle,
titleSeparator = 'out of',
}: Props) {
const [{ defaultValue, hoverValue }, dispatch] = useReducer(reducer, {
defaultValue: ratingValue,
Expand Down Expand Up @@ -149,7 +153,7 @@ export function Rating({

// set the value to state
if (currentValue > 0 && hoverValue !== currentValue) {
dispatch({ type: 'PointerMove', payload: currentValue * 100 / totalIcons })
dispatch({ type: 'PointerMove', payload: (currentValue * 100) / totalIcons })
}
}

Expand Down Expand Up @@ -195,10 +199,16 @@ export function Rating({
* convert rating value to percentage value
* @returns `hover value` | `rating value` | `local rating`
*/
const valuePercentage = useMemo(
() => (allowHover && hoverValue && hoverValue) || (defaultValue && defaultValue) || localRating,
[allowHover, hoverValue, defaultValue, localRating]
)
const valuePercentage = useMemo(() => {
const currentValue = defaultValue ?? 0
const newValue = hoverValue && hoverValue > currentValue ? hoverValue : currentValue

return (
(allowHover && hoverValue && allowHoverOnDefault ? hoverValue : newValue) ||
(defaultValue && defaultValue) ||
localRating
)
}, [allowHover, allowHoverOnDefault, hoverValue, defaultValue, localRating])

// handle total icons
const totalIcons = useMemo(() => (allowHalfIcon ? iconsCount * 2 : iconsCount), [allowHalfIcon, iconsCount])
Expand All @@ -208,7 +218,7 @@ export function Rating({
(value: number) => {
let index = 1
if (value) {
index = Math.round(value / 100 * totalIcons) + 1
index = Math.round((value / 100) * totalIcons) + 1
}

return Math.round(index - 1)
Expand Down Expand Up @@ -282,7 +292,7 @@ export function Rating({
width: `${valuePercentage}%`,
...fullStyle
}}
title={`${(hoverValue && renderValue(hoverValue)) || renderValue(localRating)} out of ${iconsCount}`}
title={`${(hoverValue && renderValue(hoverValue)) || renderValue(localRating)} ${titleSeparator} ${iconsCount}`}
>
{[...Array(iconsCount)].map((_, index) => (
<Fragment key={index}>{customIcons[index]?.icon || fullIcon || <StarIcon size={size} />}</Fragment>
Expand Down

0 comments on commit b275ec1

Please sign in to comment.