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

Comparing version 0.3.14 to 0.4.0-alpha.0

CHANGELOG.md

@@ -0,1 +1,25 @@
+## 0.4.0-alpha.0
+
+The project was fully rewritten to **typescript** and **react hooks**.
+
+### Breaking changes
+
+* Use `withAsyncPaginate` and `withAsyncPaginateBase` instead of `SelectComponent` prop
+
+  ```javascript
+  const CustomAsyncPagiante = withAsyncPaginate(SelectComponent);
+  ```
+
+* `additional` is `undefined` by default instead of `null`
+
+* Save previous additional if not changed
+
+* Validate result of `loadOptions` call
+
+* Use named export instead of default export
+
+  ```javascript
+  import { AsyncPaginate } from 'react-select-async-paginate';
+  ```
+
 ## 0.3.14 (01 apr 2020)
@@ -2,0 +26,0 @@

es/index.js

@@ -1,4 +0,12 @@
-export { default } from './async-paginate';
-export { default as AsyncPaginateBase } from './async-paginate-base';
-export { default as wrapMenuList } from './wrap-menu-list';
-export { default as reduceGroupedOptions } from './reduce-grouped-options';
+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 };
+export { useAsyncPaginateBase } from './useAsyncPaginateBase';
+export { useAsyncPaginate } from './useAsyncPaginate';
+export { useComponents } from './useComponents';
+export var AsyncPaginateBase = withAsyncPaginateBase(Select);
+export var AsyncPaginate = withAsyncPaginate(Select);

lib/index.js

@@ -8,12 +8,12 @@ "use strict";
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "withAsyncPaginateBase", {
   enumerable: true,
   get: function get() {
-    return _asyncPaginate["default"];
+    return _withAsyncPaginateBase.withAsyncPaginateBase;
   }
 });
-Object.defineProperty(exports, "AsyncPaginateBase", {
+Object.defineProperty(exports, "withAsyncPaginate", {
   enumerable: true,
   get: function get() {
-    return _asyncPaginateBase["default"];
+    return _withAsyncPaginate.withAsyncPaginate;
   }
@@ -24,3 +24,3 @@ });
   get: function get() {
-    return _wrapMenuList["default"];
+    return _wrapMenuList.wrapMenuList;
   }
@@ -31,12 +31,44 @@ });
   get: function get() {
-    return _reduceGroupedOptions["default"];
+    return _reduceGroupedOptions.reduceGroupedOptions;
   }
 });
+Object.defineProperty(exports, "useAsyncPaginateBase", {
+  enumerable: true,
+  get: function get() {
+    return _useAsyncPaginateBase.useAsyncPaginateBase;
+  }
+});
+Object.defineProperty(exports, "useAsyncPaginate", {
+  enumerable: true,
+  get: function get() {
+    return _useAsyncPaginate.useAsyncPaginate;
+  }
+});
+Object.defineProperty(exports, "useComponents", {
+  enumerable: true,
+  get: function get() {
+    return _useComponents.useComponents;
+  }
+});
+exports.AsyncPaginate = exports.AsyncPaginateBase = void 0;
 
-var _asyncPaginate = _interopRequireDefault(require("./async-paginate"));
+var _reactSelect = _interopRequireDefault(require("react-select"));
 
-var _asyncPaginateBase = _interopRequireDefault(require("./async-paginate-base"));
+var _withAsyncPaginateBase = require("./withAsyncPaginateBase");
 
-var _wrapMenuList = _interopRequireDefault(require("./wrap-menu-list"));
+var _withAsyncPaginate = require("./withAsyncPaginate");
 
-var _reduceGroupedOptions = _interopRequireDefault(require("./reduce-grouped-options"));
+var _wrapMenuList = require("./wrapMenuList");
+
+var _reduceGroupedOptions = require("./reduceGroupedOptions");
+
+var _useAsyncPaginateBase = require("./useAsyncPaginateBase");
+
+var _useAsyncPaginate = require("./useAsyncPaginate");
+
+var _useComponents = require("./useComponents");
+
+var AsyncPaginateBase = (0, _withAsyncPaginateBase.withAsyncPaginateBase)(_reactSelect["default"]);
+exports.AsyncPaginateBase = AsyncPaginateBase;
+var AsyncPaginate = (0, _withAsyncPaginate.withAsyncPaginate)(_reactSelect["default"]);
+exports.AsyncPaginate = AsyncPaginate;

package.json

 {
   "name": "react-select-async-paginate",
-  "version": "0.3.14",
+  "version": "0.4.0-alpha.0",
   "description": "Wrapper above react-select that supports pagination on menu scroll",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "typings": "index.d.ts",
+  "typings": "ts/index.d.ts",
   "files": [
     "/es",
     "/lib",
-    "index.d.ts"
+    "/ts"
   ],
@@ -23,6 +23,10 @@ "keywords": [
   "scripts": {
-    "build": "yarn build:cjs && yarn build:es",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir lib --ignore \"src/**/__tests__\",\"src/**/__stories__\"",
-    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es --ignore \"src/**/__tests__\",\"src/**/__stories__\"",
-    "prepare": "yarn build",
+    "clean": "rimraf es lib ts",
+    "build": "yarn build:cjs && yarn build:es && yarn build:ts",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel --extensions '.ts,.tsx' src --out-dir lib --ignore \"src/**/__tests__\",\"src/**/__stories__\"",
+    "build:es": "cross-env BABEL_ENV=es babel --extensions '.ts,.tsx' src --out-dir es --ignore \"src/**/__tests__\",\"src/**/__stories__\"",
+    "build:ts": "tsc --declaration --emitDeclarationOnly",
+    "lint": "eslint src --ext .ts,.tsx --ignore-path ../../.gitignore",
+    "prepare": "yarn clean && yarn build",
+    "test:ts": "tsc -p ./tsconfig.validate.json --noEmit",
     "test:unit": "jest",
@@ -33,3 +37,2 @@ "test:unit:cov": "jest --coverage",
   "peerDependencies": {
-    "@types/react-select": "^3.0.0",
     "react": "^16.8.0",
@@ -40,8 +43,12 @@ "react-select": "^2.0.0 || ^3.0.0"
     "@babel/runtime": "^7.9.2",
-    "prop-types": "^15.7.2"
+    "@seznam/compose-react-refs": "^1.0.4",
+    "react-is-mounted-hook": "^1.0.3",
+    "sleep-promise": "^8.0.1"
   },
   "devDependencies": {
-    "@types/react-select": "^3.0.11",
+    "@storybook/react": "^5.3.18",
+    "@types/react-select": "^3.0.12",
+    "enzyme": "^3.11.0",
     "react-select": "^3.0.8"
   }
 }

README.md

 [![NPM](https://img.shields.io/npm/v/react-select-async-paginate.svg)](https://www.npmjs.com/package/react-select-async-paginate)
 [![Build Status](https://img.shields.io/travis/vtaits/react-select-async-paginate.svg?style=flat)](https://travis-ci.org/vtaits/react-select-async-paginate)
 [![codecov.io](https://codecov.io/gh/vtaits/react-select-async-paginate/branch/master/graph/badge.svg)](https://codecov.io/gh/vtaits/react-select-async-paginate)
+[![Types](https://img.shields.io/npm/types/react-select-async-paginate.svg)](https://www.npmjs.com/package/react-select-async-paginate)
 
@@ -28,3 +29,3 @@ # react-select-async-paginate
 |--------------|-----------------------------|
-| 3.x | ^0.3.2 |
+| 3.x | 0.4.x, ^0.3.2 |
 | 2.x | 0.3.x, 0.2.x |
@@ -36,3 +37,3 @@ | 1.x | 0.1.x |
 ```
-npm install react-select react-select-async-paginate
+npm install react-select react-select-async-paginate@next
 ```
@@ -43,3 +44,3 @@
 ```
-yarn add react-select react-select-async-paginate
+yarn add react-select react-select-async-paginate@next
 ```
@@ -104,5 +105,5 @@
 
-### cacheUniq
+### cacheUniqs
 
-Not required. Can take any value. When this prop changed, `AsyncPaginate` cleans all cached options.
+Not required. Array. Works as 2nd argument of `useEffect` hook. When one of items changed, `AsyncPaginate` cleans all cached options.
 
@@ -117,6 +118,2 @@ ### loadOptionsOnMenuOpen
 
-### SelectComponent
-
-Not required. React component that will be used instead of `SelectBase` from `react-select`.
-
 ## Example
@@ -126,4 +123,4 @@
 
-```
-import AsyncPaginate from 'react-select-async-paginate';
+```javascript
+import { AsyncPaginate } from 'react-select-async-paginate';
 
@@ -172,4 +169,4 @@ ...
 
-```
-import AsyncPaginate from 'react-select-async-paginate';
+```javascript
+import { AsyncPaginate } from 'react-select-async-paginate';
 
@@ -205,4 +202,4 @@ ...
 
-```
-import AsyncPaginate, { reduceGroupedOptions } from 'react-select-async-paginate';
+```javascript
+import { AsyncPaginate, reduceGroupedOptions } from 'react-select-async-paginate';
 
@@ -245,3 +242,3 @@ /*
 
-```
+```javascript
 import React, { useState } from 'react';
@@ -292,2 +289,15 @@ import { AsyncPaginateBase } from 'react-select-async-paginate';
 
+## Replacing react-select component
+
+You can use `withAsyncPaginate` and `withAsyncPaginateBase` HOCs.
+
+```javascript
+import { withAsyncPaginate, withAsyncPaginateBase } from 'react-select-async-paginate';
+
+...
+
+const CustomAsyncPaginate = withAsyncPaginate(CustomSelect);
+const CustomAsyncPaginateBase = withAsyncPaginateBase(CustomSelect);
+```
+
 ## Replacing Components
@@ -297,4 +307,4 @@
 
-```
-import AsyncPaginate, { wrapMenuList } from 'react-select-async-paginate';
+```javascript
+import { AsyncPaginate, wrapMenuList } from 'react-select-async-paginate';
 
@@ -313,1 +323,60 @@ ...
 ```
+
+## Extended usage
+
+If you want construct own component that uses logic of `react-select-async-paginate` inside, you can use next hooks:
+
+- `useAsyncPaginate`
+- `useAsyncPaginateBase`
+- `useComponents`
+
+```javascript
+import {
+  useAsyncPaginate,
+  useComponents,
+} from 'react-select-async-paginate`;
+
+...
+
+const CustomAsyncPaginateComponent = ({
+  {
+    options,
+    defaultOptions,
+    additional,
+    loadOptionsOnMenuOpen,
+    debounceTimeout,
+    filterOption,
+    reduceOptions,
+    shouldLoadMore,
+
+    components: defaultComponents,
+
+    value,
+    onChange,
+  }
+}) => {
+  const asyncPaginateProps = useAsyncPaginate({
+    options,
+    defaultOptions,
+    additional,
+    loadOptionsOnMenuOpen,
+    debounceTimeout,
+    filterOption,
+    reduceOptions,
+    shouldLoadMore,
+  });
+
+  const components = useComponents(defaultComponents);
+
+  return (
+    <CustomSelect
+      {...asyncPaginateProps}
+      components={components}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+```
+
+`useComponents` provides redefined `MenuList` component by default. If you want redefine it, you should also wrap in with `wrapMenuList`.

New 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

65990

increased by4.1%

Number of package files

36

increased by100%

Number of lines in readme file

371

increased by22.85%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

4

increased by100%

Lines of code

1130

decreased by-14.46%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@seznam/compose-react-refs@^1.0.4

• + Addedreact-is-mounted-hook@^1.0.3

• + Addedsleep-promise@^8.0.1

• + Added@seznam/compose-react-refs@1.0.6(transitive)

• + Addedreact-is-mounted-hook@1.1.2(transitive)

• + Addedsleep-promise@8.0.1(transitive)

• - Removedprop-types@^15.7.2

• - Removed@types/prop-types@15.7.12(transitive)

• - Removed@types/react@18.3.3(transitive)

• - Removed@types/react-dom@18.3.0(transitive)

• - Removed@types/react-select@3.1.2(transitive)

• - Removed@types/react-transition-group@4.4.10(transitive)