From 0b6f8fb1052e76adce8fa4e04a5133e3018ac8ed Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Mon, 5 May 2025 17:45:06 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat(range):=20=E9=B8=BF=E8=92=99=E9=80=82?= =?UTF-8?q?=E9=85=8D,=E4=BF=AE=E8=AE=A2NaN,=E7=BA=B5=E5=90=91mark=E6=97=B6?= =?UTF-8?q?=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/demos/taro/demo11.tsx | 3 +- src/packages/range/range.scss | 3 +- src/packages/range/range.taro.tsx | 239 ++++++++--------------- src/packages/range/range.tsx | 12 +- 4 files changed, 92 insertions(+), 165 deletions(-) diff --git a/src/packages/range/demos/taro/demo11.tsx b/src/packages/range/demos/taro/demo11.tsx index d5caaac328..20ab0dacef 100644 --- a/src/packages/range/demos/taro/demo11.tsx +++ b/src/packages/range/demos/taro/demo11.tsx @@ -42,7 +42,6 @@ const Demo11 = () => { justifyContent: 'center', top: '50%', left: '50%', - // @ts-ignore transform: 'translate(-50%, -50%)', ...buttonNativeStyle, }} @@ -54,7 +53,7 @@ const Demo11 = () => { height: pxTransform(18), color: 'white', fontSize: pxTransform(10), - lineHeight: pxTransform(10), + lineHeight: 1, textAlign: 'center', paddingTop: pxTransform(4), paddingBottom: pxTransform(4), diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index 2e4ffe6f9c..5424ba9160 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -204,7 +204,8 @@ position: absolute; width: 36px; height: 100%; - top: initial; + // top: initial; + top: 0px; right: 50%; overflow: visible; font-size: 12px; diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index 0be9e7c814..9d7211093e 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -8,7 +8,6 @@ import React, { } from 'react' import classNames from 'classnames' import { Text, View } from '@tarojs/components' -import { pxTransform } from '@/utils/taro/px-transform' import { useTouch } from '@/hooks/use-touch' import { ComponentDefaults } from '@/utils/typings' import { usePropsValue } from '@/hooks/use-props-value' @@ -16,6 +15,7 @@ import { getRectInMultiPlatform } from '@/utils/taro/get-rect' import { useRtl } from '../configprovider/index.taro' import { harmony } from '@/utils/taro/platform' import { TaroRangeProps, RangeValue } from '@/types' +import { mergeProps } from '@/utils/merge-props' const defaultProps = { ...ComponentDefaults, @@ -31,16 +31,11 @@ const isHm = harmony() const classPrefix = 'nut-range' const verticalClassPrefix = `${classPrefix}-vertical` -const isSameValue = (newValue: RangeValue, oldValue: RangeValue) => { - return JSON.stringify(newValue) === JSON.stringify(oldValue) -} +const isSameValue = (newValue: RangeValue, oldValue: RangeValue) => + JSON.stringify(newValue) === JSON.stringify(oldValue) -const handleOverlap = (value: number[]) => { - if (value[0] > value[1]) { - return value.slice(0).reverse() - } - return value -} +const handleOverlap = (value: number[]) => + value[0] > value[1] ? value.slice(0).reverse() : value export const Range: FunctionComponent< Partial & @@ -69,7 +64,7 @@ export const Range: FunctionComponent< onChange, onStart, onEnd, - } = { ...defaultProps, ...props } + } = mergeProps(defaultProps, props) const rtlClassPrefix = useMemo( () => `rtl-${vertical ? verticalClassPrefix : classPrefix}`, @@ -82,8 +77,9 @@ export const Range: FunctionComponent< const [marksList, setMarksList] = useState([]) const [startValue, setStartValue] = useState(0) const scope = useMemo(() => { - if (max < min || max === min) { + if (max <= min) { console.log('max 的值需要大于 min的值') + return 0 } return max - min }, [max, min]) @@ -184,7 +180,7 @@ export const Range: FunctionComponent< const calcOffset = useCallback(() => { const modelVal = current as any - return isRange(modelVal) ? `${((modelVal[0] - min) * 100) / scope}%` : `0%` + return isRange(modelVal) ? `${((modelVal[0] - min) * 100) / scope}%` : '0%' }, [current, isRange, min, scope]) const barStyle = useCallback(() => { @@ -252,28 +248,23 @@ export const Range: FunctionComponent< [current, format, isRange, onEnd, setCurrent] ) - const click = useCallback( + const handleClick = useCallback( async (event: any) => { - if (disabled || !root.current) { - return - } + if (disabled || !root.current) return + setDragStatus('') const rect = await getRectInMultiPlatform(root.current) - let x = - typeof event.detail?.x !== 'undefined' ? event.detail.x : event.clientX - if (isHm) x = parseFloat(pxTransform(event.windowX)) + const x = event.detail?.x ?? event.clientX + let delta = x - rect.left let total = rect.width if (vertical) { - let y = - typeof event.detail?.y !== 'undefined' - ? event.detail.y - : event.clientY - if (isHm) y = parseFloat(pxTransform(event.windowY)) + const y = event.detail?.y ?? event.clientY delta = y - rect.top total = rect.height } + const value = min + (delta / total) * scope setExactValue(current) if (isRange(current)) { @@ -293,9 +284,7 @@ export const Range: FunctionComponent< const onTouchStart = useCallback( (event: any) => { - if (disabled) { - return - } + if (disabled) return touch.start(event) setExactValue(current) if (isRange(current)) { @@ -312,27 +301,22 @@ export const Range: FunctionComponent< const onTouchMove = useCallback( async (event: any) => { // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决 - if (disabled || !root.current) { - return - } - if (dragStatus === 'start') { - onStart && onStart() - } + if (disabled || !root.current) return + if (dragStatus === 'start') onStart && onStart() touch.move(event) setDragStatus('draging') + const rect = await getRectInMultiPlatform(root.current) if (!rect) return - let delta = isHm - ? parseFloat(pxTransform(touch.deltaX.current)) - : touch.deltaX.current + + let delta = touch.deltaX.current let total = rect.width let diff = (delta / total) * scope diff = rtl ? -diff : diff + if (vertical) { - delta = isHm - ? parseFloat(pxTransform(touch.deltaY.current)) - : touch.deltaY.current + delta = touch.deltaY.current total = rect.height diff = (delta / total) * scope } @@ -364,9 +348,7 @@ export const Range: FunctionComponent< ) const onTouchEnd = useCallback(() => { - if (disabled) { - return - } + if (disabled) return if (dragStatus === 'draging') { updateValue(current, true) } @@ -382,64 +364,43 @@ export const Range: FunctionComponent< [current] ) - const buttonTransform = useMemo(() => { - const borderRadis = { borderRadius: pxTransform(13) } - const transform = { - transform: 'translate(-50%, -50%)', - } - - if (isHm) { - return { - ...borderRadis, - ...transform, - } - } - return { - ...transform, - } - }, []) const buttonNumberTransform = useMemo(() => { return vertical ? 'translate(100%, -50%)' : 'translate(-50%, -100%)' }, [vertical]) const renderButton = useCallback( - (index?: number) => { - return ( - - {button || ( - - {currentDescription !== null && ( - - {currentDescription - ? currentDescription(curValue(index)) - : curValue(index)} - - )} - - )} - - ) - }, + (index?: number) => ( + <> + {button || ( + + {currentDescription !== null && ( + + {currentDescription + ? currentDescription(curValue(index)) + : curValue(index)} + + )} + + )} + + ), [ button, buttonNumberTransform, - buttonTransform, curValue, currentDescription, rtl, @@ -459,29 +420,27 @@ export const Range: FunctionComponent< }) return ( - {marksList.map((mark: any) => { - return ( + {marksList.map((mark: any) => ( + + + {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} + - - {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} - - - - ) - })} + className={classNames( + `${vertical ? verticalClassPrefix : classPrefix}-tick`, + { + [`${vertical ? verticalClassPrefix : classPrefix}-tick-active`]: + tickClass(mark), + [`${rtlClassPrefix}-tick`]: rtl, + } + )} + /> + + ))} ) }, [ @@ -495,22 +454,8 @@ export const Range: FunctionComponent< vertical, ]) - const wrapperTransform = useMemo(() => { - // @TODO 支持变量 - const wrapperTransformRN = [ - { translateX: pxTransform(vertical ? -12 : -13) }, - { translateY: pxTransform(-12) }, - ] - const wrapperTransform = 'translate(-50%, -50%)' - - return wrapperTransform - }, [vertical]) - const rangeWrapperTransform = useMemo(() => { - return 'translate(-50%, -50%)' - }, []) - const renderRangeButton = useCallback(() => { - return [0, 1].map((item, index) => { + return [0, 1].map((_, index) => { const isLeft = index === 0 const suffix = isLeft ? 'left' : 'right' const cls = classNames(`${classPrefix}-button-wrapper-${suffix}`, { @@ -523,10 +468,9 @@ export const Range: FunctionComponent< key={index} className={cls} style={{ - // @ts-ignore - transform: rangeWrapperTransform, + transform: 'translate(-50%, -50%)', }} - onTouchStart={(e: any) => { + onTouchStart={(e) => { setButtonIndex(index) onTouchStart(e) }} @@ -544,22 +488,20 @@ export const Range: FunctionComponent< onTouchMove, onTouchStart, renderButton, - rangeWrapperTransform, vertical, rtl, rtlClassPrefix, ]) - const renderSingleButton = useCallback(() => { - return ( + const renderSingleButton = useCallback( + () => ( {renderButton()} - ) - }, [ - onTouchEnd, - onTouchMove, - onTouchStart, - renderButton, - wrapperTransform, - vertical, - ]) + ), + [onTouchEnd, onTouchMove, onTouchStart, renderButton, vertical] + ) const renderButtonWrapper = useCallback(() => { - if (range) { - return renderRangeButton() - } - - return renderSingleButton() + return range ? renderRangeButton() : renderSingleButton() }, [renderRangeButton, renderSingleButton, range]) return ( @@ -592,9 +524,8 @@ export const Range: FunctionComponent< {minDescription !== null && ( {minDescription || min} )} - click(e)}> + {renderMarks()} - {renderButtonWrapper()} diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx index 2efdf0b904..15d27a68cc 100644 --- a/src/packages/range/range.tsx +++ b/src/packages/range/range.tsx @@ -248,11 +248,9 @@ export const Range: FunctionComponent< [current, format, isRange, onEnd, setCurrent] ) - const click = useCallback( + const handleClick = useCallback( (event: any) => { - if (disabled || !root.current) { - return - } + if (disabled || !root.current) return setDragStatus('') const rect = getRect(root.current) let delta = event.clientX - rect.left @@ -280,9 +278,7 @@ export const Range: FunctionComponent< const onTouchStart = useCallback( (event: any) => { - if (disabled) { - return - } + if (disabled) return touch.start(event) setExactValue(current) if (isRange(current)) { @@ -534,7 +530,7 @@ export const Range: FunctionComponent< {minDescription !== null && (
{minDescription || min}
)} -
click(e)}> +
{renderMarks()}
From b32c7b322259bd3e407b44b3a5efd0755603efd8 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Fri, 9 May 2025 18:23:14 +0800 Subject: [PATCH 2/6] =?UTF-8?q?refactor:=20=E6=94=B9=E8=BF=9B=E5=91=BD?= =?UTF-8?q?=E5=90=8D=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/range.taro.tsx | 135 +++++++++++++++++------------- src/packages/range/utils.tsx | 7 ++ 2 files changed, 83 insertions(+), 59 deletions(-) create mode 100644 src/packages/range/utils.tsx diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index 9d7211093e..94e2b4043b 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -70,10 +70,11 @@ export const Range: FunctionComponent< () => `rtl-${vertical ? verticalClassPrefix : classPrefix}`, [vertical] ) - const [buttonIndex, setButtonIndex] = useState(0) + const buttonRef = useRef(0) const [dragStatus, setDragStatus] = useState('start') const touch = useTouch() const root = useRef(null) + const rootRect = useRef(null) const [marksList, setMarksList] = useState([]) const [startValue, setStartValue] = useState(0) const scope = useMemo(() => { @@ -87,17 +88,18 @@ export const Range: FunctionComponent< const handleChange = (value: RangeValue) => { onChange && onChange(value) } - const [current, setCurrent] = usePropsValue({ + const [innerValue, setInnerValue] = usePropsValue({ value, defaultValue, finalValue: 0, onChange: handleChange, }) - const [exactValue, setExactValue] = useState( - () => value || defaultValue || 0 - ) + + const exactValueRef = useRef(value || defaultValue || 0) const marksRef = useRef<{ [key: string]: any }>({}) + useEffect(() => { + console.log('set marklist') if (marks) { if (Array.isArray(marks)) { const list = marks @@ -118,11 +120,13 @@ export const Range: FunctionComponent< } } }, [marks, max, min]) + const classes = classNames(classPrefix, { [`${classPrefix}-disabled`]: disabled, [verticalClassPrefix]: vertical, [`${classPrefix}-native`]: isHm, }) + const containerClasses = classNames( `${classPrefix}-container`, { @@ -131,17 +135,18 @@ export const Range: FunctionComponent< }, className ) + const markClassName = useCallback( (mark: any) => { const classPrefix = 'nut-range-mark' const verticalClassPrefix = 'nut-range-vertical-mark' let lowerBound = min let upperBound = max - if (range && Array.isArray(current)) { - lowerBound = current[0] - upperBound = current[1] + if (range && Array.isArray(innerValue)) { + lowerBound = innerValue[0] + upperBound = innerValue[1] } else { - upperBound = current as number + upperBound = innerValue as number } const isActive = mark <= upperBound && mark >= lowerBound const classNames = [ @@ -161,7 +166,7 @@ export const Range: FunctionComponent< return classNames.join(' ') }, - [min, max, range, current, vertical, rtl, rtlClassPrefix] + [min, max, range, innerValue, vertical, rtl, rtlClassPrefix] ) const isRange = useCallback( @@ -172,16 +177,16 @@ export const Range: FunctionComponent< ) const calcMainAxis = useCallback(() => { - const modelVal = current as any + const modelVal = innerValue as any return isRange(modelVal) ? `${((modelVal[1] - modelVal[0]) * 100) / scope}%` : `${((modelVal - min) * 100) / scope}%` - }, [current, isRange, min, scope]) + }, [innerValue, isRange, min, scope]) const calcOffset = useCallback(() => { - const modelVal = current as any + const modelVal = innerValue as any return isRange(modelVal) ? `${((modelVal[0] - min) * 100) / scope}%` : '0%' - }, [current, isRange, min, scope]) + }, [innerValue, isRange, min, scope]) const barStyle = useCallback(() => { if (vertical) { @@ -217,12 +222,12 @@ export const Range: FunctionComponent< const tickClass = useCallback( (mark: any) => { - if (range && Array.isArray(current)) { - return mark <= current[1] && mark >= current[0] + if (range && Array.isArray(innerValue)) { + return mark <= innerValue[1] && mark >= innerValue[0] } - return mark <= current + return mark <= innerValue }, - [current, range] + [innerValue, range] ) const format = useCallback( @@ -240,12 +245,12 @@ export const Range: FunctionComponent< } else { value = format(value) } - if (!isSameValue(value, current)) { - setCurrent(value) + if (!isSameValue(value, innerValue)) { + setInnerValue(value) } end && onEnd && onEnd(value) }, - [current, format, isRange, onEnd, setCurrent] + [innerValue, format, isRange, onEnd, setInnerValue] ) const handleClick = useCallback( @@ -266,9 +271,10 @@ export const Range: FunctionComponent< } const value = min + (delta / total) * scope - setExactValue(current) - if (isRange(current)) { - const [left, right] = current as any + exactValueRef.current = innerValue + + if (isRange(innerValue)) { + const [left, right] = innerValue as any const middle = (left + right) / 2 if (value <= middle) { updateValue([value, right], true) @@ -279,63 +285,74 @@ export const Range: FunctionComponent< updateValue(value, true) } }, - [current, disabled, isRange, min, scope, updateValue, vertical] + [innerValue, disabled, isRange, min, scope, updateValue, vertical] ) + useEffect(() => { + const getRootRect = async () => { + if (root.current) { + const rect = await getRectInMultiPlatform(root.current) + rootRect.current = rect + } + } + getRootRect() + }, [root]) + const onTouchStart = useCallback( (event: any) => { if (disabled) return touch.start(event) - setExactValue(current) - if (isRange(current)) { - setStartValue((current as number[]).map(format)) + exactValueRef.current = innerValue + if (isRange(innerValue)) { + setStartValue((innerValue as number[]).map(format)) } else { - setStartValue(format(current as number)) + setStartValue(format(innerValue as number)) } setDragStatus('start') }, - [current, disabled, format, isRange, touch] + [innerValue, disabled, format, isRange, touch] ) const onTouchMove = useCallback( async (event: any) => { - // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决 if (disabled || !root.current) return - if (dragStatus === 'start') onStart && onStart() + if (dragStatus === 'start') { + onStart && onStart() + setDragStatus('draging') + } touch.move(event) - setDragStatus('draging') - const rect = await getRectInMultiPlatform(root.current) - if (!rect) return + const handleMove = async () => { + if (!rootRect.current) return + console.log('touch move000033', rootRect.current.width) - let delta = touch.deltaX.current - let total = rect.width - let diff = (delta / total) * scope - diff = rtl ? -diff : diff + let delta = touch.deltaX.current + let total = rootRect.current.width + let diff = (delta / total) * scope + diff = rtl ? -diff : diff - if (vertical) { - delta = touch.deltaY.current - total = rect.height - diff = (delta / total) * scope - } + if (vertical) { + delta = touch.deltaY.current + total = rootRect.current.height + diff = (delta / total) * scope + } - let newValue - if (isRange(startValue)) { - newValue = (exactValue as number[]).slice() - newValue[buttonIndex] = startValue[buttonIndex] + diff - } else { - newValue = startValue + diff + let newValue = startValue + diff + if (isRange(startValue)) { + newValue = (exactValueRef.current as number[]).slice() + newValue[buttonRef.current] = startValue[buttonRef.current] + diff + } + exactValueRef.current = newValue + updateValue(newValue) } - setExactValue(newValue) - updateValue(newValue) + + requestAnimationFrame(handleMove) }, [ - buttonIndex, disabled, dragStatus, - exactValue, isRange, onStart, rtl, @@ -350,18 +367,18 @@ export const Range: FunctionComponent< const onTouchEnd = useCallback(() => { if (disabled) return if (dragStatus === 'draging') { - updateValue(current, true) + updateValue(innerValue, true) } setDragStatus('') - }, [current, disabled, dragStatus, updateValue]) + }, [innerValue, disabled, dragStatus, updateValue]) const curValue = useCallback( (idx?: number) => { - const modelVal = current as any + const modelVal = innerValue as any const value = typeof idx === 'number' ? modelVal[idx] : modelVal return value }, - [current] + [innerValue] ) const buttonNumberTransform = useMemo(() => { @@ -471,7 +488,7 @@ export const Range: FunctionComponent< transform: 'translate(-50%, -50%)', }} onTouchStart={(e) => { - setButtonIndex(index) + buttonRef.current = index onTouchStart(e) }} onTouchMove={onTouchMove} diff --git a/src/packages/range/utils.tsx b/src/packages/range/utils.tsx new file mode 100644 index 0000000000..1a86145f62 --- /dev/null +++ b/src/packages/range/utils.tsx @@ -0,0 +1,7 @@ +import { RangeValue } from '@/types' + +export const isSameValue = (newValue: RangeValue, oldValue: RangeValue) => + JSON.stringify(newValue) === JSON.stringify(oldValue) + +export const handleOverlap = (value: number[]) => + value[0] > value[1] ? value.slice(0).reverse() : value From eb46924faceff445fb0dac6bd973def640c99663 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Sat, 17 May 2025 17:23:03 +0800 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E9=B8=BF=E8=92=99=E4=B8=8B=E5=BC=82?= =?UTF-8?q?=E5=B8=B8=E9=97=AE=E9=A2=98=E8=B7=9F=E8=BF=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/range.taro.tsx | 56 +++++++++++-------------------- 1 file changed, 19 insertions(+), 37 deletions(-) diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index 94e2b4043b..a32ffaf243 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -8,6 +8,7 @@ import React, { } from 'react' import classNames from 'classnames' import { Text, View } from '@tarojs/components' +import { pxTransform } from '@/utils/taro/px-transform' import { useTouch } from '@/hooks/use-touch' import { ComponentDefaults } from '@/utils/typings' import { usePropsValue } from '@/hooks/use-props-value' @@ -74,13 +75,11 @@ export const Range: FunctionComponent< const [dragStatus, setDragStatus] = useState('start') const touch = useTouch() const root = useRef(null) - const rootRect = useRef(null) const [marksList, setMarksList] = useState([]) const [startValue, setStartValue] = useState(0) const scope = useMemo(() => { - if (max <= min) { + if (max < min || max === min) { console.log('max 的值需要大于 min的值') - return 0 } return max - min }, [max, min]) @@ -94,12 +93,9 @@ export const Range: FunctionComponent< finalValue: 0, onChange: handleChange, }) - const exactValueRef = useRef(value || defaultValue || 0) const marksRef = useRef<{ [key: string]: any }>({}) - useEffect(() => { - console.log('set marklist') if (marks) { if (Array.isArray(marks)) { const list = marks @@ -120,13 +116,11 @@ export const Range: FunctionComponent< } } }, [marks, max, min]) - const classes = classNames(classPrefix, { [`${classPrefix}-disabled`]: disabled, [verticalClassPrefix]: vertical, [`${classPrefix}-native`]: isHm, }) - const containerClasses = classNames( `${classPrefix}-container`, { @@ -135,7 +129,6 @@ export const Range: FunctionComponent< }, className ) - const markClassName = useCallback( (mark: any) => { const classPrefix = 'nut-range-mark' @@ -256,23 +249,23 @@ export const Range: FunctionComponent< const handleClick = useCallback( async (event: any) => { if (disabled || !root.current) return - + // TODO 鸿蒙获取clientX的数据有误，windowX 也变成了 undefined。暂不支持，待上游支持。 + if (isHm) return setDragStatus('') const rect = await getRectInMultiPlatform(root.current) - const x = event.detail?.x ?? event.clientX - + let x = event.detail?.x ?? event.clientX + if (isHm) x = parseFloat(pxTransform(event.windowX || x)) let delta = x - rect.left let total = rect.width if (vertical) { - const y = event.detail?.y ?? event.clientY + let y = event.detail?.y ?? event.clientY + if (isHm) y = parseFloat(pxTransform(event.windowY || y)) delta = y - rect.top total = rect.height } - const value = min + (delta / total) * scope exactValueRef.current = innerValue - if (isRange(innerValue)) { const [left, right] = innerValue as any const middle = (left + right) / 2 @@ -288,16 +281,6 @@ export const Range: FunctionComponent< [innerValue, disabled, isRange, min, scope, updateValue, vertical] ) - useEffect(() => { - const getRootRect = async () => { - if (root.current) { - const rect = await getRectInMultiPlatform(root.current) - rootRect.current = rect - } - } - getRootRect() - }, [root]) - const onTouchStart = useCallback( (event: any) => { if (disabled) return @@ -308,7 +291,6 @@ export const Range: FunctionComponent< } else { setStartValue(format(innerValue as number)) } - setDragStatus('start') }, [innerValue, disabled, format, isRange, touch] @@ -316,8 +298,8 @@ export const Range: FunctionComponent< const onTouchMove = useCallback( async (event: any) => { + // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决 if (disabled || !root.current) return - if (dragStatus === 'start') { onStart && onStart() setDragStatus('draging') @@ -325,17 +307,19 @@ export const Range: FunctionComponent< touch.move(event) const handleMove = async () => { - if (!rootRect.current) return - console.log('touch move000033', rootRect.current.width) - - let delta = touch.deltaX.current - let total = rootRect.current.width + const rect = await getRectInMultiPlatform(root.current) + if (!rect) return + let delta = isHm + ? parseFloat(pxTransform(touch.deltaX.current)) + : touch.deltaX.current + let total = rect.width let diff = (delta / total) * scope diff = rtl ? -diff : diff - if (vertical) { - delta = touch.deltaY.current - total = rootRect.current.height + delta = isHm + ? parseFloat(pxTransform(touch.deltaY.current)) + : touch.deltaY.current + total = rect.height diff = (delta / total) * scope } @@ -347,7 +331,6 @@ export const Range: FunctionComponent< exactValueRef.current = newValue updateValue(newValue) } - requestAnimationFrame(handleMove) }, [ @@ -380,7 +363,6 @@ export const Range: FunctionComponent< }, [innerValue] ) - const buttonNumberTransform = useMemo(() => { return vertical ? 'translate(100%, -50%)' : 'translate(-50%, -100%)' }, [vertical]) From fc198f3ac64cf776a1f3066f9b6e77240a50dbdf Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Sat, 17 May 2025 18:58:48 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E9=B8=BF=E8=92=99=E5=8A=A8=E6=95=88?= =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D,=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=80=A7=E8=83=BD=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/range.scss | 5 +- src/packages/range/range.taro.tsx | 81 +++++++++++++++++++------------ 2 files changed, 54 insertions(+), 32 deletions(-) diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index 5424ba9160..77327e3710 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -46,7 +46,10 @@ max-height: 100%; background: $range-active-color; border-radius: 2px; - transition: all 0.2s; + + &-animate { + transition: all 0.2s; + } } &-button { diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index a32ffaf243..d2f7e0e34c 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -8,6 +8,7 @@ import React, { } from 'react' import classNames from 'classnames' import { Text, View } from '@tarojs/components' +import { useReady, nextTick } from '@tarojs/taro' import { pxTransform } from '@/utils/taro/px-transform' import { useTouch } from '@/hooks/use-touch' import { ComponentDefaults } from '@/utils/typings' @@ -72,9 +73,10 @@ export const Range: FunctionComponent< [vertical] ) const buttonRef = useRef(0) - const [dragStatus, setDragStatus] = useState('start') + const dragStatusRef = useRef('start') const touch = useTouch() const root = useRef(null) + const rootRect = useRef(null) const [marksList, setMarksList] = useState([]) const [startValue, setStartValue] = useState(0) const scope = useMemo(() => { @@ -116,11 +118,13 @@ export const Range: FunctionComponent< } } }, [marks, max, min]) + const classes = classNames(classPrefix, { [`${classPrefix}-disabled`]: disabled, [verticalClassPrefix]: vertical, [`${classPrefix}-native`]: isHm, }) + const containerClasses = classNames( `${classPrefix}-container`, { @@ -129,6 +133,7 @@ export const Range: FunctionComponent< }, className ) + const markClassName = useCallback( (mark: any) => { const classPrefix = 'nut-range-mark' @@ -169,33 +174,33 @@ export const Range: FunctionComponent< [range] ) - const calcMainAxis = useCallback(() => { + const calcMainAxis = useMemo(() => { const modelVal = innerValue as any return isRange(modelVal) ? `${((modelVal[1] - modelVal[0]) * 100) / scope}%` : `${((modelVal - min) * 100) / scope}%` }, [innerValue, isRange, min, scope]) - const calcOffset = useCallback(() => { + const calcOffset = useMemo(() => { const modelVal = innerValue as any return isRange(modelVal) ? `${((modelVal[0] - min) * 100) / scope}%` : '0%' }, [innerValue, isRange, min, scope]) - const barStyle = useCallback(() => { + const barStyle = useMemo(() => { if (vertical) { return { - height: calcMainAxis(), - top: calcOffset(), - transition: dragStatus ? 'none' : undefined, + height: calcMainAxis, + top: calcOffset, + transition: dragStatusRef.current ? 'none' : undefined, } } const dir = rtl ? 'right' : 'left' return { - width: calcMainAxis(), - [dir]: calcOffset(), - transition: dragStatus ? 'none' : undefined, + width: calcMainAxis, + [dir]: calcOffset, + transition: dragStatusRef.current ? 'none' : undefined, } - }, [calcMainAxis, calcOffset, dragStatus, rtl, vertical]) + }, [calcMainAxis, calcOffset, rtl, vertical]) const marksStyle = useCallback( (mark: any) => { @@ -251,7 +256,7 @@ export const Range: FunctionComponent< if (disabled || !root.current) return // TODO 鸿蒙获取clientX的数据有误，windowX 也变成了 undefined。暂不支持，待上游支持。 if (isHm) return - setDragStatus('') + dragStatusRef.current = '' const rect = await getRectInMultiPlatform(root.current) let x = event.detail?.x ?? event.clientX if (isHm) x = parseFloat(pxTransform(event.windowX || x)) @@ -281,6 +286,18 @@ export const Range: FunctionComponent< [innerValue, disabled, isRange, min, scope, updateValue, vertical] ) + useReady(() => { + const getRootRect = async () => { + if (root.current) { + const rect = await getRectInMultiPlatform(root.current) + rootRect.current = rect + } + } + nextTick(() => { + getRootRect() + }) + }) + const onTouchStart = useCallback( (event: any) => { if (disabled) return @@ -291,7 +308,7 @@ export const Range: FunctionComponent< } else { setStartValue(format(innerValue as number)) } - setDragStatus('start') + dragStatusRef.current = 'start' }, [innerValue, disabled, format, isRange, touch] ) @@ -300,26 +317,26 @@ export const Range: FunctionComponent< async (event: any) => { // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决 if (disabled || !root.current) return - if (dragStatus === 'start') { + if (dragStatusRef.current === 'start') { onStart && onStart() - setDragStatus('draging') + dragStatusRef.current = 'draging' } touch.move(event) const handleMove = async () => { - const rect = await getRectInMultiPlatform(root.current) - if (!rect) return + if (!rootRect.current) return let delta = isHm ? parseFloat(pxTransform(touch.deltaX.current)) : touch.deltaX.current - let total = rect.width + let total = rootRect.current.width let diff = (delta / total) * scope diff = rtl ? -diff : diff + if (vertical) { delta = isHm ? parseFloat(pxTransform(touch.deltaY.current)) : touch.deltaY.current - total = rect.height + total = rootRect.current.height diff = (delta / total) * scope } @@ -335,7 +352,6 @@ export const Range: FunctionComponent< }, [ disabled, - dragStatus, isRange, onStart, rtl, @@ -349,11 +365,11 @@ export const Range: FunctionComponent< const onTouchEnd = useCallback(() => { if (disabled) return - if (dragStatus === 'draging') { + if (dragStatusRef.current === 'draging') { updateValue(innerValue, true) } - setDragStatus('') - }, [innerValue, disabled, dragStatus, updateValue]) + dragStatusRef.current = '' + }, [innerValue, disabled, updateValue]) const curValue = useCallback( (idx?: number) => { @@ -455,13 +471,11 @@ export const Range: FunctionComponent< const renderRangeButton = useCallback(() => { return [0, 1].map((_, index) => { - const isLeft = index === 0 - const suffix = isLeft ? 'left' : 'right' + const suffix = index === 0 ? 'left' : 'right' const cls = classNames(`${classPrefix}-button-wrapper-${suffix}`, { [`${verticalClassPrefix}-button-wrapper-${suffix}`]: vertical, [`${rtlClassPrefix}-button-wrapper-${suffix}`]: rtl, }) - return ( { - return range ? renderRangeButton() : renderSingleButton() - }, [renderRangeButton, renderSingleButton, range]) + return ( + + {range ? renderRangeButton() : renderSingleButton()} + + ) + }, [renderRangeButton, renderSingleButton, range, barStyle]) return ( @@ -525,9 +546,7 @@ export const Range: FunctionComponent< )} {renderMarks()} - - {renderButtonWrapper()} - + {renderButtonWrapper()} {maxDescription !== null && ( {maxDescription || max} From af8d70e429ef5b866158772c745be6c747533e7f Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Sat, 17 May 2025 19:02:18 +0800 Subject: [PATCH 5/6] fix: h5 animate --- src/packages/range/range.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx index 15d27a68cc..a6a623a142 100644 --- a/src/packages/range/range.tsx +++ b/src/packages/range/range.tsx @@ -533,7 +533,10 @@ export const Range: FunctionComponent<
{renderMarks()} -
+
{renderButtonWrapper()}
From 961815737105471ff720c858df0f5ac6a7f1b99d Mon Sep 17 00:00:00 2001 From: oasis Date: Sat, 17 May 2025 19:53:46 +0800 Subject: [PATCH 6/6] test: update snap --- src/packages/range/__test__/__snapshots__/range.spec.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/range/__test__/__snapshots__/range.spec.tsx.snap b/src/packages/range/__test__/__snapshots__/range.spec.tsx.snap index 53d536f872..71ea7bc4dd 100644 --- a/src/packages/range/__test__/__snapshots__/range.spec.tsx.snap +++ b/src/packages/range/__test__/__snapshots__/range.spec.tsx.snap @@ -15,7 +15,7 @@ exports[`range props test 1`] = ` class="nut-range" >
`; -exports[`range test 1`] = `"
0
30
60
100
"`; +exports[`range test 1`] = `"
0
30
60
100
"`;