react-select-async-paginate - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

es/async-paginate.js

@@ -16,10 +16,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import wrapMenuList from './wrap-menu-list';
-var initialCache = {
-  isFirstLoad: true,
-  options: [],
-  hasMore: true,
-  isLoading: false
-};
 export var MenuList = wrapMenuList(defaultComponents.MenuList);
 
+var sleep = function sleep(ms) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve();
+    }, ms);
+  });
+};
+
 var AsyncPaginate =
@@ -153,3 +155,4 @@ /*#__PURE__*/
         options: props.options,
-        hasMore: true
+        hasMore: true,
+        additional: props.additional
       }
@@ -177,2 +180,14 @@ } : {};
   }, {
+    key: "getInitialCache",
+    value: function getInitialCache() {
+      var additional = this.props.additional;
+      return {
+        isFirstLoad: true,
+        options: [],
+        hasMore: true,
+        isLoading: false,
+        additional: additional
+      };
+    }
+  }, {
     key: "loadOptions",
@@ -183,3 +198,3 @@ value: function () {
       _regeneratorRuntime.mark(function _callee4() {
-        var _this$state2, search, optionsCache, currentOptions, hasError, options, hasMore, _loadOptions2, response;
+        var _this$state2, search, optionsCache, currentOptions, debounceTimeout, newSearch, hasError, additional, options, hasMore, _loadOptions2, response;
 
@@ -191,3 +206,3 @@ return _regeneratorRuntime.wrap(function _callee4$(_context4) {
                 _this$state2 = this.state, search = _this$state2.search, optionsCache = _this$state2.optionsCache;
-                currentOptions = optionsCache[search] || initialCache;
+                currentOptions = optionsCache[search] || this.getInitialCache();
 
@@ -213,27 +228,49 @@ if (!(currentOptions.isLoading || !currentOptions.hasMore)) {
               case 6:
-                _context4.prev = 6;
-                _loadOptions2 = this.props.loadOptions;
+                debounceTimeout = this.props.debounceTimeout;
+
+                if (!(debounceTimeout > 0)) {
+                  _context4.next = 13;
+                  break;
+                }
+
                 _context4.next = 10;
-                return _loadOptions2(search, currentOptions.options);
+                return sleep(debounceTimeout);
 
               case 10:
+                newSearch = this.state.search;
+
+                if (!(search !== newSearch)) {
+                  _context4.next = 13;
+                  break;
+                }
+
+                return _context4.abrupt("return");
+
+              case 13:
+                _context4.prev = 13;
+                _loadOptions2 = this.props.loadOptions;
+                _context4.next = 17;
+                return _loadOptions2(search, currentOptions.options, currentOptions.additional);
+
+              case 17:
                 response = _context4.sent;
                 options = response.options;
                 hasMore = response.hasMore;
+                additional = response.additional;
                 hasError = false;
-                _context4.next = 19;
+                _context4.next = 27;
                 break;
 
-              case 16:
-                _context4.prev = 16;
-                _context4.t0 = _context4["catch"](6);
+              case 24:
+                _context4.prev = 24;
+                _context4.t0 = _context4["catch"](13);
                 hasError = true;
 
-              case 19:
+              case 27:
                 if (!hasError) {
-                  _context4.next = 24;
+                  _context4.next = 32;
                   break;
                 }
 
-                _context4.next = 22;
+                _context4.next = 30;
                 return this.setState(function (prevState) {
@@ -247,8 +284,8 @@ return {
 
-              case 22:
-                _context4.next = 26;
+              case 30:
+                _context4.next = 34;
                 break;
 
-              case 24:
-                _context4.next = 26;
+              case 32:
+                _context4.next = 34;
                 return this.setState(function (prevState) {
@@ -260,3 +297,4 @@ return {
                       isLoading: false,
-                      isFirstLoad: false
+                      isFirstLoad: false,
+                      additional: typeof additional === 'undefined' ? null : additional
                     })))
@@ -266,3 +304,3 @@ };
 
-              case 26:
+              case 34:
               case "end":
@@ -272,3 +310,3 @@ return _context4.stop();
           }
-        }, _callee4, this, [[6, 16]]);
+        }, _callee4, this, [[13, 24]]);
       }));
@@ -292,3 +330,3 @@
           menuIsOpen = _this$state3.menuIsOpen;
-      var currentOptions = optionsCache[search] || initialCache;
+      var currentOptions = optionsCache[search] || this.getInitialCache();
       return React.createElement(SelectBase, _extends({}, this.props, {
@@ -318,16 +356,21 @@ inputValue: search,
   loadOptions: PropTypes.func.isRequired,
+  debounceTimeout: PropTypes.number,
+  options: PropTypes.arrayOf(PropTypes.object),
   // eslint-disable-next-line react/forbid-prop-types
+  additional: PropTypes.any,
+  components: PropTypes.objectOf(PropTypes.func),
+  // eslint-disable-next-line react/forbid-prop-types
   cacheUniq: PropTypes.any,
-  selectRef: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.object),
-  components: PropTypes.objectOf(PropTypes.func)
+  selectRef: PropTypes.func
 });
 
 _defineProperty(AsyncPaginate, "defaultProps", {
+  debounceTimeout: 0,
+  options: null,
+  additional: null,
+  components: {},
   cacheUniq: null,
-  selectRef: function selectRef() {},
-  options: null,
-  components: {}
+  selectRef: function selectRef() {}
 });
 
 export default AsyncPaginate;

lib/async-paginate.js

@@ -42,11 +42,13 @@ "use strict";
 
-var initialCache = {
-  isFirstLoad: true,
-  options: [],
-  hasMore: true,
-  isLoading: false
-};
 var MenuList = (0, _wrapMenuList.default)(_reactSelect.components.MenuList);
 exports.MenuList = MenuList;
 
+var sleep = function sleep(ms) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve();
+    }, ms);
+  });
+};
+
 var AsyncPaginate =
@@ -174,3 +176,4 @@ /*#__PURE__*/
         options: props.options,
-        hasMore: true
+        hasMore: true,
+        additional: props.additional
       }
@@ -198,2 +201,14 @@ } : {};
   }, {
+    key: "getInitialCache",
+    value: function getInitialCache() {
+      var additional = this.props.additional;
+      return {
+        isFirstLoad: true,
+        options: [],
+        hasMore: true,
+        isLoading: false,
+        additional: additional
+      };
+    }
+  }, {
     key: "loadOptions",
@@ -204,3 +219,3 @@ value: function () {
       _regenerator.default.mark(function _callee4() {
-        var _this$state2, search, optionsCache, currentOptions, hasError, options, hasMore, _loadOptions2, response;
+        var _this$state2, search, optionsCache, currentOptions, debounceTimeout, newSearch, hasError, additional, options, hasMore, _loadOptions2, response;
 
@@ -212,3 +227,3 @@ return _regenerator.default.wrap(function _callee4$(_context4) {
                 _this$state2 = this.state, search = _this$state2.search, optionsCache = _this$state2.optionsCache;
-                currentOptions = optionsCache[search] || initialCache;
+                currentOptions = optionsCache[search] || this.getInitialCache();
 
@@ -234,27 +249,49 @@ if (!(currentOptions.isLoading || !currentOptions.hasMore)) {
               case 6:
-                _context4.prev = 6;
-                _loadOptions2 = this.props.loadOptions;
+                debounceTimeout = this.props.debounceTimeout;
+
+                if (!(debounceTimeout > 0)) {
+                  _context4.next = 13;
+                  break;
+                }
+
                 _context4.next = 10;
-                return _loadOptions2(search, currentOptions.options);
+                return sleep(debounceTimeout);
 
               case 10:
+                newSearch = this.state.search;
+
+                if (!(search !== newSearch)) {
+                  _context4.next = 13;
+                  break;
+                }
+
+                return _context4.abrupt("return");
+
+              case 13:
+                _context4.prev = 13;
+                _loadOptions2 = this.props.loadOptions;
+                _context4.next = 17;
+                return _loadOptions2(search, currentOptions.options, currentOptions.additional);
+
+              case 17:
                 response = _context4.sent;
                 options = response.options;
                 hasMore = response.hasMore;
+                additional = response.additional;
                 hasError = false;
-                _context4.next = 19;
+                _context4.next = 27;
                 break;
 
-              case 16:
-                _context4.prev = 16;
-                _context4.t0 = _context4["catch"](6);
+              case 24:
+                _context4.prev = 24;
+                _context4.t0 = _context4["catch"](13);
                 hasError = true;
 
-              case 19:
+              case 27:
                 if (!hasError) {
-                  _context4.next = 24;
+                  _context4.next = 32;
                   break;
                 }
 
-                _context4.next = 22;
+                _context4.next = 30;
                 return this.setState(function (prevState) {
@@ -268,8 +305,8 @@ return {
 
-              case 22:
-                _context4.next = 26;
+              case 30:
+                _context4.next = 34;
                 break;
 
-              case 24:
-                _context4.next = 26;
+              case 32:
+                _context4.next = 34;
                 return this.setState(function (prevState) {
@@ -281,3 +318,4 @@ return {
                       isLoading: false,
-                      isFirstLoad: false
+                      isFirstLoad: false,
+                      additional: typeof additional === 'undefined' ? null : additional
                     })))
@@ -287,3 +325,3 @@ };
 
-              case 26:
+              case 34:
               case "end":
@@ -293,3 +331,3 @@ return _context4.stop();
           }
-        }, _callee4, this, [[6, 16]]);
+        }, _callee4, this, [[13, 24]]);
       }));
@@ -313,3 +351,3 @@
           menuIsOpen = _this$state3.menuIsOpen;
-      var currentOptions = optionsCache[search] || initialCache;
+      var currentOptions = optionsCache[search] || this.getInitialCache();
       return _react.default.createElement(_reactSelect.SelectBase, (0, _extends2.default)({}, this.props, {
@@ -338,15 +376,20 @@ inputValue: search,
   loadOptions: _propTypes.default.func.isRequired,
+  debounceTimeout: _propTypes.default.number,
+  options: _propTypes.default.arrayOf(_propTypes.default.object),
   // eslint-disable-next-line react/forbid-prop-types
+  additional: _propTypes.default.any,
+  components: _propTypes.default.objectOf(_propTypes.default.func),
+  // eslint-disable-next-line react/forbid-prop-types
   cacheUniq: _propTypes.default.any,
-  selectRef: _propTypes.default.func,
-  options: _propTypes.default.arrayOf(_propTypes.default.object),
-  components: _propTypes.default.objectOf(_propTypes.default.func)
+  selectRef: _propTypes.default.func
 });
 (0, _defineProperty2.default)(AsyncPaginate, "defaultProps", {
+  debounceTimeout: 0,
+  options: null,
+  additional: null,
+  components: {},
   cacheUniq: null,
-  selectRef: function selectRef() {},
-  options: null,
-  components: {}
+  selectRef: function selectRef() {}
 });
 var _default = AsyncPaginate;
 exports.default = _default;

package.json

 {
   "name": "react-select-async-paginate",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Wrapper above react-select that supports pagination on menu scroll",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -7,5 +7,14 @@ [![NPM](https://img.shields.io/npm/v/react-select-async-paginate.svg)](https://www.npmjs.com/package/react-select-async-paginate)
 
+## Sandbox examples
+
+- [Simple](https://codesandbox.io/s/o75rno2w65)
+- [Multi](https://codesandbox.io/s/2323yrlo9r)
+- [Initial options](https://codesandbox.io/s/q111nqw9j)
+
 ## Versions
 
-This (`react-select-async-paginate` 0.2.x) is the version of `react-select-async-paginate` for use with `react-select` 2.x. For use with `react-select` 1.x you can install `react-select-async-paginate` 0.1.x.
+| react-select | react-select-async-paginate |
+|--------------|-----------------------------|
+| 2.x | 0.2.x |
+| 1.x | 0.1.x |
 
@@ -34,2 +43,3 @@ ## Installation
 2. Loaded options for current search.
+3. Collected additional data e.g. current page number etc. For first load it is `additional` from props, for next is `additional` from previous response for current search. `null` by default.
 
@@ -40,4 +50,5 @@ It should return next object:
 {
-  options: [{ label: 'label', value: 'value' }, ...],
-  hasMore: true/false,
+  options: Array,
+  hasMore: boolean,
+  additional?: any,
 }
@@ -52,2 +63,10 @@ ```
 
+### debounceTimeout
+
+Not required. Number. Debounce timeout for `loadOptions` calls. `0` by default.
+
+### additional
+
+Not required. Default `additional` for first request for every search.
+
 ### cacheUniq
@@ -63,2 +82,4 @@
 
+### offset way
+
 ```
@@ -107,2 +128,32 @@ import AsyncPaginate from 'react-select-async-paginate';
 
+### page way
+
+```
+import AsyncPaginate from 'react-select-async-paginate';
+
+...
+
+async function loadOptions(search, loadedOptions, { page }) {
+  const response = await fetch(`/awesome-api-url/?search=${search}&page=${page}`);
+  const responseJSON = await response.json();
+
+  return {
+    options: responseJSON.results,
+    hasMore: responseJSON.has_more,
+    additional: {
+      page: page + 1,
+    },
+  };
+}
+
+<AsyncPaginate
+  value={value}
+  loadOptions={loadOptions}
+  onChange={setValue}
+  additional={{
+    page: 1,
+  }}
+/>
+```
+
 ## Replacing Components
@@ -109,0 +160,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

40087

increased by12.43%

Number of package files

11

increased by22.22%

Lines of code

851

increased by9.24%

Number of lines in readme file

172

increased by42.15%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes