Use pure functional components. Use standard style.

Author: leMaik

src/FullscreenDialog.js

@@ -25,7 +25,7 @@ const getStyles = (props, theme) => ({
   }
 })
 
-export function FullscreenDialog (props, { muiTheme }) {
+export default function FullscreenDialog (props, { muiTheme }) {
   const styles = getStyles(props, muiTheme)
 
   const {
@@ -52,7 +52,7 @@ export function FullscreenDialog (props, { muiTheme }) {
         style={{ ...styles.appBar, ...appBarStyle }}
         iconElementLeft={(
           <IconButton onTouchTap={onRequestClose}>
-              {closeIcon || <NavigationCloseIcon />}
+            {closeIcon || <NavigationCloseIcon />}
           </IconButton>
         )}
         iconElementRight={actionButton}

src/FullscreenDialogFrame.js

@@ -1,7 +1,7 @@
 import React, { PropTypes, Component } from 'react'
 import ReactTransitionGroup from 'react-addons-transition-group'
 
-const getStyles = (props) => ({
+const styles = {
   root: {
     width: '100vw',
     height: '100vh',
@@ -11,106 +11,98 @@ const getStyles = (props) => ({
     zIndex: 1500,
     background: '#fafafa'
   }
-})
+}
 
 class TransitionItem extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    style: PropTypes.object,
-  };
-
-  state = {
-    style: {
-      opacity: 0,
-      transition: 'all 225ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-      transform: 'translate(0, 56px)'
-    },
-  };
+  constructor (props) {
+    super(props)
+    this.state = {
+      style: {
+        opacity: 0,
+        transition: 'all 225ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+        transform: 'translate(0, 56px)'
+      }
+    }
+  }
 
-  componentWillUnmount() {
-    clearTimeout(this.enterTimeout);
-    clearTimeout(this.leaveTimeout);
+  componentWillUnmount () {
+    clearTimeout(this.enterTimeout)
+    clearTimeout(this.leaveTimeout)
   }
 
-  componentWillEnter(callback) {
-    this.componentWillAppear(callback);
+  componentWillEnter (callback) {
+    this.componentWillAppear(callback)
   }
 
-  componentWillAppear(callback) {
+  componentWillAppear (callback) {
     this.enterTimeout = setTimeout(() => {
       this.setState({
         style: {
           opacity: 1,
           transition: 'all 225ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-          transform: 'translate(0, 0px)',
+          transform: 'translate(0, 0px)'
         }
       })
-      this.enterTimeout = setTimeout(callback, 225); // matches transition duration
+      this.enterTimeout = setTimeout(callback, 225) // matches transition duration
     })
   }
 
-  componentWillLeave(callback) {
+  componentWillLeave (callback) {
     this.setState({
       style: {
         opacity: 0,
         transition: 'all 195ms cubic-bezier(0.4, 0.0, 1, 1)',
         transform: 'translate(0, 56px)'
-      },
-    });
+      }
+    })
 
-    this.leaveTimeout = setTimeout(callback, 195); // matches transition duration
+    this.leaveTimeout = setTimeout(callback, 195) // matches transition duration
   }
 
-  render() {
+  render () {
     const {
       style,
       children,
       ...other
-    } = this.props;
+    } = this.props
 
     return (
       <div {...other} style={{ ...style, ...this.state.style }}>
         {children}
       </div>
-    );
+    )
   }
 }
 
-export default class FullscreenDialogFrame extends Component {
-  render () {
-    const styles = getStyles(this.props)
-
-    const {
-      children,
-      style,
-      title,
-      titleStyle,
-    } = this.props
+TransitionItem.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.object
+}
 
-    return (
-      <ReactTransitionGroup
-        component='div'
-        transitionAppear={true}
-        transitionAppearTimeout={225}
-        transitionEnter={true}
-        transitionEnterTimeout={225}
-      >
-        {this.props.open && (
-          <TransitionItem style={{
-              ...styles.root,
-              ...style
-            }}
-          >
-            {this.props.children}
-          </TransitionItem>
-        )}
-      </ReactTransitionGroup>
-    )
-  }
+export default function FullscreenDialogFrame ({ children, open, style }) {
+  return (
+    <ReactTransitionGroup
+      component='div'
+      transitionAppear
+      transitionAppearTimeout={225}
+      transitionEnter
+      transitionEnterTimeout={225}
+    >
+      {open && (
+        <TransitionItem style={{
+          ...styles.root,
+          ...style
+        }}
+        >
+          {children}
+        </TransitionItem>
+      )}
+    </ReactTransitionGroup>
+  )
 }
 
 FullscreenDialogFrame.propTypes = {
-  children: PropTypes.node,  
+  children: PropTypes.node,
   open: PropTypes.bool.isRequired,
   style: PropTypes.object
 }

stories/FullscreenDialogDemo.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { action } from '@kadira/storybook'
 import RaisedButton from 'material-ui/RaisedButton'
 import FlatButton from 'material-ui/FlatButton'
 import TextField from 'material-ui/TextField'
@@ -18,7 +19,10 @@ export default class extends React.Component {
       <div>
         <FullscreenDialog
           open={this.state.open}
-          onRequestClose={() => this.setState({ open: false })}
+          onRequestClose={(...args) => {
+            action('onRequestClose')(...args)
+            this.setState({ open: false })
+          }}
           title='Some demo dialog'
           actionButton={<FlatButton
             label='Done'

stories/index.js

@@ -1,11 +1,11 @@
 import React from 'react'
-import { storiesOf, action, linkTo } from '@kadira/storybook'
+import { storiesOf } from '@kadira/storybook'
 import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import getMuiTheme from 'material-ui/styles/getMuiTheme'
 import FullscreenDialogDemo from './FullscreenDialogDemo'
 
-function themed(children) {
+function themed (children) {
   return (
     <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
       <div style={{ fontFamily: 'Roboto, sans-serif' }}>