mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

fix: DatePicker/TimePicker placement not working (#49303)

Browse Source 
* fix: DatePicker/TimePicker placement not working

* revert demo change
This commit is contained in:
afc163 2024-06-08 21:59:21 +08:00 committed by GitHub
parent a75571013b
commit 539beba6ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/date-picker/__tests__/DatePicker.test.tsx
View File

@ -355,13 +355,25 @@ describe('DatePicker', () => {
expect(container.querySelectorAll('.ant-picker-time-panel').length).toBe(1); expect(container.querySelectorAll('.ant-picker-time-panel').length).toBe(1);
}); });
it('placement api work correctly', () => { it('DatePicker placement api work correctly', () => {
const { rerender } = render(<DatePicker open placement="topLeft" />);
expect(triggerProps?.popupPlacement).toEqual('topLeft');
rerender(<DatePicker open placement="topRight" />);
expect(triggerProps?.popupPlacement).toEqual('topRight');
rerender(<DatePicker open placement="bottomLeft" />);
expect(triggerProps?.popupPlacement).toEqual('bottomLeft');
rerender(<DatePicker open placement="bottomRight" />);
expect(triggerProps?.popupPlacement).toEqual('bottomRight');
});
it('RangePicker placement api work correctly', () => {
const { rerender } = render(<DatePicker.RangePicker open placement="topLeft" />); const { rerender } = render(<DatePicker.RangePicker open placement="topLeft" />);
expect(triggerProps?.builtinPlacements).toEqual( expect(triggerProps?.builtinPlacements).toEqual(
expect.objectContaining({ expect.objectContaining({
topLeft: expect.objectContaining({ offset: [0, -4], points: ['bl', 'tl'] }), topLeft: expect.objectContaining({ offset: [0, -4], points: ['bl', 'tl'] }),
}), }),
); );
expect(triggerProps?.popupPlacement).toEqual('topLeft');
rerender(<DatePicker.RangePicker open placement="topRight" />); rerender(<DatePicker.RangePicker open placement="topRight" />);
expect(triggerProps?.builtinPlacements).toEqual( expect(triggerProps?.builtinPlacements).toEqual(
@ -369,6 +381,7 @@ describe('DatePicker', () => {
topRight: expect.objectContaining({ offset: [0, -4], points: ['br', 'tr'] }), topRight: expect.objectContaining({ offset: [0, -4], points: ['br', 'tr'] }),
}), }),
); );
expect(triggerProps?.popupPlacement).toEqual('topRight');
rerender(<DatePicker.RangePicker open placement="bottomLeft" />); rerender(<DatePicker.RangePicker open placement="bottomLeft" />);
expect(triggerProps?.builtinPlacements).toEqual( expect(triggerProps?.builtinPlacements).toEqual(
@ -376,6 +389,7 @@ describe('DatePicker', () => {
bottomLeft: expect.objectContaining({ offset: [0, 4], points: ['tl', 'bl'] }), bottomLeft: expect.objectContaining({ offset: [0, 4], points: ['tl', 'bl'] }),
}), }),
); );
expect(triggerProps?.popupPlacement).toEqual('bottomLeft');
rerender(<DatePicker.RangePicker open placement="bottomRight" />); rerender(<DatePicker.RangePicker open placement="bottomRight" />);
expect(triggerProps?.builtinPlacements).toEqual( expect(triggerProps?.builtinPlacements).toEqual(
@ -383,6 +397,7 @@ describe('DatePicker', () => {
bottomRight: expect.objectContaining({ offset: [0, 4], points: ['tr', 'br'] }), bottomRight: expect.objectContaining({ offset: [0, 4], points: ['tr', 'br'] }),
}), }),
); );
expect(triggerProps?.popupPlacement).toEqual('bottomRight');
}); });
it('legacy dropdownClassName', () => { it('legacy dropdownClassName', () => {

1
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -116,6 +116,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
disabled={mergedDisabled} disabled={mergedDisabled}
ref={innerRef as any} // Need to modify PickerRef ref={innerRef as any} // Need to modify PickerRef
popupAlign={transPlacement2DropdownAlign(direction, placement)} popupAlign={transPlacement2DropdownAlign(direction, placement)}
placement={placement}
placeholder={getRangePlaceholder(locale, picker, placeholder)} placeholder={getRangePlaceholder(locale, picker, placeholder)}
suffixIcon={suffixNode} suffixIcon={suffixNode}
prevIcon={<span className={`${prefixCls}-prev-icon`} />} prevIcon={<span className={`${prefixCls}-prev-icon`} />}

1
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -151,6 +151,7 @@ export default function generatePicker<DateType extends AnyObject>(
placeholder={getPlaceholder(locale, mergedPicker, placeholder)} placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
suffixIcon={suffixNode} suffixIcon={suffixNode}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)} dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placement={placement}
prevIcon={<span className={`${prefixCls}-prev-icon`} />} prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />} nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />} superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}