1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-material-ui/pages/index.js

99 lines
2.2 KiB
JavaScript
Raw Normal View History

import React, {Component} from 'react'
import RaisedButton from 'material-ui/RaisedButton'
import Dialog from 'material-ui/Dialog'
import {deepOrange500} from 'material-ui/styles/colors'
import FlatButton from 'material-ui/FlatButton'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from 'react-tap-event-plugin'
// Make sure react-tap-event-plugin only gets injected once
// Needed for material-ui
if (!process.tapEventInjected) {
injectTapEventPlugin()
process.tapEventInjected = true
}
const styles = {
container: {
textAlign: 'center',
paddingTop: 200
}
}
const muiTheme = {
palette: {
accent1Color: deepOrange500
}
}
class Index extends Component {
static getInitialProps ({ req }) {
// Ensures material-ui renders the correct css prefixes server-side
let userAgent
if (process.browser) {
userAgent = navigator.userAgent
} else {
userAgent = req.headers['user-agent']
}
return { userAgent }
}
constructor (props, context) {
super(props, context)
this.state = {
open: false
}
}
handleRequestClose = () => {
this.setState({
open: false
})
}
handleTouchTap = () => {
this.setState({
open: true
})
}
render () {
const { userAgent } = this.props
const standardActions = (
<FlatButton
label='Ok'
primary={Boolean(true)}
onTouchTap={this.handleRequestClose}
/>
)
return (
<MuiThemeProvider muiTheme={getMuiTheme({userAgent, ...muiTheme})}>
<div style={styles.container}>
<Dialog
open={this.state.open}
title='Super Secret Password'
actions={standardActions}
onRequestClose={this.handleRequestClose}
>
1-2-3-4-5
</Dialog>
<h1>Material-UI</h1>
<h2>example project</h2>
<RaisedButton
label='Super Secret Password'
secondary
onTouchTap={this.handleTouchTap}
/>
</div>
</MuiThemeProvider>
)
}
}
export default Index