react-select-search - npm Package Compare versions

Comparing version 0.3.10 to 0.4.0

dist/es5.js

 'use strict';
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,2 +7,4 @@ value: true
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -71,3 +71,3 @@
 
-var Component = (function (_React$Component) {
+var Component = function (_React$Component) {
     _inherits(Component, _React$Component);
@@ -245,3 +245,3 @@
 
-                    setTimeout((function () {
+                    setTimeout(function () {
                         var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
@@ -263,3 +263,3 @@ var elementPos = element.getBoundingClientRect();
                         element.scrollTop = 0;
-                    }).bind(_this2), 50);
+                    }.bind(_this2), 50);
                 })();
@@ -312,6 +312,6 @@ }
 
-                    _this3.hideTimer = setTimeout((function () {
+                    _this3.hideTimer = setTimeout(function () {
                         element.className = this.classes.select;
                         this.setState({ options: [] });
-                    }).bind(_this3), 200);
+                    }.bind(_this3), 200);
                 })();
@@ -448,4 +448,4 @@ }
             var currentValue = this.state.value;
-            var option = undefined;
-            var search = undefined;
+            var option = void 0;
+            var search = void 0;
 
@@ -515,3 +515,3 @@ if (!value) {
 
-                foundOptions.forEach((function (element) {
+                foundOptions.forEach(function (element) {
                     if (this.props.multiple) {
@@ -528,3 +528,3 @@ if (this.state.value.indexOf(element.value) < 0) {
                     }
-                }).bind(this));
+                }.bind(this));
 
@@ -560,3 +560,3 @@ if (options.length > 0) {
             var option = null;
-            var finalValue = undefined;
+            var finalValue = void 0;
 
@@ -568,3 +568,3 @@ if (this.props.multiple) {
 
-                        _this4.state.value.forEach((function (value, i) {
+                        _this4.state.value.forEach(function (value, i) {
                             option = this.findByValue(this.state.defaultOptions, value);
@@ -576,3 +576,3 @@ finalValueOptions.push(_react2.default.createElement(
                             ));
-                        }).bind(_this4));
+                        }.bind(_this4));
 
@@ -605,7 +605,7 @@ finalValue = _react2.default.createElement(
         value: function renderSearchField() {
-            var option = undefined;
-            var searchValue = undefined;
-            var searchField = undefined;
-            var labelValue = undefined;
-            var labelClassName = undefined;
+            var option = void 0;
+            var searchValue = void 0;
+            var searchField = void 0;
+            var labelValue = void 0;
+            var labelClassName = void 0;
             var name = null;
@@ -664,3 +664,3 @@
     return Component;
-})(_react2.default.Component);
+}(_react2.default.Component);
 
@@ -667,0 +667,0 @@ ;

index.js

@@ -33,3 +33,3 @@ 'use strict';
     search         : true,
-    value          : null,
+    value          : '',
     placeholder    : null,
@@ -68,3 +68,3 @@ multiple       : false,
         this.state = {
-            search         : (this.props.mode === 'input') ? this.props.value : null,
+            search         : (this.props.mode === 'input') ? this.props.value : '',
             value          : (!props.value && props.multiple) ? [] : props.value,
@@ -543,3 +543,3 @@ defaultOptions : props.options,
                 if (this.focus) {
-                    searchValue = null;
+                    searchValue = '';
                 } else {
@@ -546,0 +546,0 @@ if (this.state.value && !this.state.search) {

package.json

 {
   "name": "react-select-search",
-  "version": "0.3.10",
+  "version": "0.4.0",
   "description": "React powered selectbox with filter",
@@ -28,17 +28,17 @@ "main": "dist/es5.js",
   "peerDependencies": {
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "fuse.js": "^1.3.1"
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0",
+    "fuse.js": "^2.2.0"
   },
   "devDependencies": {
-    "babel-eslint": "^5.0.0-beta4",
-    "babel-jest": "^6.0.1",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "eslint": "^1.10.3",
-    "gulp": "^3.9.0",
-    "gulp-babel": "^6.1.1",
+    "babel-eslint": "^6.0.2",
+    "babel-jest": "^11.0.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "eslint": "^2.7.0",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
     "gulp-rename": "^1.2.2",
-    "jest-cli": "^0.8.0",
-    "react-addons-test-utils": "^0.14.3"
+    "jest-cli": "^11.0.0",
+    "react-addons-test-utils": "^15.0.1"
   },
@@ -45,0 +45,0 @@ "jest": {

README.md

@@ -11,6 +11,2 @@ # React Select Search
 
-## Note!
-
-A React 0.12.* supported version can be found in 0.2.* (and below) tagged releases
-
 ## Demo
@@ -22,28 +18,75 @@
 
-Install it with npm (`npm install react-select-search --save`) and require it like you normally would.
+Install it with npm (`npm install react-select-search --save`) and import it like you normally would.
 
 ```javascript
-React.render(
-	<SelectSearch
-		name="country"
-		value="SE"
-		placeholder="Choose country"
-		search={true}
-		multiple={false}
-		height={height in pixels, used if multiple select}
-		className="my-selectbox"
-		options={objectWithOptions}
-		fuse={fuseJsOptions}
-		optionSelected={callbackWhenOptionMarked}
-		valueChanged={callbackWhenValueChanged}
-		renderOption={modifyOptionHtml}
-		onMount={componentDidMountCallback}
-		onFocus={searchFocusCallback}
-		onBlur={searchBlurCallback} />,
-	document.getElementById('selectSearch')
-);
+import SelectSearch from 'react-select-search'
+
+/**
+ * The options array should contain objects.
+ * Required keys are "name" and "value" but you can have and use any number of key/value pairs.
+ */
+const options = [
+    {name: 'Swedish', value: 'sv'},
+    {name: 'English', value: 'en'}
+];
+
+/* Simple example */
+<SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" />
 ```
 
-These are all available options. The React component renders a hidden field with the __name__ property and the current __value__ to use in forms.  
+Below is a full list of properties and defaults (displayed in React style).
 
+```javascript
+{
+    options        : React.PropTypes.array.isRequired,
+    className      : React.PropTypes.string.isRequired,
+    search         : React.PropTypes.bool.isRequired,
+    placeholder    : React.PropTypes.string,
+    multiple       : React.PropTypes.bool.isRequired,
+    height         : React.PropTypes.number,
+    name           : React.PropTypes.string,
+    fuse           : React.PropTypes.object.isRequired,
+    valueChanged   : React.PropTypes.func.isRequired,
+    optionSelected : React.PropTypes.func.isRequired,
+    onMount        : React.PropTypes.func.isRequired,
+    onBlur         : React.PropTypes.func.isRequired,
+    onFocus        : React.PropTypes.func.isRequired,
+    renderOption   : React.PropTypes.func.isRequired,
+    mode           : React.PropTypes.string.isRequired,
+    value          : React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.array
+    ])
+}
+
+{
+    options        : [],
+    className      : 'select-search-box',
+    search         : true,
+    value          : null,
+    placeholder    : null,
+    multiple       : false,
+    height         : 200,
+    name           : null,
+    mode           : 'select',
+    valueChanged   : function () {},
+    optionSelected : function () {},
+    onMount        : function () {},
+    onBlur         : function () {},
+    onFocus        : function () {},
+    onChange       : function () {},
+    renderOption   : function (option) {
+        return option.name;
+    },
+    fuse: {
+        keys      : ['name'],
+        threshold : 0.3
+    }
+}
+```
+
+The height property is the minimum height (max is the remaining space below the selectbox down to the browser window end) of the dropdown if multiple is false, otherwise it's the fixed height. 
+
+For examples you can take a look at the [bootstrap.js](https://github.com/tbleckert/react-select-search/blob/gh-pages/bootstrap.js) file on the gh-pages branch.
+
 You will also need some CSS to make it look right. The important piece is the options.
@@ -50,0 +93,0 @@

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

54578

increased by3%

Number of lines in readme file

141

increased by43.88%

No dependency changes