From 795bed4df228ffe1acf5771d41e32195064f0988 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 15 Aug 2023 12:06:50 +0800 Subject: [PATCH 1/3] fix: solve animation jitter when input area less width than picker panel issue --- docs/examples/range.tsx | 3 ++- src/RangePicker.tsx | 7 ++++++- tests/range.spec.tsx | 44 +++++++++++++++++++++++++++++++++++++++-- 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx index 688fd24f5..acecc8322 100644 --- a/docs/examples/range.tsx +++ b/docs/examples/range.tsx @@ -50,11 +50,12 @@ export default () => {

Value: {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}

-
+

Basic

{...sharedProps} + style={{width: '100%'}} value={undefined} locale={zhCN} allowClear diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 9421e8585..e1919e8eb 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -892,11 +892,16 @@ function InnerRangePicker(props: RangePickerProps) { const panelWidth = panelDivRef.current.offsetWidth; const arrowWidth = arrowRef.current.offsetWidth; + const inputAreaWidth = startInputDivRef.current.offsetWidth * 2 + separatorRef.current.offsetWidth; + if ( panelWidth && arrowWidth && - arrowLeft > panelWidth - arrowWidth - (direction === 'rtl' ? 0 : arrowMarginLeft) + arrowLeft > panelWidth - arrowWidth - (direction === 'rtl' ? 0 : arrowMarginLeft) && + // If input size is too small that panel cannot move to right, let it keep left. + inputAreaWidth >= 2 * panelWidth ) { + panelLeft = arrowLeft; } } diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 93777a925..5795449c5 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1807,7 +1807,7 @@ describe('Picker.Range', () => { } else if (this.className.includes('panel-container')) { return 311; } else if (this.className.includes('input')) { - return 285; + return 400; } else if (this.className.includes('range-separator')) { return 10; } @@ -1830,8 +1830,9 @@ describe('Picker.Range', () => { />, ); openPicker(container, 1); + console.log(document.querySelector('.rc-picker-panel-container').getAttribute("style")) expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ - marginLeft: '295px', + marginLeft: '410px', }); mock.mockRestore(); }); @@ -1927,4 +1928,43 @@ describe('Picker.Range', () => { fireEvent.click(document.querySelector('.rc-picker-cell')); expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active'); }); + + it('If input size is too small that panel cannot move to right, let it keep left', () => { + const mock = spyElementPrototypes(HTMLElement, { + offsetWidth: { + get() { + if (this.className.includes('range-arrow')) { + return 14; + } else if (this.className.includes('panel-container')) { + return 311; + } else if (this.className.includes('input')) { + return 100; + } else if (this.className.includes('range-separator')) { + return 10; + } + }, + }, + offsetLeft: { + get() { + if (this.className.includes('range-arrow')) { + return 305; + } + }, + }, + }); + const { container } = render( + X} + suffixIcon={O} + />, + ); + openPicker(container, 1); + console.log(document.querySelector('.rc-picker-panel-container').getAttribute("style")) + expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ + marginLeft: '0px', + }); + mock.mockRestore(); + }); }); From b6ee1710d8bcfc85aa659966cac0dc3929f7988f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 15 Aug 2023 12:14:17 +0800 Subject: [PATCH 2/3] chore: remove log --- tests/range.spec.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 5795449c5..a593f4315 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1830,7 +1830,6 @@ describe('Picker.Range', () => { />, ); openPicker(container, 1); - console.log(document.querySelector('.rc-picker-panel-container').getAttribute("style")) expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ marginLeft: '410px', }); @@ -1961,7 +1960,6 @@ describe('Picker.Range', () => { />, ); openPicker(container, 1); - console.log(document.querySelector('.rc-picker-panel-container').getAttribute("style")) expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ marginLeft: '0px', }); From 541cef79e445fbeefcc30bd090a598ae45e8de77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 15 Aug 2023 16:25:39 +0800 Subject: [PATCH 3/3] feat: optimize code --- tests/range.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index a593f4315..e0ffd7454 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1807,7 +1807,7 @@ describe('Picker.Range', () => { } else if (this.className.includes('panel-container')) { return 311; } else if (this.className.includes('input')) { - return 400; + return 306; } else if (this.className.includes('range-separator')) { return 10; } @@ -1831,7 +1831,7 @@ describe('Picker.Range', () => { ); openPicker(container, 1); expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ - marginLeft: '410px', + marginLeft: '316px', }); mock.mockRestore(); });