r-dropdown-button - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

index.js

@@ -162,2 +162,5 @@ "use strict";
     _this2.dom = (0, _react.createRef)();
+    _this2.state = {
+      searchValue: ''
+    };
     return _this2;
@@ -229,3 +232,6 @@ }
     value: function render() {
+      var _this3 = this;
+
       var _this$context = this.context,
+          search = _this$context.search,
           items = _this$context.items,
@@ -235,3 +241,10 @@ toggle = _this$context.toggle,
       var popupStyle = getValue(this.context.popupStyle);
-      var Items = typeof items === 'function' ? items(this.context) : items.map(function (item, i) {
+      var searchValue = this.state.searchValue;
+      var Items = typeof items === 'function' ? items(this.context) : items.filter(function (item) {
+        if (!searchValue) {
+          return true;
+        }
+
+        return item.text.indexOf(searchValue) !== -1;
+      }).map(function (item, i) {
         return /*#__PURE__*/_react.default.createElement(ListItem, {
@@ -253,3 +266,15 @@ key: i,
         style: popupStyle
-      }, Items));
+      }, search && /*#__PURE__*/_react.default.createElement("div", {
+        className: "r-dropdown-search"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "search-icon"
+      }), /*#__PURE__*/_react.default.createElement("input", {
+        type: "text",
+        value: searchValue,
+        onChange: function onChange(e) {
+          return _this3.setState({
+            searchValue: e.target.value
+          });
+        }
+      })), Items));
     }
@@ -256,0 +281,0 @@ }]);

package.json

 {
   "name": "r-dropdown-button",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

r-dropdown-button.js

@@ -65,2 +65,3 @@ import React,{Component,Fragment,createRef,createContext} from 'react';
     this.dom = createRef();
+    this.state = {searchValue:''}
   }
@@ -109,9 +110,22 @@ update(){
   render(){
-    var {items,toggle,getValue} = this.context;
+    var {search,items,toggle,getValue} = this.context;
     var popupStyle = getValue(this.context.popupStyle);
-    var Items = typeof items === 'function'? items(this.context):items.map((item, i)=><ListItem key={i} item={item}/>)
+    var {searchValue} = this.state;
+    var Items = typeof items === 'function'? items(this.context):items.filter((item)=>{
+      if(!searchValue){return true;}
+      return item.text.indexOf(searchValue) !== -1
+    }).map((item, i)=><ListItem key={i} item={item}/>)
     return(
       <div className="r-dropdown-button-popup" ref={this.dom} style={this.getStyle(popupStyle)}>
         <div className='back-drop' onClick={toggle} style={this.getBackDropStyle()}></div> 
-        <div className="for-drop" style={popupStyle}>{Items}</div>
+        <div className="for-drop" style={popupStyle}>
+          {
+            search && 
+            <div className='r-dropdown-search'>
+            <div className='search-icon'></div>
+            <input type='text' value={searchValue} onChange={(e)=>this.setState({searchValue:e.target.value})}/>
+            </div>
+          }
+          {Items}
+        </div>
       </div>
@@ -118,0 +132,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

25834

increased by9.54%

Lines of code

679

increased by15.08%

No dependency changes