Merge pull request #91 from EmaSuriano/master

[Feature] Mobile Swiping support

.gitignore

@@ -1,3 +1,4 @@
 dist
 site
 coverage
+node_modules

package.json

@@ -38,6 +38,7 @@
     "querystring": "^0.2.0",
     "react": "^16.4.1",
     "react-dev-utils": "^5.0.1",
+    "react-swipeable": "^4.3.0",
     "react-syntax-highlighter": "^8.0.1",
     "remark-emoji": "^2.0.1",
     "remark-unwrap-images": "0.0.2-0",

src/index.js

@@ -4,7 +4,7 @@ import { MDXProvider } from '@mdx-js/tag'
 import { ThemeProvider } from 'styled-components'
 import debounce from 'lodash.debounce'
 import querystring from 'querystring'
-
+import Swipeable from 'react-swipeable'
 import { Provider as ContextProvider } from './context'
 import DefaultProvider from './Provider'
 import Carousel from './Carousel'
@@ -260,26 +260,31 @@ export class SlideDeck extends React.Component {
                   update={this.update}
                 />
               ) : (
-                <Wrapper
-                  {...this.state}
-                  slides={slides}
-                  width={width}
-                  height={height}
-                  update={this.update}>
-                  <GoogleFonts />
-                  <Carousel index={index}>
-                    {slides.map((Component, i) => (
-                      <Slide
-                        key={i}
-                        id={'slide-' + i}
-                        index={i}
-                        className='Slide'
-                      >
-                        <Component />
-                      </Slide>
-                    ))}
-                  </Carousel>
-                </Wrapper>
+                <Swipeable
+                  onSwipedLeft={() => this.update(inc)}
+                  onSwipedRight={() => this.update(dec)}
+                  trackMouse>
+                  <Wrapper
+                    {...this.state}
+                    slides={slides}
+                    width={width}
+                    height={height}
+                    update={this.update}>
+                    <GoogleFonts />
+                    <Carousel index={index}>
+                      {slides.map((Component, i) => (
+                        <Slide
+                          key={i}
+                          id={'slide-' + i}
+                          index={i}
+                          className='Slide'
+                        >
+                          <Component />
+                        </Slide>
+                      ))}
+                    </Carousel>
+                  </Wrapper>
+                </Swipeable>
               )}
             </Provider>
           </MDXProvider>

test/index.js

@@ -451,18 +451,25 @@ describe('components', () => {
 }
 
 <div
-  className="c0"
-  color="text"
-  height="100vh"
-  step={-1}
-  width="100vw"
+  onMouseDown={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
 >
   <div
-    className="c1"
+    className="c0"
+    color="text"
+    height="100vh"
+    step={-1}
+    width="100vw"
   >
     <div
-      className="c2"
-    />
+      className="c1"
+    >
+      <div
+        className="c2"
+      />
+    </div>
   </div>
 </div>
 `)