Merge pull request #194 from BouyguesTelecom/fix/range

fix event on range component
BouyguesTelecom · Nov 25, 2024 · 8415d60 · 8415d60
2 parents 9480ebf + 047096d
commit 8415d60
Showing 1 changed file with 28 additions and 44 deletions.
diff --git a/packages/react/components/range/Range.tsx b/packages/react/components/range/Range.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import { getColorStyle, TrilogyColor } from "@/objects"
-import { RangeProps } from "./RangeProps"
-import { hashClass } from "@/helpers"
-import clsx from "clsx"
-import { useTrilogyContext } from "@/context"
+import { useTrilogyContext } from '@/context'
+import { hashClass } from '@/helpers'
+import { getColorStyle, TrilogyColor } from '@/objects'
+import clsx from 'clsx'
+import * as React from 'react'
+import { RangeProps } from './RangeProps'
 
 /**
  * Range Component
@@ -46,48 +46,40 @@ const Range = ({
   const { styled } = useTrilogyContext()
 
   const [cursorMin, setCursorMin] = React.useState<number>(valueCursorMin ?? 0)
-  const [cursorMax, setCursorMax] = React.useState<number>(
-    valueCursorMax ?? max
-  )
+  const [cursorMax, setCursorMax] = React.useState<number>(valueCursorMax ?? max)
   const refTrack = React.useRef(null)
 
   React.useEffect(() => {
     if (refTrack.current) {
       const track = refTrack.current as HTMLElement
-      track.style.background = `linear-gradient(to right, ${getColorStyle(
-        TrilogyColor.NEUTRAL_FADE
-      )} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.MAIN_FADE)} ${
+      track.style.background = `linear-gradient(to right, ${getColorStyle(TrilogyColor.NEUTRAL_FADE)} ${
         (cursorMin / max) * 100
-      }% , ${getColorStyle(TrilogyColor.MAIN_FADE)} ${
-        (cursorMax / max) * 100
-      }%, ${getColorStyle(TrilogyColor.NEUTRAL_FADE)} ${
-        (cursorMax / max) * 100
-      }%) `
+      }% , ${getColorStyle(TrilogyColor.MAIN_FADE)} ${(cursorMin / max) * 100}% , ${getColorStyle(
+        TrilogyColor.MAIN_FADE,
+      )} ${(cursorMax / max) * 100}%, ${getColorStyle(TrilogyColor.NEUTRAL_FADE)} ${(cursorMax / max) * 100}%) `
     }
-  }, [cursorMin, cursorMax])
+  }, [cursorMin, cursorMax, refTrack])
 
   React.useEffect(() => {
     setCursorMin(valueCursorMin || 0)
   }, [valueCursorMin])
 
   React.useEffect(() => {
     setCursorMax(valueCursorMax || max)
-  }, [valueCursorMax])
+  }, [valueCursorMax, max])
 
   const handleChangeCursorMin = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (Number(e.target.value) < cursorMax - gap)
-        setCursorMin(Number(e.target.value))
+      if (Number(e.target.value) < cursorMax - gap) setCursorMin(Number(e.target.value))
     },
-    [cursorMax, cursorMin]
+    [cursorMax, cursorMin],
   )
 
   const handleChangeCursorMax = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (Number(e.target.value) > cursorMin + gap)
-        setCursorMax(Number(e.target.value))
+      if (Number(e.target.value) > cursorMin + gap) setCursorMax(Number(e.target.value))
     },
-    [cursorMax, cursorMin]
+    [cursorMax, cursorMin],
   )
 
   const handleMouseUpMin = React.useCallback(() => {
@@ -109,21 +101,16 @@ const Range = ({
   }, [onChangeMax, nameMax, cursorMax])
 
   return (
-    <div
-      data-testid={testId}
-      className={hashClass(styled, clsx("range-container"))}
-    >
-      <label className={hashClass(styled, clsx("range-label"))}>{label}</label>
-      <div className={hashClass(styled, clsx("range"))}>
-        <div
-          ref={refTrack}
-          className={hashClass(styled, clsx("range-track"))}
-        ></div>
+    <div data-testid={testId} className={hashClass(styled, clsx('range-container'))}>
+      <label className={hashClass(styled, clsx('range-label'))}>{label}</label>
+      <div className={hashClass(styled, clsx('range'))}>
+        <div ref={refTrack} className={hashClass(styled, clsx('range-track'))}></div>
         <input
           data-testid={`${testId}_min`}
-          className={hashClass(styled, clsx("range-cursor range-cursor-min"))}
+          className={hashClass(styled, clsx('range-cursor range-cursor-min'))}
           onMouseUp={handleMouseUpMin}
           onChange={handleChangeCursorMin}
+          onTouchEnd={handleMouseUpMin}
           value={cursorMin}
           type='range'
           min={min}
@@ -134,9 +121,10 @@ const Range = ({
         />
         <input
           data-testid={`${testId}_max`}
-          className={hashClass(styled, clsx("range-cursor range-cursor-max"))}
+          className={hashClass(styled, clsx('range-cursor range-cursor-max'))}
           onMouseUp={handleMouseUpMax}
           onChange={handleChangeCursorMax}
+          onTouchEnd={handleMouseUpMax}
           value={cursorMax}
           type='range'
           min={min}
@@ -146,17 +134,13 @@ const Range = ({
           aria-label={label}
         />
       </div>
-      <div className={hashClass(styled, clsx("range-values"))}>
+      <div className={hashClass(styled, clsx('range-values'))}>
         <div>
-          <span className={hashClass(styled, clsx("range-value-min"))}>
-            {cursorMin}
-          </span>
+          <span className={hashClass(styled, clsx('range-value-min'))}>{cursorMin}</span>
           {labelValueCursorMin && <span> {labelValueCursorMin}</span>}
         </div>
         <div>
-          <span className={hashClass(styled, clsx("range-value-max"))}>
-            {cursorMax}
-          </span>
+          <span className={hashClass(styled, clsx('range-value-max'))}>{cursorMax}</span>
           {labelValueCursorMax && <span> {labelValueCursorMax}</span>}
         </div>
       </div>