react-super-select - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

lib/react-super-select.js

@@ -18,22 +18,7 @@ 'use strict';
 
-var _ref = React.createElement('span', {
-  __source: {
-    fileName: '../../../../../src/react-super-select.js',
-    lineNumber: 326
-  }
-});
+var _ref = React.createElement('span', null);
 
-var _ref2 = React.createElement('span', {
-  __source: {
-    fileName: '../../../../../src/react-super-select.js',
-    lineNumber: 769
-  }
-});
+var _ref2 = React.createElement('span', null);
 
-var _ref3 = React.createElement('span', {
-  __source: {
-    fileName: '../../../../../src/react-super-select.js',
-    lineNumber: 817
-  }
-});
+var _ref3 = React.createElement('span', null);
 
@@ -43,2 +28,3 @@ var ReactSuperSelect = React.createClass({
 
+
   // Properties
@@ -340,7 +326,3 @@ // ------
         'button',
-        { 'aria-label': clearSelectionLabelString, ref: 'selectionClear', name: 'clearSelection', type: 'button', className: 'r-ss-selection-clear', onClick: this._clearSelection, onKeyDown: this._clearSelection, __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 325
-          }
-        },
+        { 'aria-label': clearSelectionLabelString, ref: 'selectionClear', name: 'clearSelection', type: 'button', className: 'r-ss-selection-clear', onClick: this._clearSelection, onKeyDown: this._clearSelection },
         _ref
@@ -352,7 +334,3 @@ );
       'div',
-      { ref: 'rssControl', id: this.state.controlId, className: wrapClasses, __source: {
-          fileName: '../../../../../src/react-super-select.js',
-          lineNumber: 331
-        }
-      },
+      { ref: 'rssControl', id: this.state.controlId, className: wrapClasses },
       React.createElement(
@@ -370,7 +348,3 @@ 'div',
           'aria-multiselectable': this._isMultiSelect(),
-          tabIndex: '1', __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 332
-          }
-        },
+          tabIndex: '1' },
         triggerDisplayContent,
@@ -380,7 +354,3 @@ clearSelectionButton,
           'span',
-          { ref: 'carat', className: caratClass, __source: {
-              fileName: '../../../../../src/react-super-select.js',
-              lineNumber: 345
-            }
-          },
+          { ref: 'carat', className: caratClass },
           ' '
@@ -426,2 +396,22 @@ )
 
+  // stop wheel events in dropdown from scrolling page
+  _arrestScroll: function _arrestScroll(event) {
+    var arrestScroll = false,
+        adjustedHeight = this.refs.scrollWrap.scrollTop + this.refs.scrollWrap.clientHeight;
+
+    if (event.deltaY > 0) {
+      if (adjustedHeight >= this.refs.scrollWrap.scrollHeight) {
+        arrestScroll = true;
+      }
+    } else {
+      if (this.refs.scrollWrap.scrollTop <= 0) {
+        arrestScroll = true;
+      }
+    }
+
+    if (arrestScroll) {
+      this._arrestEvent(event);
+    }
+  },
+
   // calculate the initial value for the control from props, componentWillReceiveProps will call passing nextProps
@@ -436,3 +426,3 @@ _buildInitialValue: function _buildInitialValue(props) {
       if (!this._isMultiSelect()) {
-        initialValue = [_.first(initialValue)];
+        initialValue = [_.head(initialValue)];
       }
@@ -552,3 +542,3 @@ }
     if (_.isFunction(this.props.customFilterFunction)) {
-      filterFunction = function (value, index, collection) {
+      filterFunction = function filterFunction(value, index, collection) {
         return self.props.customFilterFunction.apply(self, [value, index, collection, self.state.searchString.toLowerCase()]);
@@ -562,6 +552,6 @@ };
   _findArrayOfOptionDataObjectsByValue: function _findArrayOfOptionDataObjectsByValue(value) {
-    var valuesArray = _.isArray(value) ? _.pluck(value, this.state.valueKey) : [value];
-    return _.reject(this.state.data, function (item) {
-      return !_.contains(valuesArray, item[this.state.valueKey]);
-    }, this);
+    var valuesArray = _.isArray(value) ? _.map(value, this.state.valueKey) : [value];
+    return _.reject(this.state.data, _.bind(function (item) {
+      return !_.includes(valuesArray, item[this.state.valueKey]);
+    }, this));
   },
@@ -645,14 +635,6 @@
       'li',
-      { className: 'r-ss-dropdown-option error', __source: {
-          fileName: '../../../../../src/react-super-select.js',
-          lineNumber: 598
-        }
-      },
+      { className: 'r-ss-dropdown-option error' },
       React.createElement(
         'i',
-        { ref: 'errorDisplay', __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 598
-          }
-        },
+        { ref: 'errorDisplay' },
         errorString
@@ -693,15 +675,7 @@ )
       'div',
-      { ref: 'dropdownContent', className: 'r-ss-dropdown', onKeyDown: this._handleKeyDown, __source: {
-          fileName: '../../../../../src/react-super-select.js',
-          lineNumber: 630
-        }
-      },
+      { ref: 'dropdownContent', className: 'r-ss-dropdown', onKeyDown: this._handleKeyDown },
       searchContent,
       React.createElement(
         'div',
-        { ref: 'scrollWrap', className: 'r-ss-options-wrap', onMouseMove: mouseMoveHandler, __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 632
-          }
-        },
+        { ref: 'scrollWrap', className: 'r-ss-options-wrap', onMouseMove: mouseMoveHandler },
         React.createElement(
@@ -714,7 +688,4 @@ 'ul',
             role: 'listbox',
-            'aria-expanded': this.state.isOpen, __source: {
-              fileName: '../../../../../src/react-super-select.js',
-              lineNumber: 633
-            }
-          },
+            'aria-expanded': this.state.isOpen,
+            onWheel: this._arrestScroll },
           this._getOptionsMarkup()
@@ -747,7 +718,3 @@ ),
       'li',
-      { tabIndex: '-1', className: headingClasses, key: headingKey, role: 'separator', 'aria-label': heading, 'aria-hidden': true, __source: {
-          fileName: '../../../../../src/react-super-select.js',
-          lineNumber: 666
-        }
-      },
+      { tabIndex: '-1', className: headingClasses, key: headingKey, role: 'separator', 'aria-label': heading, 'aria-hidden': true },
       headingMarkup
@@ -762,14 +729,6 @@ );
       'li',
-      { className: 'r-ss-dropdown-option', tabIndex: '-1', __source: {
-          fileName: '../../../../../src/react-super-select.js',
-          lineNumber: 674
-        }
-      },
+      { className: 'r-ss-dropdown-option', tabIndex: '-1' },
       React.createElement(
         'i',
-        { ref: 'noResults', __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 674
-          }
-        },
+        { ref: 'noResults' },
         noResultsString
@@ -783,3 +742,3 @@ )
   _getNormalDisplayMarkup: function _getNormalDisplayMarkup() {
-    return _.map(this.state.value, function (value) {
+    return _.map(this.state.value, _.bind(function (value) {
       var selectedKey = "r_ss_selected_" + value[this.state.labelKey];
@@ -791,11 +750,7 @@ if (this.props.customOptionTemplateFunction) {
           'span',
-          { key: selectedKey, className: 'r-ss-selected-label', __source: {
-              fileName: '../../../../../src/react-super-select.js',
-              lineNumber: 685
-            }
-          },
+          { key: selectedKey, className: 'r-ss-selected-label' },
           value[this.state.labelKey]
         );
       }
-    }, this);
+    }, this));
   },
@@ -806,7 +761,3 @@
     var loaderClasses = this.props.customLoaderClass ? "r-ss-loader " + this.props.customLoaderClass : "r-ss-loader";
-    return React.createElement('span', { ref: 'loader', className: loaderClasses, __source: {
-        fileName: '../../../../../src/react-super-select.js',
-        lineNumber: 693
-      }
-    });
+    return React.createElement('span', { ref: 'loader', className: loaderClasses });
   },
@@ -841,7 +792,7 @@
     if (!_.isArray(data)) {
-      _.forIn(data, function (groupedOptions, heading) {
+      _.forIn(data, _.bind(function (groupedOptions, heading) {
         options.push(this._getGroupHeadingMarkup(heading));
         options = options.concat(this._getTemplatedOptions(groupedOptions, optionsCount));
         optionsCount = optionsCount + groupedOptions.length;
-      }, this);
+      }, this));
     } else {
@@ -868,7 +819,3 @@ options = this._getTemplatedOptions(data);
       'li',
-      { key: 'page_loading', className: 'r-ss-page-fetch-indicator', tabIndex: '-1', __source: {
-          fileName: '../../../../../src/react-super-select.js',
-          lineNumber: 747
-        }
-      },
+      { key: 'page_loading', className: 'r-ss-page-fetch-indicator', tabIndex: '-1' },
       this._getLoadingMarkup()
@@ -896,7 +843,3 @@ );
         'button',
-        { 'aria-label': clearSearchLabelString, ref: 'searchClear', name: 'clearSearch', type: 'button', className: 'r-ss-search-clear', onClick: this._clearSearchString, onKeyDown: this._clearSearchString, __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 768
-          }
-        },
+        { 'aria-label': clearSearchLabelString, ref: 'searchClear', name: 'clearSearch', type: 'button', className: 'r-ss-search-clear', onClick: this._clearSearchString, onKeyDown: this._clearSearchString },
         _ref2
@@ -908,21 +851,9 @@ );
       'div',
-      { className: 'r-ss-search-wrap', __source: {
-          fileName: '../../../../../src/react-super-select.js',
-          lineNumber: 774
-        }
-      },
+      { className: 'r-ss-search-wrap' },
       React.createElement(
         'div',
-        { className: 'r-ss-search-inner', __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 775
-          }
-        },
+        { className: 'r-ss-search-inner' },
         React.createElement(
           'label',
-          { ref: 'searchInputLabel', id: searchAriaIdLabel, className: 'r-ss-search-aria-label', htmlFor: searchAriaId, __source: {
-              fileName: '../../../../../src/react-super-select.js',
-              lineNumber: 776
-            }
-          },
+          { ref: 'searchInputLabel', id: searchAriaIdLabel, className: 'r-ss-search-aria-label', htmlFor: searchAriaId },
           searchPlaceholderString
@@ -938,15 +869,7 @@ ),
           'aria-labelledby': searchAriaIdLabel,
-          'aria-autocomplete': 'list', __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 777
-          }
-        }),
+          'aria-autocomplete': 'list' }),
         clearSearch,
         React.createElement(
           'i',
-          { className: magnifierClass, __source: {
-              fileName: '../../../../../src/react-super-select.js',
-              lineNumber: 787
-            }
-          },
+          { className: magnifierClass },
           'search'
@@ -960,5 +883,5 @@ )
   _getTagsDisplayMarkup: function _getTagsDisplayMarkup() {
-    return _.map(this.state.value, function (value) {
+    return _.map(this.state.value, _.bind(function (value) {
       return this._getTagMarkup(value);
-    }, this);
+    }, this));
   },
@@ -981,14 +904,6 @@
       'span',
-      { className: tagWrapClass, key: tagKey, __source: {
-          fileName: '../../../../../src/react-super-select.js',
-          lineNumber: 814
-        }
-      },
+      { className: tagWrapClass, key: tagKey },
       React.createElement(
         'span',
-        { className: 'r-ss-tag-label', __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 815
-          }
-        },
+        { className: 'r-ss-tag-label' },
         label
@@ -998,7 +913,3 @@ ),
         'button',
-        { 'aria-label': tagRemoveButtonLabelString, ref: tagRemoveIndex, name: buttonName, type: 'button', className: 'r-ss-tag-remove', onClick: this._removeTagClick.bind(null, value), onKeyDown: this._removeTagKeyPress.bind(null, value), __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 816
-          }
-        },
+        { 'aria-label': tagRemoveButtonLabelString, ref: tagRemoveIndex, name: buttonName, type: 'button', className: 'r-ss-tag-remove', onClick: this._removeTagClick.bind(null, value), onKeyDown: this._removeTagKeyPress.bind(null, value) },
         _ref3
@@ -1077,15 +988,9 @@ )
 
-  // handler for searchInput's keyUp event
+  // handler for searchInput's onChange event
   _handleSearch: function _handleSearch(event) {
     this._arrestEvent(event);
-    var searchString = event.target.value;
-    this._handleSearchDebounced.call(this, searchString);
-  },
-
-  // debounced handler for searchInput's keyUp event, reduces # of times the control re-renders
-  _handleSearchDebounced: _.debounce(function (search) {
     this.setState({
-      searchString: search
+      searchString: event.target.value
     });
-  }, 300),
+  },
 
@@ -1097,3 +1002,3 @@ // return the boolean used to determine whether an option should have the 'r-ss-selected' class
     }
-    return !!_.findWhere(this.state.value, dataItem);
+    return !!_.find(this.state.value, dataItem);
   },
@@ -1117,3 +1022,3 @@
   _mapDataToOptionsMarkup: function _mapDataToOptionsMarkup(data, indexStart) {
-    return _.map(data, function (dataOption, index) {
+    return _.map(data, _.bind(function (dataOption, index) {
       index = indexStart + index;
@@ -1141,10 +1046,6 @@
           onClick: this._selectItemOnOptionClick.bind(null, dataOption),
-          role: 'option', __source: {
-            fileName: '../../../../../src/react-super-select.js',
-            lineNumber: 940
-          }
-        },
+          role: 'option' },
         optionMarkup
       );
-    }, this);
+    }, this));
   },
@@ -1304,5 +1205,5 @@
 
-    var remainingSelected = _.reject(this.state.value, function (opt) {
+    var remainingSelected = _.reject(this.state.value, _.bind(function (opt) {
       return _.includes(valuePropsToReject, opt[this.state.valueKey]);
-    }, this);
+    }, this));
 
@@ -1324,5 +1225,5 @@ this.props.onChange(remainingSelected);
 
-    var SelectedAfterRemoval = _.reject(this.state.value, function (option) {
+    var SelectedAfterRemoval = _.reject(this.state.value, _.bind(function (option) {
       return option[this.state.valueKey] === value[this.state.valueKey];
-    }, this);
+    }, this));
 
@@ -1370,3 +1271,3 @@ this.props.onChange(SelectedAfterRemoval);
 
-    var optionsToSelect = _.reduce(this.state.data, function (memo, opt) {
+    var optionsToSelect = _.reduce(this.state.data, _.bind(function (memo, opt) {
       if (_.includes(valuePropsToSelect, opt[this.state.valueKey])) {
@@ -1376,3 +1277,3 @@ memo.push(opt);
       return memo;
-    }, [], this);
+    }, this), []);
     this._selectItemByValues(optionsToSelect, true);
@@ -1416,3 +1317,3 @@ },
       if (this.SELECTED_OPTION_REGEX.test(this.refs[focusedOptionKey].className)) {
-        var optionFullFromValueProp = _.first(this._findArrayOfOptionDataObjectsByValue(optionValue));
+        var optionFullFromValueProp = _.head(this._findArrayOfOptionDataObjectsByValue(optionValue));
         this._removeSelectedOptionByValue(optionFullFromValueProp);
@@ -1436,3 +1337,3 @@ } else {
 
-    var outputValue = this._isMultiSelect() ? objectValues : _.first(objectValues);
+    var outputValue = this._isMultiSelect() ? objectValues : _.head(objectValues);
     this.props.onChange(outputValue);
@@ -1491,3 +1392,3 @@
 
-    var firstValue = _.first(this.state.value)[this.state.valueKey],
+    var firstValue = _.head(this.state.value)[this.state.valueKey],
         firstTag = this.refs[this._getTagRemoveIndex(firstValue)];
@@ -1494,0 +1395,0 @@

package.json

 {
   "name": "react-super-select",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "A flexible replacement for the html select control built with React",
@@ -44,13 +44,14 @@ "main": "./lib/react-super-select.js",
     "babel-cli": "^6.2.0",
-    "babel-core": "^5.8.25",
-    "babel-eslint": "^4.1.5",
-    "babel-jest": "^6.0.1",
+    "babel-core": "^6.7.0",
+    "babel-eslint": "^5.0.0",
+    "babel-jest": "^9.0.2",
     "babel-plugin-object-assign": "^1.2.1",
+    "babel-plugin-transform-react-constant-elements": "^6.5.0",
     "babel-preset-es2015": "^6.1.2",
     "babel-preset-react": "^6.1.2",
     "babelify": "^7.2.0",
-    "browserify": "^12.0.1",
+    "browserify": "^13.0.0",
     "docco": "^0.7.0",
-    "eslint": "^1.6.0",
-    "eslint-plugin-react": "^3.5.1",
+    "eslint": "^2.2.0",
+    "eslint-plugin-react": "^4.2.1",
     "exorcist": "^0.4.0",
@@ -61,4 +62,4 @@ "gulp": "^3.9.0",
     "gulp-concat": "^2.6.0",
-    "gulp-connect": "^2.2.0",
-    "gulp-eslint": "^1.0.0",
+    "gulp-connect": "^3.1.0",
+    "gulp-eslint": "^2.0.0",
     "gulp-gh-pages": "^0.5.2",
@@ -73,3 +74,3 @@ "gulp-git": "^1.5.0",
     "gulp-util": "^3.0.6",
-    "jest-cli": "^0.7.1",
+    "jest-cli": "^0.8.2",
     "less": "^2.5.3",
@@ -76,0 +77,0 @@ "react": ">=0.14.0",

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

90

increased byInfinity%

Worsened metrics

Total package byte prevSize

76681

decreased by-0.3%

Dev dependency count

37

increased by2.78%

Lines of code

1597

decreased by-6%

No dependency changes