mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-20 11:27:14 +03:00
commit
320f366e23
78
packages/components/src/Grid.js
Normal file
78
packages/components/src/Grid.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import React, { useEffect } from 'react'
|
||||||
|
import { Location, navigate } from '@reach/router'
|
||||||
|
import Zoom from './Zoom'
|
||||||
|
import Slide from './Slide'
|
||||||
|
|
||||||
|
const getIndex = ({ pathname }) => {
|
||||||
|
return Number(pathname.split('/')[1] || 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
const withLocation = Component => props => (
|
||||||
|
<Location
|
||||||
|
children={({ location }) => (
|
||||||
|
<Component {...props} location={location} index={getIndex(location)} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const Grid = withLocation(props => {
|
||||||
|
const { index, slides, modes, update } = props
|
||||||
|
const activeThumb = React.createRef()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = activeThumb.current
|
||||||
|
if (!el) return
|
||||||
|
if (typeof el.scrollIntoViewIfNeeded === 'function') {
|
||||||
|
el.scrollIntoViewIfNeeded()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '100vh',
|
||||||
|
overflowY: 'auto',
|
||||||
|
color: 'white',
|
||||||
|
backgroundColor: 'black',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{slides.map((Component, i) => (
|
||||||
|
<div
|
||||||
|
ref={i === index ? activeThumb : null}
|
||||||
|
key={i}
|
||||||
|
role="link"
|
||||||
|
onClick={e => {
|
||||||
|
navigate('/' + i)
|
||||||
|
update({ mode: modes.NORMAL })
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
width: '25vw',
|
||||||
|
height: '25vh',
|
||||||
|
padding: '2px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
color: 'inherit',
|
||||||
|
textDecoration: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Zoom zoom={1 / 4}>
|
||||||
|
<Slide>
|
||||||
|
<Component />
|
||||||
|
</Slide>
|
||||||
|
</Zoom>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default Grid
|
@ -7,6 +7,7 @@ import Provider from './Provider'
|
|||||||
import Slide from './Slide'
|
import Slide from './Slide'
|
||||||
import Presenter from './Presenter'
|
import Presenter from './Presenter'
|
||||||
import Overview from './Overview'
|
import Overview from './Overview'
|
||||||
|
import Grid from './Grid'
|
||||||
import Print from './Print'
|
import Print from './Print'
|
||||||
import GoogleFonts from './GoogleFonts'
|
import GoogleFonts from './GoogleFonts'
|
||||||
import Catch from './Catch'
|
import Catch from './Catch'
|
||||||
@ -14,7 +15,15 @@ import Catch from './Catch'
|
|||||||
const NORMAL = 'normal'
|
const NORMAL = 'normal'
|
||||||
const PRESENTER = 'presenter'
|
const PRESENTER = 'presenter'
|
||||||
const OVERVIEW = 'overview'
|
const OVERVIEW = 'overview'
|
||||||
|
const GRID = 'grid'
|
||||||
const PRINT = 'print'
|
const PRINT = 'print'
|
||||||
|
const modes = {
|
||||||
|
NORMAL,
|
||||||
|
PRESENTER,
|
||||||
|
OVERVIEW,
|
||||||
|
GRID,
|
||||||
|
PRINT,
|
||||||
|
}
|
||||||
|
|
||||||
const STORAGE_INDEX = 'mdx-slide'
|
const STORAGE_INDEX = 'mdx-slide'
|
||||||
const STORAGE_STEP = 'mdx-step'
|
const STORAGE_STEP = 'mdx-step'
|
||||||
@ -25,6 +34,7 @@ const keys = {
|
|||||||
space: 32,
|
space: 32,
|
||||||
p: 80,
|
p: 80,
|
||||||
o: 79,
|
o: 79,
|
||||||
|
g: 71,
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleMode = key => state => ({
|
const toggleMode = key => state => ({
|
||||||
@ -43,6 +53,7 @@ export class MDXDeck extends React.Component {
|
|||||||
slides: props.slides,
|
slides: props.slides,
|
||||||
step: 0,
|
step: 0,
|
||||||
mode: NORMAL,
|
mode: NORMAL,
|
||||||
|
update: fn => this.setState(fn),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,6 +82,9 @@ export class MDXDeck extends React.Component {
|
|||||||
case keys.o:
|
case keys.o:
|
||||||
this.setState(toggleMode(OVERVIEW))
|
this.setState(toggleMode(OVERVIEW))
|
||||||
break
|
break
|
||||||
|
case keys.g:
|
||||||
|
this.setState(toggleMode(GRID))
|
||||||
|
break
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
switch (keyCode) {
|
switch (keyCode) {
|
||||||
@ -217,13 +231,16 @@ export class MDXDeck extends React.Component {
|
|||||||
case OVERVIEW:
|
case OVERVIEW:
|
||||||
Wrapper = Overview
|
Wrapper = Overview
|
||||||
break
|
break
|
||||||
|
case GRID:
|
||||||
|
Wrapper = Grid
|
||||||
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Provider {...this.props} {...this.state} mode={mode} index={index}>
|
<Provider {...this.props} {...this.state} mode={mode} index={index}>
|
||||||
<Catch>
|
<Catch>
|
||||||
<GoogleFonts />
|
<GoogleFonts />
|
||||||
<Wrapper {...this.state} index={index}>
|
<Wrapper {...this.state} modes={modes} index={index}>
|
||||||
<Swipeable onSwipedRight={this.previous} onSwipedLeft={this.next}>
|
<Swipeable onSwipedRight={this.previous} onSwipedLeft={this.next}>
|
||||||
<Router>
|
<Router>
|
||||||
<Slide path="/" index={0} {...context}>
|
<Slide path="/" index={0} {...context}>
|
||||||
|
@ -52,6 +52,7 @@ export const Overview = withLocation(props => {
|
|||||||
<div
|
<div
|
||||||
ref={i === index ? activeThumb : null}
|
ref={i === index ? activeThumb : null}
|
||||||
key={i}
|
key={i}
|
||||||
|
role="link"
|
||||||
onClick={e => {
|
onClick={e => {
|
||||||
navigate('/' + i)
|
navigate('/' + i)
|
||||||
}}
|
}}
|
||||||
|
@ -3,8 +3,8 @@ import styled from '@emotion/styled'
|
|||||||
|
|
||||||
const ZoomRoot = styled.div(props => ({
|
const ZoomRoot = styled.div(props => ({
|
||||||
backgroundColor: props.theme.colors.background,
|
backgroundColor: props.theme.colors.background,
|
||||||
width: 100 * props.zoom + 'vw',
|
width: `calc(${100 * props.zoom}vw)`,
|
||||||
height: 100 * props.zoom + 'vh',
|
height: `calc(${100 * props.zoom}vh)`,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const ZoomInner = styled.div([], props => ({
|
const ZoomInner = styled.div([], props => ({
|
||||||
|
Loading…
Reference in New Issue
Block a user