Merge pull request #11 from itseasy21/next

Update to 0.12.2

Author: itseasy21

demoApp/src/DemoApp.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import Carousel from "../../src/react-elastic-carousel/components/Carousel";
+import Carousel from "../../src/@itseasy21/react-elastic-carousel/components/Carousel";
 import styled from "styled-components";
 
 const Item = styled.div`
@@ -33,9 +33,9 @@ const StyledControlFields = styled.div`
 
 const breakPoints = [
   { width: 200, itemsToShow: 1 },
-  { width: 600, itemsToShow: 2 },
+  { width: 600, itemsToShow: 2 }
 ];
-const toggle = (updater) => () => updater((o) => !o);
+const toggle = updater => () => updater(o => !o);
 
 const CheckBox = ({ label, onToggle, ...rest }) => {
   return (
@@ -59,11 +59,11 @@ const DemoApp = () => {
   const carouselRef = useRef();
 
   const addItem = () => {
-    setItems((currentItems) => [...currentItems, currentItems.length + 1]);
+    setItems(currentItems => [...currentItems, currentItems.length + 1]);
   };
 
   const removeItem = () => {
-    setItems((currentItems) => currentItems.slice(0, currentItems.length - 1));
+    setItems(currentItems => currentItems.slice(0, currentItems.length - 1));
   };
 
   const updateItemsToShow = ({ target }) =>
@@ -81,7 +81,7 @@ const DemoApp = () => {
     <Layout>
       <ControlsLayout>
         <StyledControlFields>
-          <button onClick={() => setShow((o) => !o)}>
+          <button onClick={() => setShow(o => !o)}>
             {`${show ? "Hide" : "Show"} Carousel`}
           </button>
         </StyledControlFields>
@@ -131,7 +131,7 @@ const DemoApp = () => {
           showArrows={showArrows}
           pagination={pagination}
         >
-          {items.map((item) => (
+          {items.map(item => (
             <Item key={item}>{item}</Item>
           ))}
         </Carousel>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itseasy21/react-elastic-carousel",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "A flexible and responsive carousel component for react",
   "author": "itseasy21",
   "contributors": [
@@ -43,14 +43,14 @@
     "@uiw/react-only-when": "^1.0.6",
     "classnames": "^2.2.6",
     "prop-types": "^15.5.4",
-    "react-swipeable": "^5.5.1",
-    "resize-observer-polyfill": "1.5.0"
+    "react-swipeable": "^7.0.0",
+    "resize-observer-polyfill": "~1.5.0"
   },
   "peerDependencies": {
     "prop-types": "^15.5.4",
-    "react": "15 - 18",
-    "react-dom": "15 - 18",
-    "styled-components": "^5.1.0"
+    "react": "16.8.3 - 18",
+    "react-dom": "16.8.3 - 18",
+    "styled-components": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
@@ -100,7 +100,6 @@
     "prettier-eslint": "^8.8.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-resizable": "^1.7.5",
     "react-scripts": "^2.1.8",
     "react-test-renderer": "^16.5.2",
     "rollup": "^0.64.1",

src/@itseasy21/react-elastic-carousel/components/Track.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Swipeable } from "react-swipeable";
+import { useSwipeable } from "react-swipeable";
 import { cssPrefix } from "../utils/helpers";
 import ItemWrapperContainer from "./ItemWrapperContainer";
 
@@ -61,21 +61,26 @@ const Track = ({
       </div>
     );
   });
+
+  const swipeHandler = useSwipeable({
+    stopPropagation: true,
+    preventDefaultTouchmoveEvent,
+    trackMouse: enableMouseSwipe,
+    onSwiped,
+    onSwiping
+  });
+
   const toRender = enableSwipe ? (
-    <Swipeable
+    <div
       style={{
         display: "flex",
         flexDirection: verticalMode ? "column" : "row"
       }}
-      stopPropagation
-      preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent}
-      trackMouse={enableMouseSwipe}
-      onSwiped={onSwiped}
-      onSwiping={onSwiping}
       className={cssPrefix("swipable")}
+      {...swipeHandler}
     >
       {originalChildren}
-    </Swipeable>
+    </div>
   ) : (
     originalChildren
   );

yarn.lock

@@ -2212,11 +2212,10 @@ __metadata:
     prop-types: ^15.5.4
     react: ^16.12.0
     react-dom: ^16.12.0
-    react-resizable: ^1.7.5
     react-scripts: ^2.1.8
-    react-swipeable: ^5.5.1
+    react-swipeable: ^7.0.0
     react-test-renderer: ^16.5.2
-    resize-observer-polyfill: 1.5.0
+    resize-observer-polyfill: ~1.5.0
     rollup: ^0.64.1
     rollup-plugin-alias: ^1.4.0
     rollup-plugin-auto-external: ^2.0.0
@@ -2231,9 +2230,9 @@ __metadata:
     styled-components: ^5.1.0
   peerDependencies:
     prop-types: ^15.5.4
-    react: 15 - 18
-    react-dom: 15 - 18
-    styled-components: ^5.1.0
+    react: 16.8.3 - 18
+    react-dom: 16.8.3 - 18
+    styled-components: ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -6541,7 +6540,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.5, classnames@npm:^2.2.6":
+"classnames@npm:^2.2.6":
   version: 2.2.6
   resolution: "classnames@npm:2.2.6"
   checksum: 09a4fda780158aa8399079898eabeeca0c48c28641d9e4de140db7412e5e346843039ded1af0152f755afc2cc246ff8c3d6f227bf0dcb004e070b7fa14ec54cc
@@ -20497,7 +20496,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:15.x, prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
   version: 15.7.2
   resolution: "prop-types@npm:15.7.2"
   dependencies:
@@ -21054,16 +21053,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-draggable@npm:^4.0.3":
-  version: 4.4.3
-  resolution: "react-draggable@npm:4.4.3"
-  dependencies:
-    classnames: ^2.2.5
-    prop-types: ^15.6.0
-  checksum: 94d3d5f0e7fd5920894915f069e393d55b46de114570a613ca56bd1f46bb5fc8dc9dbd1a254d8e09153e8261589122d1c725f722b37d454da883d0ffcc1a68bf
-  languageName: node
-  linkType: hard
-
 "react-error-overlay@npm:^3.0.0":
   version: 3.0.0
   resolution: "react-error-overlay@npm:3.0.0"
@@ -21280,19 +21269,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-resizable@npm:^1.7.5":
-  version: 1.10.1
-  resolution: "react-resizable@npm:1.10.1"
-  dependencies:
-    prop-types: 15.x
-    react-draggable: ^4.0.3
-  peerDependencies:
-    react: 0.14.x || 15.x || 16.x
-    react-dom: 0.14.x || 15.x || 16.x
-  checksum: be6c557caf671f740adf0b285b4f12b3aa9535220db57fc3e04397002870422cdf3ecadf22bd5b021463420aec76a1e19ef6f2a2b538c6d0e1c62e9967ba2a9f
-  languageName: node
-  linkType: hard
-
 "react-resize-detector@npm:^4.2.1":
   version: 4.2.3
   resolution: "react-resize-detector@npm:4.2.3"
@@ -21396,14 +21372,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-swipeable@npm:^5.5.1":
-  version: 5.5.1
-  resolution: "react-swipeable@npm:5.5.1"
-  dependencies:
-    prop-types: ^15.6.2
+"react-swipeable@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "react-swipeable@npm:7.0.0"
   peerDependencies:
-    react: ^16.0.0-0
-  checksum: 474e281c619a4ca61cede4a1c9acb712241c16c1d226145cc3af66ac77525b585b510739879dc5404ead280fcd606e5b3ed26ddd76d9eb853bf4b11578201d4b
+    react: ^16.8.3 || ^17 || ^18
+  checksum: 54d15933483f7aea8f69e6a9930e220fb3bd98f314cae89a8b797e8a3bb959b68e777fe199cd7729edfe65edfcb5d933c7312ea08626f1613a6fd5d30e646598
   languageName: node
   linkType: hard
 
@@ -22373,14 +22347,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resize-observer-polyfill@npm:1.5.0":
-  version: 1.5.0
-  resolution: "resize-observer-polyfill@npm:1.5.0"
-  checksum: ecc6aab5d4f967f1b76cee0748c1967c8b6b5d8c4393764ca3b788dbd15c0f846326c4ebff9f4f39aba45fea8016cd42bb95e28e8fab1d14349e173790c58133
-  languageName: node
-  linkType: hard
-
-"resize-observer-polyfill@npm:^1.5.1":
+"resize-observer-polyfill@npm:^1.5.1, resize-observer-polyfill@npm:~1.5.0":
   version: 1.5.1
   resolution: "resize-observer-polyfill@npm:1.5.1"
   checksum: 57e7f79489867b00ba43c9c051524a5c8f162a61d5547e99333549afc23e15c44fd43f2f318ea0261ea98c0eb3158cca261e6f48d66e1ed1cd1f340a43977094