Skip to content

Commit f4346e1

Browse files
mrholekmrholek
committed
refactor(Calendar): improve syntax
1 parent 137eb23 commit f4346e1

File tree

4 files changed

+139
-25
lines changed

4 files changed

+139
-25
lines changed

‎js/src/util/calendar.js

Lines changed: 67 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
export const convertToLocalDate = (d, locale, options = {}) => d.toLocaleDateString(locale, options)
2+
23
export const convertToLocalTime = (d, locale, options = {}) => d.toLocaleTimeString(locale, options)
4+
35
export const createGroupsInArray = (arr, numberOfGroups) => {
46
const perGroup = Math.ceil(arr.length / numberOfGroups)
57
// eslint-disable-next-line unicorn/no-new-array
@@ -9,7 +11,42 @@ export const createGroupsInArray = (arr, numberOfGroups) => {
911
}
1012

1113
export const getCurrentYear = () => new Date().getFullYear()
14+
1215
export const getCurrentMonth = () => new Date().getMonth()
16+
17+
export const getLocalDateFromString = (string, locale, time) => {
18+
const date = new Date(2013, 11, 31, 17, 19, 22)
19+
let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
20+
regex = regex
21+
.replace('2013', '(?<year>[0-9]{2,4})')
22+
.replace('12', '(?<month>[0-9]{1,2})')
23+
.replace('31', '(?<day>[0-9]{1,2})')
24+
if (time) {
25+
regex = regex
26+
.replace('5', '(?<hour>[0-9]{1,2})')
27+
.replace('17', '(?<hour>[0-9]{1,2})')
28+
.replace('19', '(?<minute>[0-9]{1,2})')
29+
.replace('22', '(?<second>[0-9]{1,2})')
30+
.replace('PM', '(?<ampm>[A-Z]{2})')
31+
}
32+
33+
const rgx = new RegExp(`${regex}`)
34+
const partials = string.match(rgx)
35+
if (partials === null) {
36+
return
37+
}
38+
39+
const newDate = partials.groups &&
40+
(time ?
41+
new Date(Number(partials.groups.year, 10), Number(partials.groups.month, 10) - 1, Number(partials.groups.day), partials.groups.ampm ?
42+
(partials.groups.ampm === 'PM' ?
43+
Number(partials.groups.hour) + 12 :
44+
Number(partials.groups.hour)) :
45+
Number(partials.groups.hour), Number(partials.groups.minute), Number(partials.groups.second)) :
46+
new Date(Number(partials.groups.year), Number(partials.groups.month) - 1, Number(partials.groups.day)))
47+
return newDate
48+
}
49+
1350
export const getMonthName = (month, locale) => {
1451
const d = new Date()
1552
d.setDate(1)
@@ -103,6 +140,25 @@ export const getMonthDetails = (year, month, firstDayOfWeek) => {
103140
return weeks
104141
}
105142

143+
export const isDisableDateInRange = (startDate, endDate, dates) => {
144+
if (startDate && endDate) {
145+
const date = new Date(startDate)
146+
let disabled = false
147+
// eslint-disable-next-line no-unmodified-loop-condition
148+
while (date < endDate) {
149+
date.setDate(date.getDate() + 1)
150+
if (isDateDisabled(date, null, null, dates)) {
151+
disabled = true
152+
break
153+
}
154+
}
155+
156+
return disabled
157+
}
158+
159+
return false
160+
}
161+
106162
export const isDateDisabled = (date, min, max, dates) => {
107163
let disabled
108164
if (dates) {
@@ -148,9 +204,17 @@ export const isLastDayOfMonth = date => {
148204
}
149205

150206
export const isSameDateAs = (date, date2) => {
151-
return (date.getDate() === date2.getDate() &&
152-
date.getMonth() === date2.getMonth() &&
153-
date.getFullYear() === date2.getFullYear())
207+
if (date instanceof Date && date2 instanceof Date) {
208+
return (date.getDate() === date2.getDate() &&
209+
date.getMonth() === date2.getMonth() &&
210+
date.getFullYear() === date2.getFullYear())
211+
}
212+
213+
if (date === null && date2 === null) {
214+
return true
215+
}
216+
217+
return false
154218
}
155219

156220
export const isStartDate = (date, start, end) => {

‎scss/_calendar.scss

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
--#{$variable-prefix}calendar-cell-selected-color: #{$calendar-cell-selected-color};
1515
--#{$variable-prefix}calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
1616
--#{$variable-prefix}calendar-cell-range-bg: #{$calendar-cell-range-bg};
17+
--#{$variable-prefix}calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
18+
--#{$variable-prefix}calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
1719
--#{$variable-prefix}calendar-cell-today-color: #{$calendar-cell-today-color};
1820
// scss-docs-end calendar-css-vars
1921

@@ -129,22 +131,64 @@
129131
@include border-radius(0);
130132
}
131133

132-
&.range:not(.selected):first-child .calendar-cell-inner {
133-
@include border-start-radius($border-radius);
134-
}
135-
136-
&.range:not(.selected):last-child .calendar-cell-inner {
137-
@include border-end-radius($border-radius);
134+
&.range:not(.selected):hover .calendar-cell-inner {
135+
position: relative;
136+
&::after {
137+
position: absolute;
138+
width: 100%;
139+
height: 100%;
140+
content: "";
141+
background: var(--#{$variable-prefix}calendar-cell-range-hover-bg);
142+
@include border-radius($border-radius);
143+
}
138144
}
139145

146+
&.range:not(.selected):first-child .calendar-cell-inner,
140147
&:not(.range) + .range .calendar-cell-inner {
141148
@include border-start-radius($border-radius);
142149
}
143150

151+
&.range:not(.selected):last-child .calendar-cell-inner,
144152
&.range:not(.selected).last .calendar-cell-inner {
145153
@include border-end-radius($border-radius);
146154
}
147155

156+
&.range-hover .calendar-cell-inner {
157+
position: relative;
158+
&::before {
159+
position: absolute;
160+
width: 100%;
161+
height: 100%;
162+
content: "";
163+
}
164+
}
165+
166+
&.range-hover .calendar-cell-inner,
167+
&.range-hover.selected .calendar-cell-inner {
168+
&::before {
169+
border-top: 1px solid var(--#{$variable-prefix}calendar-cell-selected-bg);
170+
border-bottom: 1px solid var(--#{$variable-prefix}calendar-cell-selected-bg);
171+
@include border-radius(0);
172+
}
173+
}
174+
175+
&.range-hover:first-child .calendar-cell-inner,
176+
&:not(.range-hover) + .range-hover .calendar-cell-inner {
177+
&::before {
178+
border-left: 1px solid var(--#{$variable-prefix}calendar-cell-selected-bg);
179+
@include border-start-radius($border-radius);
180+
}
181+
}
182+
183+
&.range-hover:last-child .calendar-cell-inner,
184+
&.range-hover.last .calendar-cell-inner,
185+
&.range-hover + .range-hover:hover .calendar-cell-inner {
186+
&::before {
187+
border-right: 1px solid var(--#{$variable-prefix}calendar-cell-selected-bg);
188+
@include border-end-radius($border-radius);
189+
}
190+
}
191+
148192
&.selected:not(.previous):not(.next) .calendar-cell-inner,
149193
&.selected:not(.previous):not(.next).start .calendar-cell-inner,
150194
&.selected:not(.previous):not(.next).end .calendar-cell-inner {

‎scss/_variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2263,6 +2263,8 @@ $calendar-cell-selected-color: $white !default;
22632263
$calendar-cell-selected-bg: $primary !default;
22642264

22652265
$calendar-cell-range-bg: rgba($primary, .125) !default;
2266+
$calendar-cell-range-hover-bg: rgba($primary, .25) !default;
2267+
$calendar-cell-range-hover-border-color: $primary !default;
22662268

22672269
$calendar-cell-today-color: $danger !default;
22682270
// scss-docs-end calendar-variables

‎scss/themes/dark/_variables.scss

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -783,24 +783,28 @@ $toast-theme-map: (
783783

784784
// Calendar & Date & Time Pickers
785785

786-
$calendar-nav-border-color-dt: $border-color-dt !default;
787-
$calendar-nav-date-color-dt: $body-color-dt !default;
788-
$calendar-nav-date-hover-color-dt: $primary-dt !default;
789-
$calendar-cell-header-inner-color-dt: $medium-emphasis-dt !default;
790-
$calendar-cell-hover-bg-dt: rgba($black, .25) !default;
791-
$calendar-cell-disabled-color-dt: $disabled-dt !default;
792-
$calendar-cell-selected-bg-dt: $primary-dt !default;
793-
$calendar-cell-range-bg-dt: tint-color($primary-dt, 25%) !default;
786+
$calendar-nav-border-color-dt: $border-color-dt !default;
787+
$calendar-nav-date-color-dt: $body-color-dt !default;
788+
$calendar-nav-date-hover-color-dt: $primary-dt !default;
789+
$calendar-cell-header-inner-color-dt: $medium-emphasis-dt !default;
790+
$calendar-cell-hover-bg-dt: rgba($black, .25) !default;
791+
$calendar-cell-disabled-color-dt: $disabled-dt !default;
792+
$calendar-cell-selected-bg-dt: $primary-dt !default;
793+
$calendar-cell-range-bg-dt: tint-color($primary-dt, 25%) !default;
794+
$calendar-cell-range-hover-bg-dt: tint-color($primary-dt, 12.5%) !default;
795+
$calendar-cell-range-hover-border-color-dt: $primary-dt !default;
794796

795797
$calendar-theme-map: (
796-
"calendar-nav-border": $calendar-nav-border-width solid $calendar-nav-border-color-dt,
797-
"calendar-nav-date-color": $calendar-nav-date-color-dt,
798-
"calendar-nav-date-hover-color": $calendar-nav-date-hover-color-dt,
799-
"calendar-cell-header-inner-color": $calendar-cell-header-inner-color-dt,
800-
"calendar-cell-hover-bg": $calendar-cell-hover-bg-dt,
801-
"calendar-cell-disabled-color": $calendar-cell-disabled-color-dt,
802-
"calendar-cell-selected-bg": $calendar-cell-selected-bg-dt,
803-
"calendar-cell-range-bg": $calendar-cell-range-bg-dt
798+
"calendar-nav-border": $calendar-nav-border-width solid $calendar-nav-border-color-dt,
799+
"calendar-nav-date-color": $calendar-nav-date-color-dt,
800+
"calendar-nav-date-hover-color": $calendar-nav-date-hover-color-dt,
801+
"calendar-cell-header-inner-color": $calendar-cell-header-inner-color-dt,
802+
"calendar-cell-hover-bg": $calendar-cell-hover-bg-dt,
803+
"calendar-cell-disabled-color": $calendar-cell-disabled-color-dt,
804+
"calendar-cell-selected-bg": $calendar-cell-selected-bg-dt,
805+
"calendar-cell-range-bg": $calendar-cell-range-bg-dt,
806+
"calendar-cell-range-hover-bg": $calendar-cell-range-hover-bg-dt,
807+
"calendar-cell-range-hover-border-color": $calendar-cell-range-hover-border-color-dt
804808
) !default;
805809

806810
$picker-footer-border-color-dt: $border-color-dt !default;

0 commit comments

Comments
 (0)