Tabs to spaces in input fields

This commit is contained in:
Lukas Martinelli 2016-12-18 20:09:27 +01:00
parent 8e92984d48
commit 95b2dad2a3
3 changed files with 61 additions and 61 deletions

View file

@ -2,34 +2,34 @@ import React from 'react'
import inputStyle from './input.js'
class EnumField extends React.Component {
static propTypes = {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
name: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
value: React.PropTypes.string,
allowedValues: React.PropTypes.array.isRequired,
doc: React.PropTypes.string,
}
onChange(e) {
return this.props.onChange(e.target.value)
}
onChange(e) {
return this.props.onChange(e.target.value)
}
render() {
const options = this.props.allowedValues.map(val => {
return <option key={val} value={val}>{val}</option>
})
render() {
const options = this.props.allowedValues.map(val => {
return <option key={val} value={val}>{val}</option>
})
return <div style={inputStyle.property}>
<label style={inputStyle.label}>{this.props.name}</label>
<select
style={inputStyle.select}
value={this.props.value}
onChange={this.onChange.bind(this)}
>
{options}
</select>
</div>
}
return <div style={inputStyle.property}>
<label style={inputStyle.label}>{this.props.name}</label>
<select
style={inputStyle.select}
value={this.props.value}
onChange={this.onChange.bind(this)}
>
{options}
</select>
</div>
}
}
export default EnumField

View file

@ -3,9 +3,9 @@ import inputStyle from './input.js'
/*** Number fields with support for min, max and units and documentation*/
class NumberField extends React.Component {
static propTypes = {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
name: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
value: React.PropTypes.number,
default: React.PropTypes.number,
unit: React.PropTypes.string,
@ -14,28 +14,28 @@ class NumberField extends React.Component {
doc: React.PropTypes.string,
}
onChange(e) {
const value = parseFloat(e.target.value)
/*TODO: we can do range validation already here?
if(this.props.min && value < this.props.min) return
if(this.props.max && value > this.props.max) return
*/
this.props.onChange(value)
}
onChange(e) {
const value = parseFloat(e.target.value)
/*TODO: we can do range validation already here?
if(this.props.min && value < this.props.min) return
if(this.props.max && value > this.props.max) return
*/
this.props.onChange(value)
}
render() {
return <div style={inputStyle.property}>
<label style={inputStyle.label}>{this.props.name}</label>
<input
style={inputStyle.input}
type="number"
name={this.props.name}
placeholder={this.props.default}
value={this.props.value}
onChange={this.onChange.bind(this)}
/>
</div>
}
render() {
return <div style={inputStyle.property}>
<label style={inputStyle.label}>{this.props.name}</label>
<input
style={inputStyle.input}
type="number"
name={this.props.name}
placeholder={this.props.default}
value={this.props.value}
onChange={this.onChange.bind(this)}
/>
</div>
}
}
export default NumberField

View file

@ -3,31 +3,31 @@ import inputStyle from './input.js'
/*** Number fields with support for min, max and units and documentation*/
class StringField extends React.Component {
static propTypes = {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
name: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
value: React.PropTypes.string,
default: React.PropTypes.number,
doc: React.PropTypes.string,
}
onChange(e) {
const value = e.target.value
return this.props.onChange(value === "" ? null: value)
}
onChange(e) {
const value = e.target.value
return this.props.onChange(value === "" ? null: value)
}
render() {
return <div style={inputStyle.property}>
<label style={inputStyle.label}>{this.props.name}</label>
<input
style={inputStyle.input}
name={this.props.name}
placeholder={this.props.default}
value={this.props.value ? this.props.value : ""}
onChange={this.onChange.bind(this)}
/>
</div>
}
render() {
return <div style={inputStyle.property}>
<label style={inputStyle.label}>{this.props.name}</label>
<input
style={inputStyle.input}
name={this.props.name}
placeholder={this.props.default}
value={this.props.value ? this.props.value : ""}
onChange={this.onChange.bind(this)}
/>
</div>
}
}
export default StringField