jxnblk/mdx-deck
1
1
Fork 0
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-11-26 00:35:02 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #44 from jxnblk/provider-in-app

Browse Source 
Move custom Provider into main app
This commit is contained in:
Brent Jackson 2018-08-02 22:49:05 -04:00 committed by GitHub
commit 149f588c0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/entry.js
View File

@ -6,18 +6,15 @@ const mod = require(DOC_FILENAME)
const slides = mod.default
const { theme, components, Provider } = mod
const Root = Provider || React.Fragment
export default class App extends React.Component {
render () {
return (
<Root>
<SlideDeck
slides={slides}
theme={theme}
components={components}
/>
</Root>
<SlideDeck
slides={slides}
theme={theme}
components={components}
Provider={Provider}
/>
)
}
}

62
src/index.js
View File

@ -4,7 +4,7 @@ import { MDXProvider } from '@mdx-js/tag'
import { ThemeProvider } from 'styled-components'
import debounce from 'lodash.debounce'
import { Provider } from './context'
import { Provider as ContextProvider } from './context'
import Carousel from './Carousel'
import Slide from './Slide'
import Dots from './Dots'
@ -43,6 +43,7 @@ export class SlideDeck extends React.Component {
slides: [],
theme: defaultTheme,
components: {} ,
Provider: props => <React.Fragment children={props.children} />,
width: '100vw',
height: '100vh',
ignoreKeyEvents: false
@ -147,6 +148,7 @@ export class SlideDeck extends React.Component {
slides,
theme,
components,
Provider,
width,
height
} = this.props
@ -163,42 +165,44 @@ export class SlideDeck extends React.Component {
}
return (
<Provider value={context}>
<ContextProvider value={context}>
<ThemeProvider theme={theme}>
<MDXProvider
components={{
...defaultComponents,
...components
}}>
<Wrapper
{...this.state}
slides={slides}
width={width}
height={height}>
<GoogleFonts />
<Carousel index={index}>
{slides.map((Component, i) => (
<Slide
key={i}
id={'slide-' + i}
index={i}>
<Component />
</Slide>
))}
</Carousel>
<Dots
mt={-32}
mx='auto'
index={index}
length={length}
onClick={index => {
this.setState({ index })
}}
/>
</Wrapper>
<Provider {...this.state}>
<Wrapper
{...this.state}
slides={slides}
width={width}
height={height}>
<GoogleFonts />
<Carousel index={index}>
{slides.map((Component, i) => (
<Slide
key={i}
id={'slide-' + i}
index={i}>
<Component />
</Slide>
))}
</Carousel>
<Dots
mt={-32}
mx='auto'
index={index}
length={length}
onClick={index => {
this.setState({ index })
}}
/>
</Wrapper>
</Provider>
</MDXProvider>
</ThemeProvider>
</Provider>
</ContextProvider>
)
}
}