Merge branch 'master' into init-mode

.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'
@@ -32,11 +32,17 @@ export * as themes from './themes'
 const MDX_SLIDE_INDEX = 'mdx-slide-index'
 const MDX_SLIDE_STEP = 'mdx-slide-step'
 
-export const inc = state => ({
-  index: (state.index + 1) % state.length, step: -1
-})
+export const inc = state => state.index < state.length - 1
+  ? ({
+    index: (state.index + 1) % state.length,
+    step: -1
+  })
+  : null
 export const dec = state => state.index > 0
-  ? ({ index: (state.index - 1) % state.length, step: -1 })
+  ? ({
+    index: (state.index - 1) % state.length,
+    step: -1
+  })
   : null
 
 export const incStep = steps => state => ({
@@ -201,7 +207,7 @@ export class SlideDeck extends React.Component {
         mode: (mode || '').toLowerCase()
       })
     } else if (mode === modes.normal) {
-      query += '/'
+      query += window.location.pathname
     }
     const step_ = step !== -1 ? ('.' + (step + 1)) : ''
     history.pushState(null, null, query + '#' + index + step_)
@@ -254,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/__snapshots__/index.js.snap

@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components SlideDeck renders 1`] = `
+Array [
+  .c1 {
+  overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transition-duration: .3s;
+  transition-duration: .3s;
+  -webkit-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+}
+
+.c0 {
+  font-family: system-ui,sans-serif;
+  font-size: 16px;
+  text-align: center;
+  width: 100vw;
+  height: 100vh;
+  color: #000;
+  background-color: white;
+}
+
+@media print {
+  .c1 {
+    height: auto;
+    overflow-x: visible;
+  }
+}
+
+@media print {
+  .c2 {
+    height: auto;
+    display: block;
+  }
+}
+
+@media print {
+  .c0 {
+    font-size: 24px;
+    height: auto;
+  }
+}
+
+@media screen and (min-width:64em) {
+  .c0 {
+    font-size: 32px;
+  }
+}
+
+<div
+    onMouseDown={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="c0"
+      color="text"
+      height="100vh"
+      mode="NORMAL"
+      step={-1}
+      width="100vw"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+        />
+      </div>
+    </div>
+  </div>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.c0 {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+@media print {
+  .c1 {
+    display: none;
+  }
+}
+
+<div
+    className="c0"
+  >
+    <div
+      className="c1"
+    />
+  </div>,
+  .c1 {
+  cursor: pointer;
+  width: 64px;
+  height: 100vh;
+}
+
+.c0 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+<div
+    className="c0 c1"
+    onClick={[Function]}
+    role="button"
+    title="Previous Slide"
+  />,
+  .c1 {
+  cursor: pointer;
+  width: 64px;
+  height: 100vh;
+}
+
+.c0 {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+<div
+    className="c0 c1"
+    onClick={[Function]}
+    role="button"
+    title="Next Slide"
+  />,
+]
+`;

test/index.js

@@ -387,160 +387,7 @@ describe('components', () => {
   describe('SlideDeck', () => {
     test('renders', () => {
       const json = renderJSON(<SlideDeck slides={[]} />)
-      expect(json).toMatchInlineSnapshot(`
-Array [
-  .c1 {
-  overflow-x: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  -webkit-transition-property: -webkit-transform;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-  -webkit-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  -webkit-transition-duration: .3s;
-  transition-duration: .3s;
-  -webkit-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
-}
-
-.c0 {
-  font-family: system-ui,sans-serif;
-  font-size: 16px;
-  text-align: center;
-  width: 100vw;
-  height: 100vh;
-  color: #000;
-  background-color: white;
-}
-
-@media print {
-  .c1 {
-    height: auto;
-    overflow-x: visible;
-  }
-}
-
-@media print {
-  .c2 {
-    height: auto;
-    display: block;
-  }
-}
-
-@media print {
-  .c0 {
-    font-size: 24px;
-    height: auto;
-  }
-}
-
-@media screen and (min-width:64em) {
-  .c0 {
-    font-size: 32px;
-  }
-}
-
-<div
-    className="c0"
-    color="text"
-    height="100vh"
-    mode="NORMAL"
-    step={-1}
-    width="100vw"
-  >
-    <div
-      className="c1"
-    >
-      <div
-        className="c2"
-      />
-    </div>
-  </div>,
-  .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  margin-bottom: 8px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.c0 {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-<div
-    className="c0"
-  >
-    <div
-      className="c1"
-    />
-  </div>,
-  .c1 {
-  cursor: pointer;
-  width: 64px;
-  height: 100vh;
-}
-
-.c0 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-}
-
-<div
-    className="c0 c1"
-    onClick={[Function]}
-    role="button"
-    title="Previous Slide"
-  />,
-  .c1 {
-  cursor: pointer;
-  width: 64px;
-  height: 100vh;
-}
-
-.c0 {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-<div
-    className="c0 c1"
-    onClick={[Function]}
-    role="button"
-    title="Next Slide"
-  />,
-]
-`)
+      expect(json).toMatchSnapshot(``)
     })
 
     test('renders with slides', () => {