Skip to content

Commit

Permalink
fix(ui5-datepicker): display extreme values correctly
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexander Ivanov committed Feb 21, 2019
1 parent 4eab784 commit 7b1271b
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 72 deletions.
24 changes: 11 additions & 13 deletions packages/main/src/Calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ class Calendar extends WebComponent {
nextMonth.setDate(1);
nextMonth.setMonth(nextMonth.getMonth() + 1);

if (nextMonth.getYear() > 9999) {
if (nextMonth.getYear() > YearPicker._MAX_YEAR) {
return;
}

Expand Down Expand Up @@ -363,14 +363,14 @@ class Calendar extends WebComponent {
oNewDate.setMonth(iNewMonth);


if (oNewDate.getYear() < 1) {
if (oNewDate.getYear() < YearPicker._MIN_YEAR) {
return;
}
this.timestamp = oNewDate.valueOf() / 1000;
}

_showNextYear() {
if (this._calendarDate.getYear() === 9999) {
if (this._calendarDate.getYear() === YearPicker._MAX_YEAR) {
return;
}

Expand All @@ -381,7 +381,7 @@ class Calendar extends WebComponent {
}

_showPrevYear() {
if (this._calendarDate.getYear() === 1) {
if (this._calendarDate.getYear() === YearPicker._MIN_YEAR) {
return;
}

Expand All @@ -393,18 +393,17 @@ class Calendar extends WebComponent {

_showNextPageYears() {
if (this._yearPicker.timestamp) {
const oCalDate = CalendarDate.fromTimestamp((this._yearPicker.timestamp + (31536000 * 20)) * 1000, this._primaryCalendarType);
const oCalDate = CalendarDate.fromTimestamp(this._yearPicker.timestamp * 1000, this._primaryCalendarType);
oCalDate.setMonth(0);
oCalDate.setDate(1);
oCalDate.setYear(oCalDate.getYear() - 8);
if (oCalDate.getYear() > 9998) {
oCalDate.setYear(oCalDate.getYear() + YearPicker._ITEMS_COUNT - YearPicker._MIDDLE_ITEM_INDEX);
if (oCalDate.getYear() > YearPicker._MAX_YEAR) {
return;
}
}

this._yearPicker = Object.assign({}, this._yearPicker, {
// add 20 years to the timestamp of the monthpicker
timestamp: this._yearPicker.timestamp + (31536000 * 20),
timestamp: this._yearPicker.timestamp + (31536000 * YearPicker._ITEMS_COUNT),
});

this._isShiftingYears = true;
Expand All @@ -415,15 +414,14 @@ class Calendar extends WebComponent {
const oCalDate = CalendarDate.fromTimestamp(this._yearPicker.timestamp * 1000, this._primaryCalendarType);
oCalDate.setMonth(0);
oCalDate.setDate(1);
oCalDate.setYear(oCalDate.getYear() - 8);
if (oCalDate.getYear() < 1) {
oCalDate.setYear(oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX - 1);
if (oCalDate.getYear() < YearPicker._MIN_YEAR) {
return;
}
}

this._yearPicker = Object.assign({}, this._yearPicker, {
// subtracts 20 years from the timestamp of the monthpicker
timestamp: this._yearPicker.timestamp - (31536000 * 20),
timestamp: this._yearPicker.timestamp - (31536000 * YearPicker._ITEMS_COUNT),
});

this._isShiftingYears = true;
Expand Down
9 changes: 6 additions & 3 deletions packages/main/src/DayPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,9 @@ const metadata = {
},
};

const MAX_YEAR = 9999;
const MIN_YEAR = 1;

/**
* @class
*
Expand Down Expand Up @@ -344,7 +347,7 @@ class DayPicker extends WebComponent {
oNewDate.setYear(iNewYear);
oNewDate.setMonth(iNewMonth);

if (oNewDate.getYear() < 1 || oNewDate.getYear() > 9999) {
if (oNewDate.getYear() < MIN_YEAR || oNewDate.getYear() > MAX_YEAR) {
return;
}

Expand Down Expand Up @@ -391,12 +394,12 @@ class DayPicker extends WebComponent {
for (let i = 0; i < 42; i++) {
iYear = oDay.getYear();
oCalDate = new CalendarDate(oDay, this._primaryCalendarType);
if (bIncludeBCDates && iYear < 1) {
if (bIncludeBCDates && iYear < MIN_YEAR) {
// For dates before 0001-01-01 we should render only empty squares to keep
// the month square matrix correct.
oCalDate._bBeforeFirstYear = true;
_aVisibleDays.push(oCalDate);
} else if (iYear > 0 && iYear < 10000) {
} else if (iYear >= MIN_YEAR && iYear <= MAX_YEAR) {
// Days before 0001-01-01 or after 9999-12-31 should not be rendered.
_aVisibleDays.push(oCalDate);
}
Expand Down
28 changes: 12 additions & 16 deletions packages/main/src/YearPicker.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,17 @@
style="{{styles.main}}"
>
{{#each ctr._yearIntervals}}
{{#if this.length}}
<div class="{{../../classes.yearInterval}}">
{{#each this}}
<div id="{{this.id}}"
tabindex="{{this._tabIndex}}"
data-sap-timestamp="{{this.timestamp}}"
class="{{this.classes}}"
role="gridcell"
aria-selected="false">
{{this.year}}
</div>
{{/each}}
</div>
{{else}}
<span class="sapWCEmptyYearRow"></span>
{{/if}}
<div class="{{../../classes.yearInterval}}">
{{#each this}}
<div id="{{this.id}}"
tabindex="{{this._tabIndex}}"
data-sap-timestamp="{{this.timestamp}}"
class="{{this.classes}}"
role="gridcell"
aria-selected="false">
{{this.year}}
</div>
{{/each}}
</div>
{{/each}}
</div>
57 changes: 32 additions & 25 deletions packages/main/src/YearPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,6 @@ const metadata = {
},
};

const ITEMS_COUNT = 20;
const MIDDLE_ITEM_INDEX = 7;

/**
* @class
*
Expand Down Expand Up @@ -117,39 +114,44 @@ class YearPicker extends WebComponent {
const oCalDate = this._calendarDate;
oCalDate.setMonth(0);
oCalDate.setDate(1);
oCalDate.setYear(oCalDate.getYear() - MIDDLE_ITEM_INDEX - 1);
if (oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX - 1 > YearPicker._MAX_YEAR - YearPicker._ITEMS_COUNT) {
oCalDate.setYear(YearPicker._MAX_YEAR - YearPicker._ITEMS_COUNT);
} else if (oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX - 1 < YearPicker._MIN_YEAR) {
oCalDate.setYear(YearPicker._MIN_YEAR - 1);
} else {
oCalDate.setYear(oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX - 1);
}

const intervals = [];
let timestamp;

if (this._selectedYear === undefined) {
this._selectedYear = this._year;
}

for (let i = 0; i < ITEMS_COUNT; i++) {
for (let i = 0; i < YearPicker._ITEMS_COUNT; i++) {
const intervalIndex = parseInt(i / 4);
if (!intervals[intervalIndex]) {
intervals[intervalIndex] = [];
}

oCalDate.setYear(oCalDate.getYear() + 1);

if (oCalDate.getYear() > 0 && oCalDate.getYear() < 10000) {
timestamp = oCalDate.valueOf() / 1000;
timestamp = oCalDate.valueOf() / 1000;

const year = {
timestamp: timestamp.toString(),
id: `${this._state._id}-y${timestamp}`,
year: oYearFormat.format(oCalDate.toLocalJSDate()),
classes: "sapWCYearPickerItem",
};
const year = {
timestamp: timestamp.toString(),
id: `${this._state._id}-y${timestamp}`,
year: oYearFormat.format(oCalDate.toLocalJSDate()),
classes: "sapWCYearPickerItem",
};

if (oCalDate.getYear() === this._selectedYear) {
year.classes += " sapWCYearPickerItemSel";
}
if (oCalDate.getYear() === this._selectedYear) {
year.classes += " sapWCYearPickerItemSel";
}

if (intervals[intervalIndex]) {
intervals[intervalIndex].push(year);
}
if (intervals[intervalIndex]) {
intervals[intervalIndex].push(year);
}
}

Expand Down Expand Up @@ -187,7 +189,7 @@ class YearPicker extends WebComponent {
const timestamp = this.getTimestampFromDom(event.ui5target);
this.timestamp = timestamp;
this._selectedYear = this._year;
this._itemNav.current = MIDDLE_ITEM_INDEX;
this._itemNav.current = YearPicker._MIDDLE_ITEM_INDEX;
this.fireEvent("selectedYearChange", { timestamp });
}
}
Expand All @@ -208,7 +210,7 @@ class YearPicker extends WebComponent {

this.timestamp = timestamp;
this._selectedYear = this._year;
this._itemNav.current = MIDDLE_ITEM_INDEX;
this._itemNav.current = YearPicker._MIDDLE_ITEM_INDEX;
this.fireEvent("selectedYearChange", { timestamp });
}
}
Expand All @@ -231,22 +233,27 @@ class YearPicker extends WebComponent {
oCalDate.setDate(1);

if (event.end) {
oCalDate.setYear(oCalDate.getYear() + ITEMS_COUNT);
oCalDate.setYear(oCalDate.getYear() + YearPicker._ITEMS_COUNT);
} else if (event.start) {
if (oCalDate.getYear() - MIDDLE_ITEM_INDEX < 1) {
if (oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX < YearPicker._MIN_YEAR) {
return;
}
oCalDate.setYear(oCalDate.getYear() - ITEMS_COUNT);
oCalDate.setYear(oCalDate.getYear() - YearPicker._ITEMS_COUNT);
}

if (oCalDate.getYear() - MIDDLE_ITEM_INDEX > 9999) {
if (oCalDate.getYear() - YearPicker._MIDDLE_ITEM_INDEX > YearPicker._MAX_YEAR) {
return;
}

this.timestamp = oCalDate.valueOf() / 1000;
}
}

YearPicker._ITEMS_COUNT = 20;
YearPicker._MIDDLE_ITEM_INDEX = 7;
YearPicker._MAX_YEAR = 9999;
YearPicker._MIN_YEAR = 1;

Bootstrap.boot().then(_ => {
YearPicker.define();
});
Expand Down
15 changes: 0 additions & 15 deletions packages/main/src/themes/base/YearPicker.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,18 +35,6 @@ ui5-yearpicker {
width: 100%;
}

.sapWCYearPickerIntervalContainer:last-of-type {
justify-content: flex-start;
}

.sapWCYearPickerIntervalContainer:first-of-type {
justify-content: flex-end;
}

.sapWCEmptyYearRow {
height: 3rem;
}

.sapWCYearPickerItem {
display: flex;
margin: 1px;
Expand Down Expand Up @@ -101,7 +89,4 @@ ui5-yearpicker {
& .sapWCYearPickerItem {
height: 2rem;
}
& .sapWCEmptyYearRow {
height: 2.125rem;
}
}

0 comments on commit 7b1271b

Please sign in to comment.