diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-09-26 14:56:02 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-09-26 14:56:02 +0200 |
| commit | a17b76ac75f506f5da6fe8adf9c36632b60d4226 (patch) | |
| tree | abb0af0c4409b830dea2ef808c146223ee973933 /frontend/common/slider.component.js | |
| parent | 2231a6e1c05b07bb7ec5906716aedec93d02429c (diff) | |
refactor to use app-rooted js imports
Diffstat (limited to 'frontend/common/slider.component.js')
| -rw-r--r-- | frontend/common/slider.component.js | 120 |
1 files changed, 0 insertions, 120 deletions
diff --git a/frontend/common/slider.component.js b/frontend/common/slider.component.js deleted file mode 100644 index 9d96b1e..0000000 --- a/frontend/common/slider.component.js +++ /dev/null @@ -1,120 +0,0 @@ -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> - ) - } -} |
