react-selectize - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

@@ -32,2 +32,6 @@ # React Selectize
 * allowing for wide range of react versions including 0.14.x-rc*
-* uid property for MultiSelect components
+* uid property for MultiSelect components
+
+## v0.2.2 / 21st September 2015
+* fixed a bug where the input element would not autosize on entering search text
+* avoid firing onValueChange with undefined value when the user enters new search text

package.json

 {
   "name": "react-selectize",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "react implementation of selectize",
   "main": "src/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "mocha test/index.ls --compilers ls:livescript",
+    "coverage": "istanbul cover _mocha -- test/index.ls --require should --compilers ls:livescript"
   },
@@ -35,2 +36,3 @@ "author": "Furqan Zafar",
     "react-tools": "^0.13.3",
+    "should": "^7.1.0",
     "underscore": "^1.8.3",
@@ -37,0 +39,0 @@ "vinyl-source-stream": "^1.0.0",

README.md

@@ -33,3 +33,3 @@ # React Selectize
 {create-factory}:React = require \react
-{SimpleSelect, MultiSelect, ReactSelectize} = require \ReactSelectize
+{SimpleSelect, MultiSelect, ReactSelectize} = require \react-selectize
 SimpleSelect = create-factory SimpleSelect
@@ -61,3 +61,3 @@ MultiSelect = create-factory MultiSelect
 React = require("react");
-ReactSelectize = require("ReactSelectize");
+ReactSelectize = require("react-selectize");
 SimpleSelect = React.createFactory(ReactSelectize.SimpleSelect);
@@ -64,0 +64,0 @@ MultiSelect = React.createFactory(ReactSelectize.MultiSelect);

src/ReactSelectize.js

@@ -46,3 +46,3 @@ (function(){
           if ($search.scrollWidth > 0) {
-            return $search.style.width = 2 + $search.scrollWidth;
+            return $search.style.width = (2 + $search.scrollWidth) + "px";
           } else {
@@ -66,3 +66,3 @@ x$ = $input = document.createElement('div');
             document.body.appendChild($input);
-            $search.style.width = 4 + $input.clientWidth;
+            $search.style.width = (4 + $input.clientWidth) + "px";
             return document.body.removeChild($input);
@@ -479,4 +479,4 @@ }
       x$ = $search = findDOMNode(this.refs.search);
-      x$.style.width = 0;
-      x$.style.width = this.props.autosize($search);
+      x$.style.width = "0px";
+      x$.style.width = this.props.autosize($search) + "px";
       if (!!this.refs.dropdown) {
@@ -483,0 +483,0 @@ findDOMNode(this.refs.dropdown).style.bottom = this.props.dropdownDirection === -1 ? findDOMNode(this.refs.control).offsetHeight : "";

src/SimpleSelect.js

 (function(){
-  var ref$, all, any, drop, camelize, difference, filter, find, findIndex, last, map, reject, isEqualToObject, React, createFactory, div, img, span, ReactSelectize, toString$ = {}.toString;
+  var ref$, all, any, drop, camelize, difference, filter, find, findIndex, last, map, reject, isEqualToObject, React, createFactory, div, img, span, ReactSelectize;
   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;
@@ -13,11 +13,8 @@ isEqualToObject = require('prelude-extension').isEqualToObject;
           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;
           })(
-          options));
+          options != null
+            ? options
+            : []);
         }),
@@ -31,3 +28,3 @@ onBlur: function(value, reason){},
     render: function(){
-      var ref$, search, value, values, onSearchChange, onValueChange, filteredOptions, options, autosize, disabled, dropdownDirection, groupId, groups, groupsAsColumns, renderGroupTitle, uid, ref1$, this$ = this;
+      var ref$, search, value, values, onSearchChange, onValueChange, filteredOptions, options, autosize, disabled, dropdownDirection, groupId, groups, groupsAsColumns, renderGroupTitle, uid, this$ = this;
       ref$ = this.getComputedState(), search = ref$.search, value = ref$.value, values = ref$.values, onSearchChange = ref$.onSearchChange, onValueChange = ref$.onValueChange, filteredOptions = ref$.filteredOptions, options = ref$.options;
@@ -37,3 +34,3 @@ ref$ = this.props, autosize = ref$.autosize, disabled = ref$.disabled, dropdownDirection = ref$.dropdownDirection, groupId = ref$.groupId, groups = ref$.groups, groupsAsColumns = ref$.groupsAsColumns, renderGroupTitle = ref$.renderGroupTitle, uid = ref$.uid;
         autosize: autosize,
-        className: "simple-select " + ((ref$ = (ref1$ = this.props) != null ? ref1$.className : void 8) != null ? ref$ : ''),
+        className: "simple-select " + ((ref$ = this.props.className) != null ? ref$ : ''),
         disabled: disabled,
@@ -45,3 +42,11 @@ dropdownDirection: dropdownDirection,
         renderGroupTitle: renderGroupTitle,
-        uid: uid,
+        uid: function(it){
+          var uid, ref$;
+          uid = ((ref$ = this$.props.uid) != null
+            ? ref$
+            : function(it){
+              return it.value;
+            })(it);
+          return (search.length === 0) + "" + uid;
+        },
         ref: 'select',
@@ -76,13 +81,3 @@ anchor: last(values),
         onSearchChange: function(search, callback){
-          return function(){
-            return function(callback){
-              if (search.length > 0 && !!value) {
-                return onValueChange(undefined, callback);
-              } else {
-                return callback();
-              }
-            };
-          }()(function(){
-            return onSearchChange(search, callback);
-          });
+          return onSearchChange(search, callback);
         },
@@ -125,7 +120,22 @@ values: values,
         },
-        renderValue: this.props.renderValue,
+        renderValue: function(item){
+          var ref$;
+          if (search.length > 0) {
+            return null;
+          } else {
+            return ((ref$ = this$.props.renderValue) != null
+              ? ref$
+              : function(arg$){
+                var label;
+                label = arg$.label;
+                return div({
+                  className: 'simple-value'
+                }, span(null, label));
+              })(item);
+          }
+        },
         onBlur: function(arg$, reason){
           (function(){
             return function(callback){
-              if (typeof value === 'undefined' && search.length > 0) {
+              if (search.length > 0) {
                 return onSearchChange("", callback);
@@ -213,5 +223,3 @@ } else {
           })(
-          toString$.call(this.props.children).slice(8, -1) === 'Array'
-            ? this.props.children
-            : [this.props.children]);
+          this.props.children);
         default:
@@ -218,0 +226,0 @@ return [];

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

375407

increased by346.56%

Number of package files

24

increased by100%

Lines of code

2172

increased by21.95%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Dev dependency count

23

increased by4.55%

No dependency changes