Skip to content

Commit 0a2195f

Browse files
mst101mst101
authored
refactor(utils): Add highlighted and disabled classes (sumcumo#66)
* chore(project): add highlighted and disabled classes * chore(project): remove setters from classes * chore(project): implement reviewer comments
1 parent 2418cae commit 0a2195f

File tree

10 files changed

+476
-305
lines changed

10 files changed

+476
-305
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"lint": "eslint --ext .js,.vue src test/unit/specs",
3737
"test": "jest --coverage",
3838
"test:watch": "jest --watch",
39+
"test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand",
3940
"release": "standard-version",
4041
"prerelease": "standard-version --dry-run",
4142
"docs:dev": "vuepress dev docs",

‎src/components/PickerDay.vue

Lines changed: 44 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@
3636
</template>
3737
<script>
3838
import pickerMixin from '~/mixins/pickerMixin.vue'
39-
import { isDateDisabled } from '~/utils/DisabledDatesUtils'
39+
import DisabledDate from '~/utils/DisabledDate'
40+
import HighlightedDate from '~/utils/HighlightedDate'
4041
4142
export default {
4243
name: 'DatepickerDayView',
@@ -74,18 +75,16 @@ export default {
7475
const monthName = this.showFullMonthName
7576
? this.translation.months
7677
: this.translation.monthsAbbr
77-
return this.utils.getMonthNameAbbr(
78-
this.utils.getMonth(this.pageDate),
79-
monthName,
80-
)
78+
79+
return this.utils.getMonthNameAbbr(this.pageMonth, monthName)
8180
},
8281
/**
8382
* Gets the name of the year that current page is on
84-
* @return {Number}
83+
* @return {String}
8584
*/
8685
currYearName() {
8786
const { yearSuffix } = this.translation
88-
return `${this.utils.getFullYear(this.pageDate)}${yearSuffix}`
87+
return `${this.pageYear}${yearSuffix}`
8988
},
9089
/**
9190
* Sets an array with all days to show this month
@@ -148,30 +147,25 @@ export default {
148147
* @return {Boolean}
149148
*/
150149
isNextDisabled() {
151-
if (!this.disabledDates || !this.disabledDates.from) {
150+
if (!this.disabledConfig.has.from) {
152151
return false
153152
}
154-
const d = this.pageDate
155153
return (
156-
this.utils.getMonth(this.disabledDates.from) <=
157-
this.utils.getMonth(d) &&
158-
this.utils.getFullYear(this.disabledDates.from) <=
159-
this.utils.getFullYear(d)
154+
this.disabledConfig.from.month <= this.pageMonth &&
155+
this.disabledConfig.from.year <= this.pageYear
160156
)
161157
},
162158
/**
163159
* Is the previous month disabled?
164160
* @return {Boolean}
165161
*/
166162
isPreviousDisabled() {
167-
if (!this.disabledDates || !this.disabledDates.to) {
163+
if (!this.disabledConfig.has.to) {
168164
return false
169165
}
170-
const d = this.pageDate
171166
return (
172-
this.utils.getMonth(this.disabledDates.to) >= this.utils.getMonth(d) &&
173-
this.utils.getFullYear(this.disabledDates.to) >=
174-
this.utils.getFullYear(d)
167+
this.disabledConfig.to.month >= this.pageMonth &&
168+
this.disabledConfig.to.year >= this.pageYear
175169
)
176170
},
177171
/**
@@ -181,10 +175,24 @@ export default {
181175
isYmd() {
182176
return this.translation.ymd && this.translation.ymd === true
183177
},
178+
/**
179+
* Returns the current page's month as an integer.
180+
* @return {Number}
181+
*/
182+
pageMonth() {
183+
return this.utils.getMonth(this.pageDate)
184+
},
184185
nextPageDate() {
185186
const d = new Date(this.pageTimestamp)
186187
return new Date(this.utils.setMonth(d, this.utils.getMonth(d) + 1))
187188
},
189+
highlightedConfig() {
190+
return new HighlightedDate(
191+
this.utils,
192+
this.disabledDates,
193+
this.highlighted,
194+
).config
195+
},
188196
},
189197
methods: {
190198
/**
@@ -227,66 +235,24 @@ export default {
227235
* @return {Boolean}
228236
*/
229237
isDisabledDate(date) {
230-
return isDateDisabled(date, this.disabledDates, this.utils)
238+
return new DisabledDate(this.utils, this.disabledDates).isDateDisabled(
239+
date,
240+
)
231241
},
232242
/**
233243
* Whether a day is highlighted
234244
* (only if it is not disabled already except when highlighted.includeDisabled is true)
235245
* @param {Date} date to check if highlighted
236246
* @return {Boolean}
237247
*/
238-
// eslint-disable-next-line complexity,max-statements
239248
isHighlightedDate(date) {
240-
let highlighted = false
241249
const dateWithoutTime = this.utils.resetDateTime(date)
242-
if (
243-
typeof this.highlighted === 'undefined' ||
244-
(!(this.highlighted && this.highlighted.includeDisabled) &&
245-
this.isDisabledDate(dateWithoutTime))
246-
) {
247-
return false
248-
}
249-
250-
if (typeof this.highlighted.dates !== 'undefined') {
251-
this.highlighted.dates.forEach((d) => {
252-
if (this.utils.compareDates(dateWithoutTime, d)) {
253-
highlighted = true
254-
}
255-
})
256-
}
257-
258-
const hasHighlightedTo =
259-
typeof this.highlighted.to !== 'undefined' &&
260-
dateWithoutTime <= this.highlighted.to
261-
262-
const hasHighlightedFrom =
263-
typeof this.highlighted.from !== 'undefined' &&
264-
dateWithoutTime >= this.highlighted.from
265-
266-
const hasHighlightedDays =
267-
typeof this.highlighted.days !== 'undefined' &&
268-
this.highlighted.days.indexOf(this.utils.getDay(dateWithoutTime)) !== -1
269250
270-
const hasHighlightedDaysOfMonth =
271-
typeof this.highlighted.daysOfMonth !== 'undefined' &&
272-
this.highlighted.daysOfMonth.indexOf(
273-
this.utils.getDate(dateWithoutTime),
274-
) !== -1
275-
276-
const hasCustomPredictor =
277-
typeof this.highlighted.customPredictor === 'function' &&
278-
this.highlighted.customPredictor(dateWithoutTime)
279-
280-
if (
281-
hasHighlightedDays ||
282-
hasHighlightedDaysOfMonth ||
283-
hasCustomPredictor ||
284-
(hasHighlightedTo && hasHighlightedFrom)
285-
) {
286-
highlighted = true
287-
}
288-
289-
return highlighted
251+
return new HighlightedDate(
252+
this.utils,
253+
this.disabledDates,
254+
this.highlighted,
255+
).isDateHighlighted(dateWithoutTime)
290256
},
291257
/**
292258
* Whether a day is highlighted and it is the last date
@@ -295,14 +261,13 @@ export default {
295261
* @return {Boolean}
296262
*/
297263
isHighlightEnd(date) {
264+
const config = this.highlightedConfig
265+
298266
return (
299267
this.isHighlightedDate(date) &&
300-
this.highlighted.to instanceof Date &&
301-
this.utils.getFullYear(this.highlighted.to) ===
302-
this.utils.getFullYear(date) &&
303-
this.utils.getMonth(this.highlighted.to) ===
304-
this.utils.getMonth(date) &&
305-
this.utils.getDate(this.highlighted.to) === this.utils.getDate(date)
268+
config.to.year === this.utils.getFullYear(date) &&
269+
config.to.month === this.utils.getMonth(date) &&
270+
config.to.day === this.utils.getDate(date)
306271
)
307272
},
308273
/**
@@ -312,14 +277,13 @@ export default {
312277
* @return {Boolean}
313278
*/
314279
isHighlightStart(date) {
280+
const config = this.highlightedConfig
281+
315282
return (
316283
this.isHighlightedDate(date) &&
317-
this.highlighted.from instanceof Date &&
318-
this.utils.getFullYear(this.highlighted.from) ===
319-
this.utils.getFullYear(date) &&
320-
this.utils.getMonth(this.highlighted.from) ===
321-
this.utils.getMonth(date) &&
322-
this.utils.getDate(this.highlighted.from) === this.utils.getDate(date)
284+
config.from.year === this.utils.getFullYear(date) &&
285+
config.from.month === this.utils.getMonth(date) &&
286+
config.from.day === this.utils.getDate(date)
323287
)
324288
},
325289
/**

‎src/components/PickerMonth.vue

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,37 +30,31 @@
3030
</template>
3131
<script>
3232
import pickerMixin from '~/mixins/pickerMixin.vue'
33-
import { isMonthDisabled } from '~/utils/DisabledDatesUtils'
33+
import DisabledDate from '~/utils/DisabledDate'
3434
3535
export default {
3636
name: 'DatepickerMonthView',
3737
mixins: [pickerMixin],
3838
computed: {
3939
/**
40-
* Checks if the next year is disabled or not
40+
* Is the next year disabled?
4141
* @return {Boolean}
4242
*/
4343
isNextDisabled() {
44-
if (!this.disabledDates || !this.disabledDates.from) {
44+
if (!this.disabledConfig.has.from) {
4545
return false
4646
}
47-
return (
48-
this.utils.getFullYear(this.disabledDates.from) <=
49-
this.utils.getFullYear(this.pageDate)
50-
)
47+
return this.disabledConfig.from.year <= this.pageYear
5148
},
5249
/**
53-
* Checks if the previous year is disabled or not
50+
* Is the previous year disabled?
5451
* @return {Boolean}
5552
*/
5653
isPreviousDisabled() {
57-
if (!this.disabledDates || !this.disabledDates.to) {
54+
if (!this.disabledConfig.has.to) {
5855
return false
5956
}
60-
return (
61-
this.utils.getFullYear(this.disabledDates.to) >=
62-
this.utils.getFullYear(this.pageDate)
63-
)
57+
return this.disabledConfig.to.year >= this.pageYear
6458
},
6559
/**
6660
* Set an array with all months
@@ -96,7 +90,7 @@ export default {
9690
*/
9791
pageYearName() {
9892
const { yearSuffix } = this.translation
99-
return `${this.utils.getFullYear(this.pageDate)}${yearSuffix}`
93+
return `${this.pageYear}${yearSuffix}`
10094
},
10195
},
10296
methods: {
@@ -115,19 +109,23 @@ export default {
115109
* @return {Boolean}
116110
*/
117111
isDisabledMonth(date) {
118-
return isMonthDisabled(date, this.disabledDates, this.utils)
112+
return new DisabledDate(this.utils, this.disabledDates).isMonthDisabled(
113+
date,
114+
)
119115
},
120116
/**
121117
* Whether the selected date is in this month
122118
* @param {Date} date
123119
* @return {Boolean}
124120
*/
125121
isSelectedMonth(date) {
122+
const month = this.utils.getMonth(date)
123+
const year = this.utils.getFullYear(date)
124+
126125
return (
127126
this.selectedDate &&
128-
this.utils.getFullYear(this.selectedDate) ===
129-
this.utils.getFullYear(date) &&
130-
this.utils.getMonth(this.selectedDate) === this.utils.getMonth(date)
127+
year === this.utils.getFullYear(this.selectedDate) &&
128+
month === this.utils.getMonth(this.selectedDate)
131129
)
132130
},
133131
/**

0 commit comments

Comments
 (0)