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