react-rating - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/react-rating.js

@@ -1,2 +0,2 @@
-/*! react-rating - 0.1.0 | (c) 2015, 2015  dreyescat | MIT | https://github.com/dreyescat/react-rating */
+/*! react-rating - 0.2.0 | (c) 2015, 2016  dreyescat | MIT | https://github.com/dreyescat/react-rating */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -100,2 +100,3 @@ if(typeof exports === 'object' && typeof module === 'object')
 	    initialRate: React.PropTypes.number,
+	    placeholderRate: React.PropTypes.number,
 	    empty: React.PropTypes.oneOfType([
@@ -108,2 +109,9 @@ // Array of class names and/or style objects.
 	    React.PropTypes.object]),
+	    placeholder: React.PropTypes.oneOfType([
+	    // Array of class names and/or style objects.
+	    React.PropTypes.arrayOf(React.PropTypes.oneOfType[(React.PropTypes.string, React.PropTypes.object)]),
+	    // Class names.
+	    React.PropTypes.string,
+	    // Style objects.
+	    React.PropTypes.object]),
 	    full: React.PropTypes.oneOfType([
@@ -128,2 +136,3 @@ // Array of class names and/or style objects.
 	      empty: Style.empty,
+	      placeholder: Style.full,
 	      full: Style.full,
@@ -137,9 +146,11 @@ fractions: 1,
 	  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+	    var rate = nextProps.initialRate > 0 ? nextProps.initialRate : nextProps.placeholderRate;
 	    this.setState({
-	      index: indexOf(nextProps, nextProps.initialRate)
+	      index: indexOf(nextProps, rate)
 	    });
 	  },
 	  getInitialState: function getInitialState() {
+	    var index = this.props.initialRate > 0 ? this.props.initialRate : this.props.placeholderRate;
 	    return {
-	      index: this._rateToIndex(this.props.initialRate),
+	      index: this._rateToIndex(index),
 	      indexOver: undefined
@@ -153,3 +164,4 @@ };
 	      this.setState({
-	        index: index
+	        index: index,
+	        selected: true
 	      });
@@ -196,2 +208,3 @@ }
 	    var empty = [].concat(this.props.empty);
+	    var placeholder = [].concat(this.props.placeholder);
 	    var full = [].concat(this.props.full);
@@ -203,2 +216,5 @@ // The symbol with the mouse over prevails over the selected one.
 	    // Render the number of whole symbols.
+
+	    var icon = !this.state.selected && !this.props.initialRate && this.props.placeholderRate > 0 && this.state.indexOver == undefined ? placeholder : full;
+
 	    for (var i = 0; i < Math.floor(this._rateToIndex(this.props.stop)); i++) {
@@ -209,6 +225,7 @@ // Return the percentage of the decimal part of the last full index,
 	      var percent = i - lastFullIndex === 0 ? index % 1 * 100 : i - lastFullIndex < 0 ? 100 : 0;
+
 	      symbolNodes.push(React.createElement(Symbol, {
 	        key: i,
 	        background: empty[i % empty.length],
-	        icon: full[i % full.length],
+	        icon: icon[i % icon.length],
 	        percent: percent,
@@ -305,3 +322,3 @@ onMouseDown: !this.props.readonly && this.handleMouseDown.bind(this, i),
 	    // If it is a string, use it as class names.
-	    if (toString.call(icon) === '[object String]') {
+	    if (Object.prototype.toString.call(icon) === '[object String]') {
 	      return React.createElement('div', { className: icon });
@@ -308,0 +325,0 @@ }

lib/react-rating.min.js

@@ -1,2 +0,2 @@
-/*! react-rating - 0.1.0 | (c) 2015, 2015  dreyescat | MIT | https://github.com/dreyescat/react-rating */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactRating=e(require("react")):t.ReactRating=e(t.React)}(this,function(t){return function(t){function e(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="/lib",e(0)}([function(t,e,o){"use strict";t.exports=o(3)},function(e,o){e.exports=t},function(t,e,o){"use strict";var n=o(1),r=n.createClass({displayName:"PercentageSymbol",propTypes:!1,_iconNode:function(t){return n.isValidElement(t)?t:"object"==typeof t&&null!==t?n.createElement("div",{style:t}):"[object String]"===toString.call(t)?n.createElement("div",{className:t}):void 0},render:function(){var t=this._iconNode(this.props.background),e=this._iconNode(this.props.icon),o={display:"inline-block",position:"absolute",overflow:"hidden",top:0,left:0,width:void 0!==this.props.percent?this.props.percent+"%":"auto"},r={cursor:this.props.onMouseDown||this.props.onMouseOver?"pointer":"auto",display:"inline-block",position:"relative"};return n.createElement("span",{style:r,onMouseDown:this.props.onMouseDown,onMouseMove:this.props.onMouseMove},t,n.createElement("div",{style:o},e))}});t.exports=r},function(t,e,o){"use strict";var n=o(1),r=o(5),i=o(2),s=function(t,e){var o=t.step,n=o>0?t.start:t.stop,r=o>0?t.stop:t.start;return o&&e>=n&&r>=e?(e-t.start)/o:void 0},a=n.createClass({displayName:"Rating",propTypes:!1,getDefaultProps:function(){return{start:0,stop:5,step:1,empty:r.empty,full:r.full,fractions:1,scale:3,onChange:function(t){},onRate:function(t){}}},componentWillReceiveProps:function(t){this.setState({index:s(t,t.initialRate)})},getInitialState:function(){return{index:this._rateToIndex(this.props.initialRate),indexOver:void 0}},handleMouseDown:function(t,e){var o=t+this._fractionalIndex(e);this.state.index!==o&&(this.props.onChange(this._indexToRate(o)),this.setState({index:o}))},handleMouseLeave:function(){this.props.onRate(),this.setState({indexOver:void 0})},handleMouseMove:function(t,e){var o=t+this._fractionalIndex(e);this.state.indexOver!==o&&(this.props.onRate(this._indexToRate(o)),this.setState({indexOver:o}))},_indexToRate:function(t){return this.props.start+Math.floor(t)*this.props.step+this.props.step*this._roundToFraction(t%1)},_rateToIndex:function(t){return s(this.props,t)},_roundToFraction:function(t){var e=Math.ceil(t%1*this.props.fractions)/this.props.fractions,o=Math.pow(10,this.props.scale);return Math.floor(t)+Math.floor(e*o)/o},_fractionalIndex:function(t){var e=t.clientX-t.currentTarget.getBoundingClientRect().left;return this._roundToFraction(e/t.currentTarget.offsetWidth)},render:function(){for(var t=[],e=[].concat(this.props.empty),o=[].concat(this.props.full),r=void 0!==this.state.indexOver?this.state.indexOver:this.state.index,s=Math.floor(r),a=0;a<Math.floor(this._rateToIndex(this.props.stop));a++){var p=a-s===0?r%1*100:0>a-s?100:0;t.push(n.createElement(i,{key:a,background:e[a%e.length],icon:o[a%o.length],percent:p,onMouseDown:!this.props.readonly&&this.handleMouseDown.bind(this,a),onMouseMove:!this.props.readonly&&this.handleMouseMove.bind(this,a)}))}return n.createElement("span",{onMouseLeave:!this.props.readonly&&this.handleMouseLeave},t)}});t.exports=a},function(t,e){"use strict";t.exports=function(){for(var t={},e=0;e<arguments.length;e++){var o=arguments[e];for(var n in o)t[n]=o[n]}return t}},function(t,e,o){"use strict";var n=o(4),r={display:"inline-block",borderRadius:"50%",border:"5px double white",width:30,height:30};t.exports={empty:n(r,{backgroundColor:"#ccc"}),full:n(r,{backgroundColor:"black"})}}])});
+/*! react-rating - 0.2.0 | (c) 2015, 2016  dreyescat | MIT | https://github.com/dreyescat/react-rating */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactRating=e(require("react")):t.ReactRating=e(t.React)}(this,function(t){return function(t){function e(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="/lib",e(0)}([function(t,e,o){"use strict";t.exports=o(3)},function(e,o){e.exports=t},function(t,e,o){"use strict";var n=o(1),r=n.createClass({displayName:"PercentageSymbol",propTypes:!1,_iconNode:function(t){return n.isValidElement(t)?t:"object"==typeof t&&null!==t?n.createElement("div",{style:t}):"[object String]"===Object.prototype.toString.call(t)?n.createElement("div",{className:t}):void 0},render:function(){var t=this._iconNode(this.props.background),e=this._iconNode(this.props.icon),o={display:"inline-block",position:"absolute",overflow:"hidden",top:0,left:0,width:void 0!==this.props.percent?this.props.percent+"%":"auto"},r={cursor:this.props.onMouseDown||this.props.onMouseOver?"pointer":"auto",display:"inline-block",position:"relative"};return n.createElement("span",{style:r,onMouseDown:this.props.onMouseDown,onMouseMove:this.props.onMouseMove},t,n.createElement("div",{style:o},e))}});t.exports=r},function(t,e,o){"use strict";var n=o(1),r=o(5),i=o(2),s=function(t,e){var o=t.step,n=o>0?t.start:t.stop,r=o>0?t.stop:t.start;return o&&e>=n&&r>=e?(e-t.start)/o:void 0},a=n.createClass({displayName:"Rating",propTypes:!1,getDefaultProps:function(){return{start:0,stop:5,step:1,empty:r.empty,placeholder:r.full,full:r.full,fractions:1,scale:3,onChange:function(t){},onRate:function(t){}}},componentWillReceiveProps:function(t){var e=t.initialRate>0?t.initialRate:t.placeholderRate;this.setState({index:s(t,e)})},getInitialState:function(){var t=this.props.initialRate>0?this.props.initialRate:this.props.placeholderRate;return{index:this._rateToIndex(t),indexOver:void 0}},handleMouseDown:function(t,e){var o=t+this._fractionalIndex(e);this.state.index!==o&&(this.props.onChange(this._indexToRate(o)),this.setState({index:o,selected:!0}))},handleMouseLeave:function(){this.props.onRate(),this.setState({indexOver:void 0})},handleMouseMove:function(t,e){var o=t+this._fractionalIndex(e);this.state.indexOver!==o&&(this.props.onRate(this._indexToRate(o)),this.setState({indexOver:o}))},_indexToRate:function(t){return this.props.start+Math.floor(t)*this.props.step+this.props.step*this._roundToFraction(t%1)},_rateToIndex:function(t){return s(this.props,t)},_roundToFraction:function(t){var e=Math.ceil(t%1*this.props.fractions)/this.props.fractions,o=Math.pow(10,this.props.scale);return Math.floor(t)+Math.floor(e*o)/o},_fractionalIndex:function(t){var e=t.clientX-t.currentTarget.getBoundingClientRect().left;return this._roundToFraction(e/t.currentTarget.offsetWidth)},render:function(){for(var t=[],e=[].concat(this.props.empty),o=[].concat(this.props.placeholder),r=[].concat(this.props.full),s=void 0!==this.state.indexOver?this.state.indexOver:this.state.index,a=Math.floor(s),p=!this.state.selected&&!this.props.initialRate&&this.props.placeholderRate>0&&void 0==this.state.indexOver?o:r,c=0;c<Math.floor(this._rateToIndex(this.props.stop));c++){var l=c-a===0?s%1*100:0>c-a?100:0;t.push(n.createElement(i,{key:c,background:e[c%e.length],icon:p[c%p.length],percent:l,onMouseDown:!this.props.readonly&&this.handleMouseDown.bind(this,c),onMouseMove:!this.props.readonly&&this.handleMouseMove.bind(this,c)}))}return n.createElement("span",{onMouseLeave:!this.props.readonly&&this.handleMouseLeave},t)}});t.exports=a},function(t,e){"use strict";t.exports=function(){for(var t={},e=0;e<arguments.length;e++){var o=arguments[e];for(var n in o)t[n]=o[n]}return t}},function(t,e,o){"use strict";var n=o(4),r={display:"inline-block",borderRadius:"50%",border:"5px double white",width:30,height:30};t.exports={empty:n(r,{backgroundColor:"#ccc"}),full:n(r,{backgroundColor:"black"})}}])});

package.json

 {
   "name": "react-rating",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A rating react component with custom symbols",
@@ -5,0 +5,0 @@ "main": "lib/react-rating.js",

README.md

@@ -53,12 +53,14 @@ # React Rating
 
-Property      | Type                                           | Default              | Description
----           | ---                                            | ---                  | ---
-`start`       | *number*                                       | 0                    | Range starting value (exclusive).
-`stop`        | *number*                                       | 5                    | Range stop value (inclusive).
-`step`        | *number*                                       | 1                    | Step increment (negative) or decrement (positive).
-`initialRate` | *number*                                       | undefined            | Initial rate value.
-`empty`       | *element* or *object* or *string* or *array*   | Style.empty          | React element, inline style object, or classes applied to the rating symbols when empty. Or an array of such symbols that will be applied in a circular manner (round-robin).
-`full`        | *element* or *object* or *string* or *array*   | Style.full           | React element, inline style object, or classes applied to the rating symbols when full. Or an array of such symbols that will be applied in a circular manner (round-robin).
-`readonly`    | *bool*                                         | false                | Whether the rating can be modified or not.
-`fractions`   | *number*                                       | 1                    | Number of equal parts that make up a whole symbol.
+Property          | Type                                           | Default              | Description
+---               | ---                                            | ---                  | ---
+`start`           | *number*                                       | 0                    | Range starting value (exclusive).
+`stop`            | *number*                                       | 5                    | Range stop value (inclusive).
+`step`            | *number*                                       | 1                    | Step increment (positive) or decrement (negative).
+`placeholderRate` | *number*                                       | undefined            | Placeholder rate value.
+`initialRate`     | *number*                                       | undefined            | Initial rate value.
+`empty`           | *element* or *object* or *string* or *array*   | Style.empty          | React element, inline style object, or classes applied to the rating symbols when empty. Or an array of such symbols that will be applied in a circular manner (round-robin).
+`placeholder`     | *element* or *object* or *string* or *array*   | Style.full           | React element, inline style object, or classes applied to the rating symbols in HTML input placeholder fashion. Or an array of such symbols that will be applied in a circular manner (round-robin).
+`full`            | *element* or *object* or *string* or *array*   | Style.full           | React element, inline style object, or classes applied to the rating symbols when full. Or an array of such symbols that will be applied in a circular manner (round-robin).
+`readonly`        | *bool*                                         | false                | Whether the rating can be modified or not.
+`fractions`       | *number*                                       | 1                    | Number of equal parts that make up a whole symbol.
 
@@ -65,0 +67,0 @@ ## Callbacks

No alert changes

Improved metrics

Total package byte prevSize

21997

increased by7.58%

Lines of code

314

increased by4.67%

Number of lines in readme file

76

increased by2.7%

No dependency changes