Step counter feature

example/src/index.js

@@ -1,38 +1,48 @@
-import React from "react";
+import React from 'react';
 
 import {
   Appear, BlockQuote, Cite, CodePane, ComponentPlayground, Deck, Fill,
   Heading, Image, Layout, Link, ListItem, List, Markdown, MarkdownSlides, Quote, Slide, SlideSet,
   TableBody, TableHeader, TableHeaderItem, TableItem, TableRow, Table, Text
-} from "../../src";
+} from '../../src';
 
-import preloader from "../../src/utils/preloader";
+import preloader from '../../src/utils/preloader';
 
-import createTheme from "../../src/themes/default";
+import createTheme from '../../src/themes/default';
 
-import Interactive from "../assets/interactive";
+import Interactive from '../assets/interactive';
 
-require("normalize.css");
-require("../../src/themes/default/index.css");
+require('normalize.css');
+require('../../src/themes/default/index.css');
 
 const images = {
-  city: require("../assets/city.jpg"),
-  kat: require("../assets/kat.png"),
-  logo: require("../assets/formidable-logo.svg"),
-  markdown: require("../assets/markdown.png")
+  city: require('../assets/city.jpg'),
+  kat: require('../assets/kat.png'),
+  logo: require('../assets/formidable-logo.svg'),
+  markdown: require('../assets/markdown.png')
 };
 
 preloader(images);
 
 const theme = createTheme({
-  primary: "#ff4081"
+  primary: '#ff4081'
 });
 
 export default class Presentation extends React.Component {
+  state = {
+    steps: 0
+  }
+
+  updateSteps = steps => {
+    if (this.state.steps !== steps) { // eslint-disable-line no-invalid-this
+      this.setState({ steps }); // eslint-disable-line no-invalid-this
+    }
+  }
+
   render() {
     return (
-      <Deck transition={["zoom", "slide"]} theme={theme} transitionDuration={500}>
-        <Slide transition={["zoom"]} bgColor="primary">
+      <Deck transition={['zoom', 'slide']} theme={theme} transitionDuration={500}>
+        <Slide transition={['zoom']} bgColor="primary">
           <Heading size={1} fit caps lineHeight={1} textColor="black">
             Spectacle
           </Heading>
@@ -47,16 +57,16 @@ export default class Presentation extends React.Component {
           </Link>
           <Text textSize="1.5em" margin="20px 0px 0px" bold>Hit Your Right Arrow To Begin!</Text>
         </Slide>
-        <Slide id="wait-what" transition={["slide"]} bgColor="black" notes="You can even put notes on your slide. How awesome is that?">
-          <Image src={images.kat.replace("/", "")} margin="0px auto 40px" height="293px"/>
+        <Slide id="wait-what" transition={['slide']} bgColor="black" notes="You can even put notes on your slide. How awesome is that?">
+          <Image src={images.kat.replace('/', '')} margin="0px auto 40px" height="293px"/>
           <Heading size={2} caps fit textColor="primary" textFont="primary">
             Wait what?
           </Heading>
         </Slide>
-        <Slide transition={["zoom", "fade"]} bgColor="primary" notes="<ul><li>talk about that</li><li>and that</li></ul>">
+        <Slide transition={['zoom', 'fade']} bgColor="primary" notes="<ul><li>talk about that</li><li>and that</li></ul>">
           <CodePane
             lang="jsx"
-            source={require("raw-loader!../assets/deck.example")}
+            source={require('raw-loader!../assets/deck.example')}
             margin="20px auto"
           />
         </Slide>
@@ -65,7 +75,7 @@ export default class Presentation extends React.Component {
             theme="dark"
           />
         </Slide>
-        <Slide transition={["slide"]} bgImage={images.city.replace("/", "")} bgDarken={0.75}>
+        <Slide transition={['slide']} bgImage={images.city.replace('/', '')} bgDarken={0.75}>
           <Appear fid="1">
             <Heading size={1} caps fit textColor="primary">
               Full Width
@@ -82,7 +92,27 @@ export default class Presentation extends React.Component {
             </Heading>
           </Appear>
         </Slide>
-        <Slide transition={["zoom", "fade"]} bgColor="primary">
+        <Slide transition={['slide']} bgDarken={0.75} getAppearStep={this.updateSteps}>
+          <Appear>
+            <Heading size={1} caps textColor="tertiary">
+              Can
+            </Heading>
+          </Appear>
+          <Appear>
+            <Heading size={1} caps textColor="secondary">
+              Count
+            </Heading>
+          </Appear>
+          <Appear>
+            <Heading size={1} caps textColor="tertiary">
+              Steps
+            </Heading>
+          </Appear>
+            <Heading size={1} caps fit textColor="secondary">
+              Steps: {this.state.steps}
+            </Heading>
+        </Slide>
+        <Slide transition={['zoom', 'fade']} bgColor="primary">
           <Heading caps fit>Flexible Layouts</Heading>
           <Layout>
             <Fill>
@@ -97,19 +127,19 @@ export default class Presentation extends React.Component {
             </Fill>
           </Layout>
         </Slide>
-        <Slide transition={["slide"]} bgColor="black">
+        <Slide transition={['slide']} bgColor="black">
           <BlockQuote>
             <Quote>Wonderfully formatted quotes</Quote>
             <Cite>Ken Wheeler</Cite>
           </BlockQuote>
         </Slide>
-        <Slide transition={["spin", "zoom"]} bgColor="tertiary">
+        <Slide transition={['spin', 'zoom']} bgColor="tertiary">
           <Heading caps fit size={1} textColor="primary">
             Inline Markdown
           </Heading>
           <Markdown>
             {`
-  ![Markdown Logo](${images.markdown.replace("/", "")})
+  ![Markdown Logo](${images.markdown.replace('/', '')})
 
   You can write inline images, [Markdown Links](http://commonmark.org), paragraph text and most other markdown syntax
   * Lists too!
@@ -128,7 +158,7 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec
 * Imported Markdown from another file
           `
         }
-        <Slide transition={["slide", "spin"]} bgColor="primary">
+        <Slide transition={['slide', 'spin']} bgColor="primary">
           <Heading caps fit size={1} textColor="tertiary">
             Smooth
           </Heading>
@@ -137,7 +167,7 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec
           </Heading>
         </Slide>
         <SlideSet>
-          <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
+          <Slide transition={['fade']} bgColor="secondary" textColor="primary">
             <List>
               <Appear><ListItem>Inline style based theme system</ListItem></Appear>
               <Appear><ListItem>Autofit text</ListItem></Appear>
@@ -146,14 +176,14 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec
               <Appear><ListItem>And...</ListItem></Appear>
             </List>
           </Slide>
-          <Slide transition={["slide"]} bgColor="primary">
+          <Slide transition={['slide']} bgColor="primary">
             <Heading size={1} caps fit textColor="tertiary">
               Your presentations are interactive
             </Heading>
             <Interactive/>
           </Slide>
         </SlideSet>
-        <Slide transition={["slide"]} bgColor="primary"
+        <Slide transition={['slide']} bgColor="primary"
           notes="Hard to find cities without any pizza"
         >
           <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
@@ -198,7 +228,7 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec
             </Table>
           </Layout>
         </Slide>
-        <Slide transition={["spin", "slide"]} bgColor="tertiary">
+        <Slide transition={['spin', 'slide']} bgColor="tertiary">
           <Heading size={1} caps fit lineHeight={1.5} textColor="primary">
             Made with love in Seattle by
           </Heading>

src/components/appear.js

@@ -32,6 +32,7 @@ class Appear extends Component {
       state.fragments[slide].hasOwnProperty(key)
     ) {
       const active = state.fragments[slide][key].visible;
+      this.context.stepCounter.setFragments(state.fragments[slide], slide);
       this.setState({ active });
     }
   }
@@ -76,6 +77,9 @@ Appear.contextTypes = {
   export: PropTypes.bool,
   overview: PropTypes.bool,
   slide: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  stepCounter: PropTypes.shape({
+    setFragments: PropTypes.func
+  })
 };
 
 export default connect(state => state)(Appear);

src/components/slide.js

@@ -6,10 +6,16 @@ import { getStyles } from '../utils/base';
 import Radium from 'radium';
 import { addFragment } from '../actions';
 import { Transitionable, renderTransition } from './transitionable';
+import stepCounter from '../utils/step-counter';
 
 @Transitionable
 @Radium
 class Slide extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.stepCounter = stepCounter();
+  }
+
   state = {
     contentScale: 1,
     transitioning: true,
@@ -18,7 +24,12 @@ class Slide extends React.PureComponent {
   };
 
   getChildContext() {
-    return { slideHash: this.props.hash };
+    return {
+      stepCounter: {
+        setFragments: this.stepCounter.setFragments
+      },
+      slideHash: this.props.hash
+    };
   }
 
   componentDidMount() {
@@ -44,6 +55,13 @@ class Slide extends React.PureComponent {
     window.addEventListener('resize', this.setZoom);
   }
 
+  componentDidUpdate() {
+    const { steps, slideIndex } = this.stepCounter.getSteps();
+    if (this.props.getAppearStep) {
+      if (slideIndex === this.props.slideIndex) {this.props.getAppearStep(steps);}
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.setZoom);
   }
@@ -183,6 +201,7 @@ Slide.propTypes = {
   className: PropTypes.string,
   dispatch: PropTypes.func,
   export: PropTypes.bool,
+  getAppearStep: PropTypes.func,
   hash: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   lastSlideIndex: PropTypes.number,
   margin: PropTypes.number,
@@ -205,7 +224,10 @@ Slide.contextTypes = {
 };
 
 Slide.childContextTypes = {
-  slideHash: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  slideHash: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  stepCounter: PropTypes.shape({
+    setFragments: PropTypes.func
+  })
 };
 
 export default Slide;

src/utils/step-counter.js

@@ -0,0 +1,21 @@
+const stepCounter = () => {
+  let frags = {};
+  let slideIndex = 0;
+  const setFragments = (fragments, index) => {
+    frags = fragments;
+    slideIndex = Number(index);
+  };
+  const getSteps = () => {
+    const steps = Object.keys(frags).reduce((previous, key) => {
+      return previous + (frags[key].visible === true);
+    }, 0);
+    return { steps, slideIndex };
+  };
+
+  return {
+    setFragments,
+    getSteps
+  };
+};
+
+export default stepCounter;