react-rating - npm Package Compare versions

Comparing version 0.0.17 to 0.1.0

lib/react-rating.js

@@ -1,2 +0,2 @@
-/*! react-rating - 0.0.17 | (c) 2015, 2015  dreyescat | MIT | https://github.com/dreyescat/react-rating */
+/*! react-rating - 0.1.0 | (c) 2015, 2015  dreyescat | MIT | https://github.com/dreyescat/react-rating */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -282,9 +282,24 @@ if(typeof exports === 'object' && typeof module === 'object')
 	  propTypes: "boolean" !== 'undefined' && (true) && {
-	    icon: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
-	    background: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
+	    icon: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object, React.PropTypes.element]),
+	    background: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object, React.PropTypes.element]),
 	    percent: React.PropTypes.number
 	  },
+	  // Return the corresponding React node for an icon.
+	  _iconNode: function _iconNode(icon) {
+	    // If it is already a React Element just return it.
+	    if (React.isValidElement(icon)) {
+	      return icon;
+	    }
+	    // If it is an object, try to use it as a CSS style object.
+	    if (typeof icon === 'object' && icon !== null) {
+	      return React.createElement('div', { style: icon });
+	    }
+	    // If it is a string, use it as class names.
+	    if (toString.call(icon) === '[object String]') {
+	      return React.createElement('div', { className: icon });
+	    }
+	  },
 	  render: function render() {
-	    var backgroundNode = typeof this.props.background === 'string' ? React.createElement('div', { className: this.props.background }) : React.createElement('div', { style: this.props.background });
-	    var iconNode = typeof this.props.icon === 'string' ? React.createElement('div', { className: this.props.icon }) : React.createElement('div', { style: this.props.icon });
+	    var backgroundNode = this._iconNode(this.props.background);
+	    var iconNode = this._iconNode(this.props.icon);
 	    var iconContainerStyle = {
@@ -291,0 +306,0 @@ display: 'inline-block',

lib/react-rating.min.js

@@ -1,2 +0,2 @@
-/*! react-rating - 0.0.17 | (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,render:function(){var t="string"==typeof this.props.background?n.createElement("div",{className:this.props.background}):n.createElement("div",{style:this.props.background}),e="string"==typeof this.props.icon?n.createElement("div",{className:this.props.icon}):n.createElement("div",{style: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),s=o(2),i=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:i(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 i(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,i=Math.floor(r),a=0;a<Math.floor(this._rateToIndex(this.props.stop));a++){var p=a-i===0?r%1*100:0>a-i?100:0;t.push(n.createElement(s,{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.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"})}}])});

package.json

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

README.md

@@ -53,12 +53,12 @@ # 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`       | *string* or *object* or *array*   | Style.empty          | 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`        | *string* or *object* or *array*   | Style.full           | 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 (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.
 
@@ -65,0 +65,0 @@ ## Callbacks

No alert changes

Improved metrics

Total package byte prevSize

20448

increased by2.62%

Lines of code

300

increased by5.26%

No dependency changes