Skip to content

Commit b32c7b3

Browse files
xiaoyatongxiaoyatong
committed
refactor: 改进命名等
1 parent 0b6f8fb commit b32c7b3

File tree

2 files changed

+83
-59
lines changed

2 files changed

+83
-59
lines changed

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

Lines changed: 76 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,11 @@ export const Range: FunctionComponent<
7070
() => `rtl-${vertical ? verticalClassPrefix : classPrefix}`,
7171
[vertical]
7272
)
73-
const [buttonIndex, setButtonIndex] = useState(0)
73+
const buttonRef = useRef(0)
7474
const [dragStatus, setDragStatus] = useState('start')
7575
const touch = useTouch()
7676
const root = useRef<HTMLDivElement>(null)
77+
const rootRect = useRef<any>(null)
7778
const [marksList, setMarksList] = useState<number[]>([])
7879
const [startValue, setStartValue] = useState<any>(0)
7980
const scope = useMemo(() => {
@@ -87,17 +88,18 @@ export const Range: FunctionComponent<
8788
const handleChange = (value: RangeValue) => {
8889
onChange && onChange(value)
8990
}
90-
const [current, setCurrent] = usePropsValue<RangeValue>({
91+
const [innerValue, setInnerValue] = usePropsValue<RangeValue>({
9192
value,
9293
defaultValue,
9394
finalValue: 0,
9495
onChange: handleChange,
9596
})
96-
const [exactValue, setExactValue] = useState<RangeValue>(
97-
() => value || defaultValue || 0
98-
)
97+
98+
const exactValueRef = useRef<RangeValue>(value || defaultValue || 0)
9999
const marksRef = useRef<{ [key: string]: any }>({})
100+
100101
useEffect(() => {
102+
console.log('set marklist')
101103
if (marks) {
102104
if (Array.isArray(marks)) {
103105
const list = marks
@@ -118,11 +120,13 @@ export const Range: FunctionComponent<
118120
}
119121
}
120122
}, [marks, max, min])
123+
121124
const classes = classNames(classPrefix, {
122125
[`${classPrefix}-disabled`]: disabled,
123126
[verticalClassPrefix]: vertical,
124127
[`${classPrefix}-native`]: isHm,
125128
})
129+
126130
const containerClasses = classNames(
127131
`${classPrefix}-container`,
128132
{
@@ -131,17 +135,18 @@ export const Range: FunctionComponent<
131135
},
132136
className
133137
)
138+
134139
const markClassName = useCallback(
135140
(mark: any) => {
136141
const classPrefix = 'nut-range-mark'
137142
const verticalClassPrefix = 'nut-range-vertical-mark'
138143
let lowerBound = min
139144
let upperBound = max
140-
if (range && Array.isArray(current)) {
141-
lowerBound = current[0]
142-
upperBound = current[1]
145+
if (range && Array.isArray(innerValue)) {
146+
lowerBound = innerValue[0]
147+
upperBound = innerValue[1]
143148
} else {
144-
upperBound = current as number
149+
upperBound = innerValue as number
145150
}
146151
const isActive = mark <= upperBound && mark >= lowerBound
147152
const classNames = [
@@ -161,7 +166,7 @@ export const Range: FunctionComponent<
161166

162167
return classNames.join(' ')
163168
},
164-
[min, max, range, current, vertical, rtl, rtlClassPrefix]
169+
[min, max, range, innerValue, vertical, rtl, rtlClassPrefix]
165170
)
166171

167172
const isRange = useCallback(
@@ -172,16 +177,16 @@ export const Range: FunctionComponent<
172177
)
173178

174179
const calcMainAxis = useCallback(() => {
175-
const modelVal = current as any
180+
const modelVal = innerValue as any
176181
return isRange(modelVal)
177182
? `${((modelVal[1] - modelVal[0]) * 100) / scope}%`
178183
: `${((modelVal - min) * 100) / scope}%`
179-
}, [current, isRange, min, scope])
184+
}, [innerValue, isRange, min, scope])
180185

181186
const calcOffset = useCallback(() => {
182-
const modelVal = current as any
187+
const modelVal = innerValue as any
183188
return isRange(modelVal) ? `${((modelVal[0] - min) * 100) / scope}%` : '0%'
184-
}, [current, isRange, min, scope])
189+
}, [innerValue, isRange, min, scope])
185190

186191
const barStyle = useCallback(() => {
187192
if (vertical) {
@@ -217,12 +222,12 @@ export const Range: FunctionComponent<
217222

218223
const tickClass = useCallback(
219224
(mark: any) => {
220-
if (range && Array.isArray(current)) {
221-
return mark <= current[1] && mark >= current[0]
225+
if (range && Array.isArray(innerValue)) {
226+
return mark <= innerValue[1] && mark >= innerValue[0]
222227
}
223-
return mark <= current
228+
return mark <= innerValue
224229
},
225-
[current, range]
230+
[innerValue, range]
226231
)
227232

228233
const format = useCallback(
@@ -240,12 +245,12 @@ export const Range: FunctionComponent<
240245
} else {
241246
value = format(value)
242247
}
243-
if (!isSameValue(value, current)) {
244-
setCurrent(value)
248+
if (!isSameValue(value, innerValue)) {
249+
setInnerValue(value)
245250
}
246251
end && onEnd && onEnd(value)
247252
},
248-
[current, format, isRange, onEnd, setCurrent]
253+
[innerValue, format, isRange, onEnd, setInnerValue]
249254
)
250255

251256
const handleClick = useCallback(
@@ -266,9 +271,10 @@ export const Range: FunctionComponent<
266271
}
267272

268273
const value = min + (delta / total) * scope
269-
setExactValue(current)
270-
if (isRange(current)) {
271-
const [left, right] = current as any
274+
exactValueRef.current = innerValue
275+
276+
if (isRange(innerValue)) {
277+
const [left, right] = innerValue as any
272278
const middle = (left + right) / 2
273279
if (value <= middle) {
274280
updateValue([value, right], true)
@@ -279,63 +285,74 @@ export const Range: FunctionComponent<
279285
updateValue(value, true)
280286
}
281287
},
282-
[current, disabled, isRange, min, scope, updateValue, vertical]
288+
[innerValue, disabled, isRange, min, scope, updateValue, vertical]
283289
)
284290

291+
useEffect(() => {
292+
const getRootRect = async () => {
293+
if (root.current) {
294+
const rect = await getRectInMultiPlatform(root.current)
295+
rootRect.current = rect
296+
}
297+
}
298+
getRootRect()
299+
}, [root])
300+
285301
const onTouchStart = useCallback(
286302
(event: any) => {
287303
if (disabled) return
288304
touch.start(event)
289-
setExactValue(current)
290-
if (isRange(current)) {
291-
setStartValue((current as number[]).map(format))
305+
exactValueRef.current = innerValue
306+
if (isRange(innerValue)) {
307+
setStartValue((innerValue as number[]).map(format))
292308
} else {
293-
setStartValue(format(current as number))
309+
setStartValue(format(innerValue as number))
294310
}
295311

296312
setDragStatus('start')
297313
},
298-
[current, disabled, format, isRange, touch]
314+
[innerValue, disabled, format, isRange, touch]
299315
)
300316

301317
const onTouchMove = useCallback(
302318
async (event: any) => {
303-
// @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决
304319
if (disabled || !root.current) return
305320

306-
if (dragStatus === 'start') onStart && onStart()
321+
if (dragStatus === 'start') {
322+
onStart && onStart()
323+
setDragStatus('draging')
324+
}
307325
touch.move(event)
308-
setDragStatus('draging')
309326

310-
const rect = await getRectInMultiPlatform(root.current)
311-
if (!rect) return
327+
const handleMove = async () => {
328+
if (!rootRect.current) return
329+
console.log('touch move000033', rootRect.current.width)
312330

313-
let delta = touch.deltaX.current
314-
let total = rect.width
315-
let diff = (delta / total) * scope
316-
diff = rtl ? -diff : diff
331+
let delta = touch.deltaX.current
332+
let total = rootRect.current.width
333+
let diff = (delta / total) * scope
334+
diff = rtl ? -diff : diff
317335

318-
if (vertical) {
319-
delta = touch.deltaY.current
320-
total = rect.height
321-
diff = (delta / total) * scope
322-
}
336+
if (vertical) {
337+
delta = touch.deltaY.current
338+
total = rootRect.current.height
339+
diff = (delta / total) * scope
340+
}
323341

324-
let newValue
325-
if (isRange(startValue)) {
326-
newValue = (exactValue as number[]).slice()
327-
newValue[buttonIndex] = startValue[buttonIndex] + diff
328-
} else {
329-
newValue = startValue + diff
342+
let newValue = startValue + diff
343+
if (isRange(startValue)) {
344+
newValue = (exactValueRef.current as number[]).slice()
345+
newValue[buttonRef.current] = startValue[buttonRef.current] + diff
346+
}
347+
exactValueRef.current = newValue
348+
updateValue(newValue)
330349
}
331-
setExactValue(newValue)
332-
updateValue(newValue)
350+
351+
requestAnimationFrame(handleMove)
333352
},
334353
[
335-
buttonIndex,
336354
disabled,
337355
dragStatus,
338-
exactValue,
339356
isRange,
340357
onStart,
341358
rtl,
@@ -350,18 +367,18 @@ export const Range: FunctionComponent<
350367
const onTouchEnd = useCallback(() => {
351368
if (disabled) return
352369
if (dragStatus === 'draging') {
353-
updateValue(current, true)
370+
updateValue(innerValue, true)
354371
}
355372
setDragStatus('')
356-
}, [current, disabled, dragStatus, updateValue])
373+
}, [innerValue, disabled, dragStatus, updateValue])
357374

358375
const curValue = useCallback(
359376
(idx?: number) => {
360-
const modelVal = current as any
377+
const modelVal = innerValue as any
361378
const value = typeof idx === 'number' ? modelVal[idx] : modelVal
362379
return value
363380
},
364-
[current]
381+
[innerValue]
365382
)
366383

367384
const buttonNumberTransform = useMemo(() => {
@@ -471,7 +488,7 @@ export const Range: FunctionComponent<
471488
transform: 'translate(-50%, -50%)',
472489
}}
473490
onTouchStart={(e) => {
474-
setButtonIndex(index)
491+
buttonRef.current = index
475492
onTouchStart(e)
476493
}}
477494
onTouchMove={onTouchMove}

‎src/packages/range/utils.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { RangeValue } from '@/types'
2+
3+
export const isSameValue = (newValue: RangeValue, oldValue: RangeValue) =>
4+
JSON.stringify(newValue) === JSON.stringify(oldValue)
5+
6+
export const handleOverlap = (value: number[]) =>
7+
value[0] > value[1] ? value.slice(0).reverse() : value

0 commit comments

Comments
 (0)