make ranges more clear
@@ -44,11 +44,12 @@ class RangeItem extends Component {
}
render () {
- const { onChange, onDelete } = this.props
+ const { last, onChange, onDelete } = this.props
const { min, max, errorMin, errorMax } = this.state
return (
- <span style={{ marginRight: 48 }}>
+ <span style={{ marginRight: 32 }}>
+ <span style={{ marginRight: 22 }}>
<DebouncedTextField
style={{ width: 35, marginRight: 4 }}
floatingLabelText="min"
@@ -93,6 +94,8 @@ class RangeItem extends Component {
<ActionDeleteIcon />
</IconButton>
</span>
+ { !last && <i>or</i> }
+ </span>
)
}
}
@@ -136,6 +139,7 @@ class Ranges extends Component {
key={'range' + i}
min={min}
max={max}
+ last={i === ranges.length - 1}
onDelete={() => {
const newState = ranges.filter((r, j) => i !== j)
this.setState({ ranges: newState.length > 0 ? newState : [['', '']] })
