FormidableLabs · kenwheeler · Nov 9, 2017 · Nov 2, 2017 · Nov 2, 2017 · Nov 6, 2017
diff --git a/.eslintrc b/.eslintrc
@@ -44,6 +44,9 @@
     "react/prop-types": "warn",
     "react/sort-comp": "warn",
     "react/sort-prop-types": "warn",
-    "react/jsx-handler-names": "off"
+    "react/jsx-handler-names": "off",
+    "react/no-find-dom-node": "off",
+    "no-invalid-this": "off",
+    "complexity": "off"
   }
 }
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "deep-object-diff": "^1.0.4",
     "emotion": "^8.0.8",
     "history": "^4.6.1",
     "lodash": "^4.17.4",
@@ -32,7 +33,7 @@
     "react-emotion": "^8.0.8",
     "react-live": "^1.8.0-2",
     "react-redux": "^5.0.5",
-    "react-transition-group": "^1.1.3",
+    "react-transition-group": "1.2.1",
     "react-typography": "^0.16.5",
     "redux": "^3.0.4",
     "redux-actions": "^2.0.3",
@@ -66,7 +67,7 @@
     "css-loader": "^0.28.2",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.1",
-    "enzyme-to-json": "^3.1.2",
+    "enzyme-to-json": "3.1.2",
     "eslint": "^3.19.0",
     "eslint-config-formidable": "^3.0.0",
     "eslint-plugin-filenames": "^1.2.0",
@@ -84,7 +85,7 @@
     "react-test-renderer": "^16.0.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.3.6",
+    "redbox-react": "1.5.0",
     "rimraf": "^2.6.1",
     "style-loader": "^0.18.1",
     "surge": "^0.19.0",

diff --git a/src/components/__snapshots__/manager.test.js.snap b/src/components/__snapshots__/manager.test.js.snap
@@ -112,7 +112,7 @@ exports[`<Manager /> should render correctly. 1`] = `
                   }
                 }
                 hash={0}
-                key=".$0"
+                key=".$.0"
                 lastSlideIndex={0}
                 print={false}
                 slideIndex={0}
@@ -740,7 +740,7 @@ exports[`<Manager /> should render with slideset slides 1`] = `
                   }
                 }
                 hash={1}
-                key=".$1"
+                key=".$.0"
                 lastSlideIndex={1}
                 print={false}
                 slideIndex={1}

diff --git a/src/components/__snapshots__/presenter.test.js.snap b/src/components/__snapshots__/presenter.test.js.snap
@@ -48,11 +48,9 @@ exports[`<Presenter /> should render correctly 1`] = `
             <h2
               className="css-1wa77gy"
             >
-              Slide
-
+              Slide 
               2
-
-              of
+               of
 
               3
             </h2>
@@ -98,6 +96,7 @@ exports[`<Presenter /> should render correctly 1`] = `
                     hash={1}
                     key="1"
                     lastSlideIndex={undefined}
+                    presenter={true}
                     presenterStyle={
                       Object {
                         "position": "relative",
@@ -127,6 +126,7 @@ exports[`<Presenter /> should render correctly 1`] = `
                     hash={2}
                     key="2"
                     lastSlideIndex={undefined}
+                    presenter={true}
                     presenterStyle={
                       Object {
                         "position": "relative",
@@ -212,11 +212,9 @@ exports[`<Presenter /> should render timer when set in params. 1`] = `
             <h2
               className="css-1wa77gy"
             >
-              Slide
-
+              Slide 
               2
-
-              of
+               of
 
               3
             </h2>
@@ -283,6 +281,7 @@ exports[`<Presenter /> should render timer when set in params. 1`] = `
                     key="1"
                     lastSlideIndex={undefined}
                     notes="These are my slide notes!!"
+                    presenter={true}
                     presenterStyle={
                       Object {
                         "position": "relative",
@@ -312,6 +311,7 @@ exports[`<Presenter /> should render timer when set in params. 1`] = `
                     hash={2}
                     key="2"
                     lastSlideIndex={undefined}
+                    presenter={true}
                     presenterStyle={
                       Object {
                         "position": "relative",
@@ -402,11 +402,9 @@ exports[`<Presenter /> should render with notes when slides have them. 1`] = `
             <h2
               className="css-1wa77gy"
             >
-              Slide
-
+              Slide 
               2
-
-              of
+               of
 
               3
             </h2>
@@ -453,6 +451,7 @@ exports[`<Presenter /> should render with notes when slides have them. 1`] = `
                     key="1"
                     lastSlideIndex={undefined}
                     notes="These are my slide notes!!"
+                    presenter={true}
                     presenterStyle={
                       Object {
                         "position": "relative",
@@ -482,6 +481,7 @@ exports[`<Presenter /> should render with notes when slides have them. 1`] = `
                     hash={2}
                     key="2"
                     lastSlideIndex={undefined}
+                    presenter={true}
                     presenterStyle={
                       Object {
                         "position": "relative",

diff --git a/src/components/deck.js b/src/components/deck.js
@@ -28,10 +28,12 @@ export default class Deck extends Component {
   render() {
     return (
       <Provider store={store}>
-        <Controller theme={this.props.theme} store={store} history={this.props.history}>
-          <Manager {...this.props}>
-            {this.props.children}
-          </Manager>
+        <Controller
+          theme={this.props.theme}
+          store={store}
+          history={this.props.history}
+        >
+          <Manager {...this.props}>{this.props.children}</Manager>
         </Controller>
       </Provider>
     );

diff --git a/src/components/heading.js b/src/components/heading.js
@@ -9,8 +9,8 @@ const StyledHeader = styled.div(({ height, styles }) => [
   {
     display: 'block',
     width: '100%',
-    height
-  }
+    height,
+  },
 ]);
 
 const StyledSpan = styled.span(({ scale, lineHeight, styles }) => [
@@ -21,31 +21,34 @@ const StyledSpan = styled.span(({ scale, lineHeight, styles }) => [
     padding: '0',
     lineHeight,
     transform: `scale(${scale})`,
-    transformOrigin: 'center top'
+    transformOrigin: 'center top',
   },
   styles.typeface,
-  styles.user
+  styles.user,
 ]);
 
 const dynamicHeaderStyles = ({ lineHeight, styles }) => [
   styles.context,
   styles.base,
   { lineHeight },
   styles.typeface,
-  styles.user
+  styles.user,
 ];
-const dynamicStyledHeaders = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ]
-  .reduce((memo, tag) => ({
-    ...memo, [tag]: styled(tag)(dynamicHeaderStyles)
-  }), {});
+const dynamicStyledHeaders = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce(
+  (memo, tag) => ({
+    ...memo,
+    [tag]: styled(tag)(dynamicHeaderStyles),
+  }),
+  {}
+);
 
 export default class Heading extends Component {
   constructor() {
     super();
     this.resize = this.resize.bind(this);
     this.state = {
       scale: 1,
-      height: 16
+      height: 16,
     };
   }
   componentDidMount() {
@@ -65,12 +68,12 @@ export default class Heading extends Component {
       const text = this.textRef;
       const container = this.containerRef;
       text.style.display = 'inline-block';
-      const scale = (container.offsetWidth / text.offsetWidth);
-      const height = (text.offsetHeight * scale) || 0;
+      const scale = container.offsetWidth / text.offsetWidth;
+      const height = text.offsetHeight * scale || 0;
       text.style.display = 'block';
       this.setState({
         scale,
-        height
+        height,
       });
     }
   }
@@ -83,15 +86,19 @@ export default class Heading extends Component {
       return (
         <StyledHeader
           className={this.props.className}
-          innerRef={(c) => { this.containerRef = c; }}
+          innerRef={c => {
+            this.containerRef = c;
+          }}
           height={this.state.height}
           styles={{
             context: this.context.styles.components.heading[`h${size}`],
-            base: getStyles.call(this)
+            base: getStyles.call(this),
           }}
         >
           <StyledSpan
-            innerRef={(t) => { this.textRef = t; }}
+            innerRef={t => {
+              this.textRef = t;
+            }}
             scale={this.state.scale}
             lineHeight={lineHeight}
             styles={{ user: style, typeface: typefaceStyle }}
@@ -102,22 +109,26 @@ export default class Heading extends Component {
       );
     }
 
-    return createElement(dynamicStyledHeaders[Tag], {
-      className: this.props.className,
-      lineHeight,
-      styles: {
-        context: this.context.styles.components.heading[`h${size}`],
-        base: getStyles.call(this),
-        user: style,
-        typeface: typefaceStyle
-      }
-    }, children);
+    return createElement(
+      dynamicStyledHeaders[Tag],
+      {
+        className: this.props.className,
+        lineHeight,
+        styles: {
+          context: this.context.styles.components.heading[`h${size}`],
+          base: getStyles.call(this),
+          user: style,
+          typeface: typefaceStyle,
+        },
+      },
+      children
+    );
   }
 }
 
 Heading.defaultProps = {
   size: 1,
-  lineHeight: 1
+  lineHeight: 1,
 };
 
 Heading.propTypes = {
@@ -126,11 +137,11 @@ Heading.propTypes = {
   fit: PropTypes.bool,
   lineHeight: PropTypes.number,
   size: PropTypes.number,
-  style: PropTypes.object
+  style: PropTypes.object,
 };
 
 Heading.contextTypes = {
   styles: PropTypes.object,
   store: PropTypes.object,
-  typeface: PropTypes.object
+  typeface: PropTypes.object,
 };