From a4fb7f74d57c79452331c7b16fd13405ba211daa Mon Sep 17 00:00:00 2001
From: Christoph Werner <christoph@codepunkt.de>
Date: Mon, 20 May 2019 20:08:17 +0200
Subject: [PATCH] feat: themable Presenter

---
 packages/components/src/MDXDeck.js  | 41 ++++++++++++++++++-----------
 packages/components/src/Provider.js | 12 +--------
 packages/components/src/index.js    |  1 +
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/components/src/MDXDeck.js b/packages/components/src/MDXDeck.js
index cf2f4eb..89827b2 100644
--- a/packages/components/src/MDXDeck.js
+++ b/packages/components/src/MDXDeck.js
@@ -4,6 +4,7 @@ import { Router, globalHistory, navigate } from '@reach/router'
 import { Global } from '@emotion/core'
 import { Swipeable } from 'react-swipeable'
 import merge from 'lodash.merge'
+import defaultTheme from '@mdx-deck/themes/base'
 
 import Provider from './Provider'
 import Slide from './Slide'
@@ -41,24 +42,17 @@ const getIndex = ({ basepath }) => {
   return index
 }
 
+const mergeThemes = themes =>
+  themes.reduce(
+    (acc, theme) =>
+      typeof theme === 'function' ? theme(acc) : merge(acc, theme),
+    {}
+  )
+
 const mergeState = (state, next) =>
   merge({}, state, typeof next === 'function' ? next(state) : next)
 const useState = init => useReducer(mergeState, init)
 
-const getWrapper = mode => {
-  switch (mode) {
-    case PRESENTER:
-      return Presenter
-    case OVERVIEW:
-      return Overview
-    case GRID:
-      return Grid
-    default:
-      return BaseWrapper
-      break
-  }
-}
-
 export const MDXDeckContext = React.createContext()
 
 const useDeckState = () => {
@@ -83,8 +77,9 @@ export const MDXDeckState = ({ children }) => {
 }
 
 export const MDXDeck = props => {
-  const { slides, basepath } = props
+  const { slides, basepath, theme: baseTheme, themes = [] } = props
   const { state, setState } = useDeckState(MDXDeckContext)
+  const theme = mergeThemes([defaultTheme, baseTheme, ...themes])
 
   const index = getIndex(props)
 
@@ -92,6 +87,20 @@ export const MDXDeck = props => {
     return state.metadata[i] || {}
   }
 
+  const getWrapper = mode => {
+    switch (mode) {
+      case PRESENTER:
+        return theme.Presenter || Presenter
+      case OVERVIEW:
+        return Overview
+      case GRID:
+        return Grid
+      default:
+        return BaseWrapper
+        break
+    }
+  }
+
   const register = (index, meta) => {
     setState({
       metadata: {
@@ -155,7 +164,7 @@ export const MDXDeck = props => {
   const Wrapper = getWrapper(state.mode)
 
   return (
-    <Provider {...props} {...context}>
+    <Provider {...props} {...context} theme={theme}>
       <Catch>
         <Style {...context} />
         <Keyboard {...props} {...context} />
diff --git a/packages/components/src/Provider.js b/packages/components/src/Provider.js
index 04a9b93..7b4d996 100644
--- a/packages/components/src/Provider.js
+++ b/packages/components/src/Provider.js
@@ -1,23 +1,13 @@
 import React from 'react'
 import { ThemeProvider } from 'emotion-theming'
-import merge from 'lodash.merge'
 import { HeadProvider, UserHead } from './Head'
 import { MDXProvider } from '@mdx-js/react'
-import defaultTheme from '@mdx-deck/themes/base'
 import mdxComponents from './mdx-components'
 
 const DefaultProvider = props => <>{props.children}</>
 
-const mergeThemes = themes =>
-  themes.reduce(
-    (acc, theme) =>
-      typeof theme === 'function' ? theme(acc) : merge(acc, theme),
-    {}
-  )
-
 export const Provider = props => {
-  const { headTags, theme: baseTheme, themes = [], mdx } = props
-  const theme = mergeThemes([defaultTheme, baseTheme, ...themes])
+  const { headTags, theme, mdx } = props
   const {
     Provider: UserProvider = DefaultProvider,
     components: themeComponents = {},
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 3db55b2..86b080a 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -1,4 +1,5 @@
 export { MDXDeck, MDXDeckState } from './MDXDeck'
+export { Clock } from './Clock'
 export { Head } from './Head'
 export { Image } from './Image'
 export { Notes } from './Notes'