@acusti/date-picker 0.1.1 → 0.2.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/dist/DatePicker.d.ts +2 -2
- package/dist/DatePicker.js +5 -4
- package/dist/DatePicker.js.flow +2 -1
- package/dist/DatePicker.js.map +1 -1
- package/dist/MonthCalendar.d.ts +3 -3
- package/dist/MonthCalendar.js +4 -4
- package/dist/MonthCalendar.js.flow +3 -2
- package/dist/MonthCalendar.js.map +1 -1
- package/dist/styles/date-picker.d.ts +1 -1
- package/dist/styles/month-calendar.d.ts +1 -1
- package/dist/utils.test.d.ts +1 -0
- package/dist/utils.test.js +18 -0
- package/dist/utils.test.js.flow +6 -0
- package/dist/utils.test.js.map +1 -0
- package/package.json +18 -14
- package/src/DatePicker.tsx +5 -5
- package/src/MonthCalendar.tsx +6 -6
package/dist/DatePicker.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
export type Props = {
|
|
3
3
|
className?: string;
|
|
4
4
|
dateEnd?: Date | string | number;
|
|
@@ -14,4 +14,4 @@ export type Props = {
|
|
|
14
14
|
}) => void;
|
|
15
15
|
useMonthAbbreviations?: boolean;
|
|
16
16
|
};
|
|
17
|
-
export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, isRange, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, onChange, useMonthAbbreviations, }: Props): JSX.Element;
|
|
17
|
+
export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, isRange, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, onChange, useMonthAbbreviations, }: Props): React.JSX.Element;
|
package/dist/DatePicker.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
|
|
1
2
|
import { Style } from '@acusti/styling';
|
|
2
3
|
import clsx from 'clsx';
|
|
3
4
|
import * as React from 'react';
|
|
4
|
-
import { getMonthAbbreviationFromMonth, getMonthFromDate, getYearFromMonth, } from './utils.js';
|
|
5
|
-
import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
|
|
6
5
|
import MonthCalendar from './MonthCalendar.js';
|
|
6
|
+
import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
|
|
7
|
+
import { getMonthAbbreviationFromMonth, getMonthFromDate, getYearFromMonth, } from './utils.js';
|
|
7
8
|
const { Fragment, useCallback, useEffect, useState } = React;
|
|
8
9
|
const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
|
|
9
10
|
export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, isRange = _dateEnd != null, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, onChange, useMonthAbbreviations, }) {
|
|
@@ -13,8 +14,8 @@ export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _d
|
|
|
13
14
|
const dateStartFromProps = _dateStart != null && typeof _dateStart !== 'string'
|
|
14
15
|
? new Date(_dateStart).toISOString()
|
|
15
16
|
: _dateStart;
|
|
16
|
-
const [dateEnd, setDateEnd] = useState(dateEndFromProps
|
|
17
|
-
const [dateStart, setDateStart] = useState(dateStartFromProps
|
|
17
|
+
const [dateEnd, setDateEnd] = useState(dateEndFromProps !== null && dateEndFromProps !== void 0 ? dateEndFromProps : null);
|
|
18
|
+
const [dateStart, setDateStart] = useState(dateStartFromProps !== null && dateStartFromProps !== void 0 ? dateStartFromProps : null);
|
|
18
19
|
useEffect(() => {
|
|
19
20
|
if (dateEndFromProps == null)
|
|
20
21
|
return;
|
package/dist/DatePicker.js.flow
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
import * as React from "react";
|
|
8
9
|
export type Props = {|
|
|
9
10
|
className?: string,
|
|
10
11
|
dateEnd?: Date | string | number,
|
|
@@ -20,4 +21,4 @@ export type Props = {|
|
|
|
20
21
|
|}) => void,
|
|
21
22
|
useMonthAbbreviations?: boolean,
|
|
22
23
|
|};
|
|
23
|
-
declare export default function DatePicker(x: Props): React
|
|
24
|
+
declare export default function DatePicker(x: Props): React.JSX.Element;
|
package/dist/DatePicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"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"}
|
package/dist/MonthCalendar.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
export type Props = {
|
|
3
3
|
className?: string;
|
|
4
|
-
dateStart?: Date | string | number | null;
|
|
5
4
|
dateEnd?: Date | string | number | null;
|
|
6
5
|
dateEndPreview?: string | null;
|
|
6
|
+
dateStart?: Date | string | number | null;
|
|
7
7
|
isRange?: boolean;
|
|
8
8
|
month: number;
|
|
9
9
|
onChange?: (date: string) => void;
|
|
10
10
|
onChangeEndPreview?: (date: string) => void;
|
|
11
11
|
title?: string;
|
|
12
12
|
};
|
|
13
|
-
export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }: Props): JSX.Element;
|
|
13
|
+
export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }: Props): React.JSX.Element;
|
package/dist/MonthCalendar.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { Style } from '@acusti/styling';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './utils.js';
|
|
5
4
|
import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
|
|
5
|
+
import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './utils.js';
|
|
6
6
|
const { Fragment, useCallback } = React;
|
|
7
7
|
const DAYS = Array(7).fill(null);
|
|
8
8
|
export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }) {
|
|
9
9
|
const year = getYearFromMonth(month);
|
|
10
|
-
title = title
|
|
10
|
+
title = title !== null && title !== void 0 ? title : `${getMonthNameFromMonth(month)} ${year}`;
|
|
11
11
|
const monthWithinYear = month % 12;
|
|
12
12
|
const firstDate = new Date(year, monthWithinYear, 1);
|
|
13
13
|
const nextMonth = month + 1;
|
|
@@ -91,12 +91,12 @@ export default function MonthCalendar({ className, dateEnd, dateEndPreview, date
|
|
|
91
91
|
(dateRangeEndDay != null &&
|
|
92
92
|
dayNumber < dateRangeEndDay);
|
|
93
93
|
return (React.createElement("button", { className: clsx(`${ROOT_CLASS_NAME}-month-day-item`, {
|
|
94
|
+
'end-date': !isEmpty &&
|
|
95
|
+
dayNumber === dateRangeEndDay,
|
|
94
96
|
'is-empty': isEmpty,
|
|
95
97
|
'is-selected': !isEmpty &&
|
|
96
98
|
isAfterDateRangeStart &&
|
|
97
99
|
isBeforeDateRangeEnd,
|
|
98
|
-
'end-date': !isEmpty &&
|
|
99
|
-
dayNumber === dateRangeEndDay,
|
|
100
100
|
'start-date': !isEmpty &&
|
|
101
101
|
dayNumber === dateRangeStartDay,
|
|
102
102
|
}), "data-date": new Date(year, monthWithinYear, dayNumber).toISOString(), key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button" }, isEmpty ? null : (React.createElement("span", { className: "month-day-item-text" }, dayNumber))));
|
|
@@ -5,15 +5,16 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
import * as React from "react";
|
|
8
9
|
export type Props = {|
|
|
9
10
|
className?: string,
|
|
10
|
-
dateStart?: Date | string | number | null,
|
|
11
11
|
dateEnd?: Date | string | number | null,
|
|
12
12
|
dateEndPreview?: string | null,
|
|
13
|
+
dateStart?: Date | string | number | null,
|
|
13
14
|
isRange?: boolean,
|
|
14
15
|
month: number,
|
|
15
16
|
onChange?: (date: string) => void,
|
|
16
17
|
onChangeEndPreview?: (date: string) => void,
|
|
17
18
|
title?: string,
|
|
18
19
|
|};
|
|
19
|
-
declare export default function MonthCalendar(x: Props): React
|
|
20
|
+
declare export default function MonthCalendar(x: Props): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare const ROOT_CLASS_NAME = "uktdatepicker";
|
|
2
|
-
export declare const STYLES:
|
|
2
|
+
export declare const STYLES = "\n.uktdatepicker {\n display: flex;\n box-sizing: border-box;\n padding: 40px 60px 60px;\n flex: 1 1 auto;\n position: relative;\n max-width: 450px;\n}\n\n.uktdatepicker.two-up {\n max-width: 820px;\n}\n\n.uktdatepicker-range-arrow-wrap {\n position: absolute;\n top: 30px;\n left: 0px;\n display: flex;\n justify-content: space-between;\n height: 0px;\n width: 100%;\n padding: 0px 60px;\n box-sizing: border-box;\n}\n\n.uktdatepicker-range-arrow {\n width: 35px;\n height: 35px;\n text-align: center;\n cursor: pointer;\n}\n\n.uktdatepicker-range-arrow.disabled {\n color: #ccc;\n cursor: default;\n}\n\n.uktdatepicker-range-arrow:active {\n transform: translateY(1px);\n}\n\n.uktdatepicker-range-arrow.left-arrow:after,\n.uktdatepicker-range-arrow.right-arrow:after {\n content: \"\u2039\";\n font-size: 24px;\n line-height: 35px;\n font-weight: bold;\n}\n\n.uktdatepicker-range-arrow.right-arrow:after {\n content: \"\u203A\";\n}\n\n.uktdatepicker-month-container {\n display: flex;\n flex: 1 1 auto;\n justify-content: space-between;\n}\n";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare const ROOT_CLASS_NAME = "uktmonthcalendar";
|
|
2
|
-
export declare const STYLES:
|
|
2
|
+
export declare const STYLES = "\n.uktmonthcalendar {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n box-sizing: border-box;\n max-width: 325px;\n}\n\n.uktmonthcalendar-month-title {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n box-sizing: border-box;\n padding-bottom: 25px;\n}\n\nh3.uktmonthcalendar-month-title-text {\n font-size: 18px;\n line-height: 23px;\n font-weight: 600;\n color: #000;\n margin: 0px;\n text-align: center;\n}\n\n.uktmonthcalendar-month-week {\n flex: 0 0 auto;\n display: grid;\n grid-column-gap: 0px;\n grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n grid-auto-flow: dense;\n box-sizing: border-box;\n padding-bottom: 12px;\n}\n\n.uktmonthcalendar-month-week .week-day-item {\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.uktmonthcalendar-month-week span.week-day-item-text {\n text-align: center;\n font-size: 13px;\n line-height: 21px;\n margin: 0px;\n color: #9a9a9a;\n}\n\n.uktmonthcalendar-month-days {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n}\n\n.uktmonthcalendar-month-row {\n flex: 1 1 auto;\n display: grid;\n grid-column-gap: 0px;\n grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n grid-auto-flow: dense;\n margin-bottom: 1px;\n}\n\n.uktmonthcalendar-month-day-item {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n height: 46px;\n width: 46px;\n cursor: pointer;\n border: none;\n background-color: transparent;\n}\n\n.uktmonthcalendar-month-day-item.is-selected {\n background-color: #f8f8f8;\n}\n\n.uktmonthcalendar-month-day-item.start-date {\n background-color: #f8f8f8;\n border-top-left-radius: 50%;\n border-bottom-left-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.start-date:after {\n background-color: #000;\n opacity: 1;\n visibility: visible;\n}\n.uktmonthcalendar-month-day-item.start-date span.month-day-item-text {\n color: #fff;\n}\n\n.uktmonthcalendar-month-day-item.end-date {\n background-color: #f8f8f8;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.end-date:after {\n background-color: #000;\n opacity: 1;\n visibility: visible;\n}\n.uktmonthcalendar-month-day-item.end-date span.month-day-item-text {\n color: #fff;\n}\n\n.uktmonthcalendar-month-day-item:hover:after {\n opacity: 1;\n visibility: visible;\n}\n\n.uktmonthcalendar-month-day-item:after {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n border-radius: 50%;\n border: 1px solid #000;\n width: 43px;\n height: 43px;\n transition: opacity 0.25s ease-in-out;\n opacity: 0;\n visibility: hidden;\n}\n\n.uktmonthcalendar-month-day-item.is-empty:after {\n content: none;\n}\n\n.uktmonthcalendar-month-day-item span.month-day-item-text {\n text-align: center;\n font-size: 13px;\n line-height: 21px;\n margin: 0px;\n color: #000;\n position: relative;\n z-index: 1;\n}\n";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { describe, expect, it } from 'vitest';
|
|
2
|
+
import { getMonthFromDate, getMonthNameFromMonth } from './utils.js';
|
|
3
|
+
describe('@acusti/date-picker', () => {
|
|
4
|
+
describe('utils', () => {
|
|
5
|
+
describe('getMonthNameFromMonth', () => {
|
|
6
|
+
it('returns the correct month name for a post-unix epoch month', () => {
|
|
7
|
+
expect(getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19)))).toBe('June');
|
|
8
|
+
});
|
|
9
|
+
it('returns the correct month name for a pre-unix epoch month', () => {
|
|
10
|
+
expect(getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 19)))).toBe('June');
|
|
11
|
+
});
|
|
12
|
+
it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
|
|
13
|
+
expect(getMonthNameFromMonth(getMonthFromDate(new Date('')))).toBe('');
|
|
14
|
+
});
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
//# sourceMappingURL=utils.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../src/utils.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAErE,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACjC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;QACnB,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;YACnC,EAAE,CAAC,4DAA4D,EAAE,GAAG,EAAE;gBAClE,MAAM,CACF,qBAAqB,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CACjE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnB,CAAC,CAAC,CAAC;YAEH,EAAE,CAAC,2DAA2D,EAAE,GAAG,EAAE;gBACjE,MAAM,CACF,qBAAqB,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CACjE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnB,CAAC,CAAC,CAAC;YAEH,EAAE,CAAC,6EAA6E,EAAE,GAAG,EAAE;gBACnF,MAAM,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC3E,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/date-picker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"sideEffects": false,
|
|
6
|
+
"exports": "./dist/index.js",
|
|
7
|
+
"main": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist",
|
|
11
|
+
"src"
|
|
12
|
+
],
|
|
4
13
|
"description": "React component that renders a date picker with support for date ranges",
|
|
5
14
|
"keywords": [
|
|
6
15
|
"react",
|
|
@@ -18,15 +27,9 @@
|
|
|
18
27
|
"ts",
|
|
19
28
|
"flow"
|
|
20
29
|
],
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"main": "./dist/index.js",
|
|
25
|
-
"types": "./dist/index.d.ts",
|
|
26
|
-
"files": [
|
|
27
|
-
"dist",
|
|
28
|
-
"src"
|
|
29
|
-
],
|
|
30
|
+
"scripts": {
|
|
31
|
+
"test": "vitest"
|
|
32
|
+
},
|
|
30
33
|
"repository": {
|
|
31
34
|
"type": "git",
|
|
32
35
|
"url": "https://github.com/acusti/uikit.git",
|
|
@@ -42,14 +45,15 @@
|
|
|
42
45
|
"@testing-library/dom": "^9.3.1",
|
|
43
46
|
"@testing-library/react": "^14.0.0",
|
|
44
47
|
"@testing-library/user-event": "^14.4.3",
|
|
45
|
-
"@types/react": "^18.
|
|
46
|
-
"
|
|
48
|
+
"@types/react": "^18.2.45",
|
|
49
|
+
"happy-dom": "^12.10.3",
|
|
47
50
|
"react": "^18",
|
|
48
51
|
"react-dom": "^18",
|
|
49
|
-
"typescript": "^5.
|
|
52
|
+
"typescript": "^5.3.3",
|
|
53
|
+
"vitest": "^1.1.0"
|
|
50
54
|
},
|
|
51
55
|
"dependencies": {
|
|
52
|
-
"@acusti/styling": "^0.
|
|
56
|
+
"@acusti/styling": "^0.7.1",
|
|
53
57
|
"clsx": "^2"
|
|
54
58
|
},
|
|
55
59
|
"peerDependencies": {
|
package/src/DatePicker.tsx
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
+
/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
|
|
1
2
|
import { Style } from '@acusti/styling';
|
|
2
3
|
import clsx from 'clsx';
|
|
3
4
|
import * as React from 'react';
|
|
4
5
|
|
|
6
|
+
import MonthCalendar from './MonthCalendar.js';
|
|
7
|
+
import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
|
|
5
8
|
import {
|
|
6
9
|
getMonthAbbreviationFromMonth,
|
|
7
10
|
getMonthFromDate,
|
|
8
11
|
getYearFromMonth,
|
|
9
12
|
} from './utils.js';
|
|
10
|
-
import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
|
|
11
|
-
|
|
12
|
-
import MonthCalendar from './MonthCalendar.js';
|
|
13
13
|
|
|
14
14
|
export type Props = {
|
|
15
15
|
className?: string;
|
|
@@ -49,8 +49,8 @@ export default function DatePicker({
|
|
|
49
49
|
_dateStart != null && typeof _dateStart !== 'string'
|
|
50
50
|
? new Date(_dateStart).toISOString()
|
|
51
51
|
: _dateStart;
|
|
52
|
-
const [dateEnd, setDateEnd] = useState<null | string>(dateEndFromProps
|
|
53
|
-
const [dateStart, setDateStart] = useState<null | string>(dateStartFromProps
|
|
52
|
+
const [dateEnd, setDateEnd] = useState<null | string>(dateEndFromProps ?? null);
|
|
53
|
+
const [dateStart, setDateStart] = useState<null | string>(dateStartFromProps ?? null);
|
|
54
54
|
|
|
55
55
|
useEffect(() => {
|
|
56
56
|
if (dateEndFromProps == null) return;
|
package/src/MonthCalendar.tsx
CHANGED
|
@@ -2,14 +2,14 @@ import { Style } from '@acusti/styling';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
|
|
5
|
-
import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './utils.js';
|
|
6
5
|
import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
|
|
6
|
+
import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './utils.js';
|
|
7
7
|
|
|
8
8
|
export type Props = {
|
|
9
9
|
className?: string;
|
|
10
|
-
dateStart?: Date | string | number | null;
|
|
11
10
|
dateEnd?: Date | string | number | null;
|
|
12
11
|
dateEndPreview?: string | null;
|
|
12
|
+
dateStart?: Date | string | number | null;
|
|
13
13
|
isRange?: boolean;
|
|
14
14
|
month: number; // a unique numerical value representing the number of months since jan 1970
|
|
15
15
|
onChange?: (date: string) => void;
|
|
@@ -35,7 +35,7 @@ export default function MonthCalendar({
|
|
|
35
35
|
title,
|
|
36
36
|
}: Props) {
|
|
37
37
|
const year = getYearFromMonth(month);
|
|
38
|
-
title = title
|
|
38
|
+
title = title ?? `${getMonthNameFromMonth(month)} ${year}`;
|
|
39
39
|
const monthWithinYear = month % 12;
|
|
40
40
|
const firstDate = new Date(year, monthWithinYear, 1);
|
|
41
41
|
const nextMonth = month + 1;
|
|
@@ -152,14 +152,14 @@ export default function MonthCalendar({
|
|
|
152
152
|
className={clsx(
|
|
153
153
|
`${ROOT_CLASS_NAME}-month-day-item`,
|
|
154
154
|
{
|
|
155
|
+
'end-date':
|
|
156
|
+
!isEmpty &&
|
|
157
|
+
dayNumber === dateRangeEndDay,
|
|
155
158
|
'is-empty': isEmpty,
|
|
156
159
|
'is-selected':
|
|
157
160
|
!isEmpty &&
|
|
158
161
|
isAfterDateRangeStart &&
|
|
159
162
|
isBeforeDateRangeEnd,
|
|
160
|
-
'end-date':
|
|
161
|
-
!isEmpty &&
|
|
162
|
-
dayNumber === dateRangeEndDay,
|
|
163
163
|
'start-date':
|
|
164
164
|
!isEmpty &&
|
|
165
165
|
dayNumber === dateRangeStartDay,
|