task actions in stepper

Author: ShMcK

lib/components/Page/TaskActions/index.js

@@ -1,16 +1,38 @@
 "use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
 var React = require('react');
 var Stepper_1 = require('material-ui/Stepper');
 var index_1 = require('../../index');
-var TaskActions = function (_a) {
-    var actions = _a.actions;
-    var actionsList = actions.map(function (a) {
-        return {
-            action: a.substring(0, a.indexOf('(')),
-            content: a.substring(a.indexOf('(') + 2, a.length - 2)
+var TaskActions = (function (_super) {
+    __extends(TaskActions, _super);
+    function TaskActions(props) {
+        _super.call(this, props);
+        this.state = {
+            stepIndex: 0,
         };
-    });
-    return (React.createElement(index_1.DynamicStepper, {status: actions.map(function (action) { return false; })}, actionsList.map(function (a) { return (React.createElement(Stepper_1.Step, null, React.createElement(Stepper_1.StepLabel, null, a.action), React.createElement(Stepper_1.StepContent, null, React.createElement("p", null, a.content)))); })));
-};
+    }
+    TaskActions.prototype.render = function () {
+        var _this = this;
+        var actions = this.props.actions;
+        var stepIndex = this.state.stepIndex;
+        var actionList = actions.map(function (a) {
+            var obj = {
+                action: a.substring(0, a.indexOf('(')),
+                content: a.substring(a.indexOf('(') + 2, a.length - 2)
+            };
+            if (obj.action === 'open') {
+                obj.singleLine = true;
+            }
+            return obj;
+        });
+        return (React.createElement(Stepper_1.Stepper, {activeStep: stepIndex, linear: false, orientation: 'vertical'}, actionList.map(function (a, index) { return (React.createElement(Stepper_1.Step, null, React.createElement(Stepper_1.StepButton, {onClick: function () { return _this.setState({ stepIndex: index }); }}, a.action + (a.singleLine ? ' ' + a.content : '')), React.createElement(Stepper_1.StepContent, null, a.singleLine ? ''
+            : React.createElement(index_1.Markdown, null, a.content)))); })));
+    };
+    return TaskActions;
+}(React.Component));
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TaskActions;

src/components/Page/TaskActions/index.tsx

@@ -2,32 +2,52 @@ import * as React from 'react';
 import {
   Step, Stepper, StepButton, StepContent, StepLabel
 } from 'material-ui/Stepper';
-import {DynamicStepper} from '../../index';
+import {Markdown} from '../../index';
 
-const TaskActions: React.StatelessComponent<{
+export default class TaskActions extends React.Component<{
   actions: string[]
-}> = ({actions}) => {
-
-  // TODO: sort actions with higher accuracy
-  const actionsList = actions.map(a => {
-    return {
-      action: a.substring(0, a.indexOf('(')),
-      content: a.substring(a.indexOf('(') + 2, a.length - 2)
+}, {
+  stepIndex: number
+}> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      stepIndex: 0,
     };
-  });
-
-  return (
-    <DynamicStepper status={actions.map(action => false)}>
-      {actionsList.map(a => (
-        <Step>
-          <StepLabel>{a.action}</StepLabel>
-          <StepContent>
-            <p>{a.content}</p>
-          </StepContent>
-        </Step>
-      ))}
-    </DynamicStepper>
-  );
-};
-
-export default TaskActions;
+  }
+  render() {
+    const {actions} = this.props;
+    const {stepIndex} = this.state;
+    // TODO: sort actions with higher accuracy
+    const actionList = actions.map(a => {
+      const obj: Builder.ActionObject = {
+        action: a.substring(0, a.indexOf('(')),
+        content: a.substring(a.indexOf('(') + 2, a.length - 2)
+      };
+      if (obj.action === 'open') {
+        obj.singleLine = true;
+      }
+      return obj;
+    });
+    return (
+      <Stepper
+        activeStep={stepIndex}
+        linear={false}
+        orientation='vertical'
+      >
+        {actionList.map((a, index) => (
+          <Step>
+            <StepButton onClick={() => this.setState({stepIndex: index})}>
+            {a.action + (a.singleLine ? ' ' + a.content : '')}
+            </StepButton>
+            <StepContent>
+              {a.singleLine ? ''
+                : <Markdown>{a.content}</Markdown>
+              }
+            </StepContent>
+          </Step>
+        ))}
+      </Stepper>
+    );
+  }
+}

src/typings.d.ts

@@ -25,4 +25,10 @@ declare namespace Builder {
     windowToggle: boolean;
     alert: CR.Alert;
   }
+
+  interface ActionObject {
+    action: string;
+    content: string;
+    singleLine?: boolean;
+  }
 }