react-search-autocomplete - npm Package Compare versions

Comparing version 6.1.3 to 7.0.0

dist/components/ClearIcon.js

@@ -39,3 +39,3 @@ "use strict";
 
-  if (searchString.length <= 0) {
+  if (!searchString || (searchString === null || searchString === void 0 ? void 0 : searchString.length) <= 0) {
     return null;
@@ -42,0 +42,0 @@ }

dist/components/ReactSearchAutocomplete.js

@@ -93,3 +93,7 @@ "use strict";
       inputSearchString = _ref$inputSearchStrin === void 0 ? '' : _ref$inputSearchStrin,
-      formatResult = _ref.formatResult;
+      formatResult = _ref.formatResult,
+      _ref$showNoResults = _ref.showNoResults,
+      showNoResults = _ref$showNoResults === void 0 ? true : _ref$showNoResults,
+      _ref$showNoResultsTex = _ref.showNoResultsText,
+      showNoResultsText = _ref$showNoResultsTex === void 0 ? 'No results' : _ref$showNoResultsTex;
 
@@ -118,2 +122,17 @@ var theme = _objectSpread(_objectSpread({}, _config.defaultTheme), styling);
 
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isSearchComplete = _useState8[0],
+      setIsSearchComplete = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isTyping = _useState10[0],
+      setIsTyping = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      showNoResultsFlag = _useState12[0],
+      setShowNoResultsFlag = _useState12[1];
+
   var callOnSearch = function callOnSearch(keyword) {
@@ -124,2 +143,3 @@ var newResults = [];
     onSearch(keyword, newResults);
+    setIsTyping(false);
   };
@@ -139,5 +159,12 @@
   }, [items]);
+  (0, _react.useEffect)(function () {
+    if (showNoResults && searchString.length > 0 && !isTyping && results.length === 0 && !isSearchComplete) {
+      setShowNoResultsFlag(true);
+    } else {
+      setShowNoResultsFlag(false);
+    }
+  }, [isTyping, showNoResults, isSearchComplete, searchString, results]);
 
   var handleOnClick = function handleOnClick(result) {
-    setResults([]);
+    eraseResult();
     onSelect(result);
@@ -161,5 +188,15 @@ setSearchString(result[resultStringKeyName]);
     handleOnSearch(keyword);
+    setIsTyping(true);
+
+    if (isSearchComplete) {
+      setIsSearchComplete(false);
+    }
   };
 
-  var handleSetHighligthedItem = function handleSetHighligthedItem(_ref3) {
+  var eraseResult = function eraseResult() {
+    setResults([]);
+    setIsSearchComplete(true);
+  };
+
+  var handleSetHighlightedItem = function handleSetHighlightedItem(_ref3) {
     var index = _ref3.index,
@@ -186,3 +223,3 @@ event = _ref3.event;
 
-          setResults([]);
+          eraseResult();
           break;
@@ -218,3 +255,3 @@
           onBlur: function onBlur() {
-            return setResults([]);
+            return eraseResult();
           },
@@ -226,3 +263,3 @@ onFocus: onFocus,
           showClear: showClear,
-          setHighlightedItem: handleSetHighligthedItem
+          setHighlightedItem: handleSetHighlightedItem
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Results.default, {
@@ -237,3 +274,5 @@ results: results,
           highlightedItem: highlightedItem,
-          setHighlightedItem: handleSetHighligthedItem
+          setHighlightedItem: handleSetHighlightedItem,
+          showNoResultsFlag: showNoResultsFlag,
+          showNoResultsText: showNoResultsText
         })]
@@ -240,0 +279,0 @@ })

dist/components/Results.js

@@ -31,3 +31,7 @@ "use strict";
       setHighlightedItem = _ref.setHighlightedItem,
-      formatResult = _ref.formatResult;
+      formatResult = _ref.formatResult,
+      _ref$showNoResultsFla = _ref.showNoResultsFlag,
+      showNoResultsFlag = _ref$showNoResultsFla === void 0 ? true : _ref$showNoResultsFla,
+      _ref$showNoResultsTex = _ref.showNoResultsText,
+      showNoResultsText = _ref$showNoResultsTex === void 0 ? 'No results' : _ref$showNoResultsTex;
   var formatResultWithKey = formatResult ? formatResult : function (item) {
@@ -42,6 +46,50 @@ return item[resultStringKeyName];
 
-  if ((results === null || results === void 0 ? void 0 : results.length) <= 0) {
+  if (showNoResultsFlag) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResultsWrapper, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        "data-test": "no-results-message",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchIcon.SearchIcon, {
+          showIcon: showIcon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "ellipsis",
+          children: showNoResultsText
+        })]
+      })
+    });
+  }
+
+  if ((results === null || results === void 0 ? void 0 : results.length) <= 0 && !showNoResultsFlag) {
     return null;
   }
 
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResultsWrapper, {
+    children: results.slice(0, maxResults).map(function (result, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        className: highlightedItem === index ? 'selected' : '',
+        onMouseEnter: function onMouseEnter() {
+          return setHighlightedItem({
+            index: index
+          });
+        },
+        "data-test": "result",
+        onMouseDown: function onMouseDown() {
+          return handleClick(result);
+        },
+        onClick: function onClick() {
+          return handleClick(result);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchIcon.SearchIcon, {
+          showIcon: showIcon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "ellipsis",
+          title: result[resultStringKeyName],
+          children: formatResultWithKey(result)
+        })]
+      }, "rsa-result-".concat(result.id));
+    })
+  });
+}
+
+var ResultsWrapper = function ResultsWrapper(_ref2) {
+  var children = _ref2.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledResults, {
@@ -51,29 +99,6 @@ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: results.slice(0, maxResults).map(function (result, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          className: highlightedItem === index ? 'selected' : '',
-          onMouseEnter: function onMouseEnter() {
-            return setHighlightedItem({
-              index: index
-            });
-          },
-          "data-test": "result",
-          onMouseDown: function onMouseDown() {
-            return handleClick(result);
-          },
-          onClick: function onClick() {
-            return handleClick(result);
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchIcon.SearchIcon, {
-            showIcon: showIcon
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "ellipsis",
-            title: result[resultStringKeyName],
-            children: formatResultWithKey(result)
-          })]
-        }, "rsa-result-".concat(result.id));
-      })
+      children: children
     })]
   });
-}
+};
 
@@ -80,0 +105,0 @@ var StyledResults = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div.line {\n    border-top-color: ", ";\n    border-top-style: solid;\n    border-top-width: 1px;\n\n    margin-bottom: 0px;\n    margin-left: 14px;\n    margin-right: 20px;\n    margin-top: 0px;\n\n    padding-bottom: 4px;\n  }\n\n  > ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 0px 0 16px 0;\n    max-height: ", ";\n\n    > li {\n      display: flex;\n      align-items: center;\n      padding: 4px 0 4px 0;\n\n      > div {\n        margin-left: 13px;\n      }\n    }\n  }\n\n  .ellipsis {\n    text-align: left;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .selected {\n    background-color: ", ";\n  }\n"])), function (props) {

dist/components/SearchInput.js

@@ -77,3 +77,3 @@ "use strict";
 
-var StyledSearchInput = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: ", ";\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n\n    padding: 0 0 0 13px;\n\n    border: none;\n    outline: none;\n\n    background-color: rgba(0, 0, 0, 0);\n    font-size: inherit;\n    font-family: inherit;\n\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n      opacity: 1;\n\n    :-ms-input-placeholder {\n      color: ", ";\n    }\n\n    ::-ms-input-placeholder {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var StyledSearchInput = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: ", ";\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n\n    padding: 0 0 0 13px;\n\n    border: none;\n    outline: none;\n\n    background-color: rgba(0, 0, 0, 0);\n    font-size: inherit;\n    font-family: inherit;\n\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n      opacity: 1;\n\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      ::-ms-input-placeholder {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.theme.height;
@@ -80,0 +80,0 @@ }, function (props) {

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "6.1.3",
+  "version": "7.0.0",
   "description": "A search box for React",
@@ -8,0 +8,0 @@ "main": "dist/index.js",

README.md

@@ -36,2 +36,3 @@ ![travis](https://travis-ci.com/sickdyd/react-search-autocomplete.svg?branch=master)
 function App() {
+  // note: the id field is mandatory
   const items = [
@@ -128,3 +129,4 @@ {
   // The list of items that can be filtered, it can be an array of
-  // any type of object. By default the search will be done on the
+  // any type of object. Note: the id field is mandatory.
+  // By default the search will be done on the
   // property "name", to change this behaviour, change the `fuseOptions`
@@ -241,2 +243,8 @@ // prop. Remember that the component uses the key "name" in your
   // The callback function used to format how the results are displayed.
+  showNoResults,
+  // Optional, default value: true, it will display "No results" or showNoResultsText
+  // if no results are found
+  showNoResultsText,
+  // Optional, default value: "No results", the text to display when no results
+  // are found
 }
@@ -243,0 +251,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

41296

increased by8.26%

Number of package files

22

increased by15.79%

Lines of code

664

increased by10.85%

Number of lines in readme file

253

increased by3.27%

No dependency changes