outline hint and task action forms

Author: ShMcK

lib/components/Page/Hints/index.js

@@ -21,7 +21,7 @@ var actions_1 = require('../../../actions');
 var TextField_1 = require('material-ui/TextField');
 var styles = {
     text: {
-        margin: '10px',
+        margin: '10px 15px',
     },
 };
 var Hints = (function (_super) {

lib/components/Page/TaskActions/index.js

@@ -18,24 +18,59 @@ var React = require('react');
 var react_redux_1 = require('react-redux');
 var Stepper_1 = require('material-ui/Stepper');
 var index_1 = require('../../index');
-var AddButton_1 = require('../AddButton');
 var task_object_1 = require('./task-object');
 var actions_1 = require('../../../actions');
+var TextField_1 = require('material-ui/TextField');
+var SelectField_1 = require('material-ui/SelectField');
+var MenuItem_1 = require('material-ui/MenuItem');
+var styles = {
+    form: {
+        margin: '10px 15px',
+        display: 'inline-block',
+    },
+    select: {
+        width: 150,
+    },
+};
 var TaskActions = (function (_super) {
     __extends(TaskActions, _super);
     function TaskActions(props) {
         _super.call(this, props);
         this.state = {
             stepIndex: 0,
+            as: {
+                action: null,
+                content: '',
+            }
         };
     }
+    TaskActions.prototype.handleSelect = function (event, index, value) {
+        this.setState({
+            stepIndex: this.state.stepIndex,
+            as: {
+                action: value,
+                content: this.state.as.content
+            }
+        });
+    };
+    TaskActions.prototype.handleText = function (event) {
+        console.log(event);
+        this.setState({
+            stepIndex: this.state.stepIndex,
+            as: {
+                action: this.state.as.action,
+                content: event.target.value,
+            }
+        });
+    };
     TaskActions.prototype.render = function () {
         var _this = this;
         var _a = this.props, actions = _a.actions, addAction = _a.addAction;
         var stepIndex = this.state.stepIndex;
         var actionList = actions.map(function (a) { return task_object_1.default(a); });
-        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, '```js\n' + a.content + '\n```')))); }), React.createElement(AddButton_1.default, {callback: addAction.bind(this, 'test(`test`)')})));
+        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, as: _this.state.as }); }}, a.action + (a.singleLine ? ' ' + a.content : '')), React.createElement(Stepper_1.StepContent, null, a.singleLine ? ''
+            : React.createElement(index_1.Markdown, null, '```js\n' + a.content + '\n```')))); }), React.createElement("span", {style: styles.form}, React.createElement(SelectField_1.default, {value: this.state.as.action, onChange: this.handleSelect.bind(this), style: styles.select}, React.createElement(MenuItem_1.default, {value: 'open', primaryText: 'open'}), React.createElement(MenuItem_1.default, {value: 'set', primaryText: 'set'}), React.createElement(MenuItem_1.default, {value: 'set', primaryText: 'insert'})), React.createElement(TextField_1.default, {hintText: 'Content', value: this.state.as.content, onChange: this.handleText.bind(this)}))));
     };
     TaskActions = __decorate([
         react_redux_1.connect(null, function (dispatch) {

src/components/Page/Hints/index.tsx

@@ -8,7 +8,7 @@ import TextField from 'material-ui/TextField';
 
 const styles = {
   text: {
-    margin: '10px',
+    margin: '10px 15px',
   },
 };
 

src/components/Page/TaskActions/index.tsx

@@ -7,6 +7,19 @@ import {Markdown} from '../../index';
 import AddButton from '../AddButton';
 import getTaskObject from './task-object';
 import {tutorialActionAdd} from '../../../actions';
+import TextField from 'material-ui/TextField';
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
+
+const styles = {
+  form: {
+    margin: '10px 15px',
+    display: 'inline-block',
+  },
+  select: {
+    width: 150,
+  },
+};
 
 @connect(null, dispatch => {
   return {
@@ -16,14 +29,37 @@ import {tutorialActionAdd} from '../../../actions';
 export default class TaskActions extends React.Component<{
   actions: string[], taskPosition: number, addAction?: any
 }, {
-  stepIndex: number
+  stepIndex: number, as: {action: string, content: string}
 }> {
   constructor(props) {
     super(props);
     this.state = {
       stepIndex: 0,
+      as: {
+        action: null,
+        content: '',
+      }
     };
   }
+  handleSelect(event, index, value) {
+    this.setState({
+      stepIndex: this.state.stepIndex,
+      as: {
+        action: value,
+        content: this.state.as.content
+      }
+    });
+  }
+  handleText(event) {
+    console.log(event);
+    this.setState({
+      stepIndex: this.state.stepIndex,
+      as: {
+        action: this.state.as.action,
+        content: event.target.value,
+      }
+    });
+  }
   render() {
     const {actions, addAction} = this.props;
     const {stepIndex} = this.state;
@@ -37,7 +73,9 @@ export default class TaskActions extends React.Component<{
       >
         {actionList.map((a, index) => (
           <Step>
-            <StepButton onClick={() => this.setState({stepIndex: index})}>
+            <StepButton onClick={() => this.setState({
+              stepIndex: index, as: this.state.as}
+            )}>
             {a.action + (a.singleLine ? ' ' + a.content : '')}
             </StepButton>
             <StepContent>
@@ -47,7 +85,22 @@ export default class TaskActions extends React.Component<{
             </StepContent>
           </Step>
         ))}
-        <AddButton callback={addAction.bind(this, 'test(`test`)')}/>
+        <span style={styles.form}>
+          <SelectField
+            value={this.state.as.action}
+            onChange={this.handleSelect.bind(this)}
+            style={styles.select}
+          >
+            <MenuItem value={'open'} primaryText='open' />
+            <MenuItem value={'set'} primaryText='set' />
+            <MenuItem value={'set'} primaryText='insert' />
+          </SelectField>
+          <TextField
+            hintText='Content'
+            value={this.state.as.content}
+            onChange={this.handleText.bind(this)}
+          />
+        </span>
       </Stepper>
     );
   }