[Stepper] add transition example to docs

mui · Apr 9, 2016 · 381ad07 · 381ad07
1 parent 56a7966
commit 381ad07
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 40 deletions.
diff --git a/docs/src/app/components/pages/components/Stepper/HorizontalTransition.js b/docs/src/app/components/pages/components/Stepper/HorizontalTransition.js
@@ -7,12 +7,10 @@ import {
 import RaisedButton from 'material-ui/RaisedButton';
 import FlatButton from 'material-ui/FlatButton';
 import ExpandTransition from 'material-ui/internal/ExpandTransition';
+import TextField from 'material-ui/TextField';
 
 /**
- * Horizontal steppers are ideal when the contents of one step depend on an earlier step.
- * Avoid using long step names in horizontal steppers.
- *
- * Linear steppers require users to complete one step in order to move on to the next.
+ * A contrived example using a transition between steps
  */
 class HorizontalTransition extends React.Component {
 
@@ -23,10 +21,9 @@ class HorizontalTransition extends React.Component {
   };
 
   dummyAsync = (cb) => {
-    cb();
-    // this.setState({loading: true}, () => {
-    //   this.asyncTimer = setTimeout(cb, 1500);
-    // });
+    this.setState({loading: true}, () => {
+      this.asyncTimer = setTimeout(cb, 500);
+    });
   };
 
   handleNext = () => {
@@ -54,21 +51,31 @@ class HorizontalTransition extends React.Component {
     switch (stepIndex) {
       case 0:
         return (
-          'Select campaign settings. Campaign settings can include your budget, network, bidding ' +
-          'options and adjustments, location targeting, campaign end date, and other settings that ' +
-          'affect an entire campaign.'
+          <p>
+            Select campaign settings. Campaign settings can include your budget, network, bidding
+            options and adjustments, location targeting, campaign end date, and other settings that
+            affect an entire campaign.
+          </p>
         );
       case 1:
         return (
-          'Ad group status is different than the statuses for campaigns, ads, and keywords, though the ' +
-          'statuses can affect each other. Ad groups are contained within a campaign, and each campaign can ' +
-          'have one or more ad groups. Within each ad group are ads, keywords, and bids.'
+          <div>
+            <TextField style={{marginTop: 0}} floatingLabelText="Ad group name" />
+            <p>
+              Ad group status is different than the statuses for campaigns, ads, and keywords, though the
+              statuses can affect each other. Ad groups are contained within a campaign, and each campaign can
+              have one or more ad groups. Within each ad group are ads, keywords, and bids.
+            </p>
+            <p>Something something whatever cool</p>
+          </div>
         );
       case 2:
         return (
-          'Try out different ad text to see what brings in the most customers, and learn how to ' +
-          'enhance your ads using features like ad extensions. If you run into any problems with your ' +
-          'ads, find out how to tell if they\'re running and how to resolve approval issues.'
+          <p>
+            Try out different ad text to see what brings in the most customers, and learn how to
+            enhance your ads using features like ad extensions. If you run into any problems with your
+            ads, find out how to tell if they're running and how to resolve approval issues.
+          </p>
         );
       default:
         return 'You\'re a long way from home sonny jim!';
@@ -79,9 +86,9 @@ class HorizontalTransition extends React.Component {
     const {finished, stepIndex} = this.state;
     const contentStyle = {margin: '0 16px', overflow: 'hidden'};
 
-    return (
-      <div style={contentStyle}>
-        {finished ? (
+    if (finished) {
+      return (
+        <div style={contentStyle}>
           <p>
             <a
               href="#"
@@ -93,24 +100,26 @@ class HorizontalTransition extends React.Component {
               Click here
             </a> to reset the example.
           </p>
-        ) : (
-          <div>
-            <p>{this.getStepContent(stepIndex)}</p>
-            <div style={{marginTop: 12, marginBottom: 12}}>
-              <FlatButton
-                label="Back"
-                disabled={stepIndex === 0}
-                onTouchTap={this.handlePrev}
-                style={{marginRight: 12}}
-              />
-              <RaisedButton
-                label={stepIndex === 2 ? 'Finish' : 'Next'}
-                primary={true}
-                onTouchTap={this.handleNext}
-              />
-            </div>
-          </div>
-        )}
+        </div>
+      );
+    }
+
+    return (
+      <div style={contentStyle}>
+        <div>{this.getStepContent(stepIndex)}</div>
+        <div style={{marginTop: 24, marginBottom: 12}}>
+          <FlatButton
+            label="Back"
+            disabled={stepIndex === 0}
+            onTouchTap={this.handlePrev}
+            style={{marginRight: 12}}
+          />
+          <RaisedButton
+            label={stepIndex === 2 ? 'Finish' : 'Next'}
+            primary={true}
+            onTouchTap={this.handleNext}
+          />
+        </div>
       </div>
     );
   }
@@ -119,7 +128,7 @@ class HorizontalTransition extends React.Component {
     const {loading, stepIndex} = this.state;
 
     return (
-      <div style={{width: '100%', maxWidth: 700, margin: 'auto'}}>
+      <div style={{width: '100%', maxWidth: 700, height: 350, margin: 'auto'}}>
         <Stepper activeStep={stepIndex}>
           <Step>
             <StepLabel>Select campaign settings</StepLabel>

diff --git a/src/internal/ExpandTransition.js b/src/internal/ExpandTransition.js
@@ -23,7 +23,7 @@ class ExpandTransition extends React.Component {
 
   renderChildren(children, loading) {
     if (loading) {
-      return [];
+      return ([]);
     }
 
     return React.Children.map(children, (child) => {