diff options
Diffstat (limited to 'app/client/common')
| -rw-r--r-- | app/client/common/index.js | 5 | ||||
| -rw-r--r-- | app/client/common/numberInput.component.js | 50 | ||||
| -rw-r--r-- | app/client/common/selectGroup.component.js | 67 | ||||
| -rw-r--r-- | app/client/common/textInput.component.js | 7 |
4 files changed, 125 insertions, 4 deletions
diff --git a/app/client/common/index.js b/app/client/common/index.js index 3981fa7..eeb8bfc 100644 --- a/app/client/common/index.js +++ b/app/client/common/index.js @@ -8,11 +8,13 @@ import Gallery from './gallery.component' import Group from './group.component' import Header from './header.component' import Loading from './loading.component' +import NumberInput from './numberInput.component' import Param from './param.component' import ParamGroup from './paramGroup.component' import Player from './player.component' import Progress from './progress.component' import Select from './select.component' +import SelectGroup from './selectGroup.component' import Slider from './slider.component' import TextInput from './textInput.component' import * as Views from './views' @@ -23,6 +25,7 @@ export { FolderList, FileList, FileRow, FileUpload, Gallery, Player, Group, ParamGroup, Param, - TextInput, Slider, Select, Button, Checkbox, + TextInput, NumberInput, + Slider, Select, SelectGroup, Button, Checkbox, CurrentTask, }
\ No newline at end of file diff --git a/app/client/common/numberInput.component.js b/app/client/common/numberInput.component.js new file mode 100644 index 0000000..43f9878 --- /dev/null +++ b/app/client/common/numberInput.component.js @@ -0,0 +1,50 @@ +import { h, Component } from 'preact' + +class NumberInput extends Component { + constructor(props){ + super(props) + this.state = { value: null, changed: false } + this.handleInput = this.handleInput.bind(this) + this.handleKeydown = this.handleKeydown.bind(this) + } + handleInput(e){ + this.setState({ + value: e.target.value, + changed: true, + }) + this.props.onInput && this.props.onInput(e.target.value, e.target.name) + this.props.onChange && this.props.onInput(e.target.name, e.target.value) + } + handleKeydown(e){ + if (e.keyCode === 13) { + this.setState({ + value: e.target.value, + changed: false, + }) + this.props.onSave && this.props.onSave(e.target.value, e.target.name) + } + } + render() { + return ( + <div className='numberInput param'> + <label> + <span>{this.props.title}</span> + <input + type={'number'} + name={this.props.name || 'number'} + value={this.state.changed ? this.state.value : this.props.value} + onInput={this.handleInput} + onKeydown={this.handleKeydown} + placeholder={this.props.placeholder} + autofocus={this.props.autofocus} + min={this.props.min} + max={this.props.max} + step={this.props.step || this.props.type === 'int' ? 1 : 0.01} + /> + </label> + </div> + ) + } +} + +export default NumberInput diff --git a/app/client/common/selectGroup.component.js b/app/client/common/selectGroup.component.js new file mode 100644 index 0000000..5c1af51 --- /dev/null +++ b/app/client/common/selectGroup.component.js @@ -0,0 +1,67 @@ +import { h, Component } from 'preact' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' + +class SelectGroup extends Component { + constructor(props){ + super(props) + this.handleChange = this.handleChange.bind(this) + } + handleChange(e){ + clearTimeout(this.timeout) + let new_value = e.target.value + if (new_value === 'PLACEHOLDER') return + this.props.onChange && this.props.onChange(this.props.name, new_value) + } + render() { + const currentValue = this.props.live ? this.props.opt[this.props.name] : this.props.value + let lastValue + const options = (this.props.options || []).map((group, i) => { + const groupName = group.name + const children = group.options.map(key => { + let name = key.length < 2 ? key.toUpperCase() : key + name = name.replace(/_/g, ' ') + let value = key + lastValue = value + return ( + <option value={value} key={value}> + {name} + </option> + ) + }) + return ( + <optgroup label={groupName} key={groupName}> + {children} + </optgroup> + ) + }) + return ( + <div className='select param'> + <label> + <span>{this.props.title}</span> + <select + onChange={this.handleChange} + value={currentValue || lastValue} + > + {this.props.placeholder && <option value="PLACEHOLDER">{this.props.placeholder}</option>} + {options} + </select> + </label> + {this.props.children} + </div> + ) + } +} + +function capitalize(s){ + return (s || "").replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); }); +} + +const mapStateToProps = (state, props) => ({ + opt: props.opt || state.live.opt, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(SelectGroup) diff --git a/app/client/common/textInput.component.js b/app/client/common/textInput.component.js index a3739d4..44e1349 100644 --- a/app/client/common/textInput.component.js +++ b/app/client/common/textInput.component.js @@ -12,7 +12,7 @@ class TextInput extends Component { value: e.target.value, changed: true, }) - this.props.onInput && this.props.onInput(e.target.value) + this.props.onInput && this.props.onInput(e.target.value, e.target.name) } handleKeydown(e){ if (e.keyCode === 13) { @@ -20,7 +20,7 @@ class TextInput extends Component { value: e.target.value, changed: false, }) - this.props.onSave && this.props.onSave(e.target.value) + this.props.onSave && this.props.onSave(e.target.value, e.target.name) } } render() { @@ -29,7 +29,8 @@ class TextInput extends Component { <label> <span>{this.props.title}</span> <input - type='text' + type={this.props.type || 'text'} + name={this.props.name || 'text'} value={this.state.changed ? this.state.value : this.props.value} onInput={this.handleInput} onKeydown={this.handleKeydown} |