Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: solve animation jitter when input area less width than picker panel issue #665

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix: solve animation jitter when input area less width than picker panel issue #665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
795bed4
fix: solve animation jitter when input area less width than picker pa…
kiner-tang Aug 15, 2023
b6ee171
chore: remove log
kiner-tang Aug 15, 2023
541cef7
feat: optimize code
kiner-tang Aug 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/examples/range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,12 @@ export default () => {
<div>
<h2>Value: {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}</h2>

<div style={{ display: 'flex', flexWrap: 'wrap' }}>
<div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
<div style={{ margin: '0 8px' }}>
<h3>Basic</h3>
<RangePicker<Moment>
{...sharedProps}
style={{width: '100%'}}
value={undefined}
locale={zhCN}
allowClear
Expand Down
7 changes: 6 additions & 1 deletion src/RangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -892,11 +892,16 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
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;
}
}
Expand Down
42 changes: 40 additions & 2 deletions tests/range.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 306;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

实际上模拟的应该是 arrowLeft < panelWidth, 而 arrowLeft + arrowWidth > panelWidth。

arrowLeft = inputWidth + separatorWidth

这里条件不符合

Copy link
Member

@MadCcc MadCcc Aug 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

新加的条件是 inputWidth * 2 + separator > panelWidth * 2

换算一下是 inputWidth + separator / 2 > panelWidth，与 inputWidth + separator < panelWidth 矛盾了

所以条件可以重新考虑一下

} else if (this.className.includes('range-separator')) {
return 10;
}
Expand All @@ -1831,7 +1831,7 @@ describe('Picker.Range', () => {
);
openPicker(container, 1);
expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({
marginLeft: '295px',
marginLeft: '316px',
});
mock.mockRestore();
});
Expand Down Expand Up @@ -1927,4 +1927,42 @@ 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(
<MomentRangePicker
allowClear
defaultValue={[moment('1990-09-03'), moment('1989-11-28')]}
clearIcon={<span>X</span>}
suffixIcon={<span>O</span>}
/>,
);
openPicker(container, 1);
expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({
marginLeft: '0px',
});
mock.mockRestore();
});
});
Loading