diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx index c25dda728..3b4bae805 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 ( - + ) } @@ -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 ( - + ) } @@ -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 ( - + ) } @@ -65,23 +57,59 @@ PureChoicesOption.PropTypes = { function PureChoicesOption( { value, onChange, name, help, choices }) { return ( - + ) } +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 ( + + ) + } +} + 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 ( -