fix(range): refactor & lint fixed (#2637)

jdf2e · Oct 11, 2024 · 4caa268 · 4caa268
1 parent d63f8d8
commit 4caa268
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 83 deletions.
diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx
@@ -116,7 +116,7 @@ export const Range: FunctionComponent<
         setMarksList(list)
       }
     }
-  }, [marks])
+  }, [marks, max, min])
 
   const scope = () => {
     return max - min
@@ -379,13 +379,12 @@ export const Range: FunctionComponent<
         <div className="nut-range-bar" style={barStyle()}>
           {range ? (
             [0, 1].map((item, index) => {
+              const cls = `${index === 0 ? 'nut-range-button-wrapper-left' : ''}
+                  ${index === 1 ? 'nut-range-button-wrapper-right' : ''}`
               return (
                 <div
                   key={index}
-                  className={`${
-                    index === 0 ? 'nut-range-button-wrapper-left' : ''
-                  }
-                  ${index === 1 ? 'nut-range-button-wrapper-right' : ''}`}
+                  className={cls}
                   onTouchStart={(e: any) => {
                     if (typeof index === 'number') {
                       // 实时更新当前拖动的按钮索引

diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx
@@ -3,7 +3,6 @@ import React, {
   useEffect,
   useState,
   useRef,
-  useCallback,
   ReactNode,
 } from 'react'
 import type { TouchEvent } from 'react'
@@ -59,9 +58,6 @@ export const Range: FunctionComponent<
     button,
     vertical,
     marks,
-    onChange,
-    onStart,
-    onEnd,
     minDescription,
     maxDescription,
     currentDescription,
@@ -70,6 +66,9 @@ export const Range: FunctionComponent<
     step,
     value,
     defaultValue,
+    onChange,
+    onStart,
+    onEnd,
   } = { ...defaultProps, ...props }
 
   const classPrefix = 'nut-range'
@@ -78,7 +77,6 @@ export const Range: FunctionComponent<
   const touch = useTouch()
   const root = useRef<HTMLDivElement>(null)
   const [marksList, setMarksList] = useState<number[]>([])
-
   const [startValue, setStartValue] = useState<any>(0)
 
   const handleChange = (value: RangeValue) => {
@@ -98,7 +96,6 @@ export const Range: FunctionComponent<
   useEffect(() => {
     if (marks) {
       if (Array.isArray(marks)) {
-        // 增加变量
         const list = marks
           .sort((a, b) => a.value - b.value)
           .filter((point) => point.value >= min && point.value <= max)
@@ -116,11 +113,7 @@ export const Range: FunctionComponent<
         setMarksList(list)
       }
     }
-  }, [marks])
-
-  const scope = () => {
-    return max - min
-  }
+  }, [marks, max, min])
 
   const classes = classNames(classPrefix, {
     [`${classPrefix}-disabled`]: disabled,
@@ -135,30 +128,31 @@ export const Range: FunctionComponent<
     className
   )
 
-  const markClassName = useCallback(
-    (mark: any) => {
-      const classPrefix = 'nut-range-mark'
-      let lowerBound = min
-      let upperBound = max
-      if (range && Array.isArray(current)) {
-        lowerBound = current[0]
-        upperBound = current[1]
-      } else {
-        upperBound = current as number
-      }
-      const isActive = mark <= upperBound && mark >= lowerBound
-      return [
-        `${classPrefix}-text`,
-        `${isActive ? `${classPrefix}-text-active` : ''}`,
-      ].join(' ')
-    },
-    [range, current, min, max]
-  )
+  const markClassName = (mark: any) => {
+    const classPrefix = 'nut-range-mark'
+    let lowerBound = min
+    let upperBound = max
+    if (range && Array.isArray(current)) {
+      lowerBound = current[0]
+      upperBound = current[1]
+    } else {
+      upperBound = current as number
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound
+    return [
+      `${classPrefix}-text`,
+      `${isActive ? `${classPrefix}-text-active` : ''}`,
+    ].join(' ')
+  }
 
   const isRange = (val: any) => {
     return !!range && Array.isArray(val)
   }
 
+  const scope = () => {
+    return max - min
+  }
+
   const calcMainAxis = () => {
     const modelVal = current as any
     if (isRange(modelVal)) {
@@ -169,10 +163,9 @@ export const Range: FunctionComponent<
 
   const calcOffset = () => {
     const modelVal = current as any
-    if (isRange(modelVal)) {
-      return `${((modelVal[0] - min) * 100) / scope()}%`
-    }
-    return `0%`
+    return isRange(modelVal)
+      ? `${((modelVal[0] - min) * 100) / scope()}%`
+      : `0%`
   }
 
   const barStyle = () => {
@@ -276,7 +269,6 @@ export const Range: FunctionComponent<
     } else {
       setStartValue(format(current as number))
     }
-
     setDragStatus('start')
   }
 
@@ -345,12 +337,49 @@ export const Range: FunctionComponent<
     )
   }
 
-  return (
-    <div className={containerClasses}>
-      {minDescription !== null && (
-        <div className="min">{minDescription || min}</div>
-      )}
-      <div ref={root} className={classes} onClick={(e) => click(e)}>
+  const renderRangeButton = () => {
+    return [0, 1].map((item, index) => {
+      const cls = `${index === 0 ? 'nut-range-button-wrapper-left' : ''}
+                  ${index === 1 ? 'nut-range-button-wrapper-right' : ''}`
+      return (
+        <div
+          key={index}
+          className={cls}
+          onTouchStart={(e) => {
+            if (typeof index === 'number') {
+              setButtonIndex(index)
+            }
+            onTouchStart(e)
+          }}
+          onTouchMove={(e) => onTouchMove(e)}
+          onTouchEnd={onTouchEnd}
+          onTouchCancel={onTouchEnd}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {renderButton(index)}
+        </div>
+      )
+    })
+  }
+
+  const renderSingleButton = () => {
+    return (
+      <div
+        className="nut-range-button-wrapper"
+        onTouchStart={(e) => onTouchStart(e)}
+        onTouchMove={(e) => onTouchMove(e)}
+        onTouchEnd={onTouchEnd}
+        onTouchCancel={onTouchEnd}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {renderButton()}
+      </div>
+    )
+  }
+
+  const renderMark = () => {
+    return (
+      <>
         {marksList.length > 0 && (
           <div className="nut-range-mark">
             {marksList.map((mark: any) => {
@@ -371,45 +400,19 @@ export const Range: FunctionComponent<
             })}
           </div>
         )}
+      </>
+    )
+  }
 
+  return (
+    <div className={containerClasses}>
+      {minDescription !== null && (
+        <div className="min">{minDescription || min}</div>
+      )}
+      <div ref={root} className={classes} onClick={(e) => click(e)}>
+        {renderMark()}
         <div className="nut-range-bar" style={barStyle()}>
-          {range ? (
-            [0, 1].map((item, index) => {
-              return (
-                <div
-                  key={index}
-                  className={`${
-                    index === 0 ? 'nut-range-button-wrapper-left' : ''
-                  }
-                  ${index === 1 ? 'nut-range-button-wrapper-right' : ''}`}
-                  onTouchStart={(e) => {
-                    if (typeof index === 'number') {
-                      // 实时更新当前拖动的按钮索引
-                      setButtonIndex(index)
-                    }
-                    onTouchStart(e)
-                  }}
-                  onTouchMove={(e) => onTouchMove(e)}
-                  onTouchEnd={onTouchEnd}
-                  onTouchCancel={onTouchEnd}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  {renderButton(index)}
-                </div>
-              )
-            })
-          ) : (
-            <div
-              className="nut-range-button-wrapper"
-              onTouchStart={(e) => onTouchStart(e)}
-              onTouchMove={(e) => onTouchMove(e)}
-              onTouchEnd={onTouchEnd}
-              onTouchCancel={onTouchEnd}
-              onClick={(e) => e.stopPropagation()}
-            >
-              {renderButton()}
-            </div>
-          )}
+          {range ? renderRangeButton() : renderSingleButton()}
         </div>
       </div>
       {maxDescription !== null && (