Improve range input component

rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js

@@ -1,16 +1,32 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useDebouncedCallback } from 'use-debounce'
 import classNames from 'classnames'
-import { isEmpty } from 'lodash'
+import { isNil, toString } from 'lodash'
 
 import { isDefaultValue } from '../../../utils/value'
 
 import Unit from './common/Unit'
 
 const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
+  const ref = useRef(null)
   const [inputValue, setInputValue] = useState('')
-  useEffect(() => {setInputValue(value.text)}, [value.text])
+
+  useEffect(() => setInputValue(value.text), [value.text])
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const unitElement = ref.current.nextElementSibling
+
+      const unitWidth = (
+        isNil(unitElement.lastChild) ? unitElement.lastChild.offsetWidth : 0
+      ) + (
+        isNil(question.maximum) ? 30 : toString(question.maximum).length * 10
+      )
+
+      unitElement.style.flex = `0 0 ${unitWidth}px`
+    }
+  }, [question])
 
   const handleChange = useDebouncedCallback((value, text) => {
     updateValue(value, { text, unit: question.unit, value_type: question.value_type })
@@ -19,17 +35,17 @@ const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
   const classnames = classNames({
     'interview-input': true,
     'range-input': true,
-    'range': true,
     'default': isDefaultValue(question, value)
   })
 
   return (
     <div className={classnames}>
       <input
+        ref={ref}
         type="range"
-        min={isEmpty(question.minimum) ? '0' : question.minimum}
-        max={isEmpty(question.maximum) ? '100' : question.maximum}
-        step={isEmpty(question.step) ? '1' : question.step}
+        min={isNil(question.minimum) ? '0' : question.minimum}
+        max={isNil(question.maximum) ? '100' : question.maximum}
+        step={isNil(question.step) ? '1' : question.step}
         disabled={disabled}
         value={inputValue}
         onChange={(event) => {

rdmo/projects/assets/scss/interview.scss

@@ -165,6 +165,12 @@
         }
     }
 
+    .text-input {
+        input[type="text"] {
+            text-overflow: ellipsis;
+        }
+    }
+
     &.select-input {
         .buttons {
             // in a select widget, additional space is reserved for the dropdown icon
@@ -226,19 +232,15 @@
     }
 
     .unit {
-        padding: 6px 12px;
-        width: 120px;
+        padding: 6px 0;
         height: 34px;
 
         cursor: help;
 
+        text-align: right;
+
         white-space: nowrap;
         overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    input[type="text"] {
-        text-overflow: ellipsis;
     }
 
     .radio,
@@ -277,7 +279,7 @@
         }
     }
 
-    .range {
+    .range-input {
         height: 34px;  // same as form-control
 
         input[type='range'] {