@imposium-hub/components 1.32.1 → 1.32.3

package/components/assets/AssetsTableDropzone.tsx

@@ -5,6 +5,7 @@ import { useDrop, DropTargetMonitor } from 'react-dnd';
 interface IAssetsTableDropzoneProps {
     onDrop : (i : any, monitor : DropTargetMonitor) => void;
     children : any;
+    className ? : string;
     disable? : boolean;
 }
 
@@ -22,7 +23,7 @@ const AssetsTableDropzone : React.FC<IAssetsTableDropzoneProps> = (p : IAssetsTa
         })
     });
 
-    return (<div ref={(!p.disable) ? dropRef : undefined}>{p.children}</div>);
+    return (<div className = {p.className || ''} ref={(!p.disable) ? dropRef : undefined}>{p.children}</div>);
 };
 
 export default AssetsTableDropzone;

package/components/slider-field/SliderField.tsx

@@ -17,7 +17,7 @@ interface ISliderFieldProps {
 }
 
 interface ISliderFieldState {
-    inputValue : any;
+    tempValue : number;
 }
 
 class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldState> {
@@ -28,10 +28,8 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
 
         super(props);
 
-        const inputValue =  (props.value === null || props.value === undefined) ? props.defaultValue : props.value;
-
         this.state = {
-            inputValue
+            tempValue: null
         };
     }
 
@@ -40,11 +38,6 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
         clearTimeout(this.updateTimeout);
     }
 
-    private toggle() {
-
-        this.props.onChange(!this.props.value);
-    }
-
     private updateValue(val) {
 
         this.props.onChange(val);
@@ -52,17 +45,18 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
 
     private rangeInputChange(e) {
 
-        const {min, max, defaultValue } = this.props;
-
         const inputVal = e.target.value;
         const val = parseFloat(inputVal);
 
         clearTimeout(this.updateTimeout);
 
         this.setState({
-            inputValue: val
+            tempValue: val
         }, () => {
-            this.updateTimeout = setTimeout(() => this.updateValue(val), 100);
+            this.updateTimeout = setTimeout(() => {
+                this.updateValue(val);
+                this.setState({tempValue: null});
+            }, 100);
         });
     }
 
@@ -73,19 +67,16 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
         inputValue  = (inputValue === '') ? 0 : parseFloat(inputValue);
 
         if (inputValue >= min && inputValue <= max) {
-
-            this.setState({
-                inputValue
-            }, () => {
-                this.updateValue(inputValue);
-            });
+            this.updateValue(inputValue);
         }
     }
 
     public render() {
 
-        const {label, width, min, max, step, defaultValue, tooltip, info, labelPosition} = this.props;
-        const {inputValue} = this.state;
+        const {label, width, min, max, step, defaultValue, value, tooltip, info, labelPosition} = this.props;
+        const { tempValue } = this.state;
+
+        const val = (tempValue !== null) ? tempValue : (value === null || value === undefined) ? defaultValue : value;
 
         return <FieldWrapper
             customClass = 'slider-field'
@@ -99,14 +90,14 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 type= 'range'
                 min={ min }
                 max= { max }
-                value = {inputValue}
+                value = {val}
                 step= { step }/>
 
             <input
                 className = 'val'
                 onChange = {(e) => this.numberInputChange(e)}
                 type = 'number'
-                value = {inputValue} />
+                value = {val} />
         </FieldWrapper>;
     }
 }