react-select-search - npm Package Compare versions

Comparing version 0.9.6 to 0.10.1

dist/index.js

@@ -44,4 +44,4 @@ "use strict";
 /*#__PURE__*/
-function (_React$Component) {
-  _inherits(SelectSearch, _React$Component);
+function (_React$PureComponent) {
+  _inherits(SelectSearch, _React$PureComponent);
 
@@ -163,3 +163,4 @@ /**
         _value = props.value,
-        multiple = props.multiple;
+        multiple = props.multiple,
+        className = props.className;
     var stateValue = !_value && multiple ? [] : _value;
@@ -186,16 +187,25 @@ var flattenedOptions = (0, _FlattenOptions.default)(_options);
     _this.classes = {
-      container: _this.props.multiple ? "".concat(_this.props.className, " ").concat(_Bem.default.m(_this.props.className, 'multiple')) : _this.props.className,
-      search: _Bem.default.e(_this.props.className, 'search'),
-      select: _Bem.default.e(_this.props.className, 'select'),
-      options: _Bem.default.e(_this.props.className, 'options'),
-      option: _Bem.default.e(_this.props.className, 'option'),
-      row: _Bem.default.e(_this.props.className, 'row'),
-      group: _Bem.default.e(_this.props.className, 'group'),
-      groupHeader: _Bem.default.e(_this.props.className, 'group-header'),
-      out: _Bem.default.e(_this.props.className, 'out'),
-      label: _Bem.default.e(_this.props.className, 'label'),
-      focus: _this.props.multiple ? "".concat(_this.props.className, " ").concat(_Bem.default.m(_this.props.className, 'multiple focus')) : "".concat(_this.props.className, " ").concat(_Bem.default.m(_this.props.className, 'focus'))
+      container: multiple ? "".concat(className, " ").concat(_Bem.default.m(className, 'multiple')) : className,
+      search: _Bem.default.e(className, 'search'),
+      select: _Bem.default.e(className, 'select'),
+      options: _Bem.default.e(className, 'options'),
+      option: _Bem.default.e(className, 'option'),
+      row: _Bem.default.e(className, 'row'),
+      group: _Bem.default.e(className, 'group'),
+      groupHeader: _Bem.default.e(className, 'group-header'),
+      out: _Bem.default.e(className, 'out'),
+      label: _Bem.default.e(className, 'label'),
+      focus: multiple ? "".concat(className, " ").concat(_Bem.default.m(className, 'multiple focus')) : "".concat(className, " ").concat(_Bem.default.m(className, 'focus'))
     };
-    _this.classes.focus += " ".concat(_Bem.default.m(_this.props.className, 'select'));
-    _this.classes.container += " ".concat(_Bem.default.m(_this.props.className, 'select'));
+
+    if (multiple && !_this.props.search) {
+      _this.classes.container += " ".concat(_Bem.default.m(_Bem.default.e(className, 'icon'), 'disabled'));
+    }
+
+    if (!_this.props.search) {
+      _this.classes.focus += " ".concat(_Bem.default.m(_Bem.default.e(className, 'icon'), 'disabled'));
+    }
+
+    _this.classes.container += " ".concat(_Bem.default.m(className, 'select'));
+    _this.classes.focus += " ".concat(_Bem.default.m(className, 'select'));
     _this.container = _react.default.createRef();
@@ -419,3 +429,3 @@ _this.selectOptions = _react.default.createRef();
 
-      var currentValue = this.state.value;
+      var currentValue = this.state.value.slice();
       var option;
@@ -441,3 +451,4 @@ var search;
 
-        currentValue.push(option.value);
+        var currentIndex = currentValue.indexOf(option.value);
+        currentIndex > -1 ? currentValue.splice(currentIndex, 1) : currentValue.push(option.value);
         search = '';
@@ -478,3 +489,3 @@ } else {
       var option = this.findByValue(this.state.defaultOptions, value);
-      var optionValue = this.state.value;
+      var optionValue = this.state.value.slice();
 
@@ -663,3 +674,3 @@ if (!option || optionValue.indexOf(option.value) < 0) {
       if (this.props.multiple) {
-        if (this.state.value) {
+        if (Object.prototype.toString.call(this.state.value) == '[object Array]' && this.state.value.length) {
           var finalValueOptions = [];
@@ -691,2 +702,3 @@ this.state.value.forEach(function (value) {
           type: "hidden",
+          autoComplete: this.props.autoComplete,
           defaultValue: this.state.value,
@@ -705,2 +717,3 @@ ref: this.outInput,
           type: "text",
+          autoComplete: this.props.autoComplete,
           onFocus: this.onFocus,
@@ -726,2 +739,3 @@ style: outStyle,
           name: name,
+          autoComplete: this.props.autoComplete,
           ref: this.search,
@@ -737,2 +751,6 @@ onFocus: this.onFocus,
       } else {
+        if (this.props.multiple) {
+          return null;
+        }
+
         var option;
@@ -778,3 +796,3 @@ var labelValue;
   return SelectSearch;
-}(_react.default.Component);
+}(_react.default.PureComponent);
 
@@ -789,2 +807,3 @@ _defineProperty(SelectSearch, "defaultProps", {
   name: null,
+  autoComplete: 'on',
   autofocus: false,
@@ -791,0 +810,0 @@ onHighlight: function onHighlight() {},

package.json

 {
   "name": "react-select-search",
-  "version": "0.9.6",
+  "version": "0.10.1",
   "description": "React powered selectbox with filter",
@@ -33,4 +33,4 @@ "main": "dist/index.js",
   "peerDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "^16.10.1",
+    "react-dom": "^16.10.1"
   },
@@ -37,0 +37,0 @@ "devDependencies": {

README.md

@@ -21,2 +21,5 @@ <p align="center">
     </a>
+    <a href="https://beerpay.io/tbleckert/react-select-search">
+      <img src="https://beerpay.io/tbleckert/react-select-search/badge.svg?style=flat" />
+    </a>
 </p>
@@ -81,2 +84,3 @@
     height: PropTypes.number,
+    autoComplete: PropTypes.oneOf(['on', 'off']),
     name: PropTypes.string,
@@ -106,2 +110,3 @@ autofocus: PropTypes.bool,
     height: 200,
+    autoComplete: 'on',
     name: null,
@@ -108,0 +113,0 @@ autofocus: false,

src/index.js

@@ -18,2 +18,3 @@ import React from 'react';
         name: null,
+        autoComplete: 'on',
         autofocus: false,
@@ -384,3 +385,3 @@ onHighlight: () => {},
             }
-            
+
             const currentIndex = currentValue.indexOf(option.value);
@@ -605,3 +606,3 @@ currentIndex > -1 ? currentValue.splice(currentIndex, 1) : currentValue.push(option.value);
         } else if (this.props.search) {
-            outElement = <input type="hidden" defaultValue={this.state.value} ref={this.outInput} name={this.props.name} />;
+            outElement = <input type="hidden" autoComplete={this.props.autoComplete} defaultValue={this.state.value} ref={this.outInput} name={this.props.name} />;
         } else {
@@ -615,3 +616,3 @@ const outStyle = {
 
-            outElement = <input type="text" onFocus={this.onFocus} style={outStyle} value={this.state.value} readOnly ref={this.outInput} name={this.props.name} />;
+            outElement = <input type="text" autoComplete={this.props.autoComplete}  onFocus={this.onFocus} style={outStyle} value={this.state.value} readOnly ref={this.outInput} name={this.props.name} />;
         }
@@ -628,6 +629,6 @@
 
-            searchField = <input name={name} ref={this.search} onFocus={this.onFocus} onKeyPress={this.onKeyPress} className={this.classes.search} type="search" value={this.state.search} onChange={this.onChange} placeholder={this.props.placeholder} />;
+            searchField = <input name={name} autoComplete={this.props.autoComplete} ref={this.search} onFocus={this.onFocus} onKeyPress={this.onKeyPress} className={this.classes.search} type="search" value={this.state.search} onChange={this.onChange} placeholder={this.props.placeholder} />;
         } else {
             if (this.props.multiple) {
-                return;
+                return null;
             }
@@ -648,3 +649,3 @@
                 }
-                
+
                 labelValue = option.name;
@@ -684,2 +685,3 @@ labelClassName = this.classes.search;
     height: PropTypes.number,
+    autoComplete: PropTypes.oneOf(['on', 'off']),
     name: PropTypes.string,
@@ -686,0 +688,0 @@ autofocus: PropTypes.bool,

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

Number of package files

38

increased by2.7%

Lines of code

2572

increased by0.7%

Number of lines in readme file

131

increased by3.97%

Worsened metrics

Total package byte prevSize

111710

decreased by-72.33%

No dependency changes