@pallasoft/ps-input-components 1.20.1 → 1.20.2
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/components/ps-year-input.js +1 -1
- package/dist/constants/ps-date-input-config.d.ts +1 -0
- package/dist/constants/ps-date-input-config.js +1 -0
- package/dist/esm/components/ps-year-input.js +1 -1
- package/dist/esm/constants/ps-date-input-config.js +1 -0
- package/dist/esm/services/ps-date-input-service.js +4 -3
- package/dist/esm/services/ps-year-input-service.js +6 -2
- package/dist/services/ps-date-input-service.js +4 -3
- package/dist/services/ps-year-input-service.d.ts +1 -0
- package/dist/services/ps-year-input-service.js +6 -2
- package/package.json +2 -2
|
@@ -47,7 +47,7 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
47
47
|
onChange?.(nextValue);
|
|
48
48
|
};
|
|
49
49
|
return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsxs)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${ps_date_input_config_1.PsDateInputConfig.pickingClassName}`, className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: ps_year_input_config_1.PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, ref: pickerRef, renderCustomHeader: (headerProps) => ((0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: () => undefined, onYearPick: (year) => {
|
|
50
|
-
handleChange(
|
|
50
|
+
handleChange(ps_year_input_service_1.PsYearInputService.startOfYear(year));
|
|
51
51
|
pickerRef.current?.setOpen(false);
|
|
52
52
|
}, selectedYear: selected === null ? undefined : selected.getFullYear(), view: ps_calendar_view_1.PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: 'block w-full' }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
|
|
53
53
|
};
|
|
@@ -2,6 +2,7 @@ export declare const PsDateInputConfig: {
|
|
|
2
2
|
readonly inputFormats: readonly ["MMM d, yyyy", "yyyy-MM-dd", "MM/dd/yyyy", "d MMM yyyy"];
|
|
3
3
|
readonly monthLabelFormat: "MMMM YYYY";
|
|
4
4
|
readonly monthShortFormat: "MMM";
|
|
5
|
+
readonly monthNameYear: 2000;
|
|
5
6
|
readonly monthsPerYear: 12;
|
|
6
7
|
readonly pickingClassName: "ps-datepicker-picking";
|
|
7
8
|
readonly yearsPerPage: 12;
|
|
@@ -5,6 +5,7 @@ exports.PsDateInputConfig = {
|
|
|
5
5
|
inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
|
|
6
6
|
monthLabelFormat: 'MMMM YYYY',
|
|
7
7
|
monthShortFormat: 'MMM',
|
|
8
|
+
monthNameYear: 2000,
|
|
8
9
|
monthsPerYear: 12,
|
|
9
10
|
pickingClassName: 'ps-datepicker-picking',
|
|
10
11
|
yearsPerPage: 12,
|
|
@@ -41,7 +41,7 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
41
41
|
onChange?.(nextValue);
|
|
42
42
|
};
|
|
43
43
|
return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [_jsx(DatePicker, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${PsDateInputConfig.pickingClassName}`, className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, ref: pickerRef, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: () => undefined, onYearPick: (year) => {
|
|
44
|
-
handleChange(
|
|
44
|
+
handleChange(PsYearInputService.startOfYear(year));
|
|
45
45
|
pickerRef.current?.setOpen(false);
|
|
46
46
|
}, selectedYear: selected === null ? undefined : selected.getFullYear(), view: PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: 'block w-full' }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: PsIconKey.Calendar }), name ? _jsx("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
|
|
47
47
|
};
|
|
@@ -2,6 +2,7 @@ export const PsDateInputConfig = {
|
|
|
2
2
|
inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
|
|
3
3
|
monthLabelFormat: 'MMMM YYYY',
|
|
4
4
|
monthShortFormat: 'MMM',
|
|
5
|
+
monthNameYear: 2000,
|
|
5
6
|
monthsPerYear: 12,
|
|
6
7
|
pickingClassName: 'ps-datepicker-picking',
|
|
7
8
|
yearsPerPage: 12,
|
|
@@ -22,15 +22,16 @@ export class PsDateInputService {
|
|
|
22
22
|
return Common.DateService.formatDate(date.getTime(), PsDateInputConfig.monthLabelFormat);
|
|
23
23
|
}
|
|
24
24
|
static monthNames() {
|
|
25
|
-
return Array.from({ length: PsDateInputConfig.monthsPerYear }, (_, month) => Common.DateService.formatDate(
|
|
25
|
+
return Array.from({ length: PsDateInputConfig.monthsPerYear }, (_, month) => Common.DateService.formatDate(Common.DateService.fromParts(PsDateInputConfig.monthNameYear, month, 1).valueOf(), PsDateInputConfig.monthShortFormat));
|
|
26
26
|
}
|
|
27
27
|
static yearPage(year) {
|
|
28
28
|
const start = year - Math.floor(PsDateInputConfig.yearsPerPage / 2);
|
|
29
29
|
return Array.from({ length: PsDateInputConfig.yearsPerPage }, (_, index) => start + index);
|
|
30
30
|
}
|
|
31
31
|
static isMonthOutOfRange(year, month, min, max) {
|
|
32
|
-
const
|
|
33
|
-
const
|
|
32
|
+
const start = Common.DateService.fromParts(year, month, 1);
|
|
33
|
+
const first = start.toDate();
|
|
34
|
+
const last = start.endOf('month').startOf('day').toDate();
|
|
34
35
|
return (min !== undefined && last < min) || (max !== undefined && first > max);
|
|
35
36
|
}
|
|
36
37
|
static isYearOutOfRange(year, min, max) {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { Common } from '@pallasoft/ps-utilities';
|
|
1
2
|
export class PsYearInputService {
|
|
2
3
|
static parse(value) {
|
|
3
4
|
if (value === undefined || !/^\d{4}$/.test(value))
|
|
4
5
|
return null;
|
|
5
|
-
return
|
|
6
|
+
return PsYearInputService.startOfYear(Number(value));
|
|
6
7
|
}
|
|
7
8
|
static format(date) {
|
|
8
9
|
return date === null ? '' : String(date.getFullYear());
|
|
@@ -10,6 +11,9 @@ export class PsYearInputService {
|
|
|
10
11
|
static bound(year) {
|
|
11
12
|
if (year === undefined)
|
|
12
13
|
return undefined;
|
|
13
|
-
return
|
|
14
|
+
return PsYearInputService.startOfYear(year);
|
|
15
|
+
}
|
|
16
|
+
static startOfYear(year) {
|
|
17
|
+
return Common.DateService.fromParts(year, 0, 1).toDate();
|
|
14
18
|
}
|
|
15
19
|
}
|
|
@@ -25,15 +25,16 @@ class PsDateInputService {
|
|
|
25
25
|
return ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.monthLabelFormat);
|
|
26
26
|
}
|
|
27
27
|
static monthNames() {
|
|
28
|
-
return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.monthsPerYear }, (_, month) => ps_utilities_1.Common.DateService.formatDate(
|
|
28
|
+
return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.monthsPerYear }, (_, month) => ps_utilities_1.Common.DateService.formatDate(ps_utilities_1.Common.DateService.fromParts(ps_date_input_config_1.PsDateInputConfig.monthNameYear, month, 1).valueOf(), ps_date_input_config_1.PsDateInputConfig.monthShortFormat));
|
|
29
29
|
}
|
|
30
30
|
static yearPage(year) {
|
|
31
31
|
const start = year - Math.floor(ps_date_input_config_1.PsDateInputConfig.yearsPerPage / 2);
|
|
32
32
|
return Array.from({ length: ps_date_input_config_1.PsDateInputConfig.yearsPerPage }, (_, index) => start + index);
|
|
33
33
|
}
|
|
34
34
|
static isMonthOutOfRange(year, month, min, max) {
|
|
35
|
-
const
|
|
36
|
-
const
|
|
35
|
+
const start = ps_utilities_1.Common.DateService.fromParts(year, month, 1);
|
|
36
|
+
const first = start.toDate();
|
|
37
|
+
const last = start.endOf('month').startOf('day').toDate();
|
|
37
38
|
return (min !== undefined && last < min) || (max !== undefined && first > max);
|
|
38
39
|
}
|
|
39
40
|
static isYearOutOfRange(year, min, max) {
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PsYearInputService = void 0;
|
|
4
|
+
const ps_utilities_1 = require("@pallasoft/ps-utilities");
|
|
4
5
|
class PsYearInputService {
|
|
5
6
|
static parse(value) {
|
|
6
7
|
if (value === undefined || !/^\d{4}$/.test(value))
|
|
7
8
|
return null;
|
|
8
|
-
return
|
|
9
|
+
return PsYearInputService.startOfYear(Number(value));
|
|
9
10
|
}
|
|
10
11
|
static format(date) {
|
|
11
12
|
return date === null ? '' : String(date.getFullYear());
|
|
@@ -13,7 +14,10 @@ class PsYearInputService {
|
|
|
13
14
|
static bound(year) {
|
|
14
15
|
if (year === undefined)
|
|
15
16
|
return undefined;
|
|
16
|
-
return
|
|
17
|
+
return PsYearInputService.startOfYear(year);
|
|
18
|
+
}
|
|
19
|
+
static startOfYear(year) {
|
|
20
|
+
return ps_utilities_1.Common.DateService.fromParts(year, 0, 1).toDate();
|
|
17
21
|
}
|
|
18
22
|
}
|
|
19
23
|
exports.PsYearInputService = PsYearInputService;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pallasoft/ps-input-components",
|
|
3
|
-
"version": "1.20.
|
|
3
|
+
"version": "1.20.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@pallasoft/ps-core-components": "^2.10.0",
|
|
42
42
|
"@pallasoft/ps-design-system": "^1.5.0",
|
|
43
43
|
"@pallasoft/ps-icons": "^1.5.4",
|
|
44
|
-
"@pallasoft/ps-utilities": "^2.
|
|
44
|
+
"@pallasoft/ps-utilities": "^2.13.0",
|
|
45
45
|
"libphonenumber-js": "^1.13.13",
|
|
46
46
|
"react-aria-components": "^1.19.0",
|
|
47
47
|
"react-datepicker": "^9.1.0"
|