blob: 9d96b1edeadb5377322b4f7d666b48a760b42210 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import React, { Component } from 'react'
import { default as throttle } from 'lodash.throttle'
const SLIDER_THROTTLE_TIME = 1000 / 30
export default class Slider extends Component {
state = {
value: 0
}
constructor(props){
super(props)
this.timeout = 0
this.handleInput = this.handleInput.bind(this)
this.handleRange = this.handleRange.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.onChange = throttle(props.onChange, SLIDER_THROTTLE_TIME)
}
componentDidMount() {
let { value } = this.props
if (this.props.type === 'int') {
value = parseInt(value)
}
this.setState({ value })
}
componentDidUpdate(prevProps) {
let { value } = this.props
if (prevProps.value !== value) {
if (this.props.type === 'int') {
value = parseInt(value)
}
this.setState({ value })
}
}
handleInput(e){
let { name } = this.props
let new_value = e.target.value
if (new_value === '') {
new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2
}
else if (this.props.type === 'int') {
new_value = parseInt(new_value)
}
else if (this.props.type === 'odd') {
new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
}
else {
new_value = parseFloat(new_value)
}
if (this.state.value !== new_value) {
this.setState({ value: new_value })
this.props.onChange(this.props.name, new_value)
}
}
handleKeyDown(e) {
console.log(e.keyCode)
}
handleRange(e){
let { value: new_value } = e.target
if (this.props.type === 'int') {
new_value = parseInt(new_value)
}
else if (this.props.type === 'odd') {
new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
}
else if (this.props.type === 'list') {
new_value = this.props.options[new_value] || this.props.options[0]
}
else {
new_value = parseFloat(new_value)
}
this.setState({ value: new_value })
this.onChange(this.props.name, new_value)
}
render(){
let { name, title } = this.props
let value = this.state.value
if (typeof value === 'undefined') {
value = this.props.min
}
let text_value = value
let step;
let min = this.props.min || 0
let max = this.props.max || 0
if (this.props.type === 'int') {
step = 1
} else if (this.props.type === 'list') {
min = 0
max = this.props.options.length - 1
step = 1
value = this.props.options.indexOf(value)
} else {
step = (this.props.max - this.props.min) / 100
text_value = parseFloat(value).toFixed(2)
}
return (
<label className={this.props.error ? 'slider error' : 'slider'}>
<span>{title}</span>
<input
type='number'
min={min}
max={max}
step={step}
value={text_value}
onKeyDown={this.handleKeyDown}
onChange={this.handleInput}
onBlur={this.handleInput}
/>
<input
type='range'
min={min}
max={max}
step={step}
value={value}
onChange={this.handleRange}
/>
</label>
)
}
}
|
