mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-19 02:47:09 +03:00
Add modal components
This commit is contained in:
parent
9e2cbcd68d
commit
143eb683ca
@ -15,15 +15,15 @@ Prototype for MDX Deck v3
|
||||
- [x] mode-switch keys
|
||||
- [x] mode state
|
||||
- [ ] mode components
|
||||
- [ ] Presenter
|
||||
- [ ] Overview
|
||||
- [ ] Grid
|
||||
- [x] Presenter
|
||||
- [x] Overview
|
||||
- [x] Grid
|
||||
- [ ] Print
|
||||
- [x] add legacy theme transformer
|
||||
- [x] export theme/themes API
|
||||
- [-] slide styles
|
||||
- [-] theme-ui
|
||||
- [ ] port default themes over
|
||||
- [ ] add legacy theme transformer
|
||||
- [ ] export theme/themes API
|
||||
- [ ] react helmet ??? how can this even work??
|
||||
- [ ] custom Head component
|
||||
- [ ] remove Head in slides parser
|
||||
|
@ -15,6 +15,8 @@ import { modes } from '../constants'
|
||||
import convertLegacyTheme from '../convert-legacy-theme'
|
||||
|
||||
import Presenter from './presenter'
|
||||
import Overview from './overview'
|
||||
import Grid from './grid'
|
||||
|
||||
const Keyboard = () => {
|
||||
useKeyboard()
|
||||
@ -64,6 +66,12 @@ export default ({
|
||||
case modes.presenter:
|
||||
Mode = Presenter
|
||||
break
|
||||
case modes.overview:
|
||||
Mode = Overview
|
||||
break
|
||||
case modes.grid:
|
||||
Mode = Grid
|
||||
break
|
||||
}
|
||||
|
||||
return (
|
||||
|
36
packages/gatsby-theme-next/src/components/grid.js
Normal file
36
packages/gatsby-theme-next/src/components/grid.js
Normal file
@ -0,0 +1,36 @@
|
||||
/** @jsx jsx */
|
||||
import { jsx } from 'theme-ui'
|
||||
import { navigate } from '@reach/router'
|
||||
import useDeck from '../hooks/use-deck'
|
||||
import { modes } from '../constants'
|
||||
import SlideList from './slide-list'
|
||||
|
||||
export default ({ slides }) => {
|
||||
const { slug, setState } = useDeck()
|
||||
return (
|
||||
<div
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
color: 'white',
|
||||
bg: 'black',
|
||||
}}>
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
}}>
|
||||
<SlideList
|
||||
slides={slides}
|
||||
onClick={i => {
|
||||
navigate([slug, i].join('/'))
|
||||
setState({ mode: modes.normal })
|
||||
}}
|
||||
sx={{
|
||||
width: '25%',
|
||||
m: 0,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
63
packages/gatsby-theme-next/src/components/overview.js
Normal file
63
packages/gatsby-theme-next/src/components/overview.js
Normal file
@ -0,0 +1,63 @@
|
||||
/** @jsx jsx */
|
||||
import { jsx } from 'theme-ui'
|
||||
import { navigate } from '@reach/router'
|
||||
import useDeck from '../hooks/use-deck'
|
||||
import Zoom from './zoom'
|
||||
import Slide from './slide'
|
||||
import SlideList from './slide-list'
|
||||
|
||||
export default ({ slides, children }) => {
|
||||
const { slug, index, length } = useDeck()
|
||||
|
||||
return (
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
height: '100vh',
|
||||
fontFamily: 'ui',
|
||||
color: 'white',
|
||||
bg: 'black',
|
||||
}}>
|
||||
<div
|
||||
sx={{
|
||||
width: 100 / 6 + '%',
|
||||
minWidth: 0,
|
||||
flex: 'none',
|
||||
height: '100vh',
|
||||
overflowY: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
p: 2,
|
||||
}}>
|
||||
<SlideList
|
||||
slides={slides}
|
||||
zoom={1 / 6}
|
||||
onClick={i => {
|
||||
navigate([slug, i].join('/'))
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
sx={{
|
||||
width: 500 / 6 + '%',
|
||||
py: 3,
|
||||
pr: 3,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100vh',
|
||||
}}>
|
||||
<div
|
||||
sx={{
|
||||
flex: '1 1 auto',
|
||||
}}>
|
||||
<Zoom zoom={5 / 6}>{children}</Zoom>
|
||||
</div>
|
||||
<div
|
||||
sx={{
|
||||
py: 3,
|
||||
}}>
|
||||
{index} / {length - 1}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -31,7 +31,7 @@ export const Presenter = ({ slides, children }) => {
|
||||
width: '75%',
|
||||
p: 3,
|
||||
}}>
|
||||
<Zoom>{children}</Zoom>
|
||||
<Zoom zoom={3 / 4}>{children}</Zoom>
|
||||
</div>
|
||||
<div
|
||||
sx={{
|
||||
|
61
packages/gatsby-theme-next/src/components/slide-list.js
Normal file
61
packages/gatsby-theme-next/src/components/slide-list.js
Normal file
@ -0,0 +1,61 @@
|
||||
/** @jsx jsx */
|
||||
import { jsx } from 'theme-ui'
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import Zoom from './zoom'
|
||||
import Slide from './slide'
|
||||
import useDeck from '../hooks/use-deck'
|
||||
|
||||
const noop = () => {}
|
||||
|
||||
export const SlideList = ({
|
||||
slides = [],
|
||||
ratio = 16 / 9,
|
||||
zoom = 1 / 4,
|
||||
onClick = noop,
|
||||
...props
|
||||
}) => {
|
||||
const { index } = useDeck()
|
||||
const thumb = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const el = thumb.current
|
||||
if (!el) return
|
||||
if (typeof el.scrollIntoViewIfNeeded === 'function') {
|
||||
el.scrollIntoViewIfNeeded()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{slides.map((slide, i) => (
|
||||
<div
|
||||
{...props}
|
||||
key={i}
|
||||
role="link"
|
||||
ref={i === index ? thumb : null}
|
||||
onClick={e => {
|
||||
onClick(i)
|
||||
}}
|
||||
style={
|
||||
index === i
|
||||
? {
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
}
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
m: 2,
|
||||
cursor: 'pointer',
|
||||
outline: index === i ? `4px solid cyan` : null,
|
||||
}}>
|
||||
<Zoom zoom={zoom} ratio={ratio}>
|
||||
<Slide slide={slide} preview />
|
||||
</Zoom>
|
||||
</div>
|
||||
))}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default SlideList
|
@ -7,7 +7,6 @@ export const Zoom = ({
|
||||
...props
|
||||
}) => (
|
||||
<div
|
||||
{...props}
|
||||
sx={{
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
|
@ -7,6 +7,6 @@ export default length => {
|
||||
if (typeof context.register !== 'function') return
|
||||
context.register(context.index, 'steps', length)
|
||||
}, [])
|
||||
// if (context.preview) return length
|
||||
if (context.preview) return length
|
||||
return context.step
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user