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:
parent
48c734ffbf
commit
a4fb7f74d5
@ -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} />
|
||||||
|
@ -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 = {},
|
||||||
|
@ -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'
|
||||||
|
Loading…
Reference in New Issue
Block a user