[web] Add PureStringSequenceOption type to OptionMaster.jsx

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>
         )
 }
 
@@ -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>
     )
 }
 
@@ -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>
     )
 }
 
@@ -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>
     )
 }
 
+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,7 +133,11 @@ export default function OptionMaster({option, name, updateOptions, ...props}) {
         }
     }
     return (
-        <div className="menu-entry">
+        <div className="row">
+            <div className="col-sm-8">
+                {name}
+            </div>
+            <div className="col-sm-4">
                 <WrappedComponent
                     children={props.children}
                     value={option.value}
@@ -115,5 +147,6 @@ export default function OptionMaster({option, name, updateOptions, ...props}) {
                     choices={option.choices}
                 />
             </div>
+        </div>
     )
 }

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) => {
@@ -42,9 +43,9 @@ class PureOptionModal extends Component {
                             })
                     }
                     </div>
+                </div>
 
                 <div className="modal-footer">
-                    <button type="button" className="btn btn-primary">Save Changes</button>
                 </div>
             </div>
         )