bug fixes with goto and better swiping logic

demoApp/src/DemoApp.js

@@ -0,0 +1,121 @@
+import React, { useState, useRef } from "react";
+import Carousel from "react-elastic-carousel";
+import styled from "styled-components";
+
+const Item = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  background-color: green;
+  width: 100%;
+  height: 150px;
+  margin: 15px;
+`;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+const ControlsLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 25px;
+`;
+
+const StyledControlFields = styled.div`
+  display: flex;
+  margin: 5px;
+`;
+
+const breakPoints = [
+  { width: 200, itemsToShow: 1 },
+  { width: 600, itemsToShow: 2 },
+];
+const toggle = (updater) => () => updater((o) => !o);
+
+const CheckBox = ({ label, onToggle, ...rest }) => {
+  return (
+    <StyledControlFields>
+      <label htmlFor={label}>{label}</label>
+      <input {...rest} id={label} type="checkbox" onChange={toggle(onToggle)} />
+    </StyledControlFields>
+  );
+};
+
+const DemoApp = () => {
+  const [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+  const [itemsToShow, setItemsToShow] = useState(3);
+  const [showArrows, setShowArrows] = useState(true);
+  const [pagination, setPagination] = useState(true);
+  const [verticalMode, setVerticalMode] = useState(false);
+  const carouselRef = useRef();
+
+  const addItem = () => {
+    setItems((currentItems) => [...currentItems, currentItems.length + 1]);
+  };
+
+  const removeItem = () => {
+    setItems((currentItems) => currentItems.slice(0, currentItems.length - 1));
+  };
+
+  const updateItemsToShow = ({ target }) =>
+    setItemsToShow(Number(target.value));
+
+  const goTo = ({ target }) => carouselRef.current.goTo(Number(target.value));
+
+  return (
+    <Layout>
+      <ControlsLayout>
+        <StyledControlFields>
+          <button onClick={addItem}>Add Item</button>
+          <button onClick={removeItem}>Remove Item</button>
+        </StyledControlFields>
+        <StyledControlFields>
+          <label>goTo</label>
+          <input type="number" onChange={goTo} />
+        </StyledControlFields>
+        <StyledControlFields>
+          <label>itemsToShow</label>
+          <input
+            type="number"
+            value={itemsToShow}
+            onChange={updateItemsToShow}
+          />
+        </StyledControlFields>
+        <CheckBox
+          label="showArrows"
+          checked={showArrows}
+          onToggle={setShowArrows}
+        />
+        <CheckBox
+          label="pagination"
+          checked={pagination}
+          onToggle={setPagination}
+        />
+        <CheckBox
+          label="verticalMode"
+          checked={verticalMode}
+          onToggle={setVerticalMode}
+        />
+      </ControlsLayout>
+      <Carousel
+        ref={carouselRef}
+        verticalMode={verticalMode}
+        itemsToShow={itemsToShow}
+        showArrows={showArrows}
+        pagination={pagination}
+      >
+        {items.map((item) => (
+          <Item key={item}>{item}</Item>
+        ))}
+      </Carousel>
+    </Layout>
+  );
+};
+
+export default DemoApp;

demoApp/src/index.js

@@ -1,100 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
-import Carousel from "react-elastic-carousel";
-import styled from "styled-components";
-
-const Item = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  background-color: green;
-  width: 100%;
-  height: 150px;
-  margin: 0 15px;
-`;
-
-const Layout = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-`;
-
-const ControlsLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 25px;
-`;
-
-    const ControlFields = styled.div`
-        display: flex;
-        margin: 5px;
-    `;
-
-const DemoApp = () => {
-  const [items, setItems] = useState([1, 2, 3, 4, 5]);
-  const [itemsToShow, setItemsToShow] = useState(3);
-  const [showArrows, setShowArrows] = useState(true);
-  const [pagination, setPagination] = useState(true);
-
-  const addItem = () => {
-    setItems((currentItems) => [...currentItems, currentItems.length + 1]);
-  };
-
-  const removeItem = () => {
-    setItems((currentItems) => currentItems.slice(0, currentItems.length - 1));
-  };
-
-  const updateItemsToShow = ({ target }) =>
-    setItemsToShow(Number(target.value));
-
-  const toggle = (updater) => () => updater((o) => !o);
-
-  return (
-    <Layout>
-      <ControlsLayout>
-        <ControlFields>
-          <button onClick={addItem}>Add Item</button>
-          <button onClick={removeItem}>Remove Item</button>
-        </ControlFields>
-        <ControlFields>
-          <label>itemsToShow</label>
-          <input
-            type="number"
-            value={itemsToShow}
-            onChange={updateItemsToShow}
-          />
-        </ControlFields>
-        <ControlFields>
-          <label>showArrows</label>
-          <input
-            type="checkbox"
-            checked={showArrows}
-            onChange={toggle(setShowArrows)}
-          />
-        </ControlFields>
-        <ControlFields>
-          <label>pagination</label>
-          <input
-            type="checkbox"
-            checked={pagination}
-            onChange={toggle(setPagination)}
-          />
-        </ControlFields>
-      </ControlsLayout>
-      <Carousel
-        itemsToShow={itemsToShow}
-        showArrows={showArrows}
-        pagination={pagination}
-      >
-        {items.map((item) => (
-          <Item key={item}>{item}</Item>
-        ))}
-      </Carousel>
-    </Layout>
-  );
-};
+import DemoApp from './DemoApp';
 
 ReactDOM.render(<DemoApp />, document.getElementById("app"));

package.json

@@ -15,7 +15,7 @@
   },
   "scripts": {
     "start": "concurrently -r -k -s all \"docz dev\" \"yarn run lint:watch\"",
-    "demo": "rollup --config rollup.config.demo.js --watch",
+    "demo": "concurrently -r -k -s all \"rollup --config rollup.config.demo.js --watch\" \"yarn run lint:watch\"",
     "lint:fix": "eslint src/. --fix",
     "lint:watch": "esw --watch --fix src/.",
     "test": "cross-env CI=1 react-scripts test --env=jsdom",