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(module:date-picker): arrow in wrong position for RTL direction #7690

Merged
merged 1 commit into from Oct 25, 2022
Merged

fix(module:date-picker): arrow in wrong position for RTL direction #7690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 7 additions & 1 deletion components/date-picker/date-range-popup.component.ts
View file
Open in desktop
Expand Up @@ -56,7 +56,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
template: `
<ng-container *ngIf="isRange; else singlePanel">
<div class="{{ prefixCls }}-range-wrapper {{ prefixCls }}-date-range-wrapper">
<div class="{{ prefixCls }}-range-arrow" [style.left.px]="datePickerService?.arrowLeft"></div>
<div class="{{ prefixCls }}-range-arrow" [style]="arrowPosition"></div>
<div class="{{ prefixCls }}-panel-container {{ showWeek ? prefixCls + '-week-number' : '' }}">
<div class="{{ prefixCls }}-panels">
<ng-container *ngIf="hasTimePicker; else noTimePicker">
Expand Down Expand Up @@ -179,6 +179,12 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
return this.showToday || this.hasTimePicker || !!this.extraFooter || !!this.ranges;
}

get arrowPosition(): { left?: string; right?: string } {
return this.dir === 'rtl'
? { right: `${this.datePickerService?.arrowLeft}px` }
wenqi73 marked this conversation as resolved.
Show resolved Hide resolved
: { left: `${this.datePickerService?.arrowLeft}px` };
}

constructor(
public datePickerService: DatePickerService,
public cdr: ChangeDetectorRef,
Expand Down
24 changes: 24 additions & 0 deletions components/date-picker/range-picker.component.spec.ts
View file
Open in desktop
Expand Up @@ -410,6 +410,30 @@ describe('NzRangePickerComponent', () => {
const result = (nzOnChange.calls.allArgs()[0] as Date[][])[0];
expect((result[0] as Date).getDate()).toBe(+leftText);
}));

it('should support correct position for top arrow', fakeAsync(() => {
fixture.detectChanges();
openPickerByClickTrigger();
fixture.detectChanges();
flush();
fixture.detectChanges();
const arrow = queryFromOverlay(`.${PREFIX_CLASS}-range-arrow`) as HTMLElement;

expect(arrow.style.left).not.toBe('');
}));

it('should support dir rtl for top arrow', fakeAsync(() => {
fixture.debugElement.nativeElement.parentElement.setAttribute('dir', 'rtl');
fixture.detectChanges();
openPickerByClickTrigger();
fixture.detectChanges();
flush();
fixture.detectChanges();
const arrow = queryFromOverlay(`.${PREFIX_CLASS}-range-arrow`) as HTMLElement;

expect(arrow.style.right).not.toBe('');
fixture.debugElement.nativeElement.parentElement.setAttribute('dir', '');
}));
}); // /general api testing

describe('panel switch and move forward/afterward', () => {
Expand Down
5 changes: 5 additions & 0 deletions components/date-picker/style/patch.less
View file
Open in desktop
Expand Up @@ -26,3 +26,8 @@
width: inherit;
}
}

// make arrow in the right position in right direction
.@{picker-prefix-cls}-range-arrow {
margin-right: @input-padding-horizontal-base * 1.5;
}