Merge pull request #3132 from namKolo/master

[Stepper] Add new component

docs/src/app/AppRoutes.jsx

@@ -62,6 +62,8 @@ import Contributing from './components/pages/discover-more/Contributing';
 import Showcase from './components/pages/discover-more/Showcase';
 import RelatedProjects from './components/pages/discover-more/RelatedProjects';
 
+import StepperPage from './components/pages/components/Stepper/Page';
+
 /**
  * Routes: https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md
  *
@@ -121,6 +123,7 @@ const AppRoutes = (
       <Route path="svg-icon" component={SvgIconPage} />
       <Route path="slider" component={SliderPage} />
       <Route path="snackbar" component={SnackbarPage} />
+      <Route path="stepper" component={StepperPage} />
       <Route path="subheader" component={SubheaderPage} />
       <Route path="table" component={TablePage} />
       <Route path="tabs" component={TabsPage} />

docs/src/app/components/AppLeftNav.jsx

@@ -237,6 +237,7 @@ const AppLeftNav = React.createClass({
                 ]}
               />,
               <ListItem primaryText="Snackbar" value="/components/snackbar" />,
+              <ListItem primaryText="Stepper" value="/components/stepper" />,
               <ListItem primaryText="Subheader" value="/components/subheader" />,
               <ListItem primaryText="Table" value="/components/table" />,
               <ListItem primaryText="Tabs" value="/components/tabs" />,

docs/src/app/components/pages/components/Stepper/HorizontalLinearStepper.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+
+import Stepper from 'material-ui/lib/Stepper/Stepper';
+import Step from 'material-ui/Stepper/HorizontalStep';
+
+import Paper from 'material-ui/lib/paper';
+import FontIcon from 'material-ui/lib/font-icon';
+import RaisedButton from 'material-ui/lib/raised-button';
+import FlatButton from 'material-ui/lib/flat-button';
+
+const HorizontalStepper = React.createClass({
+  getInitialState() {
+    return {
+      activeStepIndex: -1,
+      lastActiveStepIndex: 0,
+    };
+  },
+
+  selectStep(stepIndex) {
+    const {
+      lastActiveStepIndex,
+      activeStepIndex,
+
+    } = this.state;
+
+    if (stepIndex > lastActiveStepIndex) {
+      return;
+    }
+
+    this.setState({
+      activeStepIndex: stepIndex,
+      lastActiveStepIndex: Math.max(lastActiveStepIndex, activeStepIndex),
+    });
+  },
+
+  updateCompletedSteps(stepIndex) {
+    return stepIndex < this.state.lastActiveStepIndex;
+  },
+
+  createIcon(step) {
+    if (step.props.isCompleted) {
+      return (
+        <FontIcon className="material-icons" style={{fontSize: 14}}>
+          done
+        </FontIcon>
+      );
+    }
+
+    return <span>{step.props.orderStepLabel}</span>;
+  },
+
+  continue() {
+    const {
+      activeStepIndex,
+      lastActiveStepIndex,
+    } = this.state;
+
+    this.setState({
+      activeStepIndex: activeStepIndex + 1,
+      lastActiveStepIndex: Math.max(lastActiveStepIndex, activeStepIndex + 1),
+    });
+  },
+
+  render() {
+    return (
+      <Paper style={{width: 500, margin: 'auto'}}>
+        <div style={{
+          textAlign: 'center',
+          padding: 10,
+          fontSize: 20,
+        }}
+        >
+          How to say goodbye to your 'css'
+        </div>
+        <Stepper
+          horizontal={true}
+          activeStepIndex={this.state.activeStepIndex}
+          onStepHeaderTouch={this.selectStep}
+          updateCompletedStatusOfStep={this.updateCompletedSteps}
+          createIcon={this.createIcon}
+        >
+          <Step
+            orderStepLabel="1"
+            stepLabel="Spending all your time on coding"
+            controlButtonsGroup={[
+              <RaisedButton key={0} label="Continue" primary={true}
+                onClick={this.continue}
+              />,
+              <FlatButton key={1} label="Cancel" />,
+            ]}
+          >
+            <div style={{padding: 20}}>
+              Don't take your time on your 'css'. And then you will see what will happen.
+            </div>
+          </Step>
+          <Step
+            orderStepLabel="2"
+            stepLabel="Be poor 'programmer' with your 'css'"
+            controlButtonsGroup={[
+              <RaisedButton key={0} label="Continue" primary={true}
+                onClick={this.continue}
+              />,
+              <FlatButton key={1} label="Cancel" />,
+            ]}
+          >
+            <div style={{padding: 20}}>
+              You don't update your knowledge and you will be out of date. You no longer understand
+              your 'css'. Then you will see what will happen
+            </div>
+          </Step>
+
+          <Step
+            orderStepLabel="3"
+            stepLabel="Say goodbye"
+            controlButtonsGroup={[
+              <RaisedButton key={0} label="Finish" primary={true}
+                onClick={this.continue}
+              />,
+              <FlatButton key={1} label="Cancel" />,
+            ]}
+          >
+            <div style={{padding: 20}}>
+              Good bye
+            </div>
+          </Step>
+        </Stepper>
+      </Paper>
+    );
+  },
+});
+
+export default HorizontalStepper;

docs/src/app/components/pages/components/Stepper/Page.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import stepperReadmeText from './README';
+
+import VerticalLinearStepper from './VerticalLinearStepper';
+import VerticalNonLinearStepper from './VerticalNonLinearStepper';
+import VerticalLinearStepperWithOptionalStep from './VerticalLinearStepperWithOptionalStep';
+import VerticalLinearStepperCode from '!raw!./VerticalLinearStepper';
+import VerticalLinearStepperWithOptionalStepCode from '!raw!./VerticalLinearStepperWithOptionalStep';
+import VerticalNonLinearStepperCode from '!raw!./VerticalNonLinearStepper';
+
+import HorizontalLinearStepper from './HorizontalLinearStepper';
+import HorizontalLinearStepperCode from '!raw!./HorizontalLinearStepper';
+
+import stepperCode from '!raw!material-ui/lib/Stepper/Stepper';
+import verticalStepCode from '!raw!material-ui/lib/Stepper/VerticalStep';
+import horizontalStepCode from '!raw!material-ui/lib/Stepper/HorizontalStep';
+
+
+const descriptions = {
+  verticalLinearStepper: 'As for the vertical linear stepper, it requires steps be completed in specific order',
+  verticalLinearStepperWithOptionalStep: 'Set the `optional` property to `true` for optional steps.'
+   + 'Pass a custom label view through `stepLabel` property to show'
+   + ' the difference between optional step and normal step.',
+  verticalNonLinearStepper: 'As for the vertical non linear stepper, steps can be completed in any order.',
+  horizontalLinearStepper: 'As for the horizontal linear stepper, it is the same with vertical linear stepper.',
+};
+
+
+const styles = {
+  stepperWrapper: {
+    marginBottom: 50,
+  },
+};
+
+const StepperPage = () => (
+  <div>
+    <MarkdownElement text={stepperReadmeText} />
+    <CodeExample
+      title="Vertical linear step example"
+      description={descriptions.verticalLinearStepper}
+      code={VerticalLinearStepperCode}
+    >
+      <div style={styles.stepperWrapper}>
+        <VerticalLinearStepper />
+      </div>
+    </CodeExample>
+
+    <CodeExample
+      title="Optional step example"
+      description={descriptions.verticalLinearStepperWithOptionalStep}
+      code={VerticalLinearStepperWithOptionalStepCode}
+    >
+      <div style={styles.stepperWrapper}>
+        <VerticalLinearStepperWithOptionalStep />
+      </div>
+    </CodeExample>
+
+    <CodeExample
+      title="Non linear example"
+      description={descriptions.verticalNonLinearStepper}
+      code={VerticalNonLinearStepperCode}
+    >
+      <div style={styles.stepperWrapper}>
+        <VerticalNonLinearStepper />
+      </div>
+    </CodeExample>
+
+    <CodeExample
+      title="Horizontal linear step example"
+      description={descriptions.horizontalLinearStepper}
+      code={HorizontalLinearStepperCode}
+    >
+      <div style={styles.stepperWrapper}>
+        <HorizontalLinearStepper />
+      </div>
+    </CodeExample>
+
+    <PropTypeDescription code={stepperCode} />
+    <PropTypeDescription code={verticalStepCode} />
+    <PropTypeDescription code={horizontalStepCode} />
+  </div>
+);
+
+export default StepperPage;

docs/src/app/components/pages/components/Stepper/README.md

@@ -0,0 +1,7 @@
+## Stepper
+A [stepper](https://www.google.com/design/spec/components/steppers.html)
+is an interface for users to show numbered steps or for navigation. It just provides
+views, not handling logic (when the step is active, or when the step is completed, or how to move
+to the next step). We delegate that to the parent component. We just pass `activeStepIndex`
+to show which step is active.
+### Examples

docs/src/app/components/pages/components/Stepper/VerticalLinearStepper.jsx

@@ -0,0 +1,137 @@
+import React from 'react';
+
+import Stepper from 'material-ui/lib/Stepper/Stepper';
+import Step from 'material-ui/Stepper/VerticalStep';
+
+import Paper from 'material-ui/lib/paper';
+import FontIcon from 'material-ui/lib/font-icon';
+import RaisedButton from 'material-ui/lib/raised-button';
+import FlatButton from 'material-ui/lib/flat-button';
+
+const VerticalLinearStepper = React.createClass({
+  getInitialState() {
+    return {
+      activeStepIndex: -1,
+      lastActiveStepIndex: 0,
+    };
+  },
+
+  selectStep(stepIndex) {
+    const {
+      lastActiveStepIndex,
+      activeStepIndex,
+
+    } = this.state;
+
+    if (stepIndex > lastActiveStepIndex) {
+      return;
+    }
+
+    this.setState({
+      activeStepIndex: stepIndex,
+      lastActiveStepIndex: Math.max(lastActiveStepIndex, activeStepIndex),
+    });
+  },
+
+  updateCompletedSteps(stepIndex) {
+    return stepIndex < this.state.lastActiveStepIndex;
+  },
+
+  continue() {
+    const {
+      activeStepIndex,
+      lastActiveStepIndex,
+    } = this.state;
+
+    this.setState({
+      activeStepIndex: activeStepIndex + 1,
+      lastActiveStepIndex: Math.max(lastActiveStepIndex, activeStepIndex + 1),
+    });
+  },
+
+  createIcon(step) {
+    if (step.props.isCompleted) {
+      return (
+        <FontIcon className="material-icons" style={{fontSize: 14}}>
+          done
+        </FontIcon>
+      );
+    }
+
+    return <span>{step.props.orderStepLabel}</span>;
+  },
+
+  render() {
+    return (
+      <Paper style={{width: 500, margin: 'auto'}}>
+        <div style={{
+          textAlign: 'center',
+          padding: 10,
+          fontSize: 20,
+        }}
+        >
+          How to find the real "css" of your life
+        </div>
+        <Stepper
+          activeStepIndex={this.state.activeStepIndex}
+          onStepHeaderTouch={this.selectStep}
+          updateCompletedStatusOfStep={this.updateCompletedSteps}
+          createIcon={this.createIcon}
+        >
+          <Step
+            orderStepLabel="1"
+            stepLabel="Stop coding"
+            controlButtonsGroup={[
+              <RaisedButton key={0} label="Continue" primary={true}
+                onClick={this.continue}
+              />,
+              <FlatButton key={1} label="Cancel" />,
+            ]}
+          >
+            <div>
+              If you code everyday, you may just know css for web not for your life.
+              So stoping coding first.<br></br>
+              If you agree, let 's press Continue
+            </div>
+          </Step>
+          <Step
+            orderStepLabel="2"
+            stepLabel="Get away your computer"
+            controlButtonsGroup={[
+              <RaisedButton key={0} label="Continue" primary={true}
+                onClick={this.continue}
+              />,
+              <FlatButton key={1} label="Cancel" />,
+            ]}
+          >
+            <div>
+              The important thing is getting away your computer. If you follow
+              the step 1, but you should still sit in front of the computer, you
+              can't find <i>destination css</i> for your life. <br></br>
+              So if you agree, let's press continue
+            </div>
+          </Step>
+
+          <Step
+            orderStepLabel="3"
+            stepLabel="Finally, go out and start a new journey"
+            controlButtonsGroup={[
+              <RaisedButton key={0} label="Finish" primary={true}
+                onClick={this.continue}
+              />,
+              <FlatButton key={1} label="Cancel" />,
+            ]}
+          >
+            <div style={{height: 50}}>
+              Start your new journey in real life and find your real "css" for your
+              life. Hope you find out soon.
+              Press Finish if you find out.
+            </div>
+          </Step>
+        </Stepper>
+      </Paper>
+    );
+  },
+});
+
+export default VerticalLinearStepper;