react-star-rating-input - npm Package Compare versions

Comparing version 6.1.2 to 7.0.0

demo.js

@@ -5,3 +5,3 @@ (function () {
     var React = require('react'),
-        IntlMixin = require('react-intl').IntlMixin,
+        ReactDOM = require('react-dom'),
         insertCss = require('insert-css'),
@@ -11,4 +11,2 @@ StarRatingInput = require('./index'),
         Container = React.createClass({
-            mixins: [IntlMixin],
-
             render: function () {
@@ -29,10 +27,6 @@ return React.createElement(StarRatingInput.Klass, {
 
-    React.render(
-        React.createElement(
-            Container,
-            {messages: StarRatingInput.intlMessages().en}
-        ),
-
-        global.document.body
+    ReactDOM.render(
+        React.createElement(Container),
+        global.document.getElementById('root')
     );
 }());

index.js

@@ -5,8 +5,6 @@ (function () {
     var StarRatingInput = require('./src/StarRatingInput'),
-        css = require('./src/css'),
-        intlMessages = require('./src/intlMessages');
+        css = require('./src/css');
 
     exports.Klass = StarRatingInput;
     exports.css = css;
-    exports.intlMessages = intlMessages;
 }());

package.json

 {
   "name": "react-star-rating-input",
-  "version": "6.1.2",
+  "version": "7.0.0",
   "description": "React.js component for entering 0-5 stars",
@@ -8,5 +8,5 @@ "main": "index.js",
     "pretest": "jshint tests src index.js demo.js",
-    "test": "mocha --require ./test-hook -b tests/*.spec.js",
+    "test": "mocha -r tests/helpers/jsdom-bootstrap -b tests/*.spec.js",
     "build": "browserify demo.js | uglifyjs > www/bundle.js",
-    "tdd": "mocha --require ./test-hook -b -R min -w tests/*.spec.js"
+    "tdd": "mocha -r tests/helpers/jsdom-bootstrap -b -R min -w tests/*.spec.js"
   },
@@ -36,16 +36,15 @@ "repository": {
   },
-  "dependencies": {
-    "react": "^0.13.3",
-    "react-intl": "^1.2.2"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "browserify": "^9.0.8",
+    "browserify": "^13.0.1",
     "insert-css": "^0.2.0",
-    "intl": "^0.1.4",
-    "jsdom-test-browser": "^2.1.0",
-    "jshint": "^2.7.0",
-    "mocha": "^2.2.4",
-    "sinon": "^1.14.1",
-    "uglify-js": "^2.4.20"
+    "jsdom": "^9.2.1",
+    "jshint": "^2.9.2",
+    "mocha": "^2.5.3",
+    "react": "^15.1.0",
+    "react-addons-test-utils": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "sinon": "^1.17.4",
+    "uglify-js": "^2.6.2"
   }
 }

README.md

@@ -25,2 +25,4 @@ [![Build Status](https://travis-ci.org/ikr/react-star-rating-input.svg?branch=master)](https://travis-ci.org/ikr/react-star-rating-input)
 * `showClear` -- hides the "Clear" link when `false`. The default value is `true`
+* `clearLabel` -- custom text for the "Clear" link
+* `clearHint` -- custom `<a>`'s title, a tooltip for the "Clear" link on mouse-hover
 
@@ -31,31 +33,1 @@ Interaction
 * `onChange: function (value) {...}` -- your `value` change handler
-
-## Internationalization
-
-[react-intl](https://github.com/yahoo/react-intl)-based. To translate the component, please pass the
-`messages` property, containing:
-
-```js
-{
-    'react-star-rating-input': {
-        clear: 'Clear',
-        clearHint: 'Reset value to no stars'
-    }
-}
-```
-
-Why have a `react-intl` dependency instead of just setting the `clear` and `clearHint` text as
-props?
-
-Well, that allows using `react-star-rating-input` uniformly in bigger applications, and passing all
-the namespaced translations, from the root, down the React components hierarchy, -- automatically,
-with the help of `IntlMixin`.
-
-Please note, that `react-intl` depends on global `Intl` object. You can polyfill it with
-[intl](https://github.com/andyearnshaw/Intl.js) package:
-
-```
-if (!global.Intl) {
-    require('intl');
-}
-```

src/StarRatingInput.js

 (function () {
     'use strict';
 
-    var React = require('react'),
-        ReactIntl = require('react-intl'),
-        IntlMixin = ReactIntl.IntlMixin,
-        FormattedMessage = ReactIntl.FormattedMessage;
+    var React = require('react');
 
     module.exports = React.createClass({
-        mixins: [IntlMixin],
         propTypes: {
@@ -21,3 +17,5 @@ value: React.PropTypes.number,
                 size: 5,
-                showClear: true
+                showClear: true,
+                clearLabel: 'Clear',
+                clearHint: 'Reset value to no stars'
             };
@@ -31,18 +29,23 @@ },
         render: function () {
-            return React.DOM.div(
+            return React.createElement(
+                'div',
                 {className: 'star-rating-input'},
-                [this.clearingItem()].concat(this.starItems())
+                this.clearingItems().concat(this.starItems())
             );
         },
 
-        clearingItem: function () {
-            return React.DOM.div(
+        clearingItems: function () {
+            if (!this.props.showClear) {
+                return [];
+            }
+
+            return [React.createElement(
+                'div',
                 {className: 'star-rating-clear-container', key: 0},
 
-                React.DOM.a({
+                React.createElement('a', {
                     className: 'star-rating-clear',
-                    title: this.getIntlMessage('react-star-rating-input.clearHint'),
+                    title: this.props.clearHint,
                     href: '',
                     ref: 's0',
-                    style: this.props.showClear ? null : {display: 'none'},
 
@@ -54,6 +57,5 @@ onClick: function (e) {
                     }.bind(this)
-                }, React.createElement(FormattedMessage, {
-                    message: this.getIntlMessage('react-star-rating-input.clear')
-                }))
-            );
+                }, this.props.clearLabel)
+            )];
+
         },
@@ -71,6 +73,7 @@
         starItem: function (value, mode) {
-            return React.DOM.div(
+            return React.createElement(
+                'div',
                 {className: 'star-rating-star-container', key: value},
 
-                React.DOM.a({
+                React.createElement('a', {
                     className: 'star-rating-star ' + mode,
@@ -77,0 +80,0 @@ title: value,

tests/index.spec.js

@@ -5,8 +5,4 @@ describe('package index', function () {
     var assert = require('assert'),
-        bro = require('jsdom-test-browser'),
-        api = require('../index'),
-        intlMessages = require('../src/intlMessages');
+        api = require('../index');
 
-    assert(bro);
-
     it('exports the component class', function () {
@@ -20,6 +16,2 @@ assert(api.Klass);
     });
-
-    it('exports the intlMessages', function () {
-        assert.strictEqual(api.intlMessages, intlMessages);
-    });
 });

tests/StarRatingInput.spec.js

@@ -6,11 +6,10 @@ describe('StarRatingInput', function () {
         sinon = require('sinon'),
-        bro = require('jsdom-test-browser'),
         React = require('react'),
-        TestUtils = require('react/addons').addons.TestUtils,
+        ReactDOM = require('react-dom'),
+        TestUtils = require('react-addons-test-utils'),
+        massert = require('./helpers/massert'),
         StarRatingInput = require('../src/StarRatingInput'),
-        intlMessages = require('../src/intlMessages'),
 
         props = function (value, size, showClear, onChange) {
             return {
-                messages: intlMessages().en,
                 value: value,
@@ -23,4 +22,2 @@ size: size || 5,
 
-    before(function (done) { bro.jQueryify(done); });
-
     ['value', 'onChange'].forEach(function (p) {
@@ -34,26 +31,31 @@ it('declares the ' + p + ' property', function () {
         var element = function (size, showClear) {
-            return TestUtils.renderIntoDocument(
-                React.createElement(StarRatingInput, props(0, size, showClear))
-            ).getDOMNode();
+            return ReactDOM.findDOMNode(
+                TestUtils.renderIntoDocument(
+                    React.createElement(StarRatingInput, props(0, size, showClear))
+                )
+            );
         };
 
         it('has the root element\'s class assigned', function () {
-            assert(bro.$(element()).hasClass('star-rating-input'));
+            massert.cssClass(element(), 'star-rating-input');
         });
 
         it('has the "Clear" link', function () {
-            assert.strictEqual(bro.$('a.star-rating-clear', element()).text(), 'Clear');
-            assert.strictEqual(bro.$('a.star-rating-clear', element()).css('display'), '');
+            var aClear = element().querySelector('a.star-rating-clear');
+
+            assert.strictEqual(aClear.textContent, 'Clear');
+            assert(!aClear.hasAttribute('style'));
         });
 
         it('does not have "Clear" link when showClear is false', function () {
-            assert.strictEqual(bro.$('a.star-rating-clear', element(5, false)).css('display'), 'none');
+            assert.strictEqual(element(5, false).querySelector('a.star-rating-clear'), null);
         });
 
         it('has the 5 star items as default', function () {
-            assert.strictEqual(bro.$('.star-rating-star-container', element()).size(), 5);
+            assert.strictEqual(element().querySelectorAll('.star-rating-star-container').length, 5);
         });
 
         it('has the N star items', function () {
-          assert.strictEqual(bro.$('.star-rating-star-container', element(10)).size(), 10);
+            assert.strictEqual(
+                element(10).querySelectorAll('.star-rating-star-container').length, 10);
         });
@@ -64,9 +66,12 @@ });
         var assertState = function (element, onCount, offCount, suggestedCount) {
-                assert.strictEqual(bro.$('.star-rating-star-container a.on', element).size(), onCount);
+                assert.strictEqual(
+                    element.querySelectorAll('.star-rating-star-container a.on').length, onCount);
 
                 assert.strictEqual(
-                    bro.$('.star-rating-star-container a.off', element).size(), offCount);
+                    element.querySelectorAll('.star-rating-star-container a.off').length, offCount);
 
                 assert.strictEqual(
-                    bro.$('.star-rating-star-container a.suggested', element).size(), suggestedCount);
+                    element.querySelectorAll('.star-rating-star-container a.suggested').length,
+                    suggestedCount
+                );
             },
@@ -80,3 +85,3 @@
                 component.setState({prospectiveValue: prospectiveValue});
-                return component.getDOMNode();
+                return ReactDOM.findDOMNode(component);
             };
@@ -119,3 +124,3 @@
             component = TestUtils.renderIntoDocument(
-                React.createElement(StarRatingInput, props(1, 5, false, spy))
+                React.createElement(StarRatingInput, props(1, 5, true, spy))
             );
@@ -163,23 +168,24 @@
         var element = function (size, showClear) {
-            var properties = props(0, size, showClear);
-            properties.messages = {
-                'react-star-rating-input': {
-                    clear: 'Очистить',
-                    clearHint: 'Сбросить'
-                }
+                var properties = props(0, size, showClear);
+
+                properties.clearLabel = 'Очистить';
+                properties.clearHint = 'Сбросить';
+
+                return ReactDOM.findDOMNode(
+                    TestUtils.renderIntoDocument(
+                        React.createElement(StarRatingInput, properties)
+                    )
+                );
             };
 
-            return TestUtils.renderIntoDocument(
-                React.createElement(StarRatingInput, properties)
-            ).getDOMNode();
-        };
-
         it('includes link text', function () {
-            assert.strictEqual(bro.$('a.star-rating-clear', element()).text(), 'Очистить');
+            assert.strictEqual(
+                element().querySelector('a.star-rating-clear').textContent, 'Очистить');
         });
 
         it('includes link title', function () {
-            assert.strictEqual(bro.$('a.star-rating-clear', element()).attr('title'), 'Сбросить');
+            assert.strictEqual(
+                element().querySelector('a.star-rating-clear').getAttribute('title'), 'Сбросить');
         });
     });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

27024

decreased by-4.16%

Dev dependency count

10

increased by25%

Lines of code

353

decreased by-4.59%

Number of lines in readme file

32

decreased by-46.67%

Dependency changes

• - Removedreact@^0.13.3

• - Removedreact-intl@^1.2.2

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedintl-format-cache@2.0.5(transitive)

• - Removedintl-messageformat@1.1.0(transitive)

• - Removedintl-messageformat-parser@1.1.0(transitive)

• - Removedintl-relativeformat@1.1.0(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.13.3(transitive)

• - Removedreact-intl@1.2.2(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedwrappy@1.0.2(transitive)