1
1
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-11-29 13:58:02 +03:00

feat: themable Presenter

This commit is contained in:
Christoph Werner 2019-05-20 20:08:17 +02:00
parent 48c734ffbf
commit a4fb7f74d5
3 changed files with 27 additions and 27 deletions

View File

@ -4,6 +4,7 @@ import { Router, globalHistory, navigate } from '@reach/router'
import { Global } from '@emotion/core' import { Global } from '@emotion/core'
import { Swipeable } from 'react-swipeable' import { Swipeable } from 'react-swipeable'
import merge from 'lodash.merge' import merge from 'lodash.merge'
import defaultTheme from '@mdx-deck/themes/base'
import Provider from './Provider' import Provider from './Provider'
import Slide from './Slide' import Slide from './Slide'
@ -41,24 +42,17 @@ const getIndex = ({ basepath }) => {
return index return index
} }
const mergeThemes = themes =>
themes.reduce(
(acc, theme) =>
typeof theme === 'function' ? theme(acc) : merge(acc, theme),
{}
)
const mergeState = (state, next) => const mergeState = (state, next) =>
merge({}, state, typeof next === 'function' ? next(state) : next) merge({}, state, typeof next === 'function' ? next(state) : next)
const useState = init => useReducer(mergeState, init) 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() export const MDXDeckContext = React.createContext()
const useDeckState = () => { const useDeckState = () => {
@ -83,8 +77,9 @@ export const MDXDeckState = ({ children }) => {
} }
export const MDXDeck = props => { export const MDXDeck = props => {
const { slides, basepath } = props const { slides, basepath, theme: baseTheme, themes = [] } = props
const { state, setState } = useDeckState(MDXDeckContext) const { state, setState } = useDeckState(MDXDeckContext)
const theme = mergeThemes([defaultTheme, baseTheme, ...themes])
const index = getIndex(props) const index = getIndex(props)
@ -92,6 +87,20 @@ export const MDXDeck = props => {
return state.metadata[i] || {} 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) => { const register = (index, meta) => {
setState({ setState({
metadata: { metadata: {
@ -155,7 +164,7 @@ export const MDXDeck = props => {
const Wrapper = getWrapper(state.mode) const Wrapper = getWrapper(state.mode)
return ( return (
<Provider {...props} {...context}> <Provider {...props} {...context} theme={theme}>
<Catch> <Catch>
<Style {...context} /> <Style {...context} />
<Keyboard {...props} {...context} /> <Keyboard {...props} {...context} />

View File

@ -1,23 +1,13 @@
import React from 'react' import React from 'react'
import { ThemeProvider } from 'emotion-theming' import { ThemeProvider } from 'emotion-theming'
import merge from 'lodash.merge'
import { HeadProvider, UserHead } from './Head' import { HeadProvider, UserHead } from './Head'
import { MDXProvider } from '@mdx-js/react' import { MDXProvider } from '@mdx-js/react'
import defaultTheme from '@mdx-deck/themes/base'
import mdxComponents from './mdx-components' import mdxComponents from './mdx-components'
const DefaultProvider = props => <>{props.children}</> const DefaultProvider = props => <>{props.children}</>
const mergeThemes = themes =>
themes.reduce(
(acc, theme) =>
typeof theme === 'function' ? theme(acc) : merge(acc, theme),
{}
)
export const Provider = props => { export const Provider = props => {
const { headTags, theme: baseTheme, themes = [], mdx } = props const { headTags, theme, mdx } = props
const theme = mergeThemes([defaultTheme, baseTheme, ...themes])
const { const {
Provider: UserProvider = DefaultProvider, Provider: UserProvider = DefaultProvider,
components: themeComponents = {}, components: themeComponents = {},

View File

@ -1,4 +1,5 @@
export { MDXDeck, MDXDeckState } from './MDXDeck' export { MDXDeck, MDXDeckState } from './MDXDeck'
export { Clock } from './Clock'
export { Head } from './Head' export { Head } from './Head'
export { Image } from './Image' export { Image } from './Image'
export { Notes } from './Notes' export { Notes } from './Notes'