feat: Update RangeField component (#815)

* feat: Refactor TextField component

* feat: Update RangeField component

* feat: Update RangeField usage component

* fix: Validate range value

* fix: Update local value with the prop

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/ActionInspector.css

@@ -53,6 +53,10 @@
   width: 50px;
 }
 
+.ActionInspector > .content > .Block > .content .row .field.duration .TextField input {
+  min-width: 50px;
+}
+
 .ActionInspector .content .RemoveButton {
   height: 100%;
   background-color: transparent;
@@ -65,10 +69,6 @@
   align-items: flex-end;
 }
 
-.ActionInspector .content .Block .content .TextField {
-  height: 25px;
-}
-
 .ActionInspector .content .Block .content .DropdownContainer {
   flex: 1;
 }

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/PlaySoundAction/PlaySoundAction.css

@@ -20,3 +20,18 @@
 .PlaySoundActionContainer > .row > .field.volume > .row > .TextField {
   width: 40px;
 }
+
+.PlaySoundActionContainer > .row > .field.volume > .RangeFieldContainer .RangeField .RangeTextInput {
+  width: 40px;
+}
+
+.PlaySoundActionContainer
+  > .row
+  > .field.volume
+  > .RangeFieldContainer
+  .RangeField
+  .RangeTextInput
+  .InputContainer
+  input {
+  min-width: 40px;
+}

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/PlaySoundAction/PlaySoundAction.tsx

@@ -11,8 +11,7 @@ import { useAppSelector } from '../../../../redux/hooks'
 import { selectAssetCatalog } from '../../../../redux/app'
 
 import { isAudio, isValidVolume, volumeToAudioSource, volumeFromAudioSource } from '../../AudioSourceInspector/utils'
-import { Dropdown, TextField } from '../../../ui'
-import { RangeField } from '../../RangeField'
+import { Dropdown, TextField, RangeField } from '../../../ui'
 
 import { isValid } from './utils'
 import type { Props } from './types'
@@ -40,8 +39,6 @@ const PlaySoundAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
     ...value
   })
 
-  const [volume, setVolume] = useState(volumeFromAudioSource(value.volume))
-
   const files = useAppSelector(selectAssetCatalog)
 
   const removeBase = useCallback(
@@ -80,21 +77,12 @@ const PlaySoundAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
   const handleChangeVolume = useCallback(
     (e: React.ChangeEvent<HTMLElement>) => {
       const { value } = e.target as HTMLInputElement
+
       if (isValidVolume(value)) {
         setPayload({ ...payload, volume: volumeToAudioSource(value) })
       }
-      const volume = parseFloat(value) > 100 ? '100' : parseFloat(value)
-      setVolume(volume.toString())
     },
-    [payload, setPayload, setVolume]
-  )
-
-  const handleSetVolume = useCallback(
-    (e: React.ChangeEvent<HTMLElement>) => {
-      const { value } = e.target as HTMLInputElement
-      setVolume(value)
-    },
-    [setVolume]
+    [payload, setPayload]
   )
 
   const [{ isHover }, drop] = useDrop(
@@ -158,16 +146,11 @@ const PlaySoundAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
       <div className="row">
         <div className="field volume">
           <label>Volume</label>
-          <div className="row">
-            <RangeField value={volume} onChange={handleChangeVolume} />
-            <TextField
-              type="number"
-              value={volume}
-              error={!isValidVolume(volume)}
-              onChange={handleSetVolume}
-              onBlur={handleChangeVolume}
-            />
-          </div>
+          <RangeField
+            value={volumeFromAudioSource(value.volume)}
+            onChange={handleChangeVolume}
+            isValidValue={isValidVolume}
+          />
         </div>
       </div>
     </div>

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/TweenAction/TweenAction.tsx

@@ -2,8 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { TweenType, InterpolationType } from '@dcl/asset-packs'
 import { recursiveCheck } from 'jest-matcher-deep-close-to/lib/recursiveCheck'
 
-import { RangeField } from '../../RangeField'
-import { Dropdown, TextField } from '../../../ui'
+import { Dropdown, TextField, RangeField } from '../../../ui'
 import { InfoTooltip } from '../../InfoTooltip'
 import { isValidTween } from './utils'
 import type { Props } from './types'
@@ -41,7 +40,6 @@ function parseDuration(value: string | number): string {
 const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props) => {
   const [tween, setTween] = useState(tweenProp)
   const [endPosition, setEndPosition] = useState(tween.end)
-  const [duration, setDuration] = useState(parseDuration(tween.duration))
 
   useEffect(() => {
     if (!recursiveCheck(tween, tweenProp, 2) || !isValidTween(tween)) return
@@ -88,25 +86,19 @@ const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props
     [tween, setTween]
   )
 
-  const handleChangeDuration = useCallback(
-    (e: React.ChangeEvent<HTMLElement>) => {
-      const { value } = e.target as HTMLInputElement
-      setDuration(value)
-    },
-    [setDuration]
-  )
+  const isValidDuration = useCallback((value: string) => {
+    return !isNaN(parseInt(value.toString())) && parseFloat(value.toString()) > 0
+  }, [])
 
   const handleChangeDurationRange = useCallback(
     (e: React.ChangeEvent<HTMLElement>) => {
       const { value } = e.target as HTMLInputElement
-      const parsedValue = parseFloat(value)
-      if (!isNaN(parsedValue) && parsedValue >= 0) {
-        setTween({ ...tween, duration: parsedValue })
-      }
 
-      setDuration(parseDuration(parsedValue))
+      if (isValidDuration(value)) {
+        setTween({ ...tween, duration: parseDuration(value) })
+      }
     },
-    [tween, setTween, setDuration]
+    [tween, setTween, isValidDuration]
   )
 
   const renderTweenInfo = () => {
@@ -203,21 +195,12 @@ const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props
       <div className="row">
         <div className="field duration">
           <label>Duration {renderDurationInfo()}</label>
-          <div className="row">
-            <RangeField
-              value={duration || 0}
-              onChange={handleChangeDuration}
-              onBlur={handleChangeDurationRange}
-              step={0.25}
-            />
-            <TextField
-              type="number"
-              value={duration}
-              error={isNaN(parseInt(duration)) || parseInt(duration) < 0}
-              onChange={handleChangeDuration}
-              onBlur={handleChangeDurationRange}
-            />
-          </div>
+          <RangeField
+            value={tween.duration}
+            onChange={handleChangeDurationRange}
+            isValidValue={isValidDuration}
+            step={0.25}
+          />
         </div>
       </div>
     </div>

packages/@dcl/inspector/src/components/EntityInspector/AudioSourceInspector/AudioSourceInspector.tsx

@@ -20,8 +20,7 @@ import { useAppSelector } from '../../../redux/hooks'
 import { selectAssetCatalog } from '../../../redux/app'
 import { Block } from '../../Block'
 import { Container } from '../../Container'
-import { TextField, CheckboxField } from '../../ui'
-import { RangeField } from '../RangeField'
+import { TextField, CheckboxField, RangeField } from '../../ui'
 import { fromAudioSource, toAudioSource, isValidInput, isAudio, isValidVolume } from './utils'
 import type { Props } from './types'
 
@@ -107,8 +106,7 @@ export default withSdk<Props>(
           <CheckboxField label="Loop" checked={!!loop.value} {...loop} />
         </Block>
         <Block className="volume" label="Volume">
-          <RangeField {...volume} />
-          <TextField type="number" {...volume} error={!isValidVolume(volume.value?.toString())} />
+          <RangeField {...volume} isValidValue={isValidVolume} />
         </Block>
       </Container>
     )

packages/@dcl/inspector/src/components/ui/ErrorMessage/ErrorMessage.css

@@ -0,0 +1,15 @@
+.ErrorMessage {
+  display: flex;
+  align-items: center;
+  color: var(--error-main);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 100%;
+  min-height: 16px;
+  gap: 2px;
+}
+
+.ErrorMessage svg {
+  margin: 0 !important;
+}

packages/@dcl/inspector/src/components/ui/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import cx from 'classnames'
+import { IoAlertCircleOutline as AlertIcon } from 'react-icons/io5'
+
+import type { Props } from './types'
+
+import './ErrorMessage.css'
+
+const ErrorMessage: React.FC<Props> = ({ className, error }) => {
+  if (!error || typeof error !== 'string') {
+    return null
+  }
+
+  return (
+    <p className={cx('ErrorMessage', className)}>
+      <AlertIcon />
+      <span>{error}</span>
+    </p>
+  )
+}
+
+export default React.memo(ErrorMessage)

packages/@dcl/inspector/src/components/ui/ErrorMessage/index.ts

@@ -0,0 +1,2 @@
+import ErrorMessage from './ErrorMessage'
+export { ErrorMessage }

packages/@dcl/inspector/src/components/ui/ErrorMessage/types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  error?: string | boolean
+  className?: string
+}