archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update with-react-multi-carousel example to use GSSP (#11069)

Browse source
This commit is contained in:
Sangwon Lee 2020-03-17 19:28:59 +09:00 committed by GitHub
parent 3e1ace37af
commit 22e3b93913
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/with-react-multi-carousel/package.json
View file

@ -15,9 +15,9 @@
"@material-ui/icons": "^3.0.2",
"jss": "^9.8.7",
"mobile-detect": "^1.4.3",
"next": "^9.1.8-canary.11",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"next": "^9.3.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-jss": "^8.6.1",
"react-multi-carousel": "^1.2.5"
}

47
examples/with-react-multi-carousel/pages/index.js
View file

@ -5,7 +5,7 @@ import Carousel from 'react-multi-carousel'
import Image from '../components/image'
const styles = theme => ({
const styles = () => ({
root: {
textAlign: 'center',
},
@ -16,27 +16,6 @@ const styles = theme => ({
},
})
class Index extends React.Component {
static getInitialProps({ req, isServer }) {
let userAgent
let deviceType
if (req) {
userAgent = req.headers['user-agent']
} else {
userAgent = navigator.userAgent
}
const md = new MobileDetect(userAgent)
if (md.tablet()) {
deviceType = 'tablet'
} else if (md.mobile()) {
deviceType = 'mobile'
} else {
deviceType = 'desktop'
}
return { deviceType }
}
render() {
const { classes } = this.props
const images = [
'https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
@ -51,6 +30,7 @@ class Index extends React.Component {
'https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550064824-8f993041ffd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
]
const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
@ -65,6 +45,8 @@ class Index extends React.Component {
items: 1,
},
}
function Index({ classes, deviceType }) {
return (
<div className={classes.root}>
<Carousel
@ -75,15 +57,30 @@ class Index extends React.Component {
infinite
containerClass="container-with-dots"
itemClass="image-item"
deviceType={this.props.deviceType}
deviceType={deviceType}
>
{images.map(image => {
return <Image url={image} alt={image} />
{images.map((image, index) => {
return <Image url={image} alt={image} key={index} />
})}
</Carousel>
</div>
)
}
export async function getServerSideProps({ req }) {
let deviceType = null
const userAgent = req.headers['user-agent']
const md = new MobileDetect(userAgent)
if (md.tablet()) {
deviceType = 'tablet'
} else if (md.mobile()) {
deviceType = 'mobile'
} else {
deviceType = 'desktop'
}
return {
props: { deviceType },
}
}
export default withStyles(styles)(Index)