react-selectize - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

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

README.md

@@ -1,4 +0,4 @@
-# React Selecitze
+# React Selectize
 A flexible & stateless select component for ReactJS built with livescript and love. 
-ReactSelectize comes in 3 favours 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 flavours SimpleSelect (or single select), MultiSelect & ReactSelectize. Both the SimpleSelect & the MultiSelect components are built on top of the stateless ReactSelectize component.
 
@@ -90,14 +90,14 @@ LIVE DEMO: [furqanZafar.github.io/react-selectize](http://furqanZafar.github.io/react-selectize/)
 |    disabled                | Boolean                            | disables interaction with the Select control|
-|    createFromSearch        | [Item] -> String -> Item?          | implement this function to create new items on the fly, function(options, search){return {label: search, value: search}}, return null to avoid option creation for the given parameters|
-|    filterOptions           | [Item] -> Item -> String -> [Item] | implement this function for custom filtering logic, function(options, value, search) {return options}|
-|    onBlur                  | Item -> String -> Void             | function(value, reason){} reason can be either "click" (loss of focus because the user clicked elsewhere), "tab" or "blur" (invoked refs.simpleSelect.blur())|
-|    onFocus                 | Item -> String -> Void             | function(value, reason){} reason can be either "event" (when the control gains focus outside) or "focus" (when the user invokes refs.simpleSelect.focus())|
-|    onSearchChange          | String -> (a -> Void) -> Void      | function(search, callback){self.setState({search: search}, callback);} or function(search,callback){callback();} i.e. callback MUST always be invoked|
-|    onValueChange           | Item -> (a -> Void) -> Void        | function(selectedValue, callback){self.setState({selectedValue: selectedValue}, callback)} or function(value, callback){callback()} i.e. callback MUST always be invoked|
+|    createFromSearch        | [Item] -> String -> Item?          | implement this function to create new items on the fly, `function(options, search){return {label: search, value: search}}`, return null to avoid option creation for the given parameters|
+|    filterOptions           | [Item]-> String -> [Item]          | implement this function for custom synchronous filtering logic, `function(options, search) {return options}`|
+|    onBlur                  | Item -> String -> Void             | `function(value, reason){}` reason can be either "click" (loss of focus because the user clicked elsewhere), "tab" or "blur" (invoked refs.simpleSelect.blur())|
+|    onFocus                 | Item -> String -> Void             | `function(value, reason){}` reason can be either "event" (when the control gains focus outside) or "focus" (when the user invokes refs.simpleSelect.focus())|
+|    onSearchChange          | String -> (a -> Void) -> Void      | `function(search, callback){self.setState({search: search}, callback);}` or `function(search,callback){callback();}` i.e. callback MUST always be invoked|
+|    onValueChange           | Item -> (a -> Void) -> Void        | `function(selectedValue, callback){self.setState({selectedValue: selectedValue}, callback)}` or `function(value, callback){callback()}` i.e. callback MUST always be invoked|
 |    options                 | [Item]                             | list of items by default each option object MUST have label & value property, otherwise you must implement the render* & filterOptions methods|
 |    placeholder:            | String                             | displayed when there is no value|
-|    renderNoResultsFound    | Item -> String -> ReactElement     | function(item, search){return React.DOM.div(null);} returns a custom way for rendering the "No results found" error|
-|    renderOption            | Int -> Item -> ReactElement        | function(index, item){return React.DOM.div(null);} returns a custom way for rendering each option|
-|    renderValue             | Int -> Item -> ReactElement        | function(index, item){return React.DOM.div(null);} returns a custom way for rendering the selected value|
-|    restoreOnBackspace      | Item -> String                     | function(item){return item.label;} implement this method if you want to go back to editing the item when the user hits the [backspace] key instead of getting removed|
+|    renderNoResultsFound    | Item -> String -> ReactElement     | `function(item, search){return React.DOM.div(null);}` returns a custom way for rendering the "No results found" error|
+|    renderOption            | Int -> Item -> ReactElement        | `function(index, item){return React.DOM.div(null);}` returns a custom way for rendering each option|
+|    renderValue             | Int -> Item -> ReactElement        | `function(index, item){return React.DOM.div(null);}` returns a custom way for rendering the selected value|
+|    restoreOnBackspace      | Item -> String                     | `function(item){return item.label;}` implement this method if you want to go back to editing the item when the user hits the [backspace] key instead of getting removed|
 |    search                  | String                             | the text displayed in the search box|
@@ -107,2 +107,10 @@ |    style                   | Object                             | the CSS styles for the outer element|
 
+## SimpleSelect methods
+
+|    Method                       |    Type                            |    Description                 |
+|---------------------------------|------------------------------------|--------------------------------|
+| focus                           | a -> Void                          | `this.refs.selectInstance.focus()` opens the list of options and positions the cursor in the input control|
+| highlightFirstSelectableOption  | a -> Void                          | `this.refs.selectInstance.highlightFirstSelectableOption()`|
+| value                           | a -> Item                          | `this.refs.selectInstance.value()` returns the current selected item|
+
 ## MultiSelect Props
@@ -113,8 +121,16 @@ In addition to the props above
 |--------------------------- |--------------------------------------|---------------------------------|
+|    anchor                  | Item                                 | positions the cursor ahead of the anchor item, set this property to undefined to lock the cursor at the start|
 |    createFromSearch        | [Item] -> [Item] -> String -> Item?  | function(options, values, search){return {label: search, value: search}}|
 |    filterOptions           | [Item] -> [Item] -> String -> [Item] | function(options, values, search){return options}|
+|    onAnchorChange          | Item -> (a -> Void) -> Void          | function(anchor, callback){callback();} implement this method if you want to override the default behaviour of the cursor|
 |    onBlur                  | [Item] -> String -> Void             | function(values, reason){}|
 |    onFocus                 | [Item] -> String -> Void             | function(values, reason){}|
 |    onValuesChange          | [Item] -> (a -> Void) -> Void        | function(values, callback){callback();}|
+|    maxValues               | Int                                  | the maximum values that can be selected, after which the control is disabled|
+|    closeOnSelect           | Boolean                              | as the name implies, closes the options list on selecting an option|
 
+## MultSelect methods
+
+same as SimpleSelect but use `this.refs.multiSelectInstance.values()` to get the selected values instead of the `value` method.
+
 ## Development
@@ -121,0 +137,0 @@

src/MultiSelect.js

@@ -37,38 +37,4 @@ (function(){
     render: function(){
-      var anchor, search, values, ref$, onAnchorChange, onSearchChange, onValuesChange, filteredOptions, newOption, options, this$ = this;
-      anchor = this.props.hasOwnProperty('anchor')
-        ? this.props.anchor
-        : this.state.anchor;
-      search = this.props.hasOwnProperty('search')
-        ? this.props.search
-        : this.state.search;
-      values = this.values();
-      ref$ = map(function(p){
-        switch (false) {
-        case !(this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
-          return this$.props[camelize("on-" + p + "-change")];
-        case !(this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
-          return function(arg$, callback){
-            return callback();
-          };
-        case !(!this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
-          return function(o, callback){
-            var ref$;
-            return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), function(){
-              return this$.props[camelize("on-" + p + "-change")](o, callback);
-            });
-          };
-        case !(!this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
-          return function(o, callback){
-            var ref$;
-            return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), callback);
-          };
-        }
-      })(
-      ['anchor', 'search', 'values']), onAnchorChange = ref$[0], onSearchChange = ref$[1], onValuesChange = ref$[2];
-      filteredOptions = this.props.filterOptions(this.props.options, values, search);
-      newOption = typeof this.props.createFromSearch === 'function' ? this.props.createFromSearch(filteredOptions, values, search) : null;
-      options = (!!newOption
-        ? [(ref$ = import$({}, newOption), ref$.newOption = true, ref$)]
-        : []).concat(filteredOptions);
+      var ref$, anchor, search, values, onAnchorChange, onSearchChange, onValuesChange, filteredOptions, options, 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;
       return ReactSelectize(import$({
@@ -90,20 +56,4 @@ className: "multi-select " + this.props.className,
         },
-        firstOptionIndexToHighlight: function(options){
-          var ref$;
-          switch (false) {
-          case options.length !== 1:
-            return 0;
-          case typeof (options != null ? (ref$ = options[0]) != null ? ref$.newOption : void 8 : void 8) !== 'undefined':
-            return 0;
-          default:
-            if (all(function(it){
-              return typeof it.selectable === 'boolean' && !it.selectable;
-            })(
-            drop(1)(
-            options))) {
-              return 0;
-            } else {
-              return 1;
-            }
-          }
+        firstOptionIndexToHighlight: function(){
+          return this$.firstOptionIndexToHighlight(options);
         },
@@ -164,2 +114,50 @@ options: options,
     },
+    getComputedState: function(){
+      var anchor, search, values, ref$, onAnchorChange, onSearchChange, onValuesChange, filteredOptions, newOption, options, this$ = this;
+      anchor = this.props.hasOwnProperty('anchor')
+        ? this.props.anchor
+        : this.state.anchor;
+      search = this.props.hasOwnProperty('search')
+        ? this.props.search
+        : this.state.search;
+      values = this.values();
+      ref$ = map(function(p){
+        switch (false) {
+        case !(this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
+          return this$.props[camelize("on-" + p + "-change")];
+        case !(this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
+          return function(arg$, callback){
+            return callback();
+          };
+        case !(!this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
+          return function(o, callback){
+            var ref$;
+            return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), function(){
+              return this$.props[camelize("on-" + p + "-change")](o, callback);
+            });
+          };
+        case !(!this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
+          return function(o, callback){
+            var ref$;
+            return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), callback);
+          };
+        }
+      })(
+      ['anchor', 'search', 'values']), onAnchorChange = ref$[0], onSearchChange = ref$[1], onValuesChange = ref$[2];
+      filteredOptions = this.props.filterOptions(this.props.options, values, search);
+      newOption = typeof this.props.createFromSearch === 'function' ? this.props.createFromSearch(filteredOptions, values, search) : null;
+      options = (!!newOption
+        ? [(ref$ = import$({}, newOption), ref$.newOption = true, ref$)]
+        : []).concat(filteredOptions);
+      return {
+        anchor: anchor,
+        search: search,
+        values: values,
+        onAnchorChange: onAnchorChange,
+        onSearchChange: onSearchChange,
+        onValuesChange: onValuesChange,
+        filteredOptions: filteredOptions,
+        options: options
+      };
+    },
     getInitialState: function(){
@@ -173,2 +171,21 @@ return {
     },
+    firstOptionIndexToHighlight: function(options){
+      var ref$;
+      switch (false) {
+      case options.length !== 1:
+        return 0;
+      case typeof (options != null ? (ref$ = options[0]) != null ? ref$.newOption : void 8 : void 8) !== 'undefined':
+        return 0;
+      default:
+        if (all(function(it){
+          return typeof it.selectable === 'boolean' && !it.selectable;
+        })(
+        drop(1)(
+        options))) {
+          return 0;
+        } else {
+          return 1;
+        }
+      }
+    },
     focus: function(){
@@ -178,2 +195,10 @@ this.refs.select.focus();
     },
+    highlightFirstSelectableOption: function(){
+      var options;
+      if (!this.state.open) {
+        return;
+      }
+      options = this.getComputedState().options;
+      this.refs.select.highlightAndScrollToSelectableOption(this.firstOptionIndexToHighlight(options), 1);
+    },
     showOptions: function(callback){
@@ -180,0 +205,0 @@ callback == null && (callback = function(){});

src/SimpleSelect.js

@@ -11,3 +11,3 @@ (function(){
       return {
-        filterOptions: curry$(function(options, value, search){
+        filterOptions: curry$(function(options, search){
           var this$ = this;
@@ -32,41 +32,4 @@ return function(it){
     render: function(){
-      var search, value, values, ref$, onSearchChange, onValueChange, filteredOptions, newOption, options, ref1$, this$ = this;
-      search = this.props.hasOwnProperty('search')
-        ? this.props.search
-        : this.state.search;
-      value = this.props.hasOwnProperty('value')
-        ? this.props.value
-        : this.state.value;
-      values = !!value
-        ? [value]
-        : [];
-      ref$ = map(function(p){
-        switch (false) {
-        case !(this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
-          return this$.props[camelize("on-" + p + "-change")];
-        case !(this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
-          return function(arg$, callback){
-            return callback();
-          };
-        case !(!this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
-          return function(o, callback){
-            var ref$;
-            return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), function(){
-              this$.props[camelize("on-" + p + "-change")](o, function(){});
-              return callback();
-            });
-          };
-        case !(!this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
-          return function(o, callback){
-            var ref$;
-            return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), callback);
-          };
-        }
-      })(
-      ['search', 'value']), onSearchChange = ref$[0], onValueChange = ref$[1];
-      filteredOptions = this.props.filterOptions(this.props.options, value, search);
-      newOption = typeof this.props.createFromSearch === 'function' ? this.props.createFromSearch(filteredOptions, search) : null;
-      options = (!!newOption
-        ? [(ref$ = import$({}, newOption), ref$.newOption = true, ref$)]
-        : []).concat(filteredOptions);
+      var ref$, search, value, values, onSearchChange, onValueChange, filteredOptions, options, 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;
       return ReactSelectize(import$({
@@ -90,25 +53,4 @@ className: "simple-select " + ((ref$ = (ref1$ = this.props) != null ? ref1$.className : void 8) != null ? ref$ : ''),
         },
-        firstOptionIndexToHighlight: function(options){
-          var index, ref$;
-          index = !!value ? findIndex(function(it){
-            return isEqualToObject(it, value);
-          }, options) : undefined;
-          switch (false) {
-          case typeof index === 'undefined':
-            return index;
-          case options.length !== 1:
-            return 0;
-          case typeof (options != null ? (ref$ = options[0]) != null ? ref$.newOption : void 8 : void 8) !== 'undefined':
-            return 0;
-          default:
-            if (all(function(it){
-              return typeof it.selectable === 'boolean' && !it.selectable;
-            })(
-            drop(1)(
-            options))) {
-              return 0;
-            } else {
-              return 1;
-            }
-          }
+        firstOptionIndexToHighlight: function(){
+          return this$.firstOptionIndexToHighlight(options, value);
         },
@@ -203,2 +145,52 @@ options: options,
     },
+    getComputedState: function(){
+      var search, value, values, ref$, onSearchChange, onValueChange, filteredOptions, newOption, options, this$ = this;
+      search = this.props.hasOwnProperty('search')
+        ? this.props.search
+        : this.state.search;
+      value = this.props.hasOwnProperty('value')
+        ? this.props.value
+        : this.state.value;
+      values = !!value
+        ? [value]
+        : [];
+      ref$ = map(function(p){
+        switch (false) {
+        case !(this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
+          return this$.props[camelize("on-" + p + "-change")];
+        case !(this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
+          return function(arg$, callback){
+            return callback();
+          };
+        case !(!this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
+          return function(o, callback){
+            var ref$;
+            return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), function(){
+              this$.props[camelize("on-" + p + "-change")](o, function(){});
+              return callback();
+            });
+          };
+        case !(!this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
+          return function(o, callback){
+            var ref$;
+            return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), callback);
+          };
+        }
+      })(
+      ['search', 'value']), onSearchChange = ref$[0], onValueChange = ref$[1];
+      filteredOptions = this.props.filterOptions(this.props.options, search);
+      newOption = typeof this.props.createFromSearch === 'function' ? this.props.createFromSearch(filteredOptions, search) : null;
+      options = (!!newOption
+        ? [(ref$ = import$({}, newOption), ref$.newOption = true, ref$)]
+        : []).concat(filteredOptions);
+      return {
+        search: search,
+        value: value,
+        values: values,
+        onSearchChange: onSearchChange,
+        onValueChange: onValueChange,
+        filteredOptions: filteredOptions,
+        options: options
+      };
+    },
     getInitialState: function(){
@@ -211,2 +203,26 @@ return {
     },
+    firstOptionIndexToHighlight: function(options, value){
+      var index, ref$, this$ = this;
+      index = !!value ? findIndex(function(it){
+        return isEqualToObject(it, value);
+      }, options) : undefined;
+      switch (false) {
+      case typeof index === 'undefined':
+        return index;
+      case options.length !== 1:
+        return 0;
+      case typeof (options != null ? (ref$ = options[0]) != null ? ref$.newOption : void 8 : void 8) !== 'undefined':
+        return 0;
+      default:
+        if (all(function(it){
+          return typeof it.selectable === 'boolean' && !it.selectable;
+        })(
+        drop(1)(
+        options))) {
+          return 0;
+        } else {
+          return 1;
+        }
+      }
+    },
     focus: function(){
@@ -217,2 +233,10 @@ var this$ = this;
     },
+    highlightFirstSelectableOption: function(){
+      var ref$, options, value;
+      if (!this.state.open) {
+        return;
+      }
+      ref$ = this.getComputedState(), options = ref$.options, value = ref$.value;
+      this.refs.select.highlightAndScrollToSelectableOption(this.firstOptionIndexToHighlight(options, value), 1);
+    },
     showOptions: function(callback){
@@ -219,0 +243,0 @@ this.setState({

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

67114

increased by6.15%

Number of package files

12

increased by9.09%

Lines of code

1380

increased by3.68%

Number of lines in readme file

144

increased by12.5%

No dependency changes