From 002e357532fe7fea967734468a73cd169acf810a Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Mon, 9 Oct 2023 11:21:19 +0700 Subject: [PATCH] Update sample code --- sample/use-popcorn/package.json | 1 + sample/use-popcorn/pnpm-lock.yaml | 6 +- sample/use-popcorn/src/StarRating.jsx | 139 ++++++++++++++++++++++++++ sample/use-popcorn/src/index.css | 33 ------ sample/use-popcorn/src/main.jsx | 34 +++++-- 5 files changed, 169 insertions(+), 44 deletions(-) create mode 100644 sample/use-popcorn/src/StarRating.jsx diff --git a/sample/use-popcorn/package.json b/sample/use-popcorn/package.json index 7317d94..2c32693 100644 --- a/sample/use-popcorn/package.json +++ b/sample/use-popcorn/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/sample/use-popcorn/pnpm-lock.yaml b/sample/use-popcorn/pnpm-lock.yaml index 8803ff7..4893873 100644 --- a/sample/use-popcorn/pnpm-lock.yaml +++ b/sample/use-popcorn/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + prop-types: + specifier: ^15.8.1 + version: 15.8.1 react: specifier: ^18.2.0 version: 18.2.0 @@ -1682,7 +1685,6 @@ packages: /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: true /object-inspect@1.12.3: resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} @@ -1819,7 +1821,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 - dev: true /punycode@2.3.0: resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} @@ -1842,7 +1843,6 @@ packages: /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - dev: true /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} diff --git a/sample/use-popcorn/src/StarRating.jsx b/sample/use-popcorn/src/StarRating.jsx new file mode 100644 index 0000000..8919800 --- /dev/null +++ b/sample/use-popcorn/src/StarRating.jsx @@ -0,0 +1,139 @@ +import { useState } from "react"; +import PropTypes from "prop-types"; + +const containerStyle = { + display: "flex", + alignItems: "center", + gap: "16px", +}; + +const starContainerStyle = { + display: "flex", +}; +export default function StarRating({ + maxRating = 5, + color = "#fcc419", + size = 48, + className = "", + messages = [], + defaultRating = 0, + onSetRating, +}) { + const [rating, setRating] = useState(defaultRating); + const [tempRating, setTempRating] = useState(0); + + const handleRating = (rating) => { + setRating(rating); + + if (onSetRating) setRating(rating); + }; + + const textStyle = { + lineHeight: "1", + margin: "0", + color, + fontSize: `${size / 1.5}px`, + }; + + return ( +
+
+ {Array.from({ length: maxRating }, (_, i) => ( + + = i + 1 : rating >= i + 1} + onRate={() => handleRating(i + 1)} + onHoverIn={() => setTempRating(i + 1)} + onHoverOut={() => setTempRating(0)} + color={color} + size={size} + /> + + ))} +
+

+ {messages.length === maxRating + ? messages[tempRating ? tempRating - 1 : rating - 1] + : tempRating || rating || ""} +

+
+ ); +} + +function Star({ onRate, full, onHoverIn, onHoverOut, color, size }) { + const starStyle = { + width: `${size}px`, + height: `${size}px`, + display: "block", + cursor: "pointer", + }; + + return ( + + {full ? ( + + + + ) : ( + + + + )} + + ); +} + +/* + +FULL STAR + + + + + + +EMPTY STAR + + + + + +*/ diff --git a/sample/use-popcorn/src/index.css b/sample/use-popcorn/src/index.css index 30870b7..5644814 100644 --- a/sample/use-popcorn/src/index.css +++ b/sample/use-popcorn/src/index.css @@ -346,36 +346,3 @@ SPACING SYSTEM (px) FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 /52 / 62 / 74 / 86 / 98 */ - -/* -FULL STAR - - - - - - -EMPTY STAR - - - - - -*/ diff --git a/sample/use-popcorn/src/main.jsx b/sample/use-popcorn/src/main.jsx index 54b39dd..2789b9d 100644 --- a/sample/use-popcorn/src/main.jsx +++ b/sample/use-popcorn/src/main.jsx @@ -1,10 +1,28 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.jsx"; +// import "./index.css"; +import StarRating from "./StarRating.jsx"; +import { useState } from "react"; -ReactDOM.createRoot(document.getElementById('root')).render( +function Test() { + const [movieRating, setMovieRating] = useState(0); + + return ( +
+ +

The move was rated {movieRating} stars

+
+ ); +} + +ReactDOM.createRoot(document.getElementById("root")).render( - - , -) + {/* */} + + + +);