From da17e5b58c241a1548a346187b47c7cbf7ac1fcd Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 18 Oct 2018 14:33:45 +0300 Subject: [PATCH 01/13] Add StarRating --- snippets/StarRating.md | 75 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 snippets/StarRating.md diff --git a/snippets/StarRating.md b/snippets/StarRating.md new file mode 100644 index 000000000..44e01e1d9 --- /dev/null +++ b/snippets/StarRating.md @@ -0,0 +1,75 @@ +### StarRating + +Renders a star rating component. + +Use the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied). +Initialize `state.selection` to `0`. +Create two methods, `hoverOver` and `setRating`, that take a number as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context. + + +In the `render()` method, define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state`, and handle its `onMouseEnter` and `onClick` events, using the parent component's `hoverOver` and `setRating` methods. +Render a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0`. +Finally, pass the appropriate values to each `` component (`starId`, `marked`, `onHover` and `setRating`). + +```jsx +class StarRating extends React.Component { + constructor(props) { + super(props); + this.state = { + rating: typeof props.rating == 'number' ? props.rating : 0, + selection: 0 + }; + this.hoverOver = this.hoverOver.bind(this); + this.setRating = this.setRating.bind(this); + } + + hoverOver(val) { + this.setState(state => ({ selection: val })); + } + + setRating(val) { + this.setState(state => ({ rating: val })); + } + + render() { + function Star({ marked, starId, onHover, onRate }) { + return ( + onRate(starId)} + onMouseEnter={() => onHover(starId)} + > + {marked ? '\u2605' : '\u2606'} + + ); + } + return ( +
this.hoverOver(0)}> + {Array.from({ length: 5 }, (v, i) => i + 1).map(v => ( + = v + : this.state.rating >= v + } + onHover={this.hoverOver} + onRate={this.setRating} + /> + ))} +
+ ); + } +} +``` + +```jsx +ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); +``` + + + + From 23a724b7366019fe2c0300bc75643c44959aeac7 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 18 Oct 2018 14:37:12 +0300 Subject: [PATCH 02/13] Update StarRating.md --- snippets/StarRating.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index 44e01e1d9..472d60080 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -5,8 +5,6 @@ Renders a star rating component. Use the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied). Initialize `state.selection` to `0`. Create two methods, `hoverOver` and `setRating`, that take a number as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context. - - In the `render()` method, define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state`, and handle its `onMouseEnter` and `onClick` events, using the parent component's `hoverOver` and `setRating` methods. Render a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0`. Finally, pass the appropriate values to each `` component (`starId`, `marked`, `onHover` and `setRating`). From df60f0c4b457b5b5a39dbce155e4ed451152ea40 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 18 Oct 2018 19:11:53 +0300 Subject: [PATCH 03/13] Update StarRating.md --- snippets/StarRating.md | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index 472d60080..72610f894 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -5,9 +5,9 @@ Renders a star rating component. Use the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied). Initialize `state.selection` to `0`. Create two methods, `hoverOver` and `setRating`, that take a number as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context. -In the `render()` method, define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state`, and handle its `onMouseEnter` and `onClick` events, using the parent component's `hoverOver` and `setRating` methods. -Render a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0`. -Finally, pass the appropriate values to each `` component (`starId`, `marked`, `onHover` and `setRating`). +In the `render()` method, define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state`, and handle its `onMouseEnter` event, using the parent component's `hoverOver` method. +Render a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0` and the `onClick` event to set the `state.rendering` to the `star-id` attribute of the `event.target`. +Finally, pass the appropriate values to each `` component (`starId`, `marked` and `onHover`). ```jsx class StarRating extends React.Component { @@ -20,22 +20,19 @@ class StarRating extends React.Component { this.hoverOver = this.hoverOver.bind(this); this.setRating = this.setRating.bind(this); } - hoverOver(val) { this.setState(state => ({ selection: val })); } - - setRating(val) { + setRating(event) { + const val = event.target.getAttribute('star-id') || this.state.rating; this.setState(state => ({ rating: val })); } - render() { - function Star({ marked, starId, onHover, onRate }) { + function Star({ marked, starId, onHover }) { return ( onRate(starId)} onMouseEnter={() => onHover(starId)} > {marked ? '\u2605' : '\u2606'} @@ -43,7 +40,7 @@ class StarRating extends React.Component { ); } return ( -
this.hoverOver(0)}> +
this.hoverOver(0)} onClick={this.setRating}> {Array.from({ length: 5 }, (v, i) => i + 1).map(v => ( = v } onHover={this.hoverOver} - onRate={this.setRating} /> ))}
From b26d99300fc0bc9ec9c05829479396b8a290c44e Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 18 Oct 2018 19:40:37 +0300 Subject: [PATCH 04/13] Update StarRating.md --- snippets/StarRating.md | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index 72610f894..443941a22 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -5,11 +5,23 @@ Renders a star rating component. Use the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied). Initialize `state.selection` to `0`. Create two methods, `hoverOver` and `setRating`, that take a number as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context. -In the `render()` method, define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state`, and handle its `onMouseEnter` event, using the parent component's `hoverOver` method. -Render a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0` and the `onClick` event to set the `state.rendering` to the `star-id` attribute of the `event.target`. +Define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state`, and handle its `onMouseEnter` event, using the parent component's `hoverOver` method. +In the `render()` method, create a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0` and the `onClick` event to set the `state.rendering` to the `star-id` attribute of the `event.target`. Finally, pass the appropriate values to each `` component (`starId`, `marked` and `onHover`). ```jsx +function Star({ marked, starId, onHover }) { + return ( + onHover(starId)} + > + {marked ? '\u2605' : '\u2606'} + + ); +} + class StarRating extends React.Component { constructor(props) { super(props); @@ -28,23 +40,12 @@ class StarRating extends React.Component { this.setState(state => ({ rating: val })); } render() { - function Star({ marked, starId, onHover }) { - return ( - onHover(starId)} - > - {marked ? '\u2605' : '\u2606'} - - ); - } return (
this.hoverOver(0)} onClick={this.setRating}> {Array.from({ length: 5 }, (v, i) => i + 1).map(v => ( = v From 77ceb24ce0deea5fa2138f8a0fef6b7d24434cc6 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 18 Oct 2018 19:51:40 +0300 Subject: [PATCH 05/13] Update StarRating.md --- snippets/StarRating.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index 443941a22..e4a250d25 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -30,18 +30,18 @@ class StarRating extends React.Component { selection: 0 }; this.hoverOver = this.hoverOver.bind(this); - this.setRating = this.setRating.bind(this); + this.handleClick = this.handleClick.bind(this); } hoverOver(val) { this.setState(state => ({ selection: val })); } - setRating(event) { + handleClick(event) { const val = event.target.getAttribute('star-id') || this.state.rating; this.setState(state => ({ rating: val })); } render() { return ( -
this.hoverOver(0)} onClick={this.setRating}> +
this.hoverOver(0)} onClick={this.handleClick}> {Array.from({ length: 5 }, (v, i) => i + 1).map(v => ( Date: Fri, 19 Oct 2018 09:08:22 +0300 Subject: [PATCH 06/13] Update StarRating.md --- snippets/StarRating.md | 103 +++++++++++++++++++++-------------------- 1 file changed, 54 insertions(+), 49 deletions(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index e4a250d25..6ad70ab61 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -2,62 +2,67 @@ Renders a star rating component. +Use and IIFE to define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state` and return the class component `StarRating`. Use the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied). Initialize `state.selection` to `0`. -Create two methods, `hoverOver` and `setRating`, that take a number as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context. -Define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state`, and handle its `onMouseEnter` event, using the parent component's `hoverOver` method. -In the `render()` method, create a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0` and the `onClick` event to set the `state.rendering` to the `star-id` attribute of the `event.target`. -Finally, pass the appropriate values to each `` component (`starId`, `marked` and `onHover`). +Create two methods, `hoverOver` and `setRating`, that take an event as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context. +In the `render()` method, create a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0`, the `onClick` event to set +the `state.rating` and the `onMouseOver` event to set `state.selection` to the `star-id` attribute of the `event.target` respectively. +Finally, pass the appropriate values to each `` component (`starId` and `marked`). ```jsx -function Star({ marked, starId, onHover }) { - return ( - onHover(starId)} - > - {marked ? '\u2605' : '\u2606'} - - ); -} - -class StarRating extends React.Component { - constructor(props) { - super(props); - this.state = { - rating: typeof props.rating == 'number' ? props.rating : 0, - selection: 0 - }; - this.hoverOver = this.hoverOver.bind(this); - this.handleClick = this.handleClick.bind(this); - } - hoverOver(val) { - this.setState(state => ({ selection: val })); - } - handleClick(event) { - const val = event.target.getAttribute('star-id') || this.state.rating; - this.setState(state => ({ rating: val })); - } - render() { +const StarRating = (function() { + function Star({ marked, starId }) { return ( -
this.hoverOver(0)} onClick={this.handleClick}> - {Array.from({ length: 5 }, (v, i) => i + 1).map(v => ( - = v - : this.state.rating >= v - } - onHover={this.hoverOver} - /> - ))} -
+ + {marked ? '\u2605' : '\u2606'} + ); } -} + + return class StarRating extends React.Component { + constructor(props) { + super(props); + this.state = { + rating: typeof props.rating == 'number' ? props.rating : 0, + selection: 0 + }; + this.hoverOver = this.hoverOver.bind(this); + this.handleClick = this.handleClick.bind(this); + } + hoverOver(event) { + let val = 0; + if (event && event.target && event.target.getAttribute('star-id')) + val = event.target.getAttribute('star-id'); + this.setState(state => ({ selection: val })); + } + handleClick(event) { + const val = event.target.getAttribute('star-id') || this.state.rating; + this.setState(state => ({ rating: val })); + } + render() { + return ( +
this.hoverOver(null)} + onClick={this.handleClick} + onMouseOver={this.hoverOver} + > + {Array.from({ length: 5 }, (v, i) => i + 1).map(v => ( + = v + : this.state.rating >= v + } + /> + ))} +
+ ); + } + }; +})(); ``` ```jsx From f5f4d03f90e1811ce3df53b2ba43748620e038f2 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 19 Oct 2018 09:41:54 +0300 Subject: [PATCH 07/13] Update snippets/StarRating.md Co-Authored-By: Chalarangelo --- snippets/StarRating.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index 6ad70ab61..f5df8e657 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -47,7 +47,7 @@ const StarRating = (function() { onClick={this.handleClick} onMouseOver={this.hoverOver} > - {Array.from({ length: 5 }, (v, i) => i + 1).map(v => ( + {Array.from({ length: 5 }, (v, i) => ( Date: Fri, 19 Oct 2018 09:41:58 +0300 Subject: [PATCH 08/13] Update snippets/StarRating.md Co-Authored-By: Chalarangelo --- snippets/StarRating.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index f5df8e657..9504da30e 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -49,7 +49,7 @@ const StarRating = (function() { > {Array.from({ length: 5 }, (v, i) => ( Date: Fri, 19 Oct 2018 09:42:04 +0300 Subject: [PATCH 09/13] Update snippets/StarRating.md Co-Authored-By: Chalarangelo --- snippets/StarRating.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index 9504da30e..ee8df7ad9 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -50,7 +50,7 @@ const StarRating = (function() { {Array.from({ length: 5 }, (v, i) => ( = v From addd182056f54b81af60392b88ef262a51b261c1 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 19 Oct 2018 09:42:09 +0300 Subject: [PATCH 10/13] Update snippets/StarRating.md Co-Authored-By: Chalarangelo --- snippets/StarRating.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index ee8df7ad9..3b24e011d 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -53,7 +53,7 @@ const StarRating = (function() { key={`star_${i+1} `} marked={ this.state.selection - ? this.state.selection >= v + ? this.state.selection >= i+1 : this.state.rating >= v } /> From 54185cb9709f87d8c9ff7949bb90b81101155348 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 19 Oct 2018 09:42:14 +0300 Subject: [PATCH 11/13] Update snippets/StarRating.md Co-Authored-By: Chalarangelo --- snippets/StarRating.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index 3b24e011d..d560cd614 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -54,7 +54,7 @@ const StarRating = (function() { marked={ this.state.selection ? this.state.selection >= i+1 - : this.state.rating >= v + : this.state.rating >= i+1 } /> ))} From c7f1c64598bae015109df0afb47cc5fafcc1992e Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 19 Oct 2018 09:42:38 +0300 Subject: [PATCH 12/13] Update snippets/StarRating.md Co-Authored-By: Chalarangelo --- snippets/StarRating.md | 1 + 1 file changed, 1 insertion(+) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index d560cd614..f33b76e84 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -28,6 +28,7 @@ const StarRating = (function() { selection: 0 }; this.hoverOver = this.hoverOver.bind(this); + this.hoverOut = this.hoverOver.bind(this, null); this.handleClick = this.handleClick.bind(this); } hoverOver(event) { From 8625411ace92b68898f6e8a4259450f4301322fd Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 19 Oct 2018 09:42:43 +0300 Subject: [PATCH 13/13] Update snippets/StarRating.md Co-Authored-By: Chalarangelo --- snippets/StarRating.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/StarRating.md b/snippets/StarRating.md index f33b76e84..39bf22d34 100644 --- a/snippets/StarRating.md +++ b/snippets/StarRating.md @@ -44,7 +44,7 @@ const StarRating = (function() { render() { return (
this.hoverOver(null)} + onMouseOut={this.hoverOut} onClick={this.handleClick} onMouseOver={this.hoverOver} >