react-dropdown-select - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -65,3 +65,3 @@ "use strict";
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "dropDown", function () {
-      var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "toggle";
+      var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'toggle';
 
@@ -74,10 +74,10 @@ if (_this.props.forceOpen) {
 
-      if (action === "close") {
+      if (action === 'close') {
         return _this.setState({
           dropdown: false,
-          search: ""
+          search: ''
         });
       }
 
-      if (action === "open") {
+      if (action === 'open') {
         return _this.setState({
@@ -88,3 +88,3 @@ dropdown: true
 
-      if (action === "toggle") {
+      if (action === 'toggle') {
         return _this.setState({
@@ -111,3 +111,3 @@ dropdown: !_this.state.dropdown
           dropdown: false,
-          search: ""
+          search: ''
         });
@@ -126,3 +126,3 @@ }
 
-        _this.dropDown("close");
+        _this.dropDown('close');
       }
@@ -148,3 +148,3 @@
 
-      if (_this.state.values.length === 0) {
+      if (_this.state.values.length > 0) {
         return _this.props.addPlaceholder.length;
@@ -172,2 +172,9 @@ }
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "searchResults", function () {
+      var regexp = new RegExp(_this.state.search, 'i');
+      return _this.state.options.filter(function (item) {
+        return regexp.test(item[_this.props.searchBy] || item.label);
+      });
+    });
+
     _this.state = {
@@ -177,3 +184,3 @@ dropdown: false,
       options: _this.props.options,
-      search: "",
+      search: '',
       selectBounds: {}
@@ -188,3 +195,4 @@ };
       toggleSelectAll: _this.toggleSelectAll,
-      clearAll: _this.clearAll
+      clearAll: _this.clearAll,
+      searchResults: _this.searchResults
     };
@@ -198,5 +206,5 @@ _this.select = _react.default.createRef();
     value: function componentDidMount() {
-      window.addEventListener("resize", this.updateSelectBounds);
+      window.addEventListener('resize', this.updateSelectBounds);
       this.props.onChange(this.state.values);
-      this.dropDown("close");
+      this.dropDown('close');
 
@@ -226,3 +234,3 @@ if (this.select) {
     value: function componentWillUnmount() {
-      window.removeEventListener("resize", this.updateSelectBounds);
+      window.removeEventListener('resize', this.updateSelectBounds);
     }
@@ -234,7 +242,6 @@ }, {
 
-      var regexp = new RegExp(this.state.search, "i");
       var placeHolder = this.state.values.length > 0 && this.props.addPlaceholder || this.props.placeholder;
       return _react.default.createElement(_reactOnclickout.default, {
         onClickOut: function onClickOut() {
-          return _this2.dropDown("close");
+          return _this2.dropDown('close');
         }
@@ -246,5 +253,5 @@ }, _react.default.createElement(ReactDropdownSelect, {
       }, _react.default.createElement(Content, {
-        className: "react-dropdown-select-content ".concat(this.props.multi ? "react-dropdown-select-type-multi" : "react-dropdown-select-type-single"),
+        className: "react-dropdown-select-content ".concat(this.props.multi ? 'react-dropdown-select-type-multi' : 'react-dropdown-select-type-single'),
         onClick: function onClick() {
-          return _this2.dropDown("open");
+          return _this2.dropDown('open');
         }
@@ -255,3 +262,3 @@ }, this.props.contentRenderer ? this.props.contentRenderer(this.props, this.state, this.methods) : _react.default.createElement(_react.default.Fragment, null, this.props.multi && this.state.values.map(function (item) {
           className: "react-dropdown-select-option"
-        }, item.label, " ", _react.default.createElement("span", {
+        }, item.label, ' ', _react.default.createElement("span", {
           className: "react-dropdown-select-option-remove",
@@ -265,6 +272,6 @@ onClick: function onClick(event) {
         className: "react-dropdown-select-input",
-        size: this.getInputSize,
+        size: this.getInputSize(),
         value: this.state.search,
         onClick: function onClick() {
-          return _this2.dropDown("open");
+          return _this2.dropDown('open');
         },
@@ -279,2 +286,5 @@ onChange: this.setSearch,
           return _this2.clearAll();
+        },
+        onKeyPress: function onKeyPress() {
+          return _this2.clearAll();
         }
@@ -288,2 +298,5 @@ }, "\xD7"), this.props.separator && _react.default.createElement(Separator, {
         },
+        onKeyPress: function onKeyPress() {
+          return _this2.dropDown();
+        },
         className: "react-dropdown-select-handle"
@@ -294,10 +307,11 @@ }, this.state.dropdown ? _react.default.createElement(_react.default.Fragment, null, "\u203A") : _react.default.createElement(_react.default.Fragment, null, "\u2039")), this.state.dropdown && _react.default.createElement(DropDown, {
         className: "react-dropdown-select-dropdown"
-      }, this.props.dropdownRenderer ? this.props.dropdownRenderer(this.props, this.state, this.methods) : _react.default.createElement(_react.default.Fragment, null, this.state.options.filter(function (item) {
-        return regexp.test(item[_this2.props.searchBy] || item.label);
-      }).map(function (option, index) {
+      }, this.props.dropdownRenderer ? this.props.dropdownRenderer(this.props, this.state, this.methods) : _react.default.createElement(_react.default.Fragment, null, this.searchResults().length === 0 ? _react.default.createElement(NoData, null, this.props.noDataRenderer) : this.searchResults().map(function (option, index) {
         return _react.default.createElement(Item, {
           tabIndex: index + 4,
-          className: "react-dropdown-select-item ".concat(_this2.isSelected(option) ? "react-dropdown-select-item-selected" : ""),
+          className: "react-dropdown-select-item ".concat(_this2.isSelected(option) ? 'react-dropdown-select-item-selected' : ''),
           onClick: function onClick() {
             return _this2.addItem(option);
+          },
+          onKeyPress: function onKeyPress() {
+            return _this2.addItem(option);
           }
@@ -332,14 +346,16 @@ }, option.label);
   handle: _propTypes.default.bool,
-  searchBy: _propTypes.default.string
+  searchBy: _propTypes.default.string,
+  noDataRenderer: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
 });
 
 Select.defaultProps = {
-  addPlaceholder: "+ add",
-  placeholder: "Select...",
+  addPlaceholder: '+ add',
+  placeholder: 'Select...',
   values: [],
   multi: false,
   disabled: false,
-  searchBy: "label",
+  searchBy: 'label',
   clearable: true,
-  forceOpen: undefined
+  forceOpen: undefined,
+  noDataRenderer: 'No matches'
 };
@@ -353,3 +369,3 @@
   var disabled = _ref.disabled;
-  return disabled ? "cursor: not-allowed;pointer-events: none;opacity: 0.3;" : "pointer-events: all;";
+  return disabled ? 'cursor: not-allowed;pointer-events: none;opacity: 0.3;' : 'pointer-events: all;';
 });
@@ -385,3 +401,3 @@
   displayName: "Loading"
-})(["@keyframes dual-ring-spin{0%{transform:rotate(0deg);}100%{transform:rotate(180deg);}}padding:0 5px;display:block;width:auto;height:auto;:after{content:\" \";display:block;width:16px;height:16px;border-radius:50%;border:1px solid red;border-color:deepskyblue transparent;animation:dual-ring-spin 0.7s ease-in-out infinite;margin:0 0 0 -10px;}"]);
+})(["@keyframes dual-ring-spin{0%{transform:rotate(0deg);}100%{transform:rotate(180deg);}}padding:0 5px;display:block;width:auto;height:auto;:after{content:' ';display:block;width:16px;height:16px;border-radius:50%;border:1px solid red;border-color:deepskyblue transparent;animation:dual-ring-spin 0.7s ease-in-out infinite;margin:0 0 0 -10px;}"]);
 
@@ -413,3 +429,3 @@ var Handle =
   displayName: "Item"
-})(["padding:10px;cursor:pointer;:hover{background:#f2f2f2;}&.react-dropdown-select-item-selected{background:deepskyblue;color:#fff;border-bottom:1px solid #fff;}input{&[type=\"checkbox\"]{vertical-align:baseline;margin:0 10px 0 0;}}"]);
+})(["padding:10px;cursor:pointer;outline:none;:hover,:focus{background:#f2f2f2;}&.react-dropdown-select-item-selected{background:deepskyblue;color:#fff;border-bottom:1px solid #fff;}input{&[type='checkbox']{vertical-align:baseline;margin:0 10px 0 0;}}"]);
 
@@ -428,3 +444,9 @@ var Button =
 
+var NoData =
+/*#__PURE__*/
+_styledComponents.default.div.withConfig({
+  displayName: "NoData"
+})(["padding:10px;text-align:center;color:deepskyblue;"]);
+
 var _default = Select;
 exports.default = _default;

package.json

 {
   "name": "react-dropdown-select",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Customizable dropdown select for react",
@@ -28,4 +28,4 @@ "main": "dist/index.js",
   "peerDependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react": ">= 16.3.0",
+    "react-dom": ">= 16.3.0"
   },
@@ -36,18 +36,4 @@ "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-proposal-do-expressions": "^7.0.0",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "@babel/plugin-proposal-function-bind": "^7.0.0",
-    "@babel/plugin-proposal-function-sent": "^7.0.0",
-    "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
@@ -61,2 +47,3 @@ "@babel/preset-react": "^7.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "prettier": "1.15.3",
     "prop-types": "^15.6.2",
@@ -63,0 +50,0 @@ "react": "^16.7.0",

README.md

 # react-dropdown-select
 Customizable dropdown select for react
 
-### installation
+![](https://badgen.net/bundlephobia/minzip/react-dropdown-select)
+![](https://img.shields.io/npm/v/react-dropdown-select.svg)
 
+### Installation
+
 > `npm install --save react-dropdown-select`
@@ -10,4 +13,8 @@
 
+```import Select from "react-dropdown-select";```
+
+and use as:
+ 
 ```jsx
-<SelectComponent
+<Select
 	placeholder="Sasha's family members"
@@ -22,5 +29,11 @@ addPlaceholder="+ click to add"
 	handle={this.state.handle}
+	multi={this.state.multi}
+	values={[options[0]]}
+	options={options}
+	onDropdownOpen={() => undefined}
+	onDropdownClose={() => undefined}
+	onChange={(values) => this.setValues(values)}
 	contentRenderer={
 		this.state.contentRenderer
-			? (props, state) => this.contentRenderer(props, state)
+			? (innerProps, innerState) => this.contentRenderer(innerProps, innerState)
 			: undefined
@@ -30,13 +43,7 @@ }
 		this.state.dropdownRenderer
-			? (props, state, methods) =>
-					this.dropdownRenderer(props, state, methods)
+			? (innerProps, innerState, innerMethods) =>
+					this.dropdownRenderer(innerProps, innerState, innerMethods)
 			: undefined
 	}
-	multi={this.state.multi}
-	values={[options[0]]}
-	options={options}
-	onDropdownOpen={() => undefined}
-	onDropdownClose={() => undefined}
-	onChange={values => this.setValues(values)}
-/>
+	/>
 ```
@@ -43,0 +50,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39812

increased by7.16%

Dev dependency count

21

decreased by-38.24%

Number of package files

15

increased by25%

Lines of code

373

increased by5.97%

Number of lines in readme file

54

increased by14.89%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes