Merge pull request #2562 from oliviertassinari/doc-codgen-snackbar

[Doc] Convert the Snackbar to the new format

docs/src/app/components/PropTypeDescription.jsx

@@ -5,12 +5,22 @@ import MarkdownElement from './MarkdownElement';
 
 require('./prop-type-description.css');
 
+const deprecatedPropType = 'deprecated(React.PropTypes.';
+
 function generatePropType(type) {
   switch (type.name) {
     case 'func':
       return 'function';
 
     case 'custom':
+      const indexStart = type.raw.indexOf(deprecatedPropType);
+      if (indexStart !== -1) {
+        return generatePropType({
+          name: type.raw.substring(indexStart +
+            deprecatedPropType.length, type.raw.indexOf(',')),
+        });
+      }
+
       return type.raw;
 
     case 'enum':

docs/src/app/components/Snackbar/ExampleSimple.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Snackbar from 'material-ui/lib/snackbar';
+import TextField from 'material-ui/lib/text-field';
+import RaisedButton from 'material-ui/lib/raised-button';
+
+export default class SnackbarExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      autoHideDuration: 0,
+      message: 'Event added to your calendar',
+      open: false,
+    };
+  }
+
+  handleTouchTap = () => {
+    this.setState({
+      open: true,
+    });
+  }
+
+  handleActionTouchTap = () => {
+    alert('We removed the event from your calendar.');
+  }
+
+  handleChangeDuration = (event) => {
+    const value = event.target.value;
+    this.setState({
+      autoHideDuration: value.length > 0 ? parseInt(value) : 0,
+    });
+  }
+
+  handleRequestClose = () => {
+    this.setState({
+      open: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <RaisedButton
+          onTouchTap={this.handleTouchTap}
+          label="Add to my calendar"
+        />
+        <br />
+        <TextField
+          floatingLabelText="Auto Hide Duration in ms"
+          value={this.state.autoHideDuration}
+          onChange={this.handleChangeDuration}
+        />
+        <Snackbar
+          open={this.state.open}
+          message={this.state.message}
+          action="undo"
+          autoHideDuration={this.state.autoHideDuration}
+          onActionTouchTap={this.handleActionTouchTap}
+          onRequestClose={this.handleRequestClose}
+        />
+      </div>
+    );
+  }
+}
+
+export default SnackbarExampleSimple;

docs/src/app/components/Snackbar/ExampleTwice.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Snackbar from 'material-ui/lib/snackbar';
+import RaisedButton from 'material-ui/lib/raised-button';
+
+export default class SnackbarExampleTwice extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: 'Event added to your calendar',
+      open: false,
+    };
+    this._timerId = undefined;
+  }
+
+  componentWillUnMount() {
+    clearTimeout(this._timerId);
+  }
+
+  handleTouchTap = () => {
+    this.setState({
+      open: true,
+    });
+
+    this._timerId = setTimeout(() => {
+      this.setState({
+        message: 'Event ' + Math.round(Math.random() * 100) + ' added to your calendar',
+      });
+    }, 1500);
+  }
+
+  handleRequestClose = () => {
+    this.setState({
+      open: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <RaisedButton
+          onTouchTap={this.handleTouchTap}
+          label="Add to my calendar two times"
+        />
+        <Snackbar
+          open={this.state.open}
+          message={this.state.message}
+          action="undo"
+          autoHideDuration={3000}
+          onRequestClose={this.handleRequestClose}
+        />
+      </div>
+    );
+  }
+}
+
+export default SnackbarExampleTwice;

docs/src/app/components/Snackbar/README.md

@@ -0,0 +1,3 @@
+## Snackbar
+
+[Snackbars](https://www.google.com/design/spec/components/snackbars-toasts.html) provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.

docs/src/app/components/pages/components/snackbar.jsx

@@ -1,177 +1,27 @@
 import React from 'react';
-import {RaisedButton, Snackbar, TextField, Paper} from 'material-ui';
-import ComponentDoc from '../../component-doc';
-import Code from 'snackbars-code';
+import SnackbarCode from '!raw!material-ui/lib/snackbar';
 import CodeExample from '../../code-example/code-example';
-import CodeBlock from '../../code-example/code-block';
-
-export default class SnackbarPage extends React.Component {
-
-  constructor() {
-    super();
-    this._handleClick = this._handleClick.bind(this);
-    this._handleClickDouble = this._handleClickDouble.bind(this);
-    this._updateAutoHideDuration = this._updateAutoHideDuration.bind(this);
-
-    this.state = {
-      autoHideDuration: 0,
-      message: 'Event added to your calendar',
-    };
-  }
-
-  render() {
-
-    let componentInfo = [
-      {
-        name: 'Props',
-        infoArray: [
-          {
-            name: 'action',
-            type: 'string',
-            header: 'optional',
-            desc: 'The name of the action on the snackbar.',
-          },
-          {
-            name: 'autoHideDuration',
-            type: 'number',
-            header: 'optional',
-            desc: `The number of milliseconds to wait before automatically dismissing.
-              If no value is specified the snackbar will dismiss normally.
-              If a value is provided the snackbar can still be dismissed normally.
-              If a snackbar is dismissed before the timer expires, the timer will be cleared.`,
-          },
-          {
-            name: 'message',
-            type: 'string',
-            header: 'required',
-            desc: 'The message to be displayed on the snackbar.',
-          },
-          {
-            name: 'openOnMount',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'If true, the snackbar will open once mounted.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the Snackbar\'s root element.',
-          },
-          {
-            name: 'bodyStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the Snackbar\'s body element.',
-          },
-        ],
-      },
-      {
-        name: 'Methods',
-        infoArray: [
-          {
-            name: 'dismiss',
-            header: 'Snackbar.dismiss()',
-            desc: 'Hides the snackbar.',
-          },
-          {
-            name: 'show',
-            header: 'Snackbar.show()',
-            desc: 'Shows the snackbar.',
-          },
-        ],
-      },
-      {
-        name: 'Events',
-        infoArray: [
-          {
-            name: 'onActionTouchTap',
-            header: 'function(event)',
-            desc: 'Fired when the action button is touchtapped.',
-          },
-          {
-            name: 'onDismiss',
-            header: 'function()',
-            desc: 'Fired when the snackbar is dismissed.',
-          },
-          {
-            name: 'onShow',
-            header: 'function()',
-            desc: 'Fired when the snackbar is shown.',
-          },
-        ],
-      },
-    ];
-
-    return (
-      <ComponentDoc
-        name="Snackbar"
-        componentInfo={componentInfo}>
-
-        <Paper style = {{marginBottom: '22px'}}>
-          <CodeBlock>
-          {
-            '//Import statement:\nimport Snackbar from \'material-ui/lib/snackbar\';\n\n' +
-            '//See material-ui/lib/index.js for more\n'
-          }
-          </CodeBlock>
-        </Paper>
-
-        <CodeExample code={Code}>
-          <RaisedButton
-            onTouchTap={this._handleClick}
-            label="Add to my calendar" />
-
-          <br />
-          <br />
-
-          <RaisedButton
-            onTouchTap={this._handleClickDouble}
-            label="Add to my calendar two times" />
-
-          <br />
-
-          <TextField
-            floatingLabelText="Auto Hide Duration in ms"
-            value={this.state.autoHideDuration}
-            onChange={this._updateAutoHideDuration} />
-
-          <Snackbar
-            ref="snackbar"
-            message={this.state.message}
-            action="undo"
-            autoHideDuration={this.state.autoHideDuration}
-            onActionTouchTap={this._handleAction} />
-        </CodeExample>
-      </ComponentDoc>
-    );
-  }
-
-  _handleClick() {
-    this.refs.snackbar.show();
-  }
-
-  _handleClickDouble() {
-    this.refs.snackbar.show();
-
-    const duration = this.state.autoHideDuration / 2 || 2000;
-
-    setTimeout(() => {
-      this.setState({
-        message: 'Event ' + Math.round(Math.random() * 100) + ' added to your calendar',
-      });
-    }, duration);
-  }
-
-  _handleAction() {
-    //We can add more code here! In this example, we'll just include an alert.
-    window.alert('We removed the event from your calendar.');
-  }
-
-  _updateAutoHideDuration(e) {
-    let value = e.target.value;
-    this.setState({
-      autoHideDuration: value.length > 0 ? parseInt(value) : undefined,
-    });
-  }
-}
+import PropTypeDescription from '../../PropTypeDescription';
+import SnackbarExampleSimple from '../../Snackbar/ExampleSimple';
+import SnackbarExampleSimpleCode from '!raw!../../Snackbar/ExampleSimple';
+import SnackbarExampleTwice from '../../Snackbar/ExampleTwice';
+import SnackbarExampleTwiceCode from '!raw!../../Snackbar/ExampleTwice';
+import MarkdownElement from '../../MarkdownElement';
+import SnackbarReadmeText from '../../Snackbar/README';
+
+const SnackbarPage = () => {
+  return (
+    <div>
+      <MarkdownElement text={SnackbarReadmeText} />
+      <CodeExample code={SnackbarExampleSimpleCode}>
+        <SnackbarExampleSimple />
+      </CodeExample>
+      <CodeExample code={SnackbarExampleTwiceCode}>
+        <SnackbarExampleTwice />
+      </CodeExample>
+      <PropTypeDescription code={SnackbarCode} />
+    </div>
+  );
+};
+
+export default SnackbarPage;