From b923cdb0c83e3c9a77554fbd37b31711a4033ee5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Wed, 6 Nov 2024 11:11:06 +0800 Subject: [PATCH 1/4] fix: activeBar offset not right when start from the opposite direction Co-authored-by: Dmaziyo close #889 ref: https://github.com/ant-design/ant-design/issues/51480 --- src/PickerInput/Selector/RangeSelector.tsx | 20 +++++++++++++------ src/PickerInput/Selector/hooks/usePrevious.ts | 15 ++++++++++++++ 2 files changed, 29 insertions(+), 6 deletions(-) create mode 100644 src/PickerInput/Selector/hooks/usePrevious.ts diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx index 7cd36bd29..93ff8a52a 100644 --- a/src/PickerInput/Selector/RangeSelector.tsx +++ b/src/PickerInput/Selector/RangeSelector.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import { useEvent } from 'rc-util'; +import omit from 'rc-util/lib/omit'; import * as React from 'react'; import type { RangePickerRef, SelectorProps } from '../../interface'; import PickerContext from '../context'; @@ -9,6 +10,7 @@ import useRootProps from './hooks/useRootProps'; import Icon, { ClearIcon } from './Icon'; import Input, { type InputRef } from './Input'; import { getoffsetUnit, getRealPlacement } from '../../utils/uiUtil'; +import usePrevious from './hooks/usePrevious'; export type SelectorIdType = | string @@ -175,6 +177,7 @@ function RangeSelector( // ====================== ActiveBar ======================= const realPlacement = getRealPlacement(placement, rtl); const offsetUnit = getoffsetUnit(realPlacement, rtl); + const prevOffsetUnit = usePrevious(offsetUnit); const placementRight = realPlacement?.toLowerCase().endsWith('right'); const [activeBarStyle, setActiveBarStyle] = React.useState({ position: 'absolute', @@ -186,12 +189,17 @@ function RangeSelector( if (input) { const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement; const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0; - const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft; - setActiveBarStyle((ori) => ({ - ...ori, - width: offsetWidth, - [offsetUnit]: activeOffset, - })); + const activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft; + setActiveBarStyle((ori) => + omit( + { + ...ori, + width: offsetWidth, + [offsetUnit]: activeOffset, + }, + [prevOffsetUnit], + ), + ); onActiveOffset(activeOffset); } }); diff --git a/src/PickerInput/Selector/hooks/usePrevious.ts b/src/PickerInput/Selector/hooks/usePrevious.ts new file mode 100644 index 000000000..fcaa5e71b --- /dev/null +++ b/src/PickerInput/Selector/hooks/usePrevious.ts @@ -0,0 +1,15 @@ +import { useRef } from 'react'; + +function usePrevious(state: T): T | undefined { + const prevRef = useRef(); + const curRef = useRef(); + + if (Object.is(curRef.current, state)) { + prevRef.current = curRef.current; + curRef.current = state; + } + + return prevRef.current; +} + +export default usePrevious; From 39af922de1e55909795cff0385fc7cd37a3c9ee6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Wed, 6 Nov 2024 11:28:24 +0800 Subject: [PATCH 2/4] chore: fix --- src/PickerInput/Selector/hooks/usePrevious.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/PickerInput/Selector/hooks/usePrevious.ts b/src/PickerInput/Selector/hooks/usePrevious.ts index fcaa5e71b..a26a75ec3 100644 --- a/src/PickerInput/Selector/hooks/usePrevious.ts +++ b/src/PickerInput/Selector/hooks/usePrevious.ts @@ -4,7 +4,7 @@ function usePrevious(state: T): T | undefined { const prevRef = useRef(); const curRef = useRef(); - if (Object.is(curRef.current, state)) { + if (!Object.is(curRef.current, state)) { prevRef.current = curRef.current; curRef.current = state; } From 932f415a70c7fce93fed70802cd4aad5b78e0327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Wed, 6 Nov 2024 11:30:48 +0800 Subject: [PATCH 3/4] chore: update logic --- src/PickerInput/Selector/RangeSelector.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx index 93ff8a52a..06785fa2a 100644 --- a/src/PickerInput/Selector/RangeSelector.tsx +++ b/src/PickerInput/Selector/RangeSelector.tsx @@ -190,16 +190,11 @@ function RangeSelector( const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement; const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0; const activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft; - setActiveBarStyle((ori) => - omit( - { - ...ori, - width: offsetWidth, - [offsetUnit]: activeOffset, - }, - [prevOffsetUnit], - ), - ); + setActiveBarStyle((ori) => ({ + ...omit(ori, [prevOffsetUnit]), + width: offsetWidth, + [offsetUnit]: activeOffset, + })); onActiveOffset(activeOffset); } }); From 5bfc2fda124853adb7de3490c08e89dba8257961 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Wed, 6 Nov 2024 13:58:40 +0800 Subject: [PATCH 4/4] chore: update --- src/PickerInput/Selector/RangeSelector.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx index 06785fa2a..3a3a25906 100644 --- a/src/PickerInput/Selector/RangeSelector.tsx +++ b/src/PickerInput/Selector/RangeSelector.tsx @@ -189,7 +189,7 @@ function RangeSelector( if (input) { const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement; const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0; - const activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft; + const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft; setActiveBarStyle((ori) => ({ ...omit(ori, [prevOffsetUnit]), width: offsetWidth,