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

Comparing version 0.4.0-alpha.0 to 0.4.0-alpha.1

CHANGELOG.md

@@ -0,1 +1,7 @@
+## 0.4.0-alpha.1
+
+### Breaking changes
+
+* `AsyncPaginateBase` is removed. `AsyncPaginate` supports `inputValue`, `menuIsOpen`, `onInputChange`, `onMenuClose`, `onMenuOpen` now.
+
 ## 0.4.0-alpha.0
@@ -7,3 +13,3 @@
 
-* Use `withAsyncPaginate` and `withAsyncPaginateBase` instead of `SelectComponent` prop
+* Use `withAsyncPaginate` and `withAsyncPaginateBase` instead of `SelectComponent` prop.
 
@@ -14,10 +20,12 @@ ```javascript
 
-* `additional` is `undefined` by default instead of `null`
+* `AsyncPaginateBase` is removed. `AsyncPaginate` supports `inputValue`, `menuIsOpen`, `onInputChange`, `onMenuClose`, `onMenuOpen` now.
 
-* Save previous additional if not changed
+* `additional` is `undefined` by default instead of `null`.
 
-* Validate result of `loadOptions` call
+* Save previous additional if not changed.
 
-* Use named export instead of default export
+* Validate result of `loadOptions` call.
 
+* Use named export instead of default export.
+
   ```javascript
@@ -24,0 +32,0 @@ import { AsyncPaginate } from 'react-select-async-paginate';

es/index.js

 import Select from 'react-select';
-import { withAsyncPaginateBase } from './withAsyncPaginateBase';
 import { withAsyncPaginate } from './withAsyncPaginate';
 export { wrapMenuList } from './wrapMenuList';
 export { reduceGroupedOptions } from './reduceGroupedOptions';
-export { withAsyncPaginateBase };
 export { withAsyncPaginate };
@@ -11,3 +9,2 @@ export { useAsyncPaginateBase } from './useAsyncPaginateBase';
 export { useComponents } from './useComponents';
-export var AsyncPaginateBase = withAsyncPaginateBase(Select);
 export var AsyncPaginate = withAsyncPaginate(Select);

es/reduceGroupedOptions.js

@@ -26,3 +26,3 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 
-    res[groupIndex] = _objectSpread({}, res[groupIndex], {
+    res[groupIndex] = _objectSpread(_objectSpread({}, res[groupIndex]), {}, {
       options: res[groupIndex].options.concat(group.options)
@@ -29,0 +29,0 @@ });

es/useAsyncPaginate.js

@@ -7,6 +7,11 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
   var deps = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  var inputValueParam = params.inputValue,
+      menuIsOpenParam = params.menuIsOpen,
+      onInputChangeParam = params.onInputChange,
+      onMenuCloseParam = params.onMenuClose,
+      onMenuOpenParam = params.onMenuOpen;
 
   var _useStateParam = useStateParam(''),
       _useStateParam2 = _slicedToArray(_useStateParam, 2),
-      inputValue = _useStateParam2[0],
+      inputValueState = _useStateParam2[0],
       setInputValue = _useStateParam2[1];
@@ -16,19 +21,33 @@
       _useStateParam4 = _slicedToArray(_useStateParam3, 2),
-      menuIsOpen = _useStateParam4[0],
+      menuIsOpenState = _useStateParam4[0],
       setMenuIsOpen = _useStateParam4[1];
 
-  var onInputChange = useCallbackParam(function (nextInputValue) {
+  var inputValue = typeof inputValueParam === 'string' ? inputValueParam : inputValueState;
+  var menuIsOpen = typeof menuIsOpenParam === 'boolean' ? menuIsOpenParam : menuIsOpenState;
+  var onInputChange = useCallbackParam(function (nextInputValue, actionMeta) {
+    if (onInputChangeParam) {
+      onInputChangeParam(nextInputValue, actionMeta);
+    }
+
     setInputValue(nextInputValue);
-  }, []);
+  }, [onInputChangeParam]);
   var onMenuClose = useCallbackParam(function () {
+    if (onMenuCloseParam) {
+      onMenuCloseParam();
+    }
+
     setMenuIsOpen(false);
-  }, []);
+  }, [onMenuCloseParam]);
   var onMenuOpen = useCallbackParam(function () {
+    if (onMenuOpenParam) {
+      onMenuOpenParam();
+    }
+
     setMenuIsOpen(true);
-  }, []);
-  var baseResult = useAsyncPaginateBaseParam(_objectSpread({}, params, {
+  }, [onMenuOpenParam]);
+  var baseResult = useAsyncPaginateBaseParam(_objectSpread(_objectSpread({}, params), {}, {
     inputValue: inputValue,
     menuIsOpen: menuIsOpen
   }), deps);
-  return _objectSpread({}, baseResult, {
+  return _objectSpread(_objectSpread({}, baseResult), {}, {
     inputValue: inputValue,
@@ -35,0 +54,0 @@ menuIsOpen: menuIsOpen,

es/useAsyncPaginateBase.js

@@ -71,3 +71,3 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
             setOptionsCache(function (prevOptionsCache) {
-              return _objectSpread({}, prevOptionsCache, _defineProperty({}, currentInputValue, _objectSpread({}, currentOptions, {
+              return _objectSpread(_objectSpread({}, prevOptionsCache), {}, _defineProperty({}, currentInputValue, _objectSpread(_objectSpread({}, currentOptions), {}, {
                 isLoading: true
@@ -94,3 +94,3 @@ })));
             setOptionsCache(function (prevOptionsCache) {
-              return _objectSpread({}, prevOptionsCache, _defineProperty({}, currentInputValue, _objectSpread({}, currentOptions, {
+              return _objectSpread(_objectSpread({}, prevOptionsCache), {}, _defineProperty({}, currentInputValue, _objectSpread(_objectSpread({}, currentOptions), {}, {
                 isLoading: false
@@ -125,3 +125,3 @@ })));
             setOptionsCache(function (prevOptionsCache) {
-              return _objectSpread({}, prevOptionsCache, _defineProperty({}, currentInputValue, _objectSpread({}, currentOptions, {
+              return _objectSpread(_objectSpread({}, prevOptionsCache), {}, _defineProperty({}, currentInputValue, _objectSpread(_objectSpread({}, currentOptions), {}, {
                 isLoading: false
@@ -138,3 +138,3 @@ })));
             setOptionsCache(function (prevOptionsCache) {
-              return _objectSpread({}, prevOptionsCache, _defineProperty({}, currentInputValue, _objectSpread({}, currentOptions, {
+              return _objectSpread(_objectSpread({}, prevOptionsCache), {}, _defineProperty({}, currentInputValue, _objectSpread(_objectSpread({}, currentOptions), {}, {
                 options: reduceOptions(currentOptions.options, options, newAdditional),
@@ -141,0 +141,0 @@ hasMore: !!hasMore,

es/withAsyncPaginate.js

@@ -17,3 +17,3 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
     var processedComponents = useComponentsProp(components);
-    return React.createElement(SelectComponent, _objectSpread({}, props, {}, asyncPaginateProps, {
+    return React.createElement(SelectComponent, _objectSpread(_objectSpread(_objectSpread({}, props), asyncPaginateProps), {}, {
       components: processedComponents,
@@ -20,0 +20,0 @@ ref: selectRef

lib/index.js

@@ -8,8 +8,2 @@ "use strict";
 });
-Object.defineProperty(exports, "withAsyncPaginateBase", {
-  enumerable: true,
-  get: function get() {
-    return _withAsyncPaginateBase.withAsyncPaginateBase;
-  }
-});
 Object.defineProperty(exports, "withAsyncPaginate", {
@@ -51,8 +45,6 @@ enumerable: true,
 });
-exports.AsyncPaginate = exports.AsyncPaginateBase = void 0;
+exports.AsyncPaginate = void 0;
 
 var _reactSelect = _interopRequireDefault(require("react-select"));
 
-var _withAsyncPaginateBase = require("./withAsyncPaginateBase");
-
 var _withAsyncPaginate = require("./withAsyncPaginate");
@@ -70,5 +62,3 @@
 
-var AsyncPaginateBase = (0, _withAsyncPaginateBase.withAsyncPaginateBase)(_reactSelect["default"]);
-exports.AsyncPaginateBase = AsyncPaginateBase;
 var AsyncPaginate = (0, _withAsyncPaginate.withAsyncPaginate)(_reactSelect["default"]);
 exports.AsyncPaginate = AsyncPaginate;

lib/reduceGroupedOptions.js

@@ -36,3 +36,3 @@ "use strict";
 
-    res[groupIndex] = (0, _objectSpread2["default"])({}, res[groupIndex], {
+    res[groupIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, res[groupIndex]), {}, {
       options: res[groupIndex].options.concat(group.options)
@@ -39,0 +39,0 @@ });

lib/useAsyncPaginate.js

@@ -20,6 +20,11 @@ "use strict";
   var deps = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  var inputValueParam = params.inputValue,
+      menuIsOpenParam = params.menuIsOpen,
+      onInputChangeParam = params.onInputChange,
+      onMenuCloseParam = params.onMenuClose,
+      onMenuOpenParam = params.onMenuOpen;
 
   var _useStateParam = useStateParam(''),
       _useStateParam2 = (0, _slicedToArray2["default"])(_useStateParam, 2),
-      inputValue = _useStateParam2[0],
+      inputValueState = _useStateParam2[0],
       setInputValue = _useStateParam2[1];
@@ -29,19 +34,33 @@
       _useStateParam4 = (0, _slicedToArray2["default"])(_useStateParam3, 2),
-      menuIsOpen = _useStateParam4[0],
+      menuIsOpenState = _useStateParam4[0],
       setMenuIsOpen = _useStateParam4[1];
 
-  var onInputChange = useCallbackParam(function (nextInputValue) {
+  var inputValue = typeof inputValueParam === 'string' ? inputValueParam : inputValueState;
+  var menuIsOpen = typeof menuIsOpenParam === 'boolean' ? menuIsOpenParam : menuIsOpenState;
+  var onInputChange = useCallbackParam(function (nextInputValue, actionMeta) {
+    if (onInputChangeParam) {
+      onInputChangeParam(nextInputValue, actionMeta);
+    }
+
     setInputValue(nextInputValue);
-  }, []);
+  }, [onInputChangeParam]);
   var onMenuClose = useCallbackParam(function () {
+    if (onMenuCloseParam) {
+      onMenuCloseParam();
+    }
+
     setMenuIsOpen(false);
-  }, []);
+  }, [onMenuCloseParam]);
   var onMenuOpen = useCallbackParam(function () {
+    if (onMenuOpenParam) {
+      onMenuOpenParam();
+    }
+
     setMenuIsOpen(true);
-  }, []);
-  var baseResult = useAsyncPaginateBaseParam((0, _objectSpread2["default"])({}, params, {
+  }, [onMenuOpenParam]);
+  var baseResult = useAsyncPaginateBaseParam((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, params), {}, {
     inputValue: inputValue,
     menuIsOpen: menuIsOpen
   }), deps);
-  return (0, _objectSpread2["default"])({}, baseResult, {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseResult), {}, {
     inputValue: inputValue,
@@ -48,0 +67,0 @@ menuIsOpen: menuIsOpen,

lib/useAsyncPaginateBase.js

@@ -99,3 +99,3 @@ "use strict";
             setOptionsCache(function (prevOptionsCache) {
-              return (0, _objectSpread6["default"])({}, prevOptionsCache, (0, _defineProperty2["default"])({}, currentInputValue, (0, _objectSpread6["default"])({}, currentOptions, {
+              return (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, prevOptionsCache), {}, (0, _defineProperty2["default"])({}, currentInputValue, (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, currentOptions), {}, {
                 isLoading: true
@@ -122,3 +122,3 @@ })));
             setOptionsCache(function (prevOptionsCache) {
-              return (0, _objectSpread6["default"])({}, prevOptionsCache, (0, _defineProperty2["default"])({}, currentInputValue, (0, _objectSpread6["default"])({}, currentOptions, {
+              return (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, prevOptionsCache), {}, (0, _defineProperty2["default"])({}, currentInputValue, (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, currentOptions), {}, {
                 isLoading: false
@@ -153,3 +153,3 @@ })));
             setOptionsCache(function (prevOptionsCache) {
-              return (0, _objectSpread6["default"])({}, prevOptionsCache, (0, _defineProperty2["default"])({}, currentInputValue, (0, _objectSpread6["default"])({}, currentOptions, {
+              return (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, prevOptionsCache), {}, (0, _defineProperty2["default"])({}, currentInputValue, (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, currentOptions), {}, {
                 isLoading: false
@@ -166,3 +166,3 @@ })));
             setOptionsCache(function (prevOptionsCache) {
-              return (0, _objectSpread6["default"])({}, prevOptionsCache, (0, _defineProperty2["default"])({}, currentInputValue, (0, _objectSpread6["default"])({}, currentOptions, {
+              return (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, prevOptionsCache), {}, (0, _defineProperty2["default"])({}, currentInputValue, (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, currentOptions), {}, {
                 options: reduceOptions(currentOptions.options, options, newAdditional),
@@ -169,0 +169,0 @@ hasMore: !!hasMore,

lib/withAsyncPaginate.js

@@ -30,3 +30,3 @@ "use strict";
     var processedComponents = useComponentsProp(components);
-    return _react["default"].createElement(SelectComponent, (0, _objectSpread2["default"])({}, props, {}, asyncPaginateProps, {
+    return _react["default"].createElement(SelectComponent, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), asyncPaginateProps), {}, {
       components: processedComponents,
@@ -33,0 +33,0 @@ ref: selectRef

package.json

 {
   "name": "react-select-async-paginate",
-  "version": "0.4.0-alpha.0",
+  "version": "0.4.0-alpha.1",
   "description": "Wrapper above react-select that supports pagination on menu scroll",
@@ -20,2 +20,3 @@ "main": "lib/index.js",
   "repository": "[e-mail]:vtaits/react-select-async-paginate.git",
+  "homepage": "https://github.com/vtaits/react-select-async-paginate/tree/master/packages/react-select-async-paginate",
   "author": "Vadim Taits",
@@ -41,3 +42,3 @@ "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
+    "@babel/runtime": "^7.9.6",
     "@seznam/compose-react-refs": "^1.0.4",
@@ -44,0 +45,0 @@ "react-is-mounted-hook": "^1.0.3",

README.md

@@ -0,1 +1,2 @@
+[![NPM](https://img.shields.io/npm/v/react-select-async-paginate/next.svg)](https://www.npmjs.com/package/react-select-async-paginate/v/next)
 [![NPM](https://img.shields.io/npm/v/react-select-async-paginate.svg)](https://www.npmjs.com/package/react-select-async-paginate)
@@ -230,58 +231,8 @@ [![Build Status](https://img.shields.io/travis/vtaits/react-select-async-paginate.svg?style=flat)](https://travis-ci.org/vtaits/react-select-async-paginate)
 
-## Manual control of input value and menu opening
-
-You can use `AsyncPaginateBase` component.
-
-```javascript
-import React, { useState } from 'react';
-import { AsyncPaginateBase } from 'react-select-async-paginate';
-
-...
-
-async function loadOptions(search, loadedOptions) {
-  const response = await fetch(`/awesome-api-url/?search=${search}&offset=${loadedOptions.length}`);
-  const responseJSON = await response.json();
-
-  return {
-    options: responseJSON.results,
-    hasMore: responseJSON.has_more,
-  };
-}
-
-const MyWrapper = ({
-  value,
-  onChange,
-}) => {
-  const [inputValue, onInputChange] = useState('');
-  const [menuIsOpen, setMenuIsOpen] = useState(false);
-
-  const onMenuOpen = () => {
-    setMenuIsOpen(true);
-  };
-
-  const onMenuClose = () => {
-    setMenuIsOpen(false);
-  };
-
-  return (
-    <AsyncPaginate
-      value={value}
-      loadOptions={loadOptions}
-      onChange={onChange}
-      inputValue={inputValue}
-      onInputChange={onInputChange}
-      menuIsOpen={menuIsOpen}
-      onMenuOpen={onMenuOpen}
-      onMenuClose={onMenuClose}
-    />
-  );
-};
-```
-
 ## Replacing react-select component
 
-You can use `withAsyncPaginate` and `withAsyncPaginateBase` HOCs.
+You can use `withAsyncPaginate` HOC.
 
 ```javascript
-import { withAsyncPaginate, withAsyncPaginateBase } from 'react-select-async-paginate';
+import { withAsyncPaginate } from 'react-select-async-paginate';
 
@@ -291,3 +242,2 @@ ...
 const CustomAsyncPaginate = withAsyncPaginate(CustomSelect);
-const CustomAsyncPaginateBase = withAsyncPaginateBase(CustomSelect);
 ```
@@ -294,0 +244,0 @@

ts/index.d.ts

 /// <reference types="react" />
-import { withAsyncPaginateBase } from './withAsyncPaginateBase';
 import { withAsyncPaginate } from './withAsyncPaginate';
 export { wrapMenuList } from './wrapMenuList';
 export { reduceGroupedOptions } from './reduceGroupedOptions';
-export { withAsyncPaginateBase };
 export { withAsyncPaginate };
@@ -11,4 +9,3 @@ export { useAsyncPaginateBase } from './useAsyncPaginateBase';
 export { useComponents } from './useComponents';
-export declare const AsyncPaginateBase: import("react").FC<import("./withAsyncPaginateBase").Props<any, any>>;
 export declare const AsyncPaginate: import("react").FC<import("./withAsyncPaginate").Props<any, any>>;
 export type { OptionsList, ReduceOptions, GetInitialOptionsCacheParams, OptionsCacheItem, OptionsCache, ShouldLoadMore, Response, LoadOptions, FilterOption, UseAsyncPaginateBaseResult, UseAsyncPaginateResult, UseAsyncPaginateParams, UseAsyncPaginateBaseParams, ComponentProps, } from './types';

ts/types.d.ts

 import type { Ref } from 'react';
-import type { GroupedOptionsType, OptionsType } from 'react-select';
+import type { GroupedOptionsType, InputActionMeta, OptionsType } from 'react-select';
 export declare type OptionsList<OptionType = any> = GroupedOptionsType<OptionType> | OptionsType<OptionType>;
@@ -39,3 +39,3 @@ export declare type ReduceOptions<OptionType = any, Additional = any> = (prevOptions: OptionsList<OptionType>, loadedOptions: OptionsList<OptionType>, additional: Additional) => OptionsList<OptionType>;
     menuIsOpen: boolean;
-    onInputChange: (inputValue: string) => void;
+    onInputChange: (inputValue: string, actionMeta: InputActionMeta) => void;
     onMenuClose: () => void;
@@ -54,2 +54,7 @@ onMenuOpen: () => void;
     filterOption?: FilterOption;
+    inputValue?: string;
+    menuIsOpen?: boolean;
+    onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
+    onMenuClose?: () => void;
+    onMenuOpen?: () => void;
 };
@@ -56,0 +61,0 @@ export declare type UseAsyncPaginateBaseParams<OptionType = any, Additional = any> = UseAsyncPaginateParams<OptionType, Additional> & {

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

63067

decreased by-4.43%

Number of package files

33

decreased by-8.33%

Lines of code

1079

decreased by-4.51%

Number of lines in readme file

321

decreased by-13.48%

Dependency changes

• Updated@babel/runtime@^7.9.6