add opacity slider and properly debounce it

1 files changed, 48 insertions, 28 deletions

diff --git a/frontend/common/slider.component.js b/frontend/common/slider.component.js
index 70a4abd..e5dfba7 100644
--- a/frontend/common/slider.component.js
+++ b/frontend/common/slider.component.js
@@ -1,28 +1,40 @@
-import { React, Component } from 'preact'
+import React, { Component } from 'react'
+import { default as throttle } from 'lodash.throttle'
 
-const SLIDER_THROTTLE_TIME = 100
+const SLIDER_THROTTLE_TIME = 1000 / 30
 
 export default class Slider extends Component {
+  state = {
+    value: 0
+  }
+
   constructor(props){
     super(props)
     this.timeout = 0
-    this.state = {
-      value: props.value
-    }
     this.handleInput = this.handleInput.bind(this)
     this.handleRange = this.handleRange.bind(this)
+    this.onChange = throttle(props.onChange, SLIDER_THROTTLE_TIME)
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    let next_value = nextProps.value || nextProps.opt[nextProps.name]
-    if (next_value !== this.state.value) {
+  componentDidMount() {
+    let { value } = this.props
+    if (this.props.type === 'int') {
+      value = parseInt(value)
+    }
+    console.log('mount', value)
+    this.setState({ value })
+  }
+  componentDidUpdate(prevProps) {
+    let { value } = this.props
+    if (prevProps.value !== value) {
       if (this.props.type === 'int') {
-        next_value = parseInt(next_value)
+        value = parseInt(value)
       }
-      this.setState({ value: next_value })
+      console.log('update', value)
+      this.setState({ value })
     }
   }
   handleInput(e){
-    let { name, opt } = this.props
+    let { name, opt } = this.props
     let old_value = opt[name]
     let new_value = e.target.value
     if (new_value === '') {
@@ -34,31 +46,33 @@ export default class Slider extends Component {
     else if (this.props.type === 'odd') {
       new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
     }
+    else {
+      new_value = this.parseFloat(new_value)
+    }
     if (old_value !== new_value) {
       this.setState({ value: new_value })
-      this.props.onChange && this.props.onChange(new_value)
+      this.props.onChange(new_value)
     }
-    clearTimeout(this.timeout)
   }
   handleRange(e){
-    clearTimeout(this.timeout)
     let new_value = e.target.value
     if (this.props.type === 'int') {
       new_value = parseInt(new_value)
     }
-    if (this.props.type === 'odd') {
+    else if (this.props.type === 'odd') {
       new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
     }
-    if (this.props.type === 'list') {
+    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.timeout = setTimeout(() => {
-      this.props.onChange && this.props.onChange(new_value)
-    }, SLIDER_THROTTLE_TIME)
+    this.onChange(this.props.name, new_value)
   }
   render(){
-    let { name, title } = this.props
+    let { name, title } = this.props
     let value = this.state.value
     if (typeof value === 'undefined') {
       value = this.props.min
@@ -71,7 +85,7 @@ export default class Slider extends Component {
       step = 1
     } else if (this.props.type === 'list') {
       min = 0
-      max = this.props.options.length-1
+      max = this.props.options.length - 1
       step = 1
       value = this.props.options.indexOf(value)
     } else {
@@ -79,20 +93,26 @@ export default class Slider extends Component {
       text_value = parseFloat(value).toFixed(2)
     }
     return (
-      <div className='slider param'>
-        <label>
-          <span>{title || name.replace(/_/g, ' ')}</span>
-          <input type='text' value={text_value} onBlur={this.handleInput} />
-        </label>
+      <label className={this.props.error ? 'slider error' : 'slider'}>
+        <span>{title}</span>
+        <input
+          type='number'
+          min={min}
+          max={max}
+          step={step}
+          value={text_value}
+          onChange={this.handleInput}
+          onBlur={this.handleInput}
+        />
         <input
           type='range'
           min={min}
           max={max}
           step={step}
           value={value}
-          onInput={this.handleRange}
+          onChange={this.handleRange}
         />
-      </div>
+      </label>
     )
   }
 }