summaryrefslogtreecommitdiff
path: root/frontend/common/slider.component.js
diff options
context:
space:
mode:
authorJules Laplace <julescarbon@gmail.com>2020-09-26 14:56:02 +0200
committerJules Laplace <julescarbon@gmail.com>2020-09-26 14:56:02 +0200
commita17b76ac75f506f5da6fe8adf9c36632b60d4226 (patch)
treeabb0af0c4409b830dea2ef808c146223ee973933 /frontend/common/slider.component.js
parent2231a6e1c05b07bb7ec5906716aedec93d02429c (diff)
refactor to use app-rooted js imports
Diffstat (limited to 'frontend/common/slider.component.js')
-rw-r--r--frontend/common/slider.component.js120
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>
- )
- }
-}