react-selectize - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

CHANGELOG.md

@@ -37,1 +37,5 @@ # React Selectize
 * avoid firing onValueChange with undefined value when the user enters new search text
+
+## v0.2.3 / 23rd September 2015
+* fixed a bug where passing a single child element would not show up in the dropdown
+* fixed other minor bugs identified by unit testing

package.json

 {
   "name": "react-selectize",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "react implementation of selectize",
@@ -8,3 +8,4 @@ "main": "src/index.js",
     "test": "mocha test/index.ls --compilers ls:livescript",
-    "coverage": "istanbul cover _mocha -- test/index.ls --require should --compilers ls:livescript"
+    "coverage": "istanbul cover _mocha -- test/index.ls --require should --compilers ls:livescript",
+    "coveralls": "istanbul cover _mocha -- test/index.ls --require should --compilers ls:livescript  && cat coverage/lcov.info | coveralls"
   },
@@ -23,2 +24,3 @@ "author": "Furqan Zafar",
     "browserify-shim": "^3.8.10",
+    "coveralls": "^2.11.4",
     "gulp": "^3.8.11",
@@ -32,2 +34,3 @@ "gulp-connect": "^2.2.0",
     "gulp-util": "^3.0.4",
+    "istanbul": "^0.3.20",
     "jquery-browserify": "^1.8.1",
@@ -37,2 +40,4 @@ "jsdom": "^3.1.2",
     "livescript": "^1.4.0",
+    "mocha": "^2.3.3",
+    "mocha-lcov-reporter": "^1.0.0",
     "nib": "^1.1.0",
@@ -39,0 +44,0 @@ "react-tools": "^0.13.3",

README.md

@@ -0,5 +1,7 @@
+[![Build Status](https://travis-ci.org/furqanZafar/react-selectize.svg?branch=develop)](https://travis-ci.org/furqanZafar/react-selectize)    [![Coverage Status](https://coveralls.io/repos/furqanZafar/react-selectize/badge.svg?branch=develop&service=github)](https://coveralls.io/github/furqanZafar/react-selectize?branch=develop)
+
 # React Selectize
-A flexible & stateless select component for ReactJS built with livescript and love.
+A flexible & stateless select component for ReactJS built with livescript and love. Inspired by [Selectize](http://brianreavis.github.io/selectize.js/) & [React Select](http://jedwatson.github.io/react-select/)
 
-ReactSelectize comes in 3 flavors SimpleSelect (or single select), MultiSelect & ReactSelectize. Both the SimpleSelect & the MultiSelect components are built on top of the stateless ReactSelectize component.
+ReactSelectize comes in 3 flavors `SimpleSelect` (or single select), `MultiSelect` & `ReactSelectize`. Both the `SimpleSelect` & the `MultiSelect` components are built on top of the stateless `ReactSelectize` component.
 
@@ -103,2 +105,36 @@ LIVE DEMO: [furqanZafar.github.io/react-selectize](http://furqanZafar.github.io/react-selectize/)
 
+## Gotchas
+* the default structure of an option object is `{label: String, value :: a}` where `a` implies that `value` property can be of any equatable type
+
+* SimpleSelect notifies change via `onValueChange` prop whereas MultiSelect notifies change via `onValuesChange` prop
+
+* the onValueChange callback for SimpleSelect is passed 2 parameters. the `selected option object` (instead of the value property of the option object) and a `callback`
+
+* the onValuesChange callback for MultiSelect is passed 2 parameters an Array  of selected option objects (instead of a collection of the value properties or a comma separated string of value properties) and a `callback`
+
+* all the `on*Change` functions receive a callback as the final parameter, which MUST always be invoked, for example when using state for the `value` prop of `SimpleSelect` the `onValueChange` callback implementation would look like this:
+```
+value = {{label: "apple", value: "apple"}}
+onValueChange = {function(value, callback){
+    self.setState(value, callback);
+}}
+```
+when relying on the components internal state for managing the value:
+```
+onValueChange = {function(value, callback){
+    console.log(value);
+    callback(); // must invoke callback    
+}}
+```
+
+* when using custom option object, you MUST implement the `uid` function which accepts an option object and returns a unique id, for example:
+```
+// assuming the type of our option object is:
+// {firstName :: String, lastName :: String, age :: Int}
+uid = {function(item){
+    return item.firstName + item.lastName;    
+}}
+```
+the `uid` function is used internally for faster performance by avoiding unnecessary option & value rendering. 
+
 ## SimpleSelect Props
@@ -163,9 +199,5 @@
 * `npm install`
-* copy the following to `config.ls`
-```
-module.exports = 
-    minify: true
-```
 * `gulp`
 * visit `localhost:8000`
-
+* `npm test` , `npm run coverage` for unit tests & coverage
+* for production build/test run `MINIFY=true gulp`

src/MultiSelect.js

@@ -14,8 +14,3 @@ (function(){
           var this$ = this;
-          return function(it){
-            return it != null
-              ? it
-              : [];
-          }(
-          filter(function(it){
+          return filter(function(it){
             return it.label.toLowerCase().trim().indexOf(search.toLowerCase().trim()) > -1;
@@ -30,7 +25,6 @@ })(
           })(
-          options)));
+          options));
         }),
         onBlur: function(values, reason){},
-        onFocus: function(values, reason){},
-        options: []
+        onFocus: function(values, reason){}
       };
@@ -97,3 +91,5 @@ },
           }, function(){
-            return this$.props.onBlur(values, reason);
+            return onSearchChange("", function(){
+              return this$.props.onBlur(values, reason);
+            });
           });
@@ -165,4 +161,9 @@ },
           return map(function(arg$){
-            var ref$, value, children;
-            ref$ = arg$.props, value = ref$.value, children = ref$.children;
+            var props, value, children;
+            if (arg$ != null) {
+              props = arg$.props;
+            }
+            if (props != null) {
+              value = props.value, children = props.children;
+            }
             return {
@@ -213,3 +214,3 @@ label: children,
         return 0;
-      case typeof (options != null ? (ref$ = options[0]) != null ? ref$.newOption : void 8 : void 8) !== 'undefined':
+      case typeof ((ref$ = options[0]) != null ? ref$.newOption : void 8) !== 'undefined':
         return 0;
@@ -241,3 +242,2 @@ default:
     showOptions: function(callback){
-      callback == null && (callback = function(){});
       this.setState({
@@ -244,0 +244,0 @@ open: (function(){

src/ReactSelectize.js

@@ -130,3 +130,3 @@ (function(){
     render: function(){
-      var anchorIndex, renderSelectedValues, renderOptions, ref$, ref1$, groups, this$ = this;
+      var anchorIndex, renderSelectedValues, ref$, ref1$, renderOptions, ref2$, groups, this$ = this;
       anchorIndex = (function(){
@@ -160,3 +160,3 @@ var ref$;
       return div({
-        className: ("react-selectize \n" + this.props.className + " \n" + (this.props.disabled ? 'disabled' : '') + " \n" + (this.props.open ? 'open' : '') + " \n" + (this.props.dropdownDirection === -1 ? 'flipped' : '')).replace(/\s+/g, ' '),
+        className: "react-selectize " + ((ref$ = (ref1$ = this.props) != null ? ref1$.className : void 8) != null ? ref$ : '') + " " + (this.props.disabled ? 'disabled' : '') + " " + (this.props.open ? 'open' : '') + " " + (this.props.dropdownDirection === -1 ? 'flipped' : ''),
         style: this.props.style
@@ -240,3 +240,3 @@ }, div({
                       return isEqualToObject(it, valueToRemove);
-                    }, this$.props.values === 'undefined')) {
+                    }, this$.props.values) === 'undefined') {
                       if (!!this$.props.restoreOnBackspace) {
@@ -398,3 +398,3 @@ return this$.props.onSearchChange(this$.props.restoreOnBackspace(valueToRemove), function(){
         ? this.props.renderNoResultsFound()
-        : ((ref$ = this.props) != null ? (ref1$ = ref$.groups) != null ? ref1$.length : void 8 : void 8) > 0
+        : ((ref$ = this.props) != null ? (ref2$ = ref$.groups) != null ? ref2$.length : void 8 : void 8) > 0
           ? (groups = map(function(index){
@@ -448,3 +448,4 @@ var group, groupId, options;
     componentDidMount: function(){
-      var this$ = this;
+      var rootNode, this$ = this;
+      rootNode = findDOMNode(this);
       this.externalClickListener = function(arg$){
@@ -457,3 +458,3 @@ var target, domNodeContains;
           }
-          if (element === findDOMNode(this$)) {
+          if (element === rootNode) {
             return true;
@@ -460,0 +461,0 @@ }

src/SimpleSelect.js

 (function(){
-  var ref$, all, any, drop, camelize, difference, filter, find, findIndex, last, map, reject, isEqualToObject, React, createFactory, div, img, span, ReactSelectize;
+  var ref$, all, any, drop, camelize, difference, filter, find, findIndex, last, map, reject, isEqualToObject, React, createFactory, div, img, span, ReactSelectize, toString$ = {}.toString;
   ref$ = require('prelude-ls'), all = ref$.all, any = ref$.any, drop = ref$.drop, camelize = ref$.camelize, difference = ref$.difference, filter = ref$.filter, find = ref$.find, findIndex = ref$.findIndex, last = ref$.last, map = ref$.map, reject = ref$.reject;
@@ -16,5 +16,3 @@ isEqualToObject = require('prelude-extension').isEqualToObject;
           })(
-          options != null
-            ? options
-            : []);
+          options);
         }),
@@ -24,3 +22,6 @@ onBlur: function(value, reason){},
         placeholder: "",
-        style: {}
+        style: {},
+        uid: function(it){
+          return it.value;
+        }
       };
@@ -42,8 +43,4 @@ },
         uid: function(it){
-          var uid, ref$;
-          uid = ((ref$ = this$.props.uid) != null
-            ? ref$
-            : function(it){
-              return it.value;
-            })(it);
+          var uid;
+          uid = this$.props.uid(it);
           return (search.length === 0) + "" + uid;
@@ -212,5 +209,7 @@ },
         case !((ref$ = this.props) != null && ref$.children):
-          return map(function(arg$){
+          return map(function(it){
             var ref$, value, children;
-            ref$ = arg$.props, value = ref$.value, children = ref$.children;
+            if ((ref$ = it != null ? it.props : void 8) != null) {
+              value = ref$.value, children = ref$.children;
+            }
             return {
@@ -221,3 +220,5 @@ label: children,
           })(
-          this.props.children);
+          toString$.call(this.props.children).slice(8, -1) === 'Array'
+            ? this.props.children
+            : [this.props.children]);
         default:
@@ -263,3 +264,3 @@ return [];
         return 0;
-      case typeof (options != null ? (ref$ = options[0]) != null ? ref$.newOption : void 8 : void 8) !== 'undefined':
+      case typeof ((ref$ = options[0]) != null ? ref$.newOption : void 8) !== 'undefined':
         return 0;
@@ -266,0 +267,0 @@ default:

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

Number of lines in readme file

202

increased by18.82%

Worsened metrics

Total package byte prevSize

87483

decreased by-76.7%

Dev dependency count

27

increased by17.39%

Number of package files

14

decreased by-41.67%

Lines of code

1791

decreased by-17.54%

No dependency changes