@pallasoft/ps-input-components 3.3.3 → 3.3.5
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-date-input.js +6 -5
- package/dist/components/ps-date-picker-fallback.d.ts +8 -0
- package/dist/components/ps-date-picker-fallback.js +7 -0
- package/dist/components/ps-lazy-date-picker.d.ts +1 -0
- package/dist/components/ps-lazy-date-picker.js +38 -0
- package/dist/components/ps-year-input.js +9 -8
- package/dist/constants/ps-date-input-config.d.ts +1 -0
- package/dist/constants/ps-date-input-config.js +1 -0
- package/dist/constants/ps-date-picker-classes.d.ts +6 -0
- package/dist/constants/ps-date-picker-classes.js +9 -0
- package/dist/esm/components/ps-date-input.js +8 -4
- package/dist/esm/components/ps-date-picker-fallback.js +3 -0
- package/dist/esm/components/ps-lazy-date-picker.js +2 -0
- package/dist/esm/components/ps-year-input.js +11 -7
- package/dist/esm/constants/ps-date-input-config.js +1 -0
- package/dist/esm/constants/ps-date-picker-classes.js +6 -0
- package/dist/esm/services/ps-date-input-service.js +6 -0
- package/dist/services/ps-date-input-service.d.ts +1 -0
- package/dist/services/ps-date-input-service.js +6 -0
- package/package.json +2 -2
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.PsDateInput = void 0;
|
|
7
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -9,12 +6,14 @@ const react_1 = require("react");
|
|
|
9
6
|
const ps_core_components_1 = require("@pallasoft/ps-core-components");
|
|
10
7
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
11
8
|
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
12
|
-
const react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
13
9
|
const ps_calendar_view_1 = require("../constants/ps-calendar-view");
|
|
14
10
|
const ps_date_input_config_1 = require("../constants/ps-date-input-config");
|
|
11
|
+
const ps_date_picker_classes_1 = require("../constants/ps-date-picker-classes");
|
|
15
12
|
const ps_date_input_service_1 = require("../services/ps-date-input-service");
|
|
16
13
|
const ps_calendar_header_1 = require("./ps-calendar-header");
|
|
14
|
+
const ps_date_picker_fallback_1 = require("./ps-date-picker-fallback");
|
|
17
15
|
const ps_field_skeleton_1 = require("./ps-field-skeleton");
|
|
16
|
+
const ps_lazy_date_picker_1 = require("./ps-lazy-date-picker");
|
|
18
17
|
const ps_required_mark_1 = require("./ps-required-mark");
|
|
19
18
|
const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
|
|
20
19
|
if (isLoading)
|
|
@@ -22,6 +21,7 @@ const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
22
21
|
const inputId = (0, react_1.useId)();
|
|
23
22
|
const portalId = `${ps_date_input_config_1.PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
|
|
24
23
|
const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
|
|
24
|
+
const isHydrated = (0, ps_core_components_1.usePsHydrated)();
|
|
25
25
|
const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? '' : defaultValue);
|
|
26
26
|
const currentValue = value === undefined ? uncontrolledValue : value;
|
|
27
27
|
const [view, setView] = (0, react_1.useState)(ps_calendar_view_1.PsCalendarView.day);
|
|
@@ -44,6 +44,7 @@ const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
44
44
|
setUncontrolledValue(nextValue);
|
|
45
45
|
onChange?.(nextValue);
|
|
46
46
|
};
|
|
47
|
-
|
|
47
|
+
const fallback = ((0, jsx_runtime_1.jsx)(ps_date_picker_fallback_1.PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: ps_date_input_service_1.PsDateInputService.display(currentValue) }));
|
|
48
|
+
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: [isHydrated ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback, children: (0, jsx_runtime_1.jsx)(ps_lazy_date_picker_1.PsLazyDatePicker, { autoComplete: 'off', calendarClassName: ps_design_system_1.PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === ps_calendar_view_1.PsCalendarView.day ? undefined : ps_date_input_config_1.PsDateInputConfig.pickingClassName), className: ps_date_picker_classes_1.PsDatePickerClasses.control, dateFormat: [...ps_date_input_config_1.PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onCalendarClose: () => setView(ps_calendar_view_1.PsCalendarView.day), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => ((0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: setView, view: view })), required: required, selected: ps_date_input_service_1.PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: ps_date_picker_classes_1.PsDatePickerClasses.wrapperOption }) })) : (fallback), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 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] }));
|
|
48
49
|
};
|
|
49
50
|
exports.PsDateInput = PsDateInput;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface PsDatePickerFallbackProps {
|
|
2
|
+
disabled?: boolean;
|
|
3
|
+
id: string;
|
|
4
|
+
placeholder: string;
|
|
5
|
+
required?: boolean;
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const PsDatePickerFallback: ({ disabled, id, placeholder, required, text, }: PsDatePickerFallbackProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PsDatePickerFallback = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const ps_date_picker_classes_1 = require("../constants/ps-date-picker-classes");
|
|
6
|
+
const PsDatePickerFallback = ({ disabled, id, placeholder, required, text, }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_date_picker_classes_1.PsDatePickerClasses.wrapper, children: (0, jsx_runtime_1.jsx)("div", { className: ps_date_picker_classes_1.PsDatePickerClasses.inputContainer, children: (0, jsx_runtime_1.jsx)("input", { autoComplete: 'off', className: ps_date_picker_classes_1.PsDatePickerClasses.control, disabled: disabled, id: id, placeholder: placeholder, readOnly: true, required: required, type: 'text', value: text }) }) }));
|
|
7
|
+
exports.PsDatePickerFallback = PsDatePickerFallback;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PsLazyDatePicker: import("react").LazyExoticComponent<typeof import("react-datepicker").DatePicker>;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.PsLazyDatePicker = void 0;
|
|
37
|
+
const react_1 = require("react");
|
|
38
|
+
exports.PsLazyDatePicker = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-datepicker'))));
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.PsYearInput = void 0;
|
|
7
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -9,13 +6,15 @@ const react_1 = require("react");
|
|
|
9
6
|
const ps_core_components_1 = require("@pallasoft/ps-core-components");
|
|
10
7
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
11
8
|
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
12
|
-
const react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
13
9
|
const ps_calendar_view_1 = require("../constants/ps-calendar-view");
|
|
14
10
|
const ps_date_input_config_1 = require("../constants/ps-date-input-config");
|
|
11
|
+
const ps_date_picker_classes_1 = require("../constants/ps-date-picker-classes");
|
|
15
12
|
const ps_year_input_config_1 = require("../constants/ps-year-input-config");
|
|
16
13
|
const ps_year_input_service_1 = require("../services/ps-year-input-service");
|
|
17
14
|
const ps_calendar_header_1 = require("./ps-calendar-header");
|
|
15
|
+
const ps_date_picker_fallback_1 = require("./ps-date-picker-fallback");
|
|
18
16
|
const ps_field_skeleton_1 = require("./ps-field-skeleton");
|
|
17
|
+
const ps_lazy_date_picker_1 = require("./ps-lazy-date-picker");
|
|
19
18
|
const ps_required_mark_1 = require("./ps-required-mark");
|
|
20
19
|
const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, maxYear, minYear, name, onChange, placeholder = ps_year_input_config_1.PsYearInputConfig.placeholder, required, value, }) => {
|
|
21
20
|
if (isLoading)
|
|
@@ -23,6 +22,7 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
23
22
|
const inputId = (0, react_1.useId)();
|
|
24
23
|
const portalId = `${ps_date_input_config_1.PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
|
|
25
24
|
const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
|
|
25
|
+
const isHydrated = (0, ps_core_components_1.usePsHydrated)();
|
|
26
26
|
const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? '' : defaultValue);
|
|
27
27
|
const currentValue = value === undefined ? uncontrolledValue : value;
|
|
28
28
|
const pickerRef = (0, react_1.useRef)(null);
|
|
@@ -46,9 +46,10 @@ const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel,
|
|
|
46
46
|
setUncontrolledValue(nextValue);
|
|
47
47
|
onChange?.(nextValue);
|
|
48
48
|
};
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
const fallback = ((0, jsx_runtime_1.jsx)(ps_date_picker_fallback_1.PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: currentValue }));
|
|
50
|
+
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: [isHydrated ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback, children: (0, jsx_runtime_1.jsx)(ps_lazy_date_picker_1.PsLazyDatePicker, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${ps_date_input_config_1.PsDateInputConfig.pickingClassName}`, className: ps_date_picker_classes_1.PsDatePickerClasses.control, 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) => {
|
|
51
|
+
handleChange(ps_year_input_service_1.PsYearInputService.startOfYear(year));
|
|
52
|
+
pickerRef.current?.setOpen(false);
|
|
53
|
+
}, selectedYear: selected === null ? undefined : selected.getFullYear(), view: ps_calendar_view_1.PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: ps_date_picker_classes_1.PsDatePickerClasses.wrapperOption }) })) : (fallback), (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
54
|
};
|
|
54
55
|
exports.PsYearInput = PsYearInput;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PsDateInputConfig = void 0;
|
|
4
4
|
exports.PsDateInputConfig = {
|
|
5
|
+
displayFormat: 'MMM D, YYYY',
|
|
5
6
|
inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
|
|
6
7
|
monthLabelFormat: 'MMMM YYYY',
|
|
7
8
|
monthShortFormat: 'MMM',
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const PsDatePickerClasses: {
|
|
2
|
+
readonly control: "ps-input-control ps-focus-ring w-full pr-10 text-sm font-semibold";
|
|
3
|
+
readonly inputContainer: "react-datepicker__input-container";
|
|
4
|
+
readonly wrapper: "react-datepicker-wrapper block w-full";
|
|
5
|
+
readonly wrapperOption: "block w-full";
|
|
6
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PsDatePickerClasses = void 0;
|
|
4
|
+
exports.PsDatePickerClasses = {
|
|
5
|
+
control: 'ps-input-control ps-focus-ring w-full pr-10 text-sm font-semibold',
|
|
6
|
+
inputContainer: 'react-datepicker__input-container',
|
|
7
|
+
wrapper: 'react-datepicker-wrapper block w-full',
|
|
8
|
+
wrapperOption: 'block w-full',
|
|
9
|
+
};
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useId, useState } from 'react';
|
|
3
|
-
import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
|
|
2
|
+
import { Suspense, useEffect, useId, useState } from 'react';
|
|
3
|
+
import { usePsHydrated, usePsLayerZIndex } from '@pallasoft/ps-core-components';
|
|
4
4
|
import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
|
|
5
5
|
import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
|
|
6
|
-
import DatePicker from 'react-datepicker';
|
|
7
6
|
import { PsCalendarView } from '../constants/ps-calendar-view';
|
|
8
7
|
import { PsDateInputConfig } from '../constants/ps-date-input-config';
|
|
8
|
+
import { PsDatePickerClasses } from '../constants/ps-date-picker-classes';
|
|
9
9
|
import { PsDateInputService } from '../services/ps-date-input-service';
|
|
10
10
|
import { PsCalendarHeader } from './ps-calendar-header';
|
|
11
|
+
import { PsDatePickerFallback } from './ps-date-picker-fallback';
|
|
11
12
|
import { PsFieldSkeleton } from './ps-field-skeleton';
|
|
13
|
+
import { PsLazyDatePicker } from './ps-lazy-date-picker';
|
|
12
14
|
import { PsRequiredMark } from './ps-required-mark';
|
|
13
15
|
export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, value, }) => {
|
|
14
16
|
if (isLoading)
|
|
@@ -16,6 +18,7 @@ export const PsDateInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
16
18
|
const inputId = useId();
|
|
17
19
|
const portalId = `${PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
|
|
18
20
|
const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
|
|
21
|
+
const isHydrated = usePsHydrated();
|
|
19
22
|
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? '' : defaultValue);
|
|
20
23
|
const currentValue = value === undefined ? uncontrolledValue : value;
|
|
21
24
|
const [view, setView] = useState(PsCalendarView.day);
|
|
@@ -38,5 +41,6 @@ export const PsDateInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
38
41
|
setUncontrolledValue(nextValue);
|
|
39
42
|
onChange?.(nextValue);
|
|
40
43
|
};
|
|
41
|
-
|
|
44
|
+
const fallback = (_jsx(PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: PsDateInputService.display(currentValue) }));
|
|
45
|
+
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: [isHydrated ? (_jsx(Suspense, { fallback: fallback, children: _jsx(PsLazyDatePicker, { autoComplete: 'off', calendarClassName: PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === PsCalendarView.day ? undefined : PsDateInputConfig.pickingClassName), className: PsDatePickerClasses.control, dateFormat: [...PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onCalendarClose: () => setView(PsCalendarView.day), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: setView, view: view })), required: required, selected: PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: PsDatePickerClasses.wrapperOption }) })) : (fallback), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 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] }));
|
|
42
46
|
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { PsDatePickerClasses } from '../constants/ps-date-picker-classes';
|
|
3
|
+
export const PsDatePickerFallback = ({ disabled, id, placeholder, required, text, }) => (_jsx("div", { className: PsDatePickerClasses.wrapper, children: _jsx("div", { className: PsDatePickerClasses.inputContainer, children: _jsx("input", { autoComplete: 'off', className: PsDatePickerClasses.control, disabled: disabled, id: id, placeholder: placeholder, readOnly: true, required: required, type: 'text', value: text }) }) }));
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useId, useRef, useState } from 'react';
|
|
3
|
-
import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
|
|
2
|
+
import { Suspense, useEffect, useId, useRef, useState } from 'react';
|
|
3
|
+
import { usePsHydrated, usePsLayerZIndex } from '@pallasoft/ps-core-components';
|
|
4
4
|
import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
|
|
5
5
|
import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
|
|
6
|
-
import DatePicker from 'react-datepicker';
|
|
7
6
|
import { PsCalendarView } from '../constants/ps-calendar-view';
|
|
8
7
|
import { PsDateInputConfig } from '../constants/ps-date-input-config';
|
|
8
|
+
import { PsDatePickerClasses } from '../constants/ps-date-picker-classes';
|
|
9
9
|
import { PsYearInputConfig } from '../constants/ps-year-input-config';
|
|
10
10
|
import { PsYearInputService } from '../services/ps-year-input-service';
|
|
11
11
|
import { PsCalendarHeader } from './ps-calendar-header';
|
|
12
|
+
import { PsDatePickerFallback } from './ps-date-picker-fallback';
|
|
12
13
|
import { PsFieldSkeleton } from './ps-field-skeleton';
|
|
14
|
+
import { PsLazyDatePicker } from './ps-lazy-date-picker';
|
|
13
15
|
import { PsRequiredMark } from './ps-required-mark';
|
|
14
16
|
export const PsYearInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, maxYear, minYear, name, onChange, placeholder = PsYearInputConfig.placeholder, required, value, }) => {
|
|
15
17
|
if (isLoading)
|
|
@@ -17,6 +19,7 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
17
19
|
const inputId = useId();
|
|
18
20
|
const portalId = `${PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
|
|
19
21
|
const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
|
|
22
|
+
const isHydrated = usePsHydrated();
|
|
20
23
|
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? '' : defaultValue);
|
|
21
24
|
const currentValue = value === undefined ? uncontrolledValue : value;
|
|
22
25
|
const pickerRef = useRef(null);
|
|
@@ -40,8 +43,9 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
|
|
|
40
43
|
setUncontrolledValue(nextValue);
|
|
41
44
|
onChange?.(nextValue);
|
|
42
45
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
const fallback = (_jsx(PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: currentValue }));
|
|
47
|
+
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: [isHydrated ? (_jsx(Suspense, { fallback: fallback, children: _jsx(PsLazyDatePicker, { autoComplete: 'off', calendarClassName: `ps-floating-panel ps-datepicker ${PsDateInputConfig.pickingClassName}`, className: PsDatePickerClasses.control, 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) => {
|
|
48
|
+
handleChange(PsYearInputService.startOfYear(year));
|
|
49
|
+
pickerRef.current?.setOpen(false);
|
|
50
|
+
}, selectedYear: selected === null ? undefined : selected.getFullYear(), view: PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: PsDatePickerClasses.wrapperOption }) })) : (fallback), _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
51
|
};
|
|
@@ -18,6 +18,12 @@ export class PsDateInputService {
|
|
|
18
18
|
? ''
|
|
19
19
|
: Common.DateService.formatDate(date.getTime(), PsDateInputConfig.valueFormat);
|
|
20
20
|
}
|
|
21
|
+
static display(value) {
|
|
22
|
+
const date = PsDateInputService.parse(value);
|
|
23
|
+
return date === null
|
|
24
|
+
? ''
|
|
25
|
+
: Common.DateService.formatDate(date.getTime(), PsDateInputConfig.displayFormat);
|
|
26
|
+
}
|
|
21
27
|
static monthLabel(date) {
|
|
22
28
|
return Common.DateService.formatDate(date.getTime(), PsDateInputConfig.monthLabelFormat);
|
|
23
29
|
}
|
|
@@ -2,6 +2,7 @@ export declare class PsDateInputService {
|
|
|
2
2
|
static parse(value: string | undefined): Date | null;
|
|
3
3
|
static parseBound(value: string | undefined): Date | undefined;
|
|
4
4
|
static format(date: Date | null): string;
|
|
5
|
+
static display(value: string): string;
|
|
5
6
|
static monthLabel(date: Date): string;
|
|
6
7
|
static monthNames(): string[];
|
|
7
8
|
static yearPage(year: number): number[];
|
|
@@ -21,6 +21,12 @@ class PsDateInputService {
|
|
|
21
21
|
? ''
|
|
22
22
|
: ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.valueFormat);
|
|
23
23
|
}
|
|
24
|
+
static display(value) {
|
|
25
|
+
const date = PsDateInputService.parse(value);
|
|
26
|
+
return date === null
|
|
27
|
+
? ''
|
|
28
|
+
: ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.displayFormat);
|
|
29
|
+
}
|
|
24
30
|
static monthLabel(date) {
|
|
25
31
|
return ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.monthLabelFormat);
|
|
26
32
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pallasoft/ps-input-components",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@internationalized/date": "^3.12.2",
|
|
62
|
-
"@pallasoft/ps-core-components": "^2.
|
|
62
|
+
"@pallasoft/ps-core-components": "^2.21.0",
|
|
63
63
|
"@pallasoft/ps-icons": "^1.5.4",
|
|
64
64
|
"@pallasoft/ps-models": "^1.4.0",
|
|
65
65
|
"@pallasoft/ps-popovers": "^1.7.0",
|