fix: tween range field to allow decimals (#823)

decentraland · Nov 7, 2023 · 9e4d6b3 · 9e4d6b3
1 parent db59bf1
commit 9e4d6b3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/ActionInspector.css b/packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/ActionInspector.css
@@ -48,7 +48,7 @@
 }
 
 .ActionInspector > .content > .Block > .content .row .field.duration .TextField {
-  width: 40px;
+  width: 50px;
 }
 
 .ActionInspector .content .RemoveButton {

diff --git a/...@dcl/inspector/src/components/EntityInspector/ActionInspector/TweenAction/TweenAction.tsx b/...@dcl/inspector/src/components/EntityInspector/ActionInspector/TweenAction/TweenAction.tsx
@@ -34,10 +34,15 @@ const InterpolationMapOption: Record<string, string> = {
   [InterpolationType.EASEBOUNCE]: 'Ease in/out Bounce'
 }
 
+function parseDuration(value: string | number): string {
+  const duration = Number(value)
+  return duration > 0 ? duration.toFixed(2) : duration.toString()
+}
+
 const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props) => {
   const [tween, setTween] = useState(tweenProp)
   const [endPosition, setEndPosition] = useState(tween.end)
-  const [duration, setDuration] = useState(tween.duration)
+  const [duration, setDuration] = useState(parseDuration(tween.duration))
 
   useEffect(() => {
     if (!recursiveCheck(tween, tweenProp, 2) || !isValidTween(tween)) return
@@ -95,12 +100,12 @@ const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props
   const handleChangeDurationRange = useCallback(
     (e: React.ChangeEvent<HTMLElement>) => {
       const { value } = e.target as HTMLInputElement
-      const parsedValue = parseInt(value)
+      const parsedValue = parseFloat(value)
       if (!isNaN(parsedValue) && parsedValue >= 0) {
         setTween({ ...tween, duration: parsedValue })
       }
 
-      setDuration(parsedValue.toString())
+      setDuration(parseDuration(parsedValue))
     },
     [tween, setTween, setDuration]
   )
@@ -200,7 +205,12 @@ const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props
         <div className="field duration">
           <label>Duration {renderDurationInfo()}</label>
           <div className="row">
-            <RangeField value={duration || 0} onChange={handleChangeDuration} onBlur={handleChangeDurationRange} />
+            <RangeField
+              value={duration || 0}
+              onChange={handleChangeDuration}
+              onBlur={handleChangeDurationRange}
+              step={0.25}
+            />
             <TextField
               type="number"
               value={duration}