From c2f0b94fb7717aa46f7da27d56bf497efaa747b1 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Tue, 18 Jul 2017 14:46:18 +0800
Subject: [web] sorting the options and minor improve ux.

---
 web/src/js/components/Modal/Option.jsx       |  21 ++-
 web/src/js/components/Modal/OptionMaster.jsx | 257 ---------------------------
 web/src/js/components/Modal/OptionModal.jsx  |   2 +-
 3 files changed, 13 insertions(+), 267 deletions(-)
 delete mode 100644 web/src/js/components/Modal/OptionMaster.jsx

(limited to 'web/src/js/components/Modal')

diff --git a/web/src/js/components/Modal/Option.jsx b/web/src/js/components/Modal/Option.jsx
index e2f6708f..1c7bc2b2 100644
--- a/web/src/js/components/Modal/Option.jsx
+++ b/web/src/js/components/Modal/Option.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import { connect } from "react-redux"
 import { update as updateOptions } from "../../ducks/options"
 import { Key } from "../../utils"
+import classnames from 'classnames'
 
 const stopPropagation = e => {
     if (e.keyCode !== Key.ESC) {
@@ -93,7 +94,7 @@ function StringSequenceOption({ value, onChange, ...props }) {
     const height = Math.max(value.length, 1)
     return <textarea
         rows={height}
-        value={value.join("\n")}
+        value={value.join('\n')}
         onChange={e => onChange(e.target.value.split("\n").filter(x => x.trim()))}
         {...props}
     />
@@ -107,7 +108,7 @@ const Options = {
     "sequence of str": StringSequenceOption,
 }
 
-function PureOption({ choices, type, value, onChange, name }) {
+function PureOption({ choices, type, value, onChange, name, error }) {
     let Opt, props = {}
     if (choices) {
         Opt = ChoicesOption;
@@ -119,13 +120,15 @@ function PureOption({ choices, type, value, onChange, name }) {
         props.className = "form-control"
     }
 
-    return <Opt
-        name={name}
-        value={value}
-        onChange={onChange}
-        onKeyDown={stopPropagation}
-        {...props}
-    />
+    return <div className={classnames({'has-error':error})}>
+                <Opt
+                    name={name}
+                    value={value}
+                    onChange={onChange}
+                    onKeyDown={stopPropagation}
+                    {...props}
+                />
+            </div>
 }
 export default connect(
     (state, { name }) => ({
diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
deleted file mode 100644
index 5befc34a..00000000
--- a/web/src/js/components/Modal/OptionMaster.jsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import classnames from 'classnames'
-import { update as updateOptions } from '../../ducks/options'
-
-PureBooleanOption.PropTypes = {
-    value: PropTypes.bool.isRequired,
-    onChange: PropTypes.func.isRequired,
-}
-
-function PureBooleanOption({ value, onChange, ...props}) {
-        return (
-                <input type="checkbox"
-                        checked={value}
-                        onChange={onChange}
-                        onMouseOver={props.onMouseEnter}
-                        onMouseLeave={props.onMouseLeave}
-                />
-        )
-}
-
-PureStringOption.PropTypes = {
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-}
-
-function PureStringOption( { value, onChange, ...props }) {
-    let onKeyDown = (e) => {e.stopPropagation()}
-    return (
-        <div className={classnames('input-group', {'has-error': props.error})}>
-            <input type="text"
-                    value={value}
-                    className='form-control'
-                    onChange={onChange}
-                    onKeyDown={onKeyDown}
-                    onFocus={props.onFocus}
-                    onBlur={props.onBlur}
-                    onMouseOver={props.onMouseEnter}
-                    onMouseLeave={props.onMouseLeave}
-            />
-        </div>
-    )
-}
-
-PureNumberOption.PropTypes = {
-    value: PropTypes.number.isRequired,
-    onChange: PropTypes.func.isRequired,
-}
-
-function PureNumberOption( {value, onChange, ...props }) {
-    let onKeyDown = (e) => {e.stopPropagation()}
-
-    return (
-            <input type="number"
-                    className="form-control"
-                    value={value}
-                    onChange={onChange}
-                    onKeyDown={onKeyDown}
-                    onFocus={props.onFocus}
-                    onBlur={props.onBlur}
-                    onMouseOver={props.onMouseEnter}
-                    onMouseLeave={props.onMouseLeave}
-            />
-    )
-}
-
-PureChoicesOption.PropTypes = {
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-}
-
-function PureChoicesOption( { value, onChange, name, choices, ...props}) {
-    return (
-            <select
-                name={name}
-                className="form-control"
-                onChange={onChange}
-                selected={value}
-                onFocus={props.onFocus}
-                onBlur={props.onBlur}
-                onMouseOver={props.onMouseEnter}
-                onMouseLeave={props.onMouseLeave}
-            >
-                { 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, value: this.props.value}
-
-        this.onFocus = this.onFocus.bind(this)
-        this.onBlur = this.onBlur.bind(this)
-        this.onKeyDown = this.onKeyDown.bind(this)
-        this.onChange = this.onChange.bind(this)
-    }
-
-    onFocus() {
-        this.setState( {focus: true, height: 3 })
-        this.props.onFocus()
-    }
-
-    onBlur() {
-        this.setState( {focus: false, height: 1})
-        this.props.onBlur()
-    }
-
-    onKeyDown(e) {
-        e.stopPropagation()
-    }
-
-    onChange(e) {
-        const value = e.target.value.split("\n")
-        this.props.onChange(e)
-        this.setState({ value })
-    }
-
-    render() {
-        const {height, value} = this.state
-        const {error, onMouseEnter, onMouseLeave} = this.props
-        return (
-            <div className={classnames('input-group', {'has-error': error})}>
-            <textarea
-                rows={height}
-                value={value}
-                className="form-control"
-                onChange={this.onChange}
-                onKeyDown={this.onKeyDown}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-            />
-            </div>
-        )
-    }
-}
-
-const OptionTypes = {
-    bool: PureBooleanOption,
-    str: PureStringOption,
-    int: PureNumberOption,
-    "optional str": PureStringOption,
-    "sequence of str": PureStringSequenceOption,
-}
-
-class OptionMaster extends Component {
-
-    constructor(props, context) {
-        super(props, context)
-        this.state = {
-                option: this.props.option,
-                name: this.props.name,
-                mousefocus: false,
-                focus: false,
-                error: false,
-        }
-        if (props.option.choices) {
-            this.WrappedComponent = PureChoicesOption
-        } else {
-            this.WrappedComponent = OptionTypes[props.option.type]
-        }
-        this.onChange = this.onChange.bind(this)
-        this.onMouseEnter = this.onMouseEnter.bind(this)
-        this.onMouseLeave = this.onMouseLeave.bind(this)
-        this.onFocus = this.onFocus.bind(this)
-        this.onBlur = this.onBlur.bind(this)
-    }
-
-    componentWillReceiveProps(nextProps) {
-        this.setState({ option: nextProps.option })
-    }
-
-    onChange(e) {
-        const { option, name } = this.state
-        const { updateOptions } = this.props
-        switch (option.type) {
-            case 'bool' :
-                updateOptions({[name]: !option.value})
-                break
-            case 'int':
-                updateOptions({[name]: parseInt(e.target.value)})
-                break
-            case 'sequence of str':
-                const value = e.target.value.split('\n')
-                updateOptions({[name]: value})
-                break
-            default:
-                updateOptions({[name]: e.target.value})
-        }
-    }
-
-    onMouseEnter() {
-        this.setState({ mousefocus: true })
-    }
-
-    onMouseLeave() {
-        this.setState({ mousefocus: false })
-    }
-
-    onFocus() {
-        this.setState({ focus: true })
-    }
-
-    onBlur() {
-        this.setState({ focus: false })
-    }
-
-    render() {
-        const { name, children, client_options } = this.props
-        const { option, focus, mousefocus } = this.state
-        const WrappedComponent = this.WrappedComponent
-        let error = (name in client_options) ? client_options[name].error : false,
-            value = (name in client_options) ? client_options[name].value : option.value
-        return (
-            <div className="row">
-                <div className="col-sm-8">
-                    {name}
-                </div>
-                <div className="col-sm-4">
-                    <WrappedComponent
-                        children={children}
-                        value={value}
-                        onChange={this.onChange}
-                        name={name}
-                        choices={option.choices}
-                        onFocus={this.onFocus}
-                        onBlur={this.onBlur}
-                        onMouseEnter={this.onMouseEnter}
-                        onMouseLeave={this.onMouseLeave}
-                        error={error}
-                    />
-                    {(focus || mousefocus) && (
-                        <div className="tooltip tooltip-bottom" role="tooltip" style={{opacity: 1}}>
-                        <div className="tooltip-inner">
-                            {option.help}
-                        </div>
-                    </div>)}
-                </div>
-            </div>
-        )
-    }
-}
-
-export default connect(
-    state => ({
-        client_options: state.ui.option
-    }),
-    {
-       updateOptions
-    }
-)(OptionMaster)
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 9b1b6a8b..5741ee8c 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -69,7 +69,7 @@ class PureOptionModal extends Component {
 
 export default connect(
     state => ({
-        options: Object.keys(state.options)
+        options: Object.keys(state.options).sort()
     }),
     {
         hideModal: modalAction.hideModal,
-- 
cgit v1.2.3