Skip to content

Commit

Permalink
add rating value param to onRatingStart + onRatingEnd props (#74)
Browse files Browse the repository at this point in the history
* feat: add rating value param to onRatingStart + onRatingEnd props

* chore: upgrade typescript

---------

Co-authored-by: Benedikt Viebahn <benedikt.viebahn@live-eo.com>
  • Loading branch information
bviebahn and Benedikt Viebahn authored Sep 7, 2024
1 parent 0abd05b commit 72cef76
Show file tree
Hide file tree
Showing 11 changed files with 309 additions and 147 deletions.
44 changes: 23 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,32 +42,34 @@ const Example = () => {
};
```

See [example/src](example/src) for more examples.

## Props
### `StarRating` Props
| Name | Type | Default | Description |
| ----------------- | --------------------------------------- | ---------------- | ----------------------------------------------------- |
| rating | number | **REQUIRED** | Rating Value. Should be between 0 and `maxStars` |
| onChange | (number) => void | **REQUIRED** | called when rating changes |
| maxStars | number | 5 | number of stars |
| starSize | number | 32 | star size |
| color | string | "#fdd835" | star color |
| emptyColor | string | same as `color` | empty star color |
| style | object | undefined | optional style |
| starStyle | object | undefined | optional star style |
| enableHalfStar | boolean | true | enable or disable display of half stars |
| enableSwiping | boolean | true | enable or disable swiping |
| onRatingStart | () => void | undefined | called when user starts interaction |
| onRatingEnd | () => void | undefined | called when user ends interaction |
| Name | Type | Default | Description |
| ----------------- | ----------------------- | ---------------- | ----------------------------------------------------- |
| rating | number | **REQUIRED** | Rating Value. Should be between 0 and `maxStars` |
| onChange | (rating: number) => void | **REQUIRED** | called when rating changes |
| maxStars | number | 5 | number of stars |
| starSize | number | 32 | star size |
| color | string | "#fdd835" | star color |
| emptyColor | string | same as `color` | empty star color |
| style | object | undefined | optional style |
| starStyle | object | undefined | optional star style |
| enableHalfStar | boolean | true | enable or disable display of half stars |
| enableSwiping | boolean | true | enable or disable swiping |
| onRatingStart | (rating: number) => void | undefined | called when the interaction starts, before `onChange` |
| onRatingEnd | (rating: number) => void | undefined | called when the interaction starts, after `onChange` |
| animationConfig | see [AnimationConfig](#animationConfig) | see [AnimationConfig](#animationConfig) | animation configuration object |
| StarIconComponent | (props: { index: number; size: number; color: string; type: "full" \| "half" \| "empty"; }) => JSX.Element | [StarIcon](https://github.com/bviebahn/react-native-star-rating-widget/blob/master/src/StarIcon.tsx) | Icon component |
| accessibilityLabel | string | star rating. %value% stars. use custom actions to set rating. | The label used on the star component. |
| accessabilityIncrementLabel | string | increment | The label for the increment action. |
| accessabilityDecrementLabel | string | decrement | The label for the decrement action. |
| accessabilityActivateLabel | string | activate (default) | The label for the activate action. |
| accessibilityAdjustmentLabel | string | %value% stars | The label that is announced after adjustment action |
| StarIconComponent | (props: { index: number; size: number; color: string; type: "full" \| "half" \| "empty"; }) => JSX.Element | [StarIcon](https://github.com/bviebahn/react-native-star-rating-widget/blob/master/src/StarIcon.tsx) | Icon component |
| accessibilityLabel | string | star rating. %value% stars. use custom actions to set rating. | The label used on the star component |
| accessabilityIncrementLabel | string | increment | The label for the increment action |
| accessabilityDecrementLabel | string | decrement | The label for the decrement action. |
| accessabilityActivateLabel | string | activate (default) | The label for the activate action. |
| accessibilityAdjustmentLabel | string | %value% stars | The label that is announced after adjustment action |

### `StarRatingDisplay` Props
The `StarRatingDisplay` component accepts the same props as `StarRating` except `onChange`, `enableSwiping`, `onRatingStart`, `onRatingEnd` and `animationConfig`.
The `StarRatingDisplay` component accepts mostly the same props as `StarRating` except those that are interaction related props such as `onChange`, `enableSwiping`, `onRatingStart` etc.

### AnimationConfig
| Name | Type | Default | Description |
Expand Down
2 changes: 1 addition & 1 deletion example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native": "0.70.8",
"react-native-svg": "13.4.0",
"react-native-web": "~0.18.7"
},
Expand Down
3 changes: 3 additions & 0 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import { ScrollView, StyleSheet } from 'react-native';
import BasicExample from './BasicExample';
import CustomIconExample from './CustomIconExample';
import StarRatingDisplayExample from './StarRatingDisplayExample';
import ClearOnCurrentRatingTapExample from './ClearOnCurrentRatingTapExample';

export default function App() {
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
<BasicExample />
<CustomIconExample />
<StarRatingDisplayExample />
<ClearOnCurrentRatingTapExample />
</ScrollView>
);
}
Expand All @@ -21,6 +23,7 @@ const styles = StyleSheet.create({
},
content: {
padding: 32,
paddingTop: 64,
alignItems: 'center',
},
});
42 changes: 42 additions & 0 deletions example/src/ClearOnCurrentRatingTapExample.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import StarRating from 'react-native-star-rating-widget';
import ExampleContainer from './ExampleContainer';

export default function ClearOnCurrentRatingTapExample() {
const [rating, setRating] = React.useState(3);

const beforeStartRating = React.useRef(rating);
const preventClear = React.useRef(false);

const handleChange = (newRating: number) => {
setRating(newRating);

// You likely only want to clear the rating if the user taps on the current rating,
// and prevent clearing the rating when the user swipes to the current rating.
// If onChange is called it means the user did not tap on the current rating,
// so we don't want to clear it when the interaction ends.
preventClear.current = true;
};

const handleRatingStart = () => {
beforeStartRating.current = rating;
preventClear.current = false;
};

const handleRatingEnd = (endRating: number) => {
if (!preventClear.current && endRating === beforeStartRating.current) {
setRating(0);
}
};

return (
<ExampleContainer title="Clear rating when tapping on current rating Example">
<StarRating
rating={rating}
onChange={handleChange}
onRatingStart={handleRatingStart}
onRatingEnd={handleRatingEnd}
/>
</ExampleContainer>
);
}
2 changes: 1 addition & 1 deletion example/src/ExampleContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,5 @@ const styles = StyleSheet.create({

elevation: 3,
},
title: { fontSize: 18, marginBottom: 8, color: '#222' },
title: { fontSize: 18, marginBottom: 8, color: '#222', textAlign: 'center' },
});
114 changes: 36 additions & 78 deletions example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1670,19 +1670,12 @@
dependencies:
"@hapi/hoek" "^9.0.0"

"@jest/create-cache-key-function@^29.0.3":
version "29.3.1"
resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-29.3.1.tgz#3a0970ea595ab3d9507244edbcef14d6b016cdc9"
integrity sha512-4i+E+E40gK13K78ffD/8cy4lSSqeWwyXeTZoq16tndiCP12hC8uQsPJdIu5C6Kf22fD8UbBk71so7s/6VwpUOQ==
dependencies:
"@jest/types" "^29.3.1"

"@jest/schemas@^29.0.0":
version "29.0.0"
resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.0.0.tgz#5f47f5994dd4ef067fb7b4188ceac45f77fe952a"
integrity sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==
"@jest/create-cache-key-function@^27.0.1":
version "27.5.1"
resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-27.5.1.tgz#7448fae15602ea95c828f5eceed35c202a820b31"
integrity sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ==
dependencies:
"@sinclair/typebox" "^0.24.1"
"@jest/types" "^27.5.1"

"@jest/types@^26.6.2":
version "26.6.2"
Expand All @@ -1706,18 +1699,6 @@
"@types/yargs" "^16.0.0"
chalk "^4.0.0"

"@jest/types@^29.3.1":
version "29.3.1"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.3.1.tgz#7c5a80777cb13e703aeec6788d044150341147e3"
integrity sha512-d0S0jmmTpjnhCmNpApgX3jrUZgZ22ivKJRvL2lli5hpCRoNnp1f85r2/wpKfXuYu8E7Jjh1hGfhPyup1NM5AmA==
dependencies:
"@jest/schemas" "^29.0.0"
"@types/istanbul-lib-coverage" "^2.0.0"
"@types/istanbul-reports" "^3.0.0"
"@types/node" "*"
"@types/yargs" "^17.0.8"
chalk "^4.0.0"

"@jridgewell/gen-mapping@^0.1.0":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
Expand Down Expand Up @@ -1876,7 +1857,7 @@
dependencies:
serve-static "^1.13.1"

"@react-native-community/cli-doctor@^9.2.1":
"@react-native-community/cli-doctor@^9.3.0":
version "9.3.0"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-9.3.0.tgz#8817a3fd564453467def5b5bc8aecdc4205eff50"
integrity sha512-/fiuG2eDGC2/OrXMOWI5ifq4X1gdYTQhvW2m0TT5Lk1LuFiZsbTCp1lR+XILKekuTvmYNjEGdVpeDpdIWlXdEA==
Expand All @@ -1898,31 +1879,18 @@
sudo-prompt "^9.0.0"
wcwidth "^1.0.1"

"@react-native-community/cli-hermes@^9.2.1":
version "9.3.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-9.3.1.tgz#569d27c1effd684ba451ad4614e29a99228cec49"
integrity sha512-Mq4PK8m5YqIdaVq5IdRfp4qK09aVO+aiCtd6vjzjNUgk1+1X5cgUqV6L65h4N+TFJYJHcp2AnB+ik1FAYXvYPQ==
"@react-native-community/cli-hermes@^9.3.1":
version "9.3.4"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-9.3.4.tgz#47851847c4990272687883bd8bf53733d5f3c341"
integrity sha512-VqTPA7kknCXgtYlRf+sDWW4yxZ6Gtg1Ga+Rdrn1qSKuo09iJ8YKPoQYOu5nqbIYJQAEhorWQyo1VvNgd0wd49w==
dependencies:
"@react-native-community/cli-platform-android" "^9.3.1"
"@react-native-community/cli-platform-android" "^9.3.4"
"@react-native-community/cli-tools" "^9.2.1"
chalk "^4.1.2"
hermes-profile-transformer "^0.0.6"
ip "^1.1.5"

"@react-native-community/cli-platform-android@9.2.1":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-9.2.1.tgz#cd73cb6bbaeb478cafbed10bd12dfc01b484d488"
integrity sha512-VamCZ8nido3Q3Orhj6pBIx48itORNPLJ7iTfy3nucD1qISEDih3DOzCaQCtmqdEBgUkNkNl0O+cKgq5A3th3Zg==
dependencies:
"@react-native-community/cli-tools" "^9.2.1"
chalk "^4.1.2"
execa "^1.0.0"
fs-extra "^8.1.0"
glob "^7.1.3"
logkitty "^0.7.1"
slash "^3.0.0"

"@react-native-community/cli-platform-android@^9.3.1":
"@react-native-community/cli-platform-android@9.3.1":
version "9.3.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.1.tgz#378cd72249653cc74672094400657139f21bafb8"
integrity sha512-m0bQ6Twewl7OEZoVf79I2GZmsDqh+Gh0bxfxWgwxobsKDxLx8/RNItAo1lVtTCgzuCR75cX4EEO8idIF9jYhew==
Expand All @@ -1935,18 +1903,20 @@
logkitty "^0.7.1"
slash "^3.0.0"

"@react-native-community/cli-platform-ios@9.2.1":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.2.1.tgz#d90740472216ffae5527dfc5f49063ede18a621f"
integrity sha512-dEgvkI6CFgPk3vs8IOR0toKVUjIFwe4AsXFvWWJL5qhrIzW9E5Owi0zPkSvzXsMlfYMbVX0COfVIK539ZxguSg==
"@react-native-community/cli-platform-android@^9.3.4":
version "9.3.4"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.4.tgz#42f22943b6ee15713add6af8608c1d0ebf79d774"
integrity sha512-BTKmTMYFuWtMqimFQJfhRyhIWw1m+5N5svR1S5+DqPcyFuSXrpNYDWNSFR8E105xUbFANmsCZZQh6n1WlwMpOA==
dependencies:
"@react-native-community/cli-tools" "^9.2.1"
chalk "^4.1.2"
execa "^1.0.0"
fs-extra "^8.1.0"
glob "^7.1.3"
ora "^5.4.1"
logkitty "^0.7.1"
slash "^3.0.0"

"@react-native-community/cli-platform-ios@^9.3.0":
"@react-native-community/cli-platform-ios@9.3.0", "@react-native-community/cli-platform-ios@^9.3.0":
version "9.3.0"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.3.0.tgz#45abde2a395fddd7cf71e8b746c1dc1ee2260f9a"
integrity sha512-nihTX53BhF2Q8p4B67oG3RGe1XwggoGBrMb6vXdcu2aN0WeXJOXdBLgR900DAA1O8g7oy1Sudu6we+JsVTKnjw==
Expand Down Expand Up @@ -2010,16 +1980,16 @@
dependencies:
joi "^17.2.1"

"@react-native-community/cli@9.2.1":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-9.2.1.tgz#15cc32531fc323d4232d57b1f2d7c571816305ac"
integrity sha512-feMYS5WXXKF4TSWnCXozHxtWq36smyhGaENXlkiRESfYZ1mnCUlPfOanNCAvNvBqdyh9d4o0HxhYKX1g9l6DCQ==
"@react-native-community/cli@9.3.2":
version "9.3.2"
resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-9.3.2.tgz#81761880af00c1894d85380d8c9a358659865204"
integrity sha512-IAW4X0vmX/xozNpp/JVZaX7MrC85KV0OP2DF4o7lNGOfpUhzJAEWqTfkxFYS+VsRjZHDve4wSTiGIuXwE7FG1w==
dependencies:
"@react-native-community/cli-clean" "^9.2.1"
"@react-native-community/cli-config" "^9.2.1"
"@react-native-community/cli-debugger-ui" "^9.0.0"
"@react-native-community/cli-doctor" "^9.2.1"
"@react-native-community/cli-hermes" "^9.2.1"
"@react-native-community/cli-doctor" "^9.3.0"
"@react-native-community/cli-hermes" "^9.3.1"
"@react-native-community/cli-plugin-metro" "^9.2.1"
"@react-native-community/cli-server-api" "^9.2.1"
"@react-native-community/cli-tools" "^9.2.1"
Expand Down Expand Up @@ -2078,11 +2048,6 @@
resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==

"@sinclair/typebox@^0.24.1":
version "0.24.51"
resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==

"@trysound/sax@0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
Expand Down Expand Up @@ -2264,13 +2229,6 @@
dependencies:
"@types/yargs-parser" "*"

"@types/yargs@^17.0.8":
version "17.0.17"
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.17.tgz#5672e5621f8e0fca13f433a8017aae4b7a2a03e7"
integrity sha512-72bWxFKTK6uwWJAVT+3rF6Jo6RTojiJ27FQo8Rf60AL+VZbzoVPnMFhKsUnbjR8A3BTCYQ7Mv3hnl8T0A+CX9g==
dependencies:
"@types/yargs-parser" "*"

"@urql/core@2.3.6":
version "2.3.6"
resolved "https://registry.yarnpkg.com/@urql/core/-/core-2.3.6.tgz#ee0a6f8fde02251e9560c5f17dce5cd90f948552"
Expand Down Expand Up @@ -7248,7 +7206,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

promise@^8.0.3:
promise@^8.3.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
integrity sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==
Expand Down Expand Up @@ -7410,15 +7368,15 @@ react-native-web@~0.18.7:
postcss-value-parser "^4.2.0"
styleq "^0.1.2"

react-native@0.70.5:
version "0.70.5"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.5.tgz#f60540b21d338891086e0a834e331c124dd1f55c"
integrity sha512-5NZM80LC3L+TIgQX/09yiyy48S73wMgpIgN5cCv3XTMR394+KpDI3rBZGH4aIgWWuwijz31YYVF5504+9n2Zfw==
react-native@0.70.8:
version "0.70.8"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.8.tgz#aa9aae8e6291589908db74fe69e0ec1d9a9c5490"
integrity sha512-O3ONJed9W/VEEVWsbZcwyMDhnEvw7v9l9enqWqgbSGLzHfh6HeIGMCNmjz+kRsHnC7AiF47fupWfgYX7hNnhoQ==
dependencies:
"@jest/create-cache-key-function" "^29.0.3"
"@react-native-community/cli" "9.2.1"
"@react-native-community/cli-platform-android" "9.2.1"
"@react-native-community/cli-platform-ios" "9.2.1"
"@jest/create-cache-key-function" "^27.0.1"
"@react-native-community/cli" "9.3.2"
"@react-native-community/cli-platform-android" "9.3.1"
"@react-native-community/cli-platform-ios" "9.3.0"
"@react-native/assets" "1.0.0"
"@react-native/normalize-color" "2.0.0"
"@react-native/polyfills" "2.0.0"
Expand All @@ -7435,7 +7393,7 @@ react-native@0.70.5:
mkdirp "^0.5.1"
nullthrows "^1.1.1"
pretty-format "^26.5.2"
promise "^8.0.3"
promise "^8.3.0"
react-devtools-core "4.24.0"
react-native-codegen "^0.70.6"
react-native-gradle-plugin "^0.70.3"
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"react-native-builder-bob": "^0.20.0",
"react-native-svg": "^13.6.0",
"release-it": "^15.0.0",
"typescript": "^4.5.2"
"typescript": "^5.5.4"
},
"resolutions": {
"@types/react": "17.0.21"
Expand Down
Loading

0 comments on commit 72cef76

Please sign in to comment.