react-search-filter - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

.notes/todo.md

@@ -66,2 +66,6 @@ Sunday
 - [ ] Placeholder
+- maybe make rsf__add an input
+  - we can have placeholder
+  - we can control on-click (as with any element)
+  - we can do :focus..?
 

lib/components/Combination.js

@@ -38,8 +38,2 @@ 'use strict';
 
-var defaultFilter = (0, _immutable.fromJS)({
-  id: _uuid2.default.v4(),
-  display: 'Search',
-  value: 'search'
-});
-
 var CombinationComponent = exports.CombinationComponent = function (_Component) {
@@ -121,2 +115,3 @@ _inherits(CombinationComponent, _Component);
           onClick: this.handleInputClick,
+          onBlur: this.handleInputBlur,
           value: search,
@@ -142,7 +137,17 @@ autoFocus: true
   this.handleClickout = function () {
-    _this3.setState({
-      isListVisible: false
-    });
+    if (!_this3.state.filter) {
+      _this3.handleDeleteCombination();
+    } else {
+      _this3.setState({
+        isListVisible: false
+      });
+    }
   };
 
+  this.handleInputBlur = function () {
+    if (_this3.state.filter && !_this3.state.search) {
+      _this3.handleDeleteCombination();
+    }
+  };
+
   this.handleInputChange = function (e) {
@@ -192,8 +197,11 @@ var value = e.target.value;
           filter: filter,
-          isBrowsingList: false
+          isBrowsingList: false,
+          search: '' // clear search after selecting a filter
         }, function () {
           _this3.input.focus();
         });
+      } else if (_this3.state.search.trim() === '') {
+        _this3.handleDeleteCombination();
       } else {
-        _this3.handleSaveCombination();
+        _this3.handleUpdateCombination();
       }
@@ -208,11 +216,5 @@
       // BACKSPACE
-      if (_this3.state.search) {
-        _this3.setState({
-          search: ''
-        });
-      } else if (_this3.state.filter) {
-        _this3.setState({
-          filter: null,
-          isListVisible: true
-        });
+      // delete filter if search has been emptied by backspace
+      if (!_this3.state.search && _this3.state.filter) {
+        _this3.handleDeleteCombination();
       }
@@ -256,7 +258,9 @@ }
 
-  this.handleSaveCombination = function () {
+  this.handleUpdateCombination = function () {
     var _state3 = _this3.state,
         search = _state3.search,
         id = _state3.id;
-    var index = _this3.props.index;
+    var _props = _this3.props,
+        index = _props.index,
+        defaultFilter = _props.defaultFilter;
 
@@ -266,3 +270,3 @@ var filter = _this3.state.filter || defaultFilter; // search
 
-    _this3.props.saveCombination(index, combo);
+    _this3.props.updateCombination(index, combo);
   };
@@ -292,3 +296,3 @@
         } else {
-          _this3.props.saveCombination(index, combo);
+          _this3.props.updateCombination(index, combo);
         }
@@ -295,0 +299,0 @@ });

lib/components/SearchFilter.js

@@ -90,3 +90,4 @@ 'use strict';
               list: list,
-              saveCombination: _this2.saveCombination,
+              defaultFilter: _this2.generateDefaultFilter(),
+              updateCombination: _this2.updateCombination,
               deleteCombination: _this2.deleteCombination
@@ -113,11 +114,15 @@ });
         options = _props.options,
-        currentSearch = _props.currentSearch;
+        currentSearch = _props.currentSearch,
+        defaultOption = _props.defaultOption;
 
-    var filteredOptions = options.filter(function (option) {
+    var optionsWithDefault = options.push(defaultOption);
+    var currentOptions = optionsWithDefault.filter(function (option) {
       return currentSearch.has(option.get('value'));
     });
-    var combos = filteredOptions.reduce(function (result, option, index, original) {
+    var combos = currentOptions.reduce(function (result, option, index, original) {
       var combo = _immutable2.default.Map().set('id', _uuid2.default.v4()).set('filter', original.get(index)).set('search', currentSearch.get(option.get('value')));
       return result.push(combo);
     }, (0, _immutable.fromJS)([]));
+
+    // FIXME: Generate a pill for search
     return combos;
@@ -138,3 +143,3 @@ };
 
-  this.saveCombination = function (index, combo) {
+  this.updateCombination = function (index, combo) {
     var combinations = _this3.state.combinations;
@@ -171,2 +176,13 @@
   };
+
+  this.generateDefaultFilter = function () {
+    var defaultOption = _this3.props.defaultOption;
+
+    var defaultFilter = (0, _immutable.fromJS)({
+      id: _uuid2.default.v4(),
+      display: defaultOption.get('display'),
+      value: defaultOption.get('value')
+    });
+    return defaultFilter;
+  };
 };
@@ -173,0 +189,0 @@

package.json

 {
   "name": "react-search-filter",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "React Search Filter – Search and Filter component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

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

248379

increased by0.4%

Lines of code

1704

increased by1.01%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes