[web] Add PureStringSequenceOption type to OptionMaster.jsx

2 files changed, 82 insertions, 48 deletions

diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
index c25dda72..3b4bae80 100644
--- a/web/src/js/components/Modal/OptionMaster.jsx
+++ b/web/src/js/components/Modal/OptionMaster.jsx
@@ -1,3 +1,4 @@
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 PureBooleanOption.PropTypes = {
@@ -5,16 +6,13 @@ PureBooleanOption.PropTypes = {
     onChange: PropTypes.func.isRequired,
 }
 
-function PureBooleanOption({ value, onChange, name, help}) {
+function PureBooleanOption({ value, onChange, help}) {
         return (
-                <label>
-                    { name }
-                    <input type="checkbox"
-                            checked={value}
-                            onChange={onChange}
-                            title={help}
-                    />
-                </label>
+                <input type="checkbox"
+                        checked={value}
+                        onChange={onChange}
+                        title={help}
+                />
         )
 }
 
@@ -23,18 +21,15 @@ PureStringOption.PropTypes = {
     onChange: PropTypes.func.isRequired,
 }
 
-function PureStringOption( { value, onChange, name, help }) {
+function PureStringOption( { value, onChange, help }) {
     let onKeyDown = (e) => {e.stopPropagation()}
     return (
-            <label>
-                { name }
-                <input type="text"
-                        value={value}
-                        onChange={onChange}
-                        title={help}
-                        onKeyDown={onKeyDown}
-                />
-            </label>
+            <input type="text"
+                    value={value}
+                    onChange={onChange}
+                    title={help}
+                    onKeyDown={onKeyDown}
+            />
     )
 }
 
@@ -43,18 +38,15 @@ PureNumberOption.PropTypes = {
     onChange: PropTypes.func.isRequired,
 }
 
-function PureNumberOption( {value, onChange, name, help }) {
+function PureNumberOption( {value, onChange, help }) {
     let onKeyDown = (e) => {e.stopPropagation()}
     return (
-            <label>
-                { name }
-                <input type="number"
-                        value={value}
-                        onChange={onChange}
-                        title={help}
-                        onKeyDown={onKeyDown}
-                />
-            </label>
+            <input type="number"
+                    value={value}
+                    onChange={onChange}
+                    title={help}
+                    onKeyDown={onKeyDown}
+            />
     )
 }
 
@@ -65,23 +57,59 @@ PureChoicesOption.PropTypes = {
 
 function PureChoicesOption( { value, onChange, name, help, choices }) {
     return (
-            <label htmlFor="">
-                { name }
-                <select name={name} onChange={onChange} title={help} selected={value}>
-                    { choices.map((choice, index) => (
-                        <option key={index} value={choice}> {choice} </option>
-                    ))}
-                </select>
-            </label>
+            <select name={name} onChange={onChange} title={help} selected={value}>
+                { choices.map((choice, index) => (
+                    <option key={index} value={choice}> {choice} </option>
+                ))}
+            </select>
     )
 }
 
+class PureStringSequenceOption extends Component {
+    constructor(props, context) {
+        super(props, context)
+        this.state = { height: 1, focus: false }
+
+        this.onFocus = this.onFocus.bind(this)
+        this.onBlur = this.onBlur.bind(this)
+        this.onKeyDown = this.onKeyDown.bind(this)
+    }
+
+    onFocus() {
+        this.setState( {focus: true, height: 3 })
+    }
+
+    onBlur() {
+        this.setState( {focus: false, height: 1})
+    }
+
+    onKeyDown(e) {
+        e.stopPropagation()
+    }
+
+    render() {
+        const {value, onChange, help} = this.props
+        const {height, focus} = this.state
+        return (
+            <textarea
+                rows={height}
+                value={value}
+                onChange={onChange}
+                title={help}
+                onKeyDown={this.onKeyDown}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+            />
+        )
+    }
+}
+
 const OptionTypes = {
     bool: PureBooleanOption,
     str: PureStringOption,
     int: PureNumberOption,
     "optional str": PureStringOption,
-    "sequence of str": PureStringOption,
+    "sequence of str": PureStringSequenceOption,
 }
 
 export default function OptionMaster({option, name, updateOptions, ...props}) {
@@ -105,15 +133,20 @@ export default function OptionMaster({option, name, updateOptions, ...props}) {
         }
     }
     return (
-        <div className="menu-entry">
-            <WrappedComponent
-                children={props.children}
-                value={option.value}
-                onChange={onChange}
-                name={name}
-                help={option.help}
-                choices={option.choices}
-            />
+        <div className="row">
+            <div className="col-sm-8">
+                {name}
+            </div>
+            <div className="col-sm-4">
+                <WrappedComponent
+                    children={props.children}
+                    value={option.value}
+                    onChange={onChange}
+                    name={name}
+                    help={option.help}
+                    choices={option.choices}
+                />
+            </div>
         </div>
     )
 }
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index ef3a224a..ec59fa29 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -28,6 +28,7 @@ class PureOptionModal extends Component {
                 </div>
 
                 <div className="modal-body">
+                    <div className="container-fluid">
                     {
                         Object.keys(options).sort()
                             .map((key, index) => {
@@ -41,10 +42,10 @@ class PureOptionModal extends Component {
                                     />)
                             })
                     }
+                    </div>
                 </div>
 
                 <div className="modal-footer">
-                    <button type="button" className="btn btn-primary">Save Changes</button>
                 </div>
             </div>
         )