@acusti/date-picker 0.10.1 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/DatePicker.d.ts +1 -1
- package/dist/index.js +868 -4
- package/dist/index.js.map +1 -1
- package/package.json +17 -9
- package/dist/DatePicker.js +0 -108
- package/dist/DatePicker.js.flow +0 -31
- package/dist/DatePicker.js.map +0 -1
- package/dist/MonthCalendar.js +0 -105
- package/dist/MonthCalendar.js.flow +0 -20
- package/dist/MonthCalendar.js.map +0 -1
- package/dist/index.js.flow +0 -10
- package/dist/styles/date-picker.js +0 -62
- package/dist/styles/date-picker.js.map +0 -1
- package/dist/styles/month-calendar.js +0 -154
- package/dist/styles/month-calendar.js.map +0 -1
- package/dist/utils.js +0 -49
- package/dist/utils.js.flow +0 -20
- package/dist/utils.js.map +0 -1
- package/dist/utils.test.d.ts +0 -1
- package/dist/utils.test.js +0 -88
- package/dist/utils.test.js.flow +0 -6
- package/dist/utils.test.js.map +0 -1
- package/src/DatePicker.tsx +0 -203
- package/src/MonthCalendar.tsx +0 -195
- package/src/index.ts +0 -3
- package/src/styles/date-picker.ts +0 -62
- package/src/styles/month-calendar.ts +0 -154
- package/src/utils.test.ts +0 -163
- package/src/utils.ts +0 -53
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
export const ROOT_CLASS_NAME = 'uktmonthcalendar';
|
|
2
|
-
export const STYLES = `
|
|
3
|
-
.${ROOT_CLASS_NAME} {
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-direction: column;
|
|
6
|
-
flex: 1 1 auto;
|
|
7
|
-
box-sizing: border-box;
|
|
8
|
-
max-width: 325px;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.${ROOT_CLASS_NAME}-month-title {
|
|
12
|
-
display: flex;
|
|
13
|
-
align-items: center;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
flex: 0 0 auto;
|
|
16
|
-
box-sizing: border-box;
|
|
17
|
-
padding-bottom: 25px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
h3.${ROOT_CLASS_NAME}-month-title-text {
|
|
21
|
-
font-size: 18px;
|
|
22
|
-
line-height: 23px;
|
|
23
|
-
font-weight: 600;
|
|
24
|
-
color: #000;
|
|
25
|
-
margin: 0px;
|
|
26
|
-
text-align: center;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.${ROOT_CLASS_NAME}-month-week {
|
|
30
|
-
flex: 0 0 auto;
|
|
31
|
-
display: grid;
|
|
32
|
-
grid-column-gap: 0px;
|
|
33
|
-
grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
|
|
34
|
-
grid-auto-flow: dense;
|
|
35
|
-
box-sizing: border-box;
|
|
36
|
-
padding-bottom: 12px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.${ROOT_CLASS_NAME}-month-week .week-day-item {
|
|
40
|
-
flex: 1 1 auto;
|
|
41
|
-
display: flex;
|
|
42
|
-
justify-content: center;
|
|
43
|
-
align-items: center;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.${ROOT_CLASS_NAME}-month-week span.week-day-item-text {
|
|
47
|
-
text-align: center;
|
|
48
|
-
font-size: 13px;
|
|
49
|
-
line-height: 21px;
|
|
50
|
-
margin: 0px;
|
|
51
|
-
color: #9a9a9a;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.${ROOT_CLASS_NAME}-month-days {
|
|
55
|
-
flex: 1 1 auto;
|
|
56
|
-
display: flex;
|
|
57
|
-
flex-direction: column;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.${ROOT_CLASS_NAME}-month-row {
|
|
61
|
-
flex: 1 1 auto;
|
|
62
|
-
display: grid;
|
|
63
|
-
grid-column-gap: 0px;
|
|
64
|
-
grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
|
|
65
|
-
grid-auto-flow: dense;
|
|
66
|
-
margin-bottom: 1px;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.${ROOT_CLASS_NAME}-month-day-item {
|
|
70
|
-
display: flex;
|
|
71
|
-
justify-content: center;
|
|
72
|
-
align-items: center;
|
|
73
|
-
position: relative;
|
|
74
|
-
height: 46px;
|
|
75
|
-
width: 46px;
|
|
76
|
-
cursor: pointer;
|
|
77
|
-
border: none;
|
|
78
|
-
background-color: transparent;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.${ROOT_CLASS_NAME}-month-day-item:disabled {
|
|
82
|
-
cursor: auto;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.${ROOT_CLASS_NAME}-month-day-item.is-selected {
|
|
86
|
-
background-color: #f8f8f8;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.${ROOT_CLASS_NAME}-month-day-item.start-date {
|
|
90
|
-
background-color: #f8f8f8;
|
|
91
|
-
border-top-left-radius: 50%;
|
|
92
|
-
border-bottom-left-radius: 50%;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.${ROOT_CLASS_NAME}-month-day-item.start-date:after {
|
|
96
|
-
background-color: #000;
|
|
97
|
-
opacity: 1;
|
|
98
|
-
visibility: visible;
|
|
99
|
-
}
|
|
100
|
-
.${ROOT_CLASS_NAME}-month-day-item.start-date span.month-day-item-text {
|
|
101
|
-
color: #fff;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.${ROOT_CLASS_NAME}-month-day-item.end-date {
|
|
105
|
-
background-color: #f8f8f8;
|
|
106
|
-
border-top-right-radius: 50%;
|
|
107
|
-
border-bottom-right-radius: 50%;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.${ROOT_CLASS_NAME}-month-day-item.end-date:after {
|
|
111
|
-
background-color: #000;
|
|
112
|
-
opacity: 1;
|
|
113
|
-
visibility: visible;
|
|
114
|
-
}
|
|
115
|
-
.${ROOT_CLASS_NAME}-month-day-item.end-date span.month-day-item-text {
|
|
116
|
-
color: #fff;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.${ROOT_CLASS_NAME}-month-day-item:hover:after {
|
|
120
|
-
opacity: 1;
|
|
121
|
-
visibility: visible;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.${ROOT_CLASS_NAME}-month-day-item:after {
|
|
125
|
-
content: "";
|
|
126
|
-
position: absolute;
|
|
127
|
-
left: 50%;
|
|
128
|
-
top: 50%;
|
|
129
|
-
transform: translate(-50%, -50%);
|
|
130
|
-
pointer-events: none;
|
|
131
|
-
border-radius: 50%;
|
|
132
|
-
border: 1px solid #000;
|
|
133
|
-
width: 43px;
|
|
134
|
-
height: 43px;
|
|
135
|
-
transition: opacity 0.25s ease-in-out;
|
|
136
|
-
opacity: 0;
|
|
137
|
-
visibility: hidden;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.${ROOT_CLASS_NAME}-month-day-item.is-empty:after {
|
|
141
|
-
content: none;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.${ROOT_CLASS_NAME}-month-day-item span.month-day-item-text {
|
|
145
|
-
text-align: center;
|
|
146
|
-
font-size: 13px;
|
|
147
|
-
line-height: 21px;
|
|
148
|
-
margin: 0px;
|
|
149
|
-
color: #000;
|
|
150
|
-
position: relative;
|
|
151
|
-
z-index: 1;
|
|
152
|
-
}
|
|
153
|
-
`;
|
|
154
|
-
//# sourceMappingURL=month-calendar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"month-calendar.js","sourceRoot":"","sources":["../../src/styles/month-calendar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;;;;;GAQf,eAAe;;;;;;;;;KASb,eAAe;;;;;;;;;GASjB,eAAe;;;;;;;;;;GAUf,eAAe;;;;;;;GAOf,eAAe;;;;;;;;GAQf,eAAe;;;;;;GAMf,eAAe;;;;;;;;;GASf,eAAe;;;;;;;;;;;;GAYf,eAAe;;;;GAIf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;GAKf,eAAe;;;;;;;;;;;;;;;;GAgBf,eAAe;;;;GAIf,eAAe;;;;;;;;;CASjB,CAAC"}
|
package/dist/utils.js
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
// The following utils work on a “month” as a unique numerical value
|
|
2
|
-
// representing the number of months since the unix epoch (jan 1970)
|
|
3
|
-
const START_YEAR = 1970;
|
|
4
|
-
const MONTH_NAMES = [
|
|
5
|
-
'January',
|
|
6
|
-
'February',
|
|
7
|
-
'March',
|
|
8
|
-
'April',
|
|
9
|
-
'May',
|
|
10
|
-
'June',
|
|
11
|
-
'July',
|
|
12
|
-
'August',
|
|
13
|
-
'September',
|
|
14
|
-
'October',
|
|
15
|
-
'November',
|
|
16
|
-
'December',
|
|
17
|
-
];
|
|
18
|
-
const getYearFromDate = (date, asUTC) => (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;
|
|
19
|
-
export const getMonthFromDate = (date, asUTC) => {
|
|
20
|
-
const yearAsMonths = getYearFromDate(date, asUTC) * 12;
|
|
21
|
-
return yearAsMonths + (asUTC ? date.getUTCMonth() : date.getMonth());
|
|
22
|
-
};
|
|
23
|
-
export const getYearFromMonth = (month) => Math.floor(month / 12) + START_YEAR;
|
|
24
|
-
export const getMonthNameFromMonth = (month) => {
|
|
25
|
-
let index = month % 12;
|
|
26
|
-
if (Number.isNaN(index))
|
|
27
|
-
return '';
|
|
28
|
-
if (index < 0)
|
|
29
|
-
index = 12 + index;
|
|
30
|
-
return MONTH_NAMES[index];
|
|
31
|
-
};
|
|
32
|
-
export const getMonthAbbreviationFromMonth = (month) => {
|
|
33
|
-
const monthName = getMonthNameFromMonth(month);
|
|
34
|
-
if (monthName === 'September')
|
|
35
|
-
return 'Sept';
|
|
36
|
-
return monthName.substring(0, 3);
|
|
37
|
-
};
|
|
38
|
-
export const getDateFromMonthAndDay = (month, day, asUTC) => {
|
|
39
|
-
const monthIn12 = month < 0 ? (12 - Math.abs(month % 12)) % 12 : month % 12;
|
|
40
|
-
const year = getYearFromMonth(month);
|
|
41
|
-
return asUTC
|
|
42
|
-
? new Date(Date.UTC(year, monthIn12, day))
|
|
43
|
-
: new Date(year, monthIn12, day);
|
|
44
|
-
};
|
|
45
|
-
export const getLastDateFromMonth = (month, asUTC) => {
|
|
46
|
-
// day 0 of the next month is the last day of the current month
|
|
47
|
-
return getDateFromMonthAndDay(month + 1, 0, asUTC);
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=utils.js.map
|
package/dist/utils.js.flow
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Flowtype definitions for utils
|
|
3
|
-
* Generated by Flowgen from a Typescript Definition
|
|
4
|
-
* Flowgen v1.21.0
|
|
5
|
-
* @flow
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
declare export var getMonthFromDate: (date: Date, asUTC?: boolean) => number;
|
|
9
|
-
declare export var getYearFromMonth: (month: number) => number;
|
|
10
|
-
declare export var getMonthNameFromMonth: (month: number) => string;
|
|
11
|
-
declare export var getMonthAbbreviationFromMonth: (month: number) => string;
|
|
12
|
-
declare export var getDateFromMonthAndDay: (
|
|
13
|
-
month: number,
|
|
14
|
-
day: number,
|
|
15
|
-
asUTC?: boolean
|
|
16
|
-
) => Date;
|
|
17
|
-
declare export var getLastDateFromMonth: (
|
|
18
|
-
month: number,
|
|
19
|
-
asUTC?: boolean
|
|
20
|
-
) => Date;
|
package/dist/utils.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oEAAoE;AACpE,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,WAAW,GAAG;IAChB,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;CACb,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,KAAe,EAAE,EAAE,CACpD,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,UAAU,CAAC;AAEtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,KAAe,EAAE,EAAE;IAC5D,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC;IACvD,OAAO,YAAY,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC;AAEvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3D,IAAI,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACvB,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACnC,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,GAAG,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE;IAC3D,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAC7C,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,KAAe,EAAE,EAAE;IAClF,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;IAC5E,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACrC,OAAO,KAAK;QACR,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC;QAC1C,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAa,EAAE,KAAe,EAAE,EAAE;IACnE,+DAA+D;IAC/D,OAAO,sBAAsB,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;AACvD,CAAC,CAAC"}
|
package/dist/utils.test.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/utils.test.js
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { describe, expect, it } from 'vitest';
|
|
2
|
-
import { getDateFromMonthAndDay, getLastDateFromMonth, getMonthFromDate, getMonthNameFromMonth, getYearFromMonth, } from './utils.js';
|
|
3
|
-
const INVALID_DATE = new Date('');
|
|
4
|
-
describe('@acusti/date-picker', () => {
|
|
5
|
-
describe('utils', () => {
|
|
6
|
-
describe('getMonthFromDate', () => {
|
|
7
|
-
it('returns the correct month digit for a post-unix epoch month', () => {
|
|
8
|
-
expect(getMonthFromDate(new Date(1970, 0, 8))).toBe(0); // january 8, 1970
|
|
9
|
-
expect(getMonthFromDate(new Date(1971, 11, 1))).toBe(23); // november 1, 1971
|
|
10
|
-
});
|
|
11
|
-
it('returns the correct month digit for a pre-unix epoch month', () => {
|
|
12
|
-
expect(getMonthFromDate(new Date(1969, 11, 31))).toBe(-1); // december 31, 1969
|
|
13
|
-
expect(getMonthFromDate(new Date(1968, 3, 30))).toBe(-21); // april 30, 1968
|
|
14
|
-
});
|
|
15
|
-
it('returns the correct month digit based on UTC time if asUTC is true', () => {
|
|
16
|
-
const date = new Date('1970-01-01T00:00:00.000Z');
|
|
17
|
-
expect(getMonthFromDate(date, true)).toBe(0);
|
|
18
|
-
// if test is run in a timezone behind UTC, ommitting asUTC returns -1
|
|
19
|
-
// if not, the month should be the same with or without asUTC flag
|
|
20
|
-
expect(getMonthFromDate(date)).toBe(date.getTimezoneOffset() >= 60 ? -1 : 0);
|
|
21
|
-
});
|
|
22
|
-
it('returns NaN for an Invalid Date', () => {
|
|
23
|
-
expect(getMonthFromDate(INVALID_DATE)).toBe(NaN);
|
|
24
|
-
});
|
|
25
|
-
});
|
|
26
|
-
describe('getYearFromMonth', () => {
|
|
27
|
-
it('returns the correct year for a post-unix epoch date', () => {
|
|
28
|
-
expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(1970);
|
|
29
|
-
expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(2048);
|
|
30
|
-
});
|
|
31
|
-
it('returns the correct year digit for a pre-unix epoch date', () => {
|
|
32
|
-
expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(1969);
|
|
33
|
-
expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(100);
|
|
34
|
-
});
|
|
35
|
-
it('returns NaN for an Invalid Date', () => {
|
|
36
|
-
expect(getYearFromMonth(getMonthFromDate(INVALID_DATE))).toBe(NaN);
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
describe('getMonthNameFromMonth', () => {
|
|
40
|
-
it('returns the correct month name for a post-unix epoch month', () => {
|
|
41
|
-
expect(getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19)))).toBe('June');
|
|
42
|
-
});
|
|
43
|
-
it('returns the correct month name for a pre-unix epoch month', () => {
|
|
44
|
-
expect(getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toBe('June');
|
|
45
|
-
});
|
|
46
|
-
it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
|
|
47
|
-
expect(getMonthNameFromMonth(getMonthFromDate(INVALID_DATE))).toBe('');
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
describe('getDateFromMonthAndDay', () => {
|
|
51
|
-
it('returns the date of the specified day for a post-unix epoch month', () => {
|
|
52
|
-
expect(getDateFromMonthAndDay(getMonthFromDate(new Date(2008, 2, 13)), 1)).toEqual(new Date(2008, 2, 1));
|
|
53
|
-
expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1999, 11, 1)), 31)).toEqual(new Date(1999, 11, 31));
|
|
54
|
-
expect(getDateFromMonthAndDay(getMonthFromDate(new Date(2000, 0, 0)), 31)).toEqual(new Date(1999, 11, 31));
|
|
55
|
-
});
|
|
56
|
-
it('returns the correct date for a pre-unix epoch month', () => {
|
|
57
|
-
expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30)).toEqual(new Date(1865, 5, 30));
|
|
58
|
-
expect(getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1)).toEqual(new Date(100, 11, 1));
|
|
59
|
-
});
|
|
60
|
-
it('returns date for start of day as UTC time if asUTC is true', () => {
|
|
61
|
-
expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30, true)).toEqual(new Date(Date.UTC(1865, 5, 30)));
|
|
62
|
-
expect(getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1, true)).toEqual(new Date(Date.UTC(100, 11, 1)));
|
|
63
|
-
});
|
|
64
|
-
it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
|
|
65
|
-
expect(getDateFromMonthAndDay(getMonthFromDate(INVALID_DATE), 1)).toEqual(INVALID_DATE);
|
|
66
|
-
});
|
|
67
|
-
});
|
|
68
|
-
describe('getLastDateFromMonth', () => {
|
|
69
|
-
it('returns the date of the last day for a post-unix epoch month', () => {
|
|
70
|
-
expect(getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13)))).toEqual(new Date(2008, 2, 31));
|
|
71
|
-
// february in a leap year
|
|
72
|
-
expect(getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23)))).toEqual(new Date(2024, 1, 29));
|
|
73
|
-
// february in a non-leap year
|
|
74
|
-
expect(getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1)))).toEqual(new Date(1985, 1, 28));
|
|
75
|
-
});
|
|
76
|
-
it('returns the correct date for a pre-unix epoch month', () => {
|
|
77
|
-
expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toEqual(new Date(1865, 5, 30));
|
|
78
|
-
});
|
|
79
|
-
it('returns date for start of day as UTC time if asUTC is true', () => {
|
|
80
|
-
expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)), true)).toEqual(new Date(Date.UTC(1865, 5, 30)));
|
|
81
|
-
});
|
|
82
|
-
it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
|
|
83
|
-
expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(INVALID_DATE);
|
|
84
|
-
});
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
});
|
|
88
|
-
//# sourceMappingURL=utils.test.js.map
|
package/dist/utils.test.js.flow
DELETED
package/dist/utils.test.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../src/utils.test.ts"],"names":[],"mappings":"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"}
|
package/src/DatePicker.tsx
DELETED
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
|
|
2
|
-
import { Style } from '@acusti/styling';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
|
|
6
|
-
import MonthCalendar from './MonthCalendar.js';
|
|
7
|
-
import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
|
|
8
|
-
import {
|
|
9
|
-
getMonthAbbreviationFromMonth,
|
|
10
|
-
getMonthFromDate,
|
|
11
|
-
getYearFromMonth,
|
|
12
|
-
} from './utils.js';
|
|
13
|
-
|
|
14
|
-
export type Props = {
|
|
15
|
-
className?: string;
|
|
16
|
-
dateEnd?: Date | number | string;
|
|
17
|
-
dateStart?: Date | number | string;
|
|
18
|
-
initialMonth?: number;
|
|
19
|
-
isRange?: boolean;
|
|
20
|
-
isTwoUp?: boolean;
|
|
21
|
-
monthLimitFirst?: number;
|
|
22
|
-
monthLimitLast?: number;
|
|
23
|
-
onChange: (payload: { dateEnd?: null | string; dateStart: string }) => void;
|
|
24
|
-
/**
|
|
25
|
-
* Boolean to specify that date picker should initially render with the
|
|
26
|
-
* end date’s month visible. The default behavior is to initially render
|
|
27
|
-
* with the start date’s month visible.
|
|
28
|
-
*/
|
|
29
|
-
showEndInitially?: boolean;
|
|
30
|
-
useMonthAbbreviations?: boolean;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const { Fragment, useCallback, useEffect, useRef, useState } = React;
|
|
34
|
-
|
|
35
|
-
const getAbbreviatedMonthTitle = (month: number) =>
|
|
36
|
-
`${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
|
|
37
|
-
|
|
38
|
-
export default function DatePicker({
|
|
39
|
-
className,
|
|
40
|
-
dateEnd: _dateEnd,
|
|
41
|
-
dateStart: _dateStart,
|
|
42
|
-
initialMonth,
|
|
43
|
-
isRange = _dateEnd != null,
|
|
44
|
-
isTwoUp,
|
|
45
|
-
monthLimitFirst,
|
|
46
|
-
monthLimitLast,
|
|
47
|
-
onChange,
|
|
48
|
-
showEndInitially,
|
|
49
|
-
useMonthAbbreviations,
|
|
50
|
-
}: Props) {
|
|
51
|
-
const dateEndFromProps =
|
|
52
|
-
_dateEnd != null && typeof _dateEnd !== 'string'
|
|
53
|
-
? new Date(_dateEnd).toISOString()
|
|
54
|
-
: _dateEnd;
|
|
55
|
-
const dateStartFromProps =
|
|
56
|
-
_dateStart != null && typeof _dateStart !== 'string'
|
|
57
|
-
? new Date(_dateStart).toISOString()
|
|
58
|
-
: _dateStart;
|
|
59
|
-
const [dateEnd, setDateEnd] = useState<null | string>(dateEndFromProps ?? null);
|
|
60
|
-
const [dateStart, setDateStart] = useState<null | string>(dateStartFromProps ?? null);
|
|
61
|
-
const updatingDateEndRef = useRef(false);
|
|
62
|
-
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
if (dateEndFromProps == null) return;
|
|
65
|
-
setDateEnd(dateEndFromProps);
|
|
66
|
-
}, [dateEndFromProps]);
|
|
67
|
-
|
|
68
|
-
useEffect(() => {
|
|
69
|
-
if (dateStartFromProps == null) return;
|
|
70
|
-
setDateStart(dateStartFromProps);
|
|
71
|
-
}, [dateStartFromProps]);
|
|
72
|
-
|
|
73
|
-
if (initialMonth == null) {
|
|
74
|
-
// if no valid initial date, initially show present month as date end
|
|
75
|
-
const useDateEnd = dateStart == null || Boolean(showEndInitially && dateEnd);
|
|
76
|
-
// use date from props if set
|
|
77
|
-
const initialDate = useDateEnd ? dateEnd : dateStart;
|
|
78
|
-
initialMonth = getMonthFromDate(
|
|
79
|
-
initialDate == null ? new Date() : new Date(initialDate),
|
|
80
|
-
);
|
|
81
|
-
if (useDateEnd && isTwoUp) {
|
|
82
|
-
initialMonth -= 1;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
const [dateEndPreview, setDateEndPreview] = useState<null | string>(null);
|
|
87
|
-
const [month, setMonth] = useState<number>(initialMonth);
|
|
88
|
-
|
|
89
|
-
// In two-up view we see 1 more month, so monthLimitLast needs to be 1 less
|
|
90
|
-
if (isTwoUp && monthLimitLast != null) {
|
|
91
|
-
monthLimitLast -= 1;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
const handleClickLeftArrow = useCallback(() => {
|
|
95
|
-
setMonth((existingMonth: number) =>
|
|
96
|
-
monthLimitFirst == null || existingMonth > monthLimitFirst
|
|
97
|
-
? existingMonth - 1
|
|
98
|
-
: existingMonth,
|
|
99
|
-
);
|
|
100
|
-
}, [monthLimitFirst]);
|
|
101
|
-
|
|
102
|
-
const handleClickRightArrow = useCallback(() => {
|
|
103
|
-
setMonth((existingMonth: number) =>
|
|
104
|
-
monthLimitLast == null || existingMonth < monthLimitLast
|
|
105
|
-
? existingMonth + 1
|
|
106
|
-
: existingMonth,
|
|
107
|
-
);
|
|
108
|
-
}, [monthLimitLast]);
|
|
109
|
-
|
|
110
|
-
const handleChange = useCallback(
|
|
111
|
-
(date: string) => {
|
|
112
|
-
// If we last set the dateStart or we have a dateStart but no dateEnd, set dateEnd
|
|
113
|
-
if (
|
|
114
|
-
isRange &&
|
|
115
|
-
dateStart != null &&
|
|
116
|
-
(updatingDateEndRef.current || dateEnd == null)
|
|
117
|
-
) {
|
|
118
|
-
// Ensure that dateEnd is after dateStart; if not, swap them
|
|
119
|
-
if (date < dateStart) {
|
|
120
|
-
setDateStart(date);
|
|
121
|
-
setDateEnd(dateStart);
|
|
122
|
-
onChange({ dateEnd: dateStart, dateStart: date });
|
|
123
|
-
} else {
|
|
124
|
-
setDateEnd(date);
|
|
125
|
-
onChange({ dateEnd: date, dateStart });
|
|
126
|
-
}
|
|
127
|
-
updatingDateEndRef.current = false;
|
|
128
|
-
} else {
|
|
129
|
-
setDateStart(date);
|
|
130
|
-
setDateEnd(null);
|
|
131
|
-
if (isRange) {
|
|
132
|
-
onChange({ dateEnd: null, dateStart: date });
|
|
133
|
-
updatingDateEndRef.current = true;
|
|
134
|
-
} else {
|
|
135
|
-
onChange({ dateStart: date });
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
},
|
|
139
|
-
[dateEnd, dateStart, isRange, onChange],
|
|
140
|
-
);
|
|
141
|
-
|
|
142
|
-
const handleChangeEndPreview = useCallback((date: string) => {
|
|
143
|
-
setDateEndPreview(date);
|
|
144
|
-
}, []);
|
|
145
|
-
|
|
146
|
-
return (
|
|
147
|
-
<Fragment>
|
|
148
|
-
<Style href="@acusti/date-picker/DatePicker">{STYLES}</Style>
|
|
149
|
-
<div
|
|
150
|
-
className={clsx(ROOT_CLASS_NAME, className, {
|
|
151
|
-
'two-up': isTwoUp,
|
|
152
|
-
})}
|
|
153
|
-
>
|
|
154
|
-
<div className={`${ROOT_CLASS_NAME}-range-arrow-wrap`}>
|
|
155
|
-
<div
|
|
156
|
-
className={clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
|
|
157
|
-
disabled: monthLimitFirst != null && month <= monthLimitFirst,
|
|
158
|
-
})}
|
|
159
|
-
onClick={handleClickLeftArrow}
|
|
160
|
-
/>
|
|
161
|
-
<div
|
|
162
|
-
className={clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
|
|
163
|
-
disabled: monthLimitLast != null && month >= monthLimitLast,
|
|
164
|
-
})}
|
|
165
|
-
onClick={handleClickRightArrow}
|
|
166
|
-
/>
|
|
167
|
-
</div>
|
|
168
|
-
<div className={`${ROOT_CLASS_NAME}-month-container`}>
|
|
169
|
-
<MonthCalendar
|
|
170
|
-
dateEnd={dateEnd}
|
|
171
|
-
dateEndPreview={dateEndPreview}
|
|
172
|
-
dateStart={dateStart}
|
|
173
|
-
isRange={isRange}
|
|
174
|
-
month={month}
|
|
175
|
-
onChange={handleChange}
|
|
176
|
-
onChangeEndPreview={handleChangeEndPreview}
|
|
177
|
-
title={
|
|
178
|
-
useMonthAbbreviations
|
|
179
|
-
? getAbbreviatedMonthTitle(month)
|
|
180
|
-
: undefined
|
|
181
|
-
}
|
|
182
|
-
/>
|
|
183
|
-
{isTwoUp ? (
|
|
184
|
-
<MonthCalendar
|
|
185
|
-
dateEnd={dateEnd}
|
|
186
|
-
dateEndPreview={dateEndPreview}
|
|
187
|
-
dateStart={dateStart}
|
|
188
|
-
isRange={isRange}
|
|
189
|
-
month={month + 1}
|
|
190
|
-
onChange={handleChange}
|
|
191
|
-
onChangeEndPreview={handleChangeEndPreview}
|
|
192
|
-
title={
|
|
193
|
-
useMonthAbbreviations
|
|
194
|
-
? getAbbreviatedMonthTitle(month + 1)
|
|
195
|
-
: undefined
|
|
196
|
-
}
|
|
197
|
-
/>
|
|
198
|
-
) : null}
|
|
199
|
-
</div>
|
|
200
|
-
</div>
|
|
201
|
-
</Fragment>
|
|
202
|
-
);
|
|
203
|
-
}
|