Repository: FormidableLabs/spectacle
Pull request #339 (2017-07-02 12:27:44)

Fix transition direction of slides with string based hashes
Use the manager’s slide reference to properly look up the route’s slide index.

The "slide" transition animation is broken when moving backward in slides with string based id hashes. The wrong transition direction gets visible if two slides with string hashes are in a row, transition "slide" is used and you are navigating backward.


philipphenkel: This PR also fixes the broken snapshot of the markdown slide.

Patch:
diff --git a/README.markdown b/README.markdown
index dcb6fd7..b857de0 100644
--- a/README.markdown
+++ b/README.markdown
@@ -333,7 +333,6 @@ Markdown generated tags aren't prop configurable, and instead render with your t
 |Name|PropType|Description|
 |---|---|---|
 |source|PropTypes.string| Markdown source |
-|mdastConfig| PropTypes.object | Mdast configuration object |
 
 <a name="element-tags"></a>
 ### Element Tags
diff --git a/src/components/manager.js b/src/components/manager.js
index 4fd6281..0935b6f 100644
--- a/src/components/manager.js
+++ b/src/components/manager.js
@@ -462,6 +462,7 @@ export default class Manager extends Component {
       transitionDuration: (slide.props.transition || {}).transitionDuration
         ? slide.props.transitionDuration
         : this.props.transitionDuration,
+      slideReference: this.state.slideReference
     });
   }
   render() {
diff --git a/src/components/markdown.js b/src/components/markdown.js
index e75fb58..746bcce 100644
--- a/src/components/markdown.js
+++ b/src/components/markdown.js
@@ -70,7 +70,8 @@ const compile = marksy({
 export default class Markdown extends Component {
   static propTypes = {
     children: PropTypes.node,
-    style: PropTypes.object,
+    source: PropTypes.string,
+    style: PropTypes.object
   };
 
   static defaultProps = {
@@ -78,7 +79,14 @@ export default class Markdown extends Component {
   };
 
   render() {
-    const { style, children } = this.props;
+    const { style, children, source } = this.props;
+    if (source) {
+      return (
+        <div style={style}>
+          {compile(source).tree}
+        </div>
+      );
+    }
     return (
       <div style={style}>
         {compile(children).tree}
diff --git a/src/components/transitionable.js b/src/components/transitionable.js
index da22e0f..60294e9 100644
--- a/src/components/transitionable.js
+++ b/src/components/transitionable.js
@@ -1,6 +1,7 @@
 /*eslint new-cap:0, max-statements:0*/
 import React, { cloneElement } from 'react';
 import { VictoryAnimation } from 'victory-core';
+import findIndex from 'lodash/findIndex';
 
 /**
  * Decorator for adding Spectacle transition support
@@ -36,8 +37,8 @@ const Transitionable = function (target) {
 
     transitionDirection() {
       const { slideIndex, lastSlideIndex } = this.props;
-      const slide = this.context.store.getState().route.slide || 0;
-      return this.state.reverse ? slideIndex > slide : slideIndex > lastSlideIndex;
+      const routeSlideIndex = this._getRouteSlideIndex();
+      return this.state.reverse ? slideIndex > routeSlideIndex : slideIndex > lastSlideIndex;
     },
 
     getTransitionStyles() {
@@ -68,7 +69,16 @@ const Transitionable = function (target) {
       }
 
       return { ...styles, transform: transformValue };
-    }
+    },
+
+    _getRouteSlideIndex() {
+      const { slideReference } = this.props;
+      const slide = this.context.store.getState().route.slide;
+      const slideIndex = findIndex(slideReference, reference => {
+         return slide === String(reference.id);
+      });
+      return Math.max(0, slideIndex);
+    },
   };
 
   Object.assign(target.prototype, transitionable);


Test patch:
diff --git a/src/components/__snapshots__/manager.test.js.snap b/src/components/__snapshots__/manager.test.js.snap
index a3988c0..4bd6be3 100644
--- a/src/components/__snapshots__/manager.test.js.snap
+++ b/src/components/__snapshots__/manager.test.js.snap
@@ -110,6 +110,18 @@ exports[`<Manager /> should render correctly. 1`] = `
             lastSlideIndex={0}
             print={false}
             slideIndex={0}
+            slideReference={
+              Array [
+                Object {
+                  "id": 0,
+                  "rootIndex": 0,
+                },
+                Object {
+                  "id": 1,
+                  "rootIndex": 1,
+                },
+              ]
+            }
             transition={
               Array [
                 "zoom",
@@ -655,6 +667,24 @@ exports[`<Manager /> should render with slideset slides 1`] = `
             lastSlideIndex={1}
             print={false}
             slideIndex={1}
+            slideReference={
+              Array [
+                Object {
+                  "id": 0,
+                  "rootIndex": 0,
+                },
+                Object {
+                  "id": 1,
+                  "rootIndex": 1,
+                  "setIndex": 0,
+                },
+                Object {
+                  "id": 2,
+                  "rootIndex": 1,
+                  "setIndex": 1,
+                },
+              ]
+            }
             transition={Array []}
             transitionDuration={500}
           >
diff --git a/src/components/__snapshots__/markdown-slides.test.js.snap b/src/components/__snapshots__/markdown-slides.test.js.snap
index ce6cb5f..1e9966c 100644
--- a/src/components/__snapshots__/markdown-slides.test.js.snap
+++ b/src/components/__snapshots__/markdown-slides.test.js.snap
@@ -13,7 +13,6 @@ exports[`MarkdownSlides should render correctly when using function syntax 1`] =
     >
       
       ## Slide A Title
-      
     </Markdown>
   </Slide>
   <Slide
@@ -25,7 +24,6 @@ exports[`MarkdownSlides should render correctly when using function syntax 1`] =
     <Markdown
       style={Object {}}
     >
-      
       ## Slide B Title
           
     </Markdown>
@@ -45,7 +43,6 @@ exports[`MarkdownSlides should render correctly when using tagged template liter
       style={Object {}}
     >
       ## Slide 1 Title
-      
     </Markdown>
   </Slide>
   <Slide
@@ -57,7 +54,6 @@ exports[`MarkdownSlides should render correctly when using tagged template liter
     <Markdown
       style={Object {}}
     >
-      
       ## Slide 2 Title
     </Markdown>
   </Slide>
@@ -77,7 +73,6 @@ exports[`MarkdownSlides should render correctly when using tagged template liter
     >
       ## Slide 1 Title
       This text is **bold**.
-      
     </Markdown>
   </Slide>
   <Slide
@@ -89,7 +84,6 @@ exports[`MarkdownSlides should render correctly when using tagged template liter
     <Markdown
       style={Object {}}
     >
-      
       ## Slide 2 Title
     </Markdown>
   </Slide>