Skip to content

Commit 3f4d428

Browse files
xiaoyatongxiaoyatong
committed
fix: range refactor
1 parent d623224 commit 3f4d428

File tree

2 files changed

+85
-83
lines changed

2 files changed

+85
-83
lines changed

‎src/packages/range/range.taro.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export const Range: FunctionComponent<
116116
setMarksList(list)
117117
}
118118
}
119-
}, [marks])
119+
}, [marks, max, min])
120120

121121
const scope = () => {
122122
return max - min
@@ -379,13 +379,12 @@ export const Range: FunctionComponent<
379379
<div className="nut-range-bar" style={barStyle()}>
380380
{range ? (
381381
[0, 1].map((item, index) => {
382+
const cls = `${index === 0 ? 'nut-range-button-wrapper-left' : ''}
383+
${index === 1 ? 'nut-range-button-wrapper-right' : ''}`
382384
return (
383385
<div
384386
key={index}
385-
className={`${
386-
index === 0 ? 'nut-range-button-wrapper-left' : ''
387-
}
388-
${index === 1 ? 'nut-range-button-wrapper-right' : ''}`}
387+
className={cls}
389388
onTouchStart={(e: any) => {
390389
if (typeof index === 'number') {
391390
// 实时更新当前拖动的按钮索引

‎src/packages/range/range.tsx‎

Lines changed: 81 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React, {
33
useEffect,
44
useState,
55
useRef,
6-
useCallback,
76
ReactNode,
87
} from 'react'
98
import type { TouchEvent } from 'react'
@@ -59,9 +58,6 @@ export const Range: FunctionComponent<
5958
button,
6059
vertical,
6160
marks,
62-
onChange,
63-
onStart,
64-
onEnd,
6561
minDescription,
6662
maxDescription,
6763
currentDescription,
@@ -70,6 +66,9 @@ export const Range: FunctionComponent<
7066
step,
7167
value,
7268
defaultValue,
69+
onChange,
70+
onStart,
71+
onEnd,
7372
} = { ...defaultProps, ...props }
7473

7574
const classPrefix = 'nut-range'
@@ -78,7 +77,6 @@ export const Range: FunctionComponent<
7877
const touch = useTouch()
7978
const root = useRef<HTMLDivElement>(null)
8079
const [marksList, setMarksList] = useState<number[]>([])
81-
8280
const [startValue, setStartValue] = useState<any>(0)
8381

8482
const handleChange = (value: RangeValue) => {
@@ -98,7 +96,6 @@ export const Range: FunctionComponent<
9896
useEffect(() => {
9997
if (marks) {
10098
if (Array.isArray(marks)) {
101-
// 增加变量
10299
const list = marks
103100
.sort((a, b) => a.value - b.value)
104101
.filter((point) => point.value >= min && point.value <= max)
@@ -116,11 +113,7 @@ export const Range: FunctionComponent<
116113
setMarksList(list)
117114
}
118115
}
119-
}, [marks])
120-
121-
const scope = () => {
122-
return max - min
123-
}
116+
}, [marks, max, min])
124117

125118
const classes = classNames(classPrefix, {
126119
[`${classPrefix}-disabled`]: disabled,
@@ -135,30 +128,31 @@ export const Range: FunctionComponent<
135128
className
136129
)
137130

138-
const markClassName = useCallback(
139-
(mark: any) => {
140-
const classPrefix = 'nut-range-mark'
141-
let lowerBound = min
142-
let upperBound = max
143-
if (range && Array.isArray(current)) {
144-
lowerBound = current[0]
145-
upperBound = current[1]
146-
} else {
147-
upperBound = current as number
148-
}
149-
const isActive = mark <= upperBound && mark >= lowerBound
150-
return [
151-
`${classPrefix}-text`,
152-
`${isActive ? `${classPrefix}-text-active` : ''}`,
153-
].join(' ')
154-
},
155-
[range, current, min, max]
156-
)
131+
const markClassName = (mark: any) => {
132+
const classPrefix = 'nut-range-mark'
133+
let lowerBound = min
134+
let upperBound = max
135+
if (range && Array.isArray(current)) {
136+
lowerBound = current[0]
137+
upperBound = current[1]
138+
} else {
139+
upperBound = current as number
140+
}
141+
const isActive = mark <= upperBound && mark >= lowerBound
142+
return [
143+
`${classPrefix}-text`,
144+
`${isActive ? `${classPrefix}-text-active` : ''}`,
145+
].join(' ')
146+
}
157147

158148
const isRange = (val: any) => {
159149
return !!range && Array.isArray(val)
160150
}
161151

152+
const scope = () => {
153+
return max - min
154+
}
155+
162156
const calcMainAxis = () => {
163157
const modelVal = current as any
164158
if (isRange(modelVal)) {
@@ -169,10 +163,9 @@ export const Range: FunctionComponent<
169163

170164
const calcOffset = () => {
171165
const modelVal = current as any
172-
if (isRange(modelVal)) {
173-
return `${((modelVal[0] - min) * 100) / scope()}%`
174-
}
175-
return `0%`
166+
return isRange(modelVal)
167+
? `${((modelVal[0] - min) * 100) / scope()}%`
168+
: `0%`
176169
}
177170

178171
const barStyle = () => {
@@ -276,7 +269,6 @@ export const Range: FunctionComponent<
276269
} else {
277270
setStartValue(format(current as number))
278271
}
279-
280272
setDragStatus('start')
281273
}
282274

@@ -345,12 +337,49 @@ export const Range: FunctionComponent<
345337
)
346338
}
347339

348-
return (
349-
<div className={containerClasses}>
350-
{minDescription !== null && (
351-
<div className="min">{minDescription || min}</div>
352-
)}
353-
<div ref={root} className={classes} onClick={(e) => click(e)}>
340+
const renderRangeButton = () => {
341+
return [0, 1].map((item, index) => {
342+
const cls = `${index === 0 ? 'nut-range-button-wrapper-left' : ''}
343+
${index === 1 ? 'nut-range-button-wrapper-right' : ''}`
344+
return (
345+
<div
346+
key={index}
347+
className={cls}
348+
onTouchStart={(e) => {
349+
if (typeof index === 'number') {
350+
setButtonIndex(index)
351+
}
352+
onTouchStart(e)
353+
}}
354+
onTouchMove={(e) => onTouchMove(e)}
355+
onTouchEnd={onTouchEnd}
356+
onTouchCancel={onTouchEnd}
357+
onClick={(e) => e.stopPropagation()}
358+
>
359+
{renderButton(index)}
360+
</div>
361+
)
362+
})
363+
}
364+
365+
const renderSingleButton = () => {
366+
return (
367+
<div
368+
className="nut-range-button-wrapper"
369+
onTouchStart={(e) => onTouchStart(e)}
370+
onTouchMove={(e) => onTouchMove(e)}
371+
onTouchEnd={onTouchEnd}
372+
onTouchCancel={onTouchEnd}
373+
onClick={(e) => e.stopPropagation()}
374+
>
375+
{renderButton()}
376+
</div>
377+
)
378+
}
379+
380+
const renderMark = () => {
381+
return (
382+
<>
354383
{marksList.length > 0 && (
355384
<div className="nut-range-mark">
356385
{marksList.map((mark: any) => {
@@ -371,45 +400,19 @@ export const Range: FunctionComponent<
371400
})}
372401
</div>
373402
)}
403+
</>
404+
)
405+
}
374406

407+
return (
408+
<div className={containerClasses}>
409+
{minDescription !== null && (
410+
<div className="min">{minDescription || min}</div>
411+
)}
412+
<div ref={root} className={classes} onClick={(e) => click(e)}>
413+
{renderMark()}
375414
<div className="nut-range-bar" style={barStyle()}>
376-
{range ? (
377-
[0, 1].map((item, index) => {
378-
return (
379-
<div
380-
key={index}
381-
className={`${
382-
index === 0 ? 'nut-range-button-wrapper-left' : ''
383-
}
384-
${index === 1 ? 'nut-range-button-wrapper-right' : ''}`}
385-
onTouchStart={(e) => {
386-
if (typeof index === 'number') {
387-
// 实时更新当前拖动的按钮索引
388-
setButtonIndex(index)
389-
}
390-
onTouchStart(e)
391-
}}
392-
onTouchMove={(e) => onTouchMove(e)}
393-
onTouchEnd={onTouchEnd}
394-
onTouchCancel={onTouchEnd}
395-
onClick={(e) => e.stopPropagation()}
396-
>
397-
{renderButton(index)}
398-
</div>
399-
)
400-
})
401-
) : (
402-
<div
403-
className="nut-range-button-wrapper"
404-
onTouchStart={(e) => onTouchStart(e)}
405-
onTouchMove={(e) => onTouchMove(e)}
406-
onTouchEnd={onTouchEnd}
407-
onTouchCancel={onTouchEnd}
408-
onClick={(e) => e.stopPropagation()}
409-
>
410-
{renderButton()}
411-
</div>
412-
)}
415+
{range ? renderRangeButton() : renderSingleButton()}
413416
</div>
414417
</div>
415418
{maxDescription !== null && (

0 commit comments

Comments
 (0)