react-selectize - npm Package Compare versions

Comparing version 0.1.4 to 0.1.6

CHANGELOG.md

@@ -16,2 +16,5 @@ # React Selectize
 ## v0.1.4 / 15th September 2015
-* fixed option menu toggle on tap/click in mobile safari
+* fixed option menu toggle on tap/click in mobile safari
+
+## v0.1.6 / 19h September 2015
+* introduced a new prop `autosize`, allows consumers to provide custom autosize logic for search input, the default implementation now supports nonmodern browsers

package.json

 {
   "name": "react-selectize",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "react implementation of selectize",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -7,3 +7,3 @@ # React Selectize
 
-[![](http://i.imgur.com/nk2BSGp.gif)](http://furqanZafar.github.io/react-selectize/)
+[![](http://i.imgur.com/rRmufxm.gif)](http://furqanZafar.github.io/react-selectize/)
 
@@ -89,2 +89,3 @@ ## Install
 |----------------------------|------------------------------------|--------------------------------|
+|    autosize                | InputElement -> Int                | `function($search){return $search.value.length * 10}` custom logic for autosizing the input element|
 |    className               | String                             | class name for the outer element, in addition to "simple-select"|
@@ -91,0 +92,0 @@ |    disabled                | Boolean                            | disables interaction with the Select control|

src/MultiSelect.js

@@ -37,5 +37,7 @@ (function(){
     render: function(){
-      var ref$, anchor, search, values, onAnchorChange, onSearchChange, onValuesChange, filteredOptions, options, this$ = this;
+      var ref$, anchor, search, values, onAnchorChange, onSearchChange, onValuesChange, filteredOptions, options, autosize, this$ = this;
       ref$ = this.getComputedState(), anchor = ref$.anchor, search = ref$.search, values = ref$.values, onAnchorChange = ref$.onAnchorChange, onSearchChange = ref$.onSearchChange, onValuesChange = ref$.onValuesChange, filteredOptions = ref$.filteredOptions, options = ref$.options;
+      autosize = this.props.autosize;
       return ReactSelectize(import$({
+        autosize: autosize,
         className: "multi-select " + this.props.className,
@@ -42,0 +44,0 @@ disabled: this.props.disabled,

src/ReactSelectize.js

 (function(){
-  var ref$, filter, find, findIndex, initial, last, map, partition, reject, reverse, sortBy, clamp, isEqualToObject, React, div, input, span, cancelEvent;
-  ref$ = require('prelude-ls'), filter = ref$.filter, find = ref$.find, findIndex = ref$.findIndex, initial = ref$.initial, last = ref$.last, map = ref$.map, partition = ref$.partition, reject = ref$.reject, reverse = ref$.reverse, sortBy = ref$.sortBy;
+  var ref$, each, filter, find, findIndex, initial, last, map, objToPairs, partition, reject, reverse, sortBy, clamp, isEqualToObject, React, div, input, span, cancelEvent;
+  ref$ = require('prelude-ls'), each = ref$.each, filter = ref$.filter, find = ref$.find, findIndex = ref$.findIndex, initial = ref$.initial, last = ref$.last, map = ref$.map, objToPairs = ref$.objToPairs, partition = ref$.partition, reject = ref$.reject, reverse = ref$.reverse, sortBy = ref$.sortBy;
   ref$ = require('prelude-extension'), clamp = ref$.clamp, isEqualToObject = ref$.isEqualToObject;
@@ -18,2 +18,28 @@ React = require('react'), ref$ = React.DOM, div = ref$.div, input = ref$.input, span = ref$.span;
         anchor: null,
+        autosize: function($search){
+          var x$, $input, ref$;
+          if ($search.scrollWidth > 0) {
+            return $search.style.width = 2 + $search.scrollWidth;
+          } else {
+            x$ = $input = document.createElement('div');
+            x$.innerHTML = $search.value;
+            (function(){
+              return $input.style.width = "";
+            })(
+            each(function(arg$){
+              var key, value;
+              key = arg$[0], value = arg$[1];
+              return $input.style[key] = value;
+            })(
+            objToPairs(
+            !!$search.currentStyle
+              ? $search.currentStyle
+              : (ref$ = document.defaultView) != null
+                ? ref$
+                : window.getComputedStyle($search))));
+            document.body.appendChild($input);
+            $search.style.width = 4 + $input.clientWidth;
+            return document.body.removeChild($input);
+          }
+        },
         className: '',
@@ -352,3 +378,3 @@ disabled: false,
       x$.style.width = 0;
-      x$.style.width = $search.scrollWidth;
+      x$.style.width = this.props.autosize($search);
       return x$;
@@ -355,0 +381,0 @@ },

src/SimpleSelect.js

@@ -31,5 +31,7 @@ (function(){
     render: function(){
-      var ref$, search, value, values, onSearchChange, onValueChange, filteredOptions, options, ref1$, this$ = this;
+      var ref$, search, value, values, onSearchChange, onValueChange, filteredOptions, options, autosize, ref1$, 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;
+      autosize = this.props.autosize;
       return ReactSelectize(import$({
+        autosize: autosize,
         className: "simple-select " + ((ref$ = (ref1$ = this.props) != null ? ref1$.className : void 8) != null ? ref$ : ''),
@@ -36,0 +38,0 @@ disabled: this.props.disabled,

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

Total package byte prevSize

69912

increased by2.28%

Lines of code

1435

increased by2.21%

Number of lines in readme file

145

increased by0.69%

No dependency changes