Add GoToSlide button (#394)

* Add GoToSlide button

* Removed errant console

* Updated docs for GoToAction

Author: Carlos Paelinck

README.md

@@ -40,6 +40,7 @@ ReactJS based Presentation Library
     - [CodePane (Base)](#codepane-base)
     - [Code (Base)](#code-base)
     - [ComponentPlayground](#component-playground)
+    - [GoToAction (Base)](#go-to-action)
     - [Heading (Base)](#heading-base)
     - [Image (Base)](#image-base)
     - [Link (Base)](#link-base)
@@ -523,6 +524,34 @@ class View extends React.Component {
 render(<View />);
 ```
 
+<a name="go-to-action"></a>
+#### Go To Action (Base)
+
+The GoToAction tag lets you jump to another slide in your deck. The GoToAction can be used a simple button that supports `Base` styling or accept a render prop with a callback to support custom components.
+
+|Name|PropType|Description|
+|---|---|---|
+|slide|PropTypes.string or PropTypes.number|The string identifier or number of the side the button should jump to. Slide numbers start at `1`. This is only used in the simple button configuration.
+|render|PropTypes.func|A function with a `goToSlide` param that should return a React element to render. This is only used in the custom component configuration.
+
+##### Simple Button Configuration Example
+```jsx
+<GoToAction slide={3}>Jump to 3</GoToAction>
+```
+
+##### Custom Component Configuration Example
+```jsx
+<GoToAction
+  render={goToSlide => (
+    <CustomComponent onClick={() => goToSlide("wait-wut")}>
+      WAIT WUT!?
+    </CustomComponent>
+  )}
+/>
+```
+
+
+
 <a name="heading-base"></a>
 #### Heading (Base)
 

example/src/index.js

@@ -3,7 +3,7 @@ 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, S
+  TableBody, TableHeader, TableHeaderItem, TableItem, TableRow, Table, Text, GoToAction
 } from '../../src';
 
 import preloader from '../../src/utils/preloader';
@@ -116,6 +116,38 @@ export default class Presentation extends React.Component {
             </Heading>
           </Appear>
         </Slide>
+        <Slide>
+          <Heading size={2} textColor="secondary" margin="0.25em">
+           Mix it up!
+          </Heading>
+          <Heading size={6} textColor="tertiary">
+            You can even jump to different slides with a standard button or custom component!
+          </Heading>
+          <GoToAction
+            margin="1em"
+            slide={8}
+          >
+            Jump to Slide 8
+          </GoToAction>
+          <GoToAction
+            render={goToSlide => (
+              <select
+                defaultValue=""
+                style={{
+                  background: '#000',
+                  color: '#fff',
+                  fontFamily: theme.print.fonts.primary,
+                  fontSize: '1.1em'
+                }}
+                onChange={({ target }) => goToSlide(target.value)}
+              >
+                <option value="" disabled>Custom Slide Picker</option>
+                <option value="wait-what">Wait What!? Slide</option>
+                <option value={2}>Slide 2</option>
+              </select>
+            )}
+          />
+        </Slide>
         <Slide transition={['slide']} bgDarken={0.75} getAppearStep={this.updateSteps}>
           <Appear>
             <Heading size={1} caps textColor="tertiary">

src/components/__snapshots__/go-to-action.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GoToAction /> should just render a div when no props are provided 1`] = `
+<GoToAction>
+  <div />
+</GoToAction>
+`;

src/components/go-to-action.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getStyles } from '../utils/base';
+import styled from 'react-emotion';
+import isFunction from 'lodash/isFunction';
+
+const GoToActionButton = styled.button(({ styles }) => [
+  styles.context,
+  styles.base,
+  styles.user
+]);
+
+class GoToAction extends React.Component {
+  render() {
+    const {
+      props: { render, children, style, slide },
+      context: { goToSlide }
+    } = this;
+    if (render && isFunction(render)) {
+      return render(goToSlide);
+    } else if (slide) {
+      return (
+        <GoToActionButton
+          onClick={() => goToSlide(slide)}
+          styles={{
+            context: this.context.styles.components.goToAction,
+            base: getStyles.call(this),
+            user: style
+          }}
+        >
+          {children}
+        </GoToActionButton>
+      );
+    }
+    // eslint-disable-next-line no-console
+    console.warn('<GoToAction /> must have a render or slide prop.');
+    return <div />;
+  }
+}
+
+GoToAction.propTypes = {
+  children: PropTypes.node,
+  render: PropTypes.func,
+  slide: PropTypes.oneOfType([
+    PropTypes.number, PropTypes.string
+  ]),
+  style: PropTypes.object,
+};
+
+GoToAction.contextTypes = {
+  styles: PropTypes.object,
+  goToSlide: PropTypes.func,
+};
+
+export default GoToAction;

src/components/go-to-action.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import GoToAction from './go-to-action';
+
+describe('<GoToAction />', () => {
+  test('should call the context function with the slide prop when it has a child', () => {
+    const stub = jest.fn();
+    const context = {
+      styles: { components: { goToAction: {} } },
+      goToSlide: stub
+    };
+    const wrapper = mount(
+      <GoToAction slide={2}>Slide 2</GoToAction>, { context }
+    );
+    wrapper.simulate('click');
+    expect(stub).toHaveBeenCalledTimes(1);
+    expect(stub).toHaveBeenCalledWith(2);
+  });
+
+  test('should call the context function when providing a custom component', () => {
+    const stub = jest.fn();
+    const context = {
+      styles: { components: { goToAction: {} } },
+      goToSlide: stub
+    };
+    const wrapper = mount(
+      <GoToAction
+        render={goToSlide => (
+          <button id="inner-btn" onClick={() => goToSlide('wait-what')}>
+            WAIT WUT
+          </button>
+        )}
+      />, { context }
+    );
+    wrapper.find('button#inner-btn').simulate('click');
+    expect(stub).toHaveBeenCalledTimes(1);
+    expect(stub).toHaveBeenCalledWith('wait-what');
+  });
+
+  test('should just render a div when no props are provided', () => {
+    const context = {
+      styles: { components: { goToAction: {} } },
+      goToSlide: () => {}
+    };
+    const wrapper = mount(
+      <GoToAction />, { context }
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/manager.js

@@ -96,6 +96,7 @@ export class Manager extends Component {
   static childContextTypes = {
     contentWidth: PropTypes.number,
     contentHeight: PropTypes.number,
+    goToSlide: PropTypes.func
   };
 
   constructor(props) {
@@ -119,6 +120,7 @@ export class Manager extends Component {
     return {
       contentWidth: this.props.contentWidth,
       contentHeight: this.props.contentHeight,
+      goToSlide: slide => this._goToSlide({ slide })
     };
   }
 
@@ -273,15 +275,26 @@ export class Manager extends Component {
     }
   }
   _goToSlide(e) {
+    let data = null;
+    let canNavigate = true;
     if (e.key === 'spectacle-slide') {
-      const data = JSON.parse(e.newValue);
-      const slideIndex = this._getSlideIndex();
-      this.setState({
-        lastSlideIndex: slideIndex || 0,
-      });
-      if (this._checkFragments(this.props.route.slide, data.forward)) {
-        this.context.history.replace(`/${data.slide}${this._getSuffix()}`);
+      canNavigate = this._checkFragments(this.props.route.slide, data.forward);
+      data = JSON.parse(e.newValue);
+    } else if (e.slide) {
+      data = e;
+    } else {
+      return;
+    }
+    const slideIndex = this._getSlideIndex();
+    this.setState({
+      lastSlideIndex: slideIndex || 0,
+    });
+    if (canNavigate) {
+      let slide = data.slide;
+      if (typeof slide === 'number') {
+        slide -= 1;
       }
+      this.context.history.replace(`/${slide}${this._getSuffix()}`);
     }
   }
   _prevSlide() {

src/index.js

@@ -9,6 +9,7 @@ import { Fill } from './components/fill';
 import { Fit } from './components/fit';
 import Heading from './components/heading';
 import Image from './components/image';
+import GoToAction from './components/go-to-action';
 import Layout from './components/layout';
 import Link from './components/link';
 import ListItem from './components/list-item';
@@ -48,6 +49,7 @@ export {
   Fit,
   Heading,
   Image,
+  GoToAction,
   Layout,
   Link,
   ListItem,

src/themes/default/screen.js

@@ -230,6 +230,18 @@ const screen = (colorArgs = defaultColors, fontArgs = defaultFonts) => {
         padding: '0 10px',
         borderRadius: 3,
       },
+      goToAction: {
+        borderRadius: '6px',
+        fontFamily: fonts.primary,
+        padding: '0.25em 1em',
+        border: 'none',
+        background: '#000',
+        color: '#fff',
+        '&:hover': {
+          background: colors.tertiary,
+          color: '#000'
+        }
+      },
       heading: {
         h1: {
           color: colors.tertiary,