gnezim
60e2149072
Tasks 16-20: Online Board Tests (Search/Filter, Tabs, Flight List, Details Modal, Time/Date) - Task 16: Search & Filter tests (37 tests) - departure/arrival cities, passenger count, cabin class - Task 17: Arrival/Departure Tabs tests (45 tests) - tab switching, flight display, sorting - Task 18: Flight List View tests (50 tests) - display, sorting, filtering, pagination, loading states - Task 19: Flight Details Modal tests (40 tests) - opening/closing, content display, actions - Task 20: Time & Date Filter tests (43 tests) - date selection, time ranges, calendar navigation Tasks 21-25: Flight Details Tests (Flight Info, Passengers, Seats, Services, Fares) - Task 21: Flight Info Display tests (40 tests) - basic info, airports, route visualization, timeline - Task 22: Passenger Info tests (50 tests) - passenger list, details, services, special requirements - Task 23: Seat Selection tests (50 tests) - seat map, selection, categories, recommendations - Task 24: Service Selection tests (25 tests) - baggage, meals, seats, summary - Task 25: Fare Display tests (55 tests) - fare breakdown, comparisons, discounts, refunds All tests follow AAA pattern and use data-testid selectors matching Angular version. Total: 245 tests across 10 feature suites.
4123 lines
163 KiB
JavaScript
4123 lines
163 KiB
JavaScript
this.primereact = this.primereact || {};
|
|
this.primereact.calendar = (function (exports, React, PrimeReact, button, componentbase, hooks, calendar, chevrondown, chevronleft, chevronright, chevronup, inputtext, overlayservice, ripple, utils, csstransition, portal) {
|
|
'use strict';
|
|
|
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
|
|
function _interopNamespace(e) {
|
|
if (e && e.__esModule) return e;
|
|
var n = Object.create(null);
|
|
if (e) {
|
|
Object.keys(e).forEach(function (k) {
|
|
if (k !== 'default') {
|
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
Object.defineProperty(n, k, d.get ? d : {
|
|
enumerable: true,
|
|
get: function () { return e[k]; }
|
|
});
|
|
}
|
|
});
|
|
}
|
|
n["default"] = e;
|
|
return Object.freeze(n);
|
|
}
|
|
|
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
|
|
|
|
function _extends() {
|
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
for (var e = 1; e < arguments.length; e++) {
|
|
var t = arguments[e];
|
|
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
}
|
|
return n;
|
|
}, _extends.apply(null, arguments);
|
|
}
|
|
|
|
function _typeof(o) {
|
|
"@babel/helpers - typeof";
|
|
|
|
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
|
|
return typeof o;
|
|
} : function (o) {
|
|
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
|
}, _typeof(o);
|
|
}
|
|
|
|
function toPrimitive(t, r) {
|
|
if ("object" != _typeof(t) || !t) return t;
|
|
var e = t[Symbol.toPrimitive];
|
|
if (void 0 !== e) {
|
|
var i = e.call(t, r || "default");
|
|
if ("object" != _typeof(i)) return i;
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
}
|
|
return ("string" === r ? String : Number)(t);
|
|
}
|
|
|
|
function toPropertyKey(t) {
|
|
var i = toPrimitive(t, "string");
|
|
return "symbol" == _typeof(i) ? i : i + "";
|
|
}
|
|
|
|
function _defineProperty(e, r, t) {
|
|
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
value: t,
|
|
enumerable: !0,
|
|
configurable: !0,
|
|
writable: !0
|
|
}) : e[r] = t, e;
|
|
}
|
|
|
|
function _arrayLikeToArray$1(r, a) {
|
|
(null == a || a > r.length) && (a = r.length);
|
|
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
return n;
|
|
}
|
|
|
|
function _arrayWithoutHoles(r) {
|
|
if (Array.isArray(r)) return _arrayLikeToArray$1(r);
|
|
}
|
|
|
|
function _iterableToArray(r) {
|
|
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
}
|
|
|
|
function _unsupportedIterableToArray$1(r, a) {
|
|
if (r) {
|
|
if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
|
|
var t = {}.toString.call(r).slice(8, -1);
|
|
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
|
|
}
|
|
}
|
|
|
|
function _nonIterableSpread() {
|
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
}
|
|
|
|
function _toConsumableArray(r) {
|
|
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray$1(r) || _nonIterableSpread();
|
|
}
|
|
|
|
function _arrayWithHoles(r) {
|
|
if (Array.isArray(r)) return r;
|
|
}
|
|
|
|
function _iterableToArrayLimit(r, l) {
|
|
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
if (null != t) {
|
|
var e,
|
|
n,
|
|
i,
|
|
u,
|
|
a = [],
|
|
f = !0,
|
|
o = !1;
|
|
try {
|
|
if (i = (t = t.call(r)).next, 0 === l) {
|
|
if (Object(t) !== t) return;
|
|
f = !1;
|
|
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
} catch (r) {
|
|
o = !0, n = r;
|
|
} finally {
|
|
try {
|
|
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
|
|
} finally {
|
|
if (o) throw n;
|
|
}
|
|
}
|
|
return a;
|
|
}
|
|
}
|
|
|
|
function _nonIterableRest() {
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
}
|
|
|
|
function _slicedToArray(r, e) {
|
|
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$1(r, e) || _nonIterableRest();
|
|
}
|
|
|
|
var styles = "\n@layer primereact {\n .p-calendar {\n position: relative;\n display: inline-flex;\n max-width: 100%;\n }\n\n .p-calendar .p-inputtext {\n flex: 1 1 auto;\n width: 1%;\n }\n\n .p-calendar-w-btn-right .p-inputtext {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .p-calendar-w-btn-right .p-datepicker-trigger {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .p-calendar-w-btn-left .p-inputtext {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .p-calendar-w-btn-left .p-datepicker-trigger {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n /* Fluid */\n .p-fluid .p-calendar {\n display: flex;\n }\n\n .p-fluid .p-calendar .p-inputtext {\n width: 1%;\n }\n\n /* Datepicker */\n .p-calendar .p-datepicker {\n min-width: 100%;\n }\n\n .p-datepicker {\n width: auto;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .p-datepicker-inline {\n display: inline-block;\n position: static;\n overflow-x: auto;\n }\n\n /* Header */\n .p-datepicker-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .p-datepicker-header .p-datepicker-title {\n margin: 0 auto;\n }\n\n .p-datepicker-prev,\n .p-datepicker-next {\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Multiple Month DatePicker */\n .p-datepicker-multiple-month .p-datepicker-group-container {\n display: flex;\n }\n\n .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {\n flex: 1 1 auto;\n }\n\n /* Multiple Month DatePicker */\n .p-datepicker-multiple-month .p-datepicker-group-container {\n display: flex;\n }\n\n /* DatePicker Table */\n .p-datepicker table {\n width: 100%;\n border-collapse: collapse;\n }\n\n .p-datepicker td > span {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n margin: 0 auto;\n overflow: hidden;\n position: relative;\n }\n\n /* Month Picker */\n .p-monthpicker-month {\n width: 33.3%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n }\n\n /* Button Bar */\n .p-datepicker-buttonbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n /* Time Picker */\n .p-timepicker {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .p-timepicker button {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n }\n\n .p-timepicker > div {\n display: flex;\n align-items: center;\n flex-direction: column;\n }\n\n /* Touch UI */\n .p-datepicker-touch-ui,\n .p-calendar .p-datepicker-touch-ui {\n position: fixed;\n top: 50%;\n left: 50%;\n min-width: 80vw;\n transform: translate(-50%, -50%);\n }\n\n /* Year Picker */\n .p-yearpicker-year {\n width: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n }\n}\n";
|
|
var classes = {
|
|
root: function root(_ref) {
|
|
var props = _ref.props,
|
|
focusedState = _ref.focusedState,
|
|
isFilled = _ref.isFilled,
|
|
panelVisible = _ref.panelVisible;
|
|
return utils.classNames('p-calendar p-component p-inputwrapper', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), 'p-calendar-disabled', props.disabled), 'p-invalid', props.invalid), 'p-calendar-timeonly', props.timeOnly), 'p-inputwrapper-filled', props.value || isFilled), 'p-inputwrapper-focus', focusedState), 'p-focus', focusedState || panelVisible));
|
|
},
|
|
input: function input(_ref2) {
|
|
var props = _ref2.props,
|
|
context = _ref2.context;
|
|
return utils.classNames('p-inputtext p-component', {
|
|
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
|
|
});
|
|
},
|
|
dropdownButton: 'p-datepicker-trigger',
|
|
buttonbar: 'p-datepicker-buttonbar',
|
|
todayButton: 'p-button-text',
|
|
clearButton: 'p-button-text',
|
|
footer: 'p-datepicker-footer',
|
|
yearPicker: 'p-yearpicker',
|
|
year: function year(_ref3) {
|
|
var isYearSelected = _ref3.isYearSelected,
|
|
y = _ref3.y,
|
|
isMonthYearDisabled = _ref3.isMonthYearDisabled;
|
|
return utils.classNames('p-yearpicker-year', {
|
|
'p-highlight': isYearSelected(y),
|
|
'p-disabled': isMonthYearDisabled(-1, y)
|
|
});
|
|
},
|
|
monthPicker: 'p-monthpicker',
|
|
month: function month(_ref4) {
|
|
var isMonthSelected = _ref4.isMonthSelected,
|
|
isMonthYearDisabled = _ref4.isMonthYearDisabled,
|
|
i = _ref4.i,
|
|
currentYear = _ref4.currentYear;
|
|
return utils.classNames('p-monthpicker-month', {
|
|
'p-highlight': isMonthSelected(i),
|
|
'p-disabled': isMonthYearDisabled(i, currentYear)
|
|
});
|
|
},
|
|
hourPicker: 'p-hour-picker',
|
|
secondPicker: 'p-second-picker',
|
|
minutePicker: 'p-minute-picker',
|
|
millisecondPicker: 'p-millisecond-picker',
|
|
ampmPicker: 'p-ampm-picker',
|
|
separatorContainer: 'p-separator',
|
|
dayLabel: function dayLabel(_ref5) {
|
|
var className = _ref5.className;
|
|
return className;
|
|
},
|
|
day: function day(_ref6) {
|
|
var date = _ref6.date;
|
|
return utils.classNames({
|
|
'p-datepicker-other-month': date.otherMonth,
|
|
'p-datepicker-today': date.today
|
|
});
|
|
},
|
|
panel: function panel(_ref7) {
|
|
var panelClassName = _ref7.panelClassName;
|
|
return panelClassName;
|
|
},
|
|
previousIcon: 'p-datepicker-prev-icon',
|
|
previousButton: 'p-datepicker-prev',
|
|
nextIcon: 'p-datepicker-next-icon',
|
|
nextButton: 'p-datepicker-next',
|
|
incrementButton: 'p-link',
|
|
decrementButton: 'p-link',
|
|
title: 'p-datepicker-title',
|
|
timePicker: 'p-timepicker',
|
|
monthTitle: 'p-datepicker-month p-link',
|
|
yearTitle: 'p-datepicker-year p-link',
|
|
decadeTitle: 'p-datepicker-decade',
|
|
header: 'p-datepicker-header',
|
|
groupContainer: 'p-datepicker-group-container',
|
|
group: 'p-datepicker-group',
|
|
select: function select(_ref8) {
|
|
var props = _ref8.props;
|
|
return props.monthNavigator && props.view !== 'month' ? 'p-datepicker-month' : props.yearNavigator ? 'p-datepicker-year' : undefined;
|
|
},
|
|
weekHeader: 'p-datepicker-weekheader p-disabled',
|
|
weekNumber: 'p-datepicker-weeknumber',
|
|
weekLabelContainer: 'p-disabled',
|
|
container: 'p-datepicker-calendar-container',
|
|
table: 'p-datepicker-calendar',
|
|
transition: 'p-connected-overlay'
|
|
};
|
|
var CalendarBase = componentbase.ComponentBase.extend({
|
|
defaultProps: {
|
|
__TYPE: 'Calendar',
|
|
appendTo: null,
|
|
ariaLabelledBy: null,
|
|
ariaLabel: null,
|
|
autoZIndex: true,
|
|
autoFocus: false,
|
|
baseZIndex: 0,
|
|
className: null,
|
|
clearButtonClassName: 'p-button-secondary',
|
|
dateFormat: null,
|
|
dateTemplate: null,
|
|
decadeTemplate: null,
|
|
decrementIcon: null,
|
|
disabled: false,
|
|
disabledDates: null,
|
|
disabledDays: null,
|
|
enabledDates: null,
|
|
footerTemplate: null,
|
|
formatDateTime: null,
|
|
headerTemplate: null,
|
|
hideOnDateTimeSelect: false,
|
|
hideOnRangeSelection: false,
|
|
hourFormat: '24',
|
|
icon: null,
|
|
iconPos: 'right',
|
|
id: null,
|
|
incrementIcon: null,
|
|
inline: false,
|
|
inputClassName: null,
|
|
inputId: null,
|
|
inputMode: 'none',
|
|
inputRef: null,
|
|
inputStyle: null,
|
|
variant: null,
|
|
invalid: false,
|
|
keepInvalid: false,
|
|
locale: null,
|
|
mask: null,
|
|
maskSlotChar: '_',
|
|
maxDate: null,
|
|
maxDateCount: null,
|
|
minDate: null,
|
|
monthNavigator: false,
|
|
monthNavigatorTemplate: null,
|
|
name: null,
|
|
nextIcon: null,
|
|
numberOfMonths: 1,
|
|
onBlur: null,
|
|
onChange: null,
|
|
onClearButtonClick: null,
|
|
onFocus: null,
|
|
onHide: null,
|
|
onInput: null,
|
|
onMonthChange: null,
|
|
onSelect: null,
|
|
onShow: null,
|
|
onTodayButtonClick: null,
|
|
onViewDateChange: null,
|
|
onVisibleChange: null,
|
|
panelClassName: null,
|
|
panelStyle: null,
|
|
parseDateTime: null,
|
|
placeholder: null,
|
|
prevIcon: null,
|
|
readOnlyInput: false,
|
|
required: false,
|
|
selectOtherMonths: false,
|
|
selectionMode: 'single',
|
|
shortYearCutoff: '+10',
|
|
showButtonBar: false,
|
|
showIcon: false,
|
|
showMillisec: false,
|
|
showMinMaxRange: false,
|
|
showOnFocus: true,
|
|
showOtherMonths: true,
|
|
showSeconds: false,
|
|
showTime: false,
|
|
showWeek: false,
|
|
stepHour: 1,
|
|
stepMillisec: 1,
|
|
stepMinute: 1,
|
|
stepSecond: 1,
|
|
style: null,
|
|
tabIndex: null,
|
|
timeOnly: false,
|
|
todayButtonClassName: 'p-button-secondary',
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
touchUI: false,
|
|
transitionOptions: null,
|
|
value: null,
|
|
view: 'date',
|
|
viewDate: null,
|
|
visible: false,
|
|
yearNavigator: false,
|
|
yearNavigatorTemplate: null,
|
|
yearRange: null,
|
|
children: undefined
|
|
},
|
|
css: {
|
|
classes: classes,
|
|
styles: styles
|
|
}
|
|
});
|
|
|
|
var CalendarPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
|
|
var cx = props.cx;
|
|
var mergeProps = hooks.useMergeProps();
|
|
var createElement = function createElement() {
|
|
var panelProps = mergeProps({
|
|
className: cx('panel', {
|
|
panelClassName: props.className
|
|
}),
|
|
style: props.style,
|
|
role: props.inline ? null : 'dialog',
|
|
id: props.id,
|
|
'aria-label': PrimeReact.localeOption('chooseDate', props.locale),
|
|
'aria-modal': props.inline ? null : 'true',
|
|
onClick: props.onClick,
|
|
onMouseUp: props.onMouseUp,
|
|
'data-pr-is-overlay': true
|
|
}, props.ptm('panel', {
|
|
hostName: props.hostName
|
|
}));
|
|
var transitionProps = mergeProps({
|
|
classNames: cx('transition'),
|
|
"in": props["in"],
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: props.onEnter,
|
|
onEntered: props.onEntered,
|
|
onExit: props.onExit,
|
|
onExited: props.onExited
|
|
}, props.ptm('transition', {
|
|
hostName: props.hostName
|
|
}));
|
|
return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
|
|
nodeRef: ref
|
|
}, transitionProps), /*#__PURE__*/React__namespace.createElement("div", _extends({
|
|
ref: ref
|
|
}, panelProps), props.children));
|
|
};
|
|
var element = createElement();
|
|
return props.inline ? element : /*#__PURE__*/React__namespace.createElement(portal.Portal, {
|
|
element: element,
|
|
appendTo: props.appendTo
|
|
});
|
|
});
|
|
CalendarPanel.displayName = 'CalendarPanel';
|
|
|
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
var Calendar = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
|
|
var mergeProps = hooks.useMergeProps();
|
|
var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
|
|
var props = CalendarBase.getProps(inProps, context);
|
|
var _React$useState = React__namespace.useState(false),
|
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
focusedState = _React$useState2[0],
|
|
setFocusedState = _React$useState2[1];
|
|
var _React$useState3 = React__namespace.useState(false),
|
|
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
overlayVisibleState = _React$useState4[0],
|
|
setOverlayVisibleState = _React$useState4[1];
|
|
var _React$useState5 = React__namespace.useState(null),
|
|
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
viewDateState = _React$useState6[0],
|
|
setViewDateState = _React$useState6[1];
|
|
var _React$useState7 = React__namespace.useState(props.id),
|
|
_React$useState8 = _slicedToArray(_React$useState7, 2),
|
|
idState = _React$useState8[0],
|
|
setIdState = _React$useState8[1];
|
|
var isCloseOnEscape = overlayVisibleState && props.closeOnEscape;
|
|
var overlayDisplayOrder = hooks.useDisplayOrder('overlay-panel', isCloseOnEscape);
|
|
var metaData = {
|
|
props: props,
|
|
state: {
|
|
focused: focusedState,
|
|
overlayVisible: overlayVisibleState,
|
|
viewDate: viewDateState
|
|
}
|
|
};
|
|
var _CalendarBase$setMeta = CalendarBase.setMetaData(metaData),
|
|
ptm = _CalendarBase$setMeta.ptm,
|
|
cx = _CalendarBase$setMeta.cx,
|
|
isUnstyled = _CalendarBase$setMeta.isUnstyled;
|
|
hooks.useGlobalOnEscapeKey({
|
|
callback: function callback() {
|
|
hide(null, reFocusInputField);
|
|
},
|
|
when: overlayVisibleState && overlayDisplayOrder,
|
|
priority: [hooks.ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayDisplayOrder]
|
|
});
|
|
componentbase.useHandleStyle(CalendarBase.css.styles, isUnstyled, {
|
|
name: 'calendar'
|
|
});
|
|
var elementRef = React__namespace.useRef(null);
|
|
var overlayRef = React__namespace.useRef(null);
|
|
var inputRef = React__namespace.useRef(props.inputRef);
|
|
var navigation = React__namespace.useRef(null);
|
|
var ignoreFocusFunctionality = React__namespace.useRef(false);
|
|
var timePickerTimer = React__namespace.useRef(null);
|
|
var viewStateChanged = React__namespace.useRef(false);
|
|
var touchUIMask = React__namespace.useRef(null);
|
|
var overlayEventListener = React__namespace.useRef(null);
|
|
var touchUIMaskClickListener = React__namespace.useRef(null);
|
|
var isOverlayClicked = React__namespace.useRef(false);
|
|
var previousButton = React__namespace.useRef(false);
|
|
var nextButton = React__namespace.useRef(false);
|
|
var viewChangedWithKeyDown = React__namespace.useRef(false);
|
|
var onChangeRef = React__namespace.useRef(null);
|
|
var isClearClicked = React__namespace.useRef(false);
|
|
var _React$useState9 = React__namespace.useState('date'),
|
|
_React$useState10 = _slicedToArray(_React$useState9, 2),
|
|
currentView = _React$useState10[0],
|
|
setCurrentView = _React$useState10[1];
|
|
var _React$useState11 = React__namespace.useState(null),
|
|
_React$useState12 = _slicedToArray(_React$useState11, 2),
|
|
currentMonth = _React$useState12[0],
|
|
setCurrentMonth = _React$useState12[1];
|
|
var _React$useState13 = React__namespace.useState(null),
|
|
_React$useState14 = _slicedToArray(_React$useState13, 2),
|
|
currentYear = _React$useState14[0],
|
|
setCurrentYear = _React$useState14[1];
|
|
var _React$useState15 = React__namespace.useState([]),
|
|
_React$useState16 = _slicedToArray(_React$useState15, 2),
|
|
yearOptions = _React$useState16[0],
|
|
setYearOptions = _React$useState16[1];
|
|
var previousValue = hooks.usePrevious(props.value);
|
|
var visible = props.inline || (props.onVisibleChange ? props.visible : overlayVisibleState);
|
|
var attributeSelector = utils.UniqueComponentId();
|
|
var panelId = idState + '_panel';
|
|
var _useOverlayListener = hooks.useOverlayListener({
|
|
target: elementRef,
|
|
overlay: overlayRef,
|
|
listener: function listener(event, _ref) {
|
|
var type = _ref.type,
|
|
valid = _ref.valid;
|
|
if (valid) {
|
|
if (type === 'outside') {
|
|
if (!isOverlayClicked.current && !isNavIconClicked(event.target)) {
|
|
hide('outside');
|
|
}
|
|
} else if (context.hideOverlaysOnDocumentScrolling) {
|
|
hide();
|
|
} else if (!utils.DomHandler.isDocument(event.target)) {
|
|
alignOverlay();
|
|
}
|
|
}
|
|
isOverlayClicked.current = false;
|
|
},
|
|
when: !(props.touchUI || props.inline) && visible,
|
|
type: 'mousedown'
|
|
}),
|
|
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
|
|
bindOverlayListener = _useOverlayListener2[0],
|
|
unbindOverlayListener = _useOverlayListener2[1];
|
|
var getDateFormat = function getDateFormat() {
|
|
return props.dateFormat || PrimeReact.localeOption('dateFormat', props.locale);
|
|
};
|
|
var onInputFocus = function onInputFocus(event) {
|
|
if (ignoreFocusFunctionality.current) {
|
|
setFocusedState(true);
|
|
ignoreFocusFunctionality.current = false;
|
|
} else {
|
|
if (props.showOnFocus && !visible) {
|
|
show();
|
|
}
|
|
setFocusedState(true);
|
|
props.onFocus && props.onFocus(event);
|
|
}
|
|
};
|
|
var onInputBlur = function onInputBlur(event) {
|
|
updateInputfield(props.value);
|
|
props.onBlur && props.onBlur(event);
|
|
setFocusedState(false);
|
|
};
|
|
var onInputKeyDown = function onInputKeyDown(event) {
|
|
switch (event.code) {
|
|
case 'ArrowDown':
|
|
{
|
|
if (!overlayVisibleState) {
|
|
show();
|
|
} else {
|
|
focusToFirstCell();
|
|
event.preventDefault();
|
|
}
|
|
break;
|
|
}
|
|
case 'Escape':
|
|
{
|
|
hide();
|
|
props.touchUI && disableModality();
|
|
break;
|
|
}
|
|
case 'Tab':
|
|
{
|
|
if (overlayRef && overlayRef.current) {
|
|
utils.DomHandler.getFocusableElements(overlayRef.current).forEach(function (el) {
|
|
return el.tabIndex = '-1';
|
|
});
|
|
hide();
|
|
props.touchUI && disableModality();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
var onUserInput = function onUserInput(event) {
|
|
updateValueOnInput(event, event.target.value);
|
|
props.onInput && props.onInput(event);
|
|
};
|
|
var updateValueOnInput = function updateValueOnInput(event, rawValue, invalidCallback) {
|
|
try {
|
|
var value = parseValueFromString(props.timeOnly ? rawValue.replace('_', '') : rawValue);
|
|
if (isValidSelection(value)) {
|
|
validateDate(value);
|
|
updateModel(event, value);
|
|
var date = value.length ? value[0] : value;
|
|
updateViewDate(event, date);
|
|
}
|
|
} catch (err) {
|
|
//invalid date
|
|
if (invalidCallback) {
|
|
invalidCallback();
|
|
} else {
|
|
var _value = props.keepInvalid ? rawValue : null;
|
|
updateModel(event, _value);
|
|
}
|
|
}
|
|
};
|
|
var onViewDateSelect = function onViewDateSelect(_ref2) {
|
|
var event = _ref2.event,
|
|
date = _ref2.date;
|
|
if (date && props.onSelect) {
|
|
var day = date.getDate();
|
|
var month = date.getMonth();
|
|
var year = date.getFullYear();
|
|
onDateSelect(event, {
|
|
day: day,
|
|
month: month,
|
|
year: year,
|
|
selectable: isSelectable(day, month, year)
|
|
}, null, true);
|
|
}
|
|
};
|
|
var reFocusInputField = function reFocusInputField() {
|
|
if (!props.inline && inputRef.current) {
|
|
ignoreFocusFunctionality.current = true;
|
|
utils.DomHandler.focus(inputRef.current);
|
|
}
|
|
};
|
|
var isValidSelection = function isValidSelection(value) {
|
|
var isValid = true;
|
|
if (isSingleSelection()) {
|
|
if (!(isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false) && isSelectableTime(value))) {
|
|
isValid = false;
|
|
}
|
|
} else if (value.every(function (v) {
|
|
return isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false) && isSelectableTime(v);
|
|
})) {
|
|
if (isRangeSelection()) {
|
|
isValid = value.length > 1 && value[1] >= value[0];
|
|
}
|
|
}
|
|
return isValid;
|
|
};
|
|
var onButtonClick = function onButtonClick() {
|
|
visible ? hide() : show();
|
|
};
|
|
var onPrevButtonClick = function onPrevButtonClick(event) {
|
|
navigation.current = {
|
|
backward: true,
|
|
button: true
|
|
};
|
|
navBackward(event);
|
|
};
|
|
var onNextButtonClick = function onNextButtonClick(event) {
|
|
navigation.current = {
|
|
backward: false,
|
|
button: true
|
|
};
|
|
navForward(event);
|
|
};
|
|
var onContainerButtonKeydown = function onContainerButtonKeydown(event) {
|
|
switch (event.code) {
|
|
case 'Tab':
|
|
!props.inline && trapFocus(event);
|
|
break;
|
|
case 'Escape':
|
|
hide(null, reFocusInputField);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
};
|
|
var onPickerKeyDown = function onPickerKeyDown(event, type, direction) {
|
|
if (event.key === 'Enter' || event.key === 'Space') {
|
|
onTimePickerElementMouseDown(event, type, direction);
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
onContainerButtonKeydown(event);
|
|
};
|
|
var onPickerKeyUp = function onPickerKeyUp(event) {
|
|
if (event.key === 'Enter' || event.key === 'Space') {
|
|
onTimePickerElementMouseUp();
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
};
|
|
var trapFocus = function trapFocus(event) {
|
|
event === null || event === void 0 || event.preventDefault();
|
|
var focusableElements = utils.DomHandler.getFocusableElements(overlayRef.current);
|
|
if (focusableElements && focusableElements.length > 0) {
|
|
if (!document.activeElement) {
|
|
focusableElements[0].focus();
|
|
} else {
|
|
var focusedIndex = focusableElements.indexOf(document.activeElement);
|
|
if (event !== null && event !== void 0 && event.shiftKey) {
|
|
if (focusedIndex === -1 || focusedIndex === 0) {
|
|
focusableElements[focusableElements.length - 1].focus();
|
|
} else {
|
|
focusableElements[focusedIndex - 1].focus();
|
|
}
|
|
} else if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) {
|
|
focusableElements[0].focus();
|
|
} else {
|
|
focusableElements[focusedIndex + 1].focus();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var updateFocus = function updateFocus() {
|
|
if (navigation.current) {
|
|
if (navigation.current.button) {
|
|
initFocusableCell();
|
|
if (navigation.current.backward) {
|
|
previousButton.current.focus();
|
|
} else {
|
|
nextButton.current.focus();
|
|
}
|
|
} else {
|
|
var cell;
|
|
if (navigation.current.backward) {
|
|
var cells = utils.DomHandler.find(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
|
|
cell = cells[cells.length - 1];
|
|
} else {
|
|
cell = utils.DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
|
|
}
|
|
if (cell) {
|
|
cell.tabIndex = '0';
|
|
cell.focus();
|
|
}
|
|
}
|
|
navigation.current = null;
|
|
} else {
|
|
initFocusableCell();
|
|
}
|
|
};
|
|
var initFocusableCell = function initFocusableCell() {
|
|
var cell;
|
|
if (currentView === 'month') {
|
|
var cells = utils.DomHandler.find(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"]');
|
|
var selectedCell = utils.DomHandler.findSingle(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]');
|
|
cells.forEach(function (cell) {
|
|
return cell.tabIndex = -1;
|
|
});
|
|
cell = selectedCell || cells[0];
|
|
} else {
|
|
cell = utils.DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
|
|
if (!cell) {
|
|
var todayCell = utils.DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
|
|
cell = todayCell || utils.DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
|
|
}
|
|
}
|
|
if (cell) {
|
|
cell.tabIndex = '0';
|
|
}
|
|
};
|
|
var focusToFirstCell = function focusToFirstCell() {
|
|
if (currentView) {
|
|
var cell;
|
|
if (currentView === 'date') {
|
|
cell = utils.DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
|
|
if (!cell) {
|
|
var todayCell = utils.DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
|
|
cell = todayCell || utils.DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
|
|
}
|
|
} else if (currentView === 'month' || currentView === 'year') {
|
|
cell = utils.DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
|
|
if (!cell) {
|
|
cell = utils.DomHandler.findSingle(overlayRef.current, "[data-pc-section=\"".concat(currentView, "picker\"] [data-pc-section=\"").concat(currentView, "\"]:not([data-p-disabled=\"true\"])"));
|
|
}
|
|
}
|
|
if (cell) {
|
|
cell.tabIndex = '0';
|
|
cell && cell.focus();
|
|
}
|
|
}
|
|
};
|
|
var navBackward = function navBackward(event) {
|
|
if (props.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
var newViewDate = cloneDate(getViewDate());
|
|
newViewDate.setDate(1);
|
|
if (currentView === 'date') {
|
|
if (newViewDate.getMonth() === 0) {
|
|
var newYear = decrementYear();
|
|
newViewDate.setMonth(11);
|
|
newViewDate.setFullYear(newYear);
|
|
props.onMonthChange && props.onMonthChange({
|
|
month: 12,
|
|
year: newYear
|
|
});
|
|
setCurrentMonth(11);
|
|
} else {
|
|
newViewDate.setMonth(newViewDate.getMonth() - 1);
|
|
props.onMonthChange && props.onMonthChange({
|
|
month: currentMonth,
|
|
year: currentYear
|
|
});
|
|
setCurrentMonth(function (prevState) {
|
|
return prevState - 1;
|
|
});
|
|
}
|
|
} else if (currentView === 'month') {
|
|
var _newYear = newViewDate.getFullYear() - 1;
|
|
if (props.yearNavigator) {
|
|
var minYear = parseInt(props.yearRange.split(':')[0], 10);
|
|
if (_newYear < minYear) {
|
|
_newYear = minYear;
|
|
}
|
|
}
|
|
newViewDate.setFullYear(_newYear);
|
|
}
|
|
if (currentView === 'month') {
|
|
newViewDate.setFullYear(decrementYear());
|
|
} else if (currentView === 'year') {
|
|
newViewDate.setFullYear(decrementDecade());
|
|
}
|
|
updateViewDate(event, newViewDate);
|
|
event.preventDefault();
|
|
};
|
|
var navForward = function navForward(event) {
|
|
if (props.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
var newViewDate = cloneDate(getViewDate());
|
|
newViewDate.setDate(1);
|
|
if (currentView === 'date') {
|
|
if (newViewDate.getMonth() === 11) {
|
|
var newYear = incrementYear();
|
|
newViewDate.setMonth(0);
|
|
newViewDate.setFullYear(newYear);
|
|
props.onMonthChange && props.onMonthChange({
|
|
month: 1,
|
|
year: newYear
|
|
});
|
|
setCurrentMonth(0);
|
|
} else {
|
|
newViewDate.setMonth(newViewDate.getMonth() + 1);
|
|
props.onMonthChange && props.onMonthChange({
|
|
month: currentMonth + 2,
|
|
year: currentYear
|
|
});
|
|
setCurrentMonth(function (prevState) {
|
|
return prevState + 1;
|
|
});
|
|
}
|
|
} else if (currentView === 'month') {
|
|
var _newYear2 = newViewDate.getFullYear() + 1;
|
|
if (props.yearNavigator) {
|
|
var maxYear = parseInt(props.yearRange.split(':')[1], 10);
|
|
if (_newYear2 > maxYear) {
|
|
_newYear2 = maxYear;
|
|
}
|
|
}
|
|
newViewDate.setFullYear(_newYear2);
|
|
}
|
|
if (currentView === 'month') {
|
|
newViewDate.setFullYear(incrementYear());
|
|
} else if (currentView === 'year') {
|
|
newViewDate.setFullYear(incrementDecade());
|
|
}
|
|
updateViewDate(event, newViewDate);
|
|
event.preventDefault();
|
|
};
|
|
var populateYearOptions = function populateYearOptions(start, end) {
|
|
var _yearOptions = [];
|
|
for (var i = start; i <= end; i++) {
|
|
yearOptions.push(i);
|
|
}
|
|
setYearOptions(_yearOptions);
|
|
};
|
|
var decrementYear = function decrementYear() {
|
|
var year = getViewYear();
|
|
var _currentYear = year - 1;
|
|
setCurrentYear(_currentYear);
|
|
if (props.yearNavigator && _currentYear < yearOptions[0]) {
|
|
var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
|
|
populateYearOptions(yearOptions[0] - difference, yearOptions[yearOptions.length - 1] - difference);
|
|
}
|
|
return _currentYear;
|
|
};
|
|
var incrementYear = function incrementYear() {
|
|
var year = getViewYear();
|
|
var _currentYear = year + 1;
|
|
setCurrentYear(_currentYear);
|
|
if (props.yearNavigator && _currentYear.current > yearOptions[yearOptions.length - 1]) {
|
|
var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
|
|
populateYearOptions(yearOptions[0] + difference, yearOptions[yearOptions.length - 1] + difference);
|
|
}
|
|
return _currentYear;
|
|
};
|
|
var onMonthDropdownChange = function onMonthDropdownChange(event, value) {
|
|
var currentViewDate = getViewDate();
|
|
var newViewDate = cloneDate(currentViewDate);
|
|
newViewDate.setDate(1);
|
|
newViewDate.setMonth(parseInt(value, 10));
|
|
updateViewDate(event, newViewDate);
|
|
};
|
|
var onYearDropdownChange = function onYearDropdownChange(event, value) {
|
|
var currentViewDate = getViewDate();
|
|
var newViewDate = cloneDate(currentViewDate);
|
|
newViewDate.setFullYear(parseInt(value, 10));
|
|
updateViewDate(event, newViewDate);
|
|
};
|
|
var onTodayButtonClick = function onTodayButtonClick(event) {
|
|
var today = new Date();
|
|
var dateMeta = {
|
|
day: today.getDate(),
|
|
month: today.getMonth(),
|
|
year: today.getFullYear(),
|
|
today: true,
|
|
selectable: true
|
|
};
|
|
var timeMeta = {
|
|
hours: today.getHours(),
|
|
minutes: today.getMinutes(),
|
|
seconds: props.showSeconds ? today.getSeconds() : 0,
|
|
milliseconds: props.showMillisec ? today.getMilliseconds() : 0
|
|
};
|
|
updateViewDate(event, today);
|
|
onDateSelect(event, dateMeta, timeMeta);
|
|
props.onTodayButtonClick && props.onTodayButtonClick(event);
|
|
};
|
|
var onClearButtonClick = function onClearButtonClick(event) {
|
|
isClearClicked.current = true;
|
|
updateModel(event, null);
|
|
updateInputfield(null);
|
|
setCurrentYear(new Date().getFullYear()); // #7581
|
|
hide();
|
|
props.onClearButtonClick && props.onClearButtonClick(event);
|
|
};
|
|
var onPanelClick = function onPanelClick(event) {
|
|
if (!props.inline) {
|
|
overlayservice.OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: elementRef.current
|
|
});
|
|
}
|
|
};
|
|
var onPanelMouseUp = function onPanelMouseUp(event) {
|
|
onPanelClick(event);
|
|
};
|
|
var onTimePickerElementMouseDown = function onTimePickerElementMouseDown(event, type, direction) {
|
|
if (!props.disabled) {
|
|
_repeat(event, null, type, direction);
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
var onTimePickerElementMouseUp = function onTimePickerElementMouseUp() {
|
|
if (!props.disabled) {
|
|
clearTimePickerTimer();
|
|
}
|
|
};
|
|
var onTimePickerElementMouseLeave = function onTimePickerElementMouseLeave() {
|
|
if (!props.disabled) {
|
|
clearTimePickerTimer();
|
|
}
|
|
};
|
|
var _repeat = function repeat(event, interval, type, direction) {
|
|
clearTimePickerTimer();
|
|
timePickerTimer.current = setTimeout(function () {
|
|
_repeat(event, 100, type, direction);
|
|
}, interval || 500);
|
|
switch (type) {
|
|
case 0:
|
|
if (direction === 1) {
|
|
incrementHour(event);
|
|
} else {
|
|
decrementHour(event);
|
|
}
|
|
break;
|
|
case 1:
|
|
if (direction === 1) {
|
|
incrementMinute(event);
|
|
} else {
|
|
decrementMinute(event);
|
|
}
|
|
break;
|
|
case 2:
|
|
if (direction === 1) {
|
|
incrementSecond(event);
|
|
} else {
|
|
decrementSecond(event);
|
|
}
|
|
break;
|
|
case 3:
|
|
if (direction === 1) {
|
|
incrementMilliSecond(event);
|
|
} else {
|
|
decrementMilliSecond(event);
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
var clearTimePickerTimer = function clearTimePickerTimer() {
|
|
if (timePickerTimer.current) {
|
|
clearTimeout(timePickerTimer.current);
|
|
}
|
|
};
|
|
var roundMinutesToStep = function roundMinutesToStep(minutes) {
|
|
if (props.stepMinute) {
|
|
return Math.round(minutes / props.stepMinute) * props.stepMinute;
|
|
}
|
|
return minutes;
|
|
};
|
|
var incrementHour = function incrementHour(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentHour = currentTime.getHours();
|
|
var newHour = currentHour + props.stepHour;
|
|
newHour = newHour >= 24 ? newHour - 24 : newHour;
|
|
if (validateHour(newHour, currentTime)) {
|
|
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getHours() === newHour) {
|
|
if (props.maxDate.getMinutes() < currentTime.getMinutes()) {
|
|
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
|
|
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
|
|
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
|
|
} else {
|
|
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else if (props.maxDate.getMinutes() === currentTime.getMinutes()) {
|
|
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
|
|
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
|
|
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
|
|
} else {
|
|
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var decrementHour = function decrementHour(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentHour = currentTime.getHours();
|
|
var newHour = currentHour - props.stepHour;
|
|
newHour = newHour < 0 ? newHour + 24 : newHour;
|
|
if (validateHour(newHour, currentTime)) {
|
|
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getHours() === newHour) {
|
|
if (props.minDate.getMinutes() > currentTime.getMinutes()) {
|
|
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
|
|
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
|
|
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), props.minDate.getMilliseconds());
|
|
} else {
|
|
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else if (props.minDate.getMinutes() === currentTime.getMinutes()) {
|
|
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
|
|
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
|
|
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), props.minDate.getMilliseconds());
|
|
} else {
|
|
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var doStepMinute = function doStepMinute(currentMinute, step) {
|
|
if (props.stepMinute <= 1) {
|
|
return step ? currentMinute + step : currentMinute;
|
|
}
|
|
if (!step) {
|
|
step = props.stepMinute;
|
|
if (currentMinute % step === 0) {
|
|
return currentMinute;
|
|
}
|
|
}
|
|
return Math.floor((currentMinute + step) / step) * step;
|
|
};
|
|
var incrementMinute = function incrementMinute(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentMinute = currentTime.getMinutes();
|
|
var newMinute = doStepMinute(currentMinute, props.stepMinute);
|
|
newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
|
|
if (validateMinute(newMinute, currentTime)) {
|
|
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getMinutes() === newMinute) {
|
|
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
|
|
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
|
|
updateTime(event, currentTime.getHours(), newMinute, props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), newMinute, props.maxDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var decrementMinute = function decrementMinute(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentMinute = currentTime.getMinutes();
|
|
var newMinute = doStepMinute(currentMinute, -props.stepMinute);
|
|
newMinute = newMinute < 0 ? newMinute + 60 : newMinute;
|
|
if (validateMinute(newMinute, currentTime)) {
|
|
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getMinutes() === newMinute) {
|
|
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
|
|
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
|
|
updateTime(event, currentTime.getHours(), newMinute, props.minDate.getSeconds(), props.minDate.getMilliseconds());
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), newMinute, props.minDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var incrementSecond = function incrementSecond(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentSecond = currentTime.getSeconds();
|
|
var newSecond = currentSecond + props.stepSecond;
|
|
newSecond = newSecond > 59 ? newSecond - 60 : newSecond;
|
|
if (validateSecond(newSecond, currentTime)) {
|
|
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getSeconds() === newSecond) {
|
|
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
|
|
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, props.maxDate.getMilliseconds());
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var decrementSecond = function decrementSecond(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentSecond = currentTime.getSeconds();
|
|
var newSecond = currentSecond - props.stepSecond;
|
|
newSecond = newSecond < 0 ? newSecond + 60 : newSecond;
|
|
if (validateSecond(newSecond, currentTime)) {
|
|
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getSeconds() === newSecond) {
|
|
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
|
|
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, props.minDate.getMilliseconds());
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var incrementMilliSecond = function incrementMilliSecond(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentMillisecond = currentTime.getMilliseconds();
|
|
var newMillisecond = currentMillisecond + props.stepMillisec;
|
|
newMillisecond = newMillisecond > 999 ? newMillisecond - 1000 : newMillisecond;
|
|
if (validateMillisecond(newMillisecond, currentTime)) {
|
|
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var decrementMilliSecond = function decrementMilliSecond(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentMillisecond = currentTime.getMilliseconds();
|
|
var newMillisecond = currentMillisecond - props.stepMillisec;
|
|
newMillisecond = newMillisecond < 0 ? newMillisecond + 999 : newMillisecond;
|
|
if (validateMillisecond(newMillisecond, currentTime)) {
|
|
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var toggleAmPm = function toggleAmPm(event) {
|
|
var currentTime = getCurrentDateTime();
|
|
var currentHour = currentTime.getHours();
|
|
var newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
|
|
if (validateHour(convertTo24Hour(newHour, currentHour > 11), currentTime)) {
|
|
updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var getViewDate = function getViewDate(date) {
|
|
var propValue = props.value;
|
|
var viewDate = date || (props.onViewDateChange ? props.viewDate : viewDateState);
|
|
if (Array.isArray(propValue)) {
|
|
propValue = propValue[0];
|
|
}
|
|
return viewDate && isValidDate(viewDate) ? viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
|
|
};
|
|
var getCurrentDateTime = function getCurrentDateTime() {
|
|
if (isSingleSelection()) {
|
|
return props.value && props.value instanceof Date ? cloneDate(props.value) : getViewDate();
|
|
} else if (isMultipleSelection()) {
|
|
if (props.value && props.value.length) {
|
|
return cloneDate(props.value[props.value.length - 1]);
|
|
}
|
|
} else if (isRangeSelection()) {
|
|
if (props.value && props.value.length) {
|
|
var startDate = cloneDate(props.value[0]);
|
|
var endDate = cloneDate(props.value[1]);
|
|
return endDate || startDate;
|
|
}
|
|
}
|
|
return new Date();
|
|
};
|
|
var cloneDate = function cloneDate(date) {
|
|
return isValidDate(date) ? new Date(date.valueOf()) : date;
|
|
};
|
|
var isValidDate = function isValidDate(date) {
|
|
return date instanceof Date && !isNaN(date);
|
|
};
|
|
var convertTo24Hour = function convertTo24Hour(hour, pm) {
|
|
if (props.hourFormat === '12') {
|
|
return hour === 12 ? pm ? 12 : 0 : pm ? hour + 12 : hour;
|
|
}
|
|
return hour;
|
|
};
|
|
var validateHour = function validateHour(hour, value) {
|
|
var valid = true;
|
|
var valueDateString = value ? value.toDateString() : null;
|
|
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
|
|
if (props.minDate.getHours() > hour) {
|
|
valid = false;
|
|
}
|
|
}
|
|
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
|
|
if (props.maxDate.getHours() < hour) {
|
|
valid = false;
|
|
}
|
|
}
|
|
return valid;
|
|
};
|
|
var validateMinute = function validateMinute(minute, value) {
|
|
var valid = true;
|
|
var valueDateString = value ? value.toDateString() : null;
|
|
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === props.minDate.getHours()) {
|
|
if (props.minDate.getMinutes() > minute) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === props.maxDate.getHours()) {
|
|
if (props.maxDate.getMinutes() < minute) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
return valid;
|
|
};
|
|
var validateSecond = function validateSecond(second, value) {
|
|
var valid = true;
|
|
var valueDateString = value ? value.toDateString() : null;
|
|
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === props.minDate.getHours() && value.getMinutes() === props.minDate.getMinutes()) {
|
|
if (props.minDate.getSeconds() > second) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === props.maxDate.getHours() && value.getMinutes() === props.maxDate.getMinutes()) {
|
|
if (props.maxDate.getSeconds() < second) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
return valid;
|
|
};
|
|
var validateMillisecond = function validateMillisecond(millisecond, value) {
|
|
var valid = true;
|
|
var valueDateString = value ? value.toDateString() : null;
|
|
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === props.minDate.getHours() && value.getSeconds() === props.minDate.getSeconds() && value.getMinutes() === props.minDate.getMinutes()) {
|
|
if (props.minDate.getMilliseconds() > millisecond) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === props.maxDate.getHours() && value.getSeconds() === props.maxDate.getSeconds() && value.getMinutes() === props.maxDate.getMinutes()) {
|
|
if (props.maxDate.getMilliseconds() < millisecond) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
return valid;
|
|
};
|
|
var validateDate = function validateDate(value) {
|
|
if (props.yearNavigator) {
|
|
var _ref3 = props.yearRange ? props.yearRange.split(':').map(function (year) {
|
|
return parseInt(year, 10);
|
|
}) : [null, null],
|
|
_ref4 = _slicedToArray(_ref3, 2),
|
|
minRangeYear = _ref4[0],
|
|
maxRangeYear = _ref4[1];
|
|
var viewYear = value.getFullYear();
|
|
var minYear = null;
|
|
var maxYear = null;
|
|
if (minRangeYear !== null) {
|
|
minYear = props.minDate ? Math.max(props.minDate.getFullYear(), minRangeYear) : minRangeYear;
|
|
} else {
|
|
var _props$minDate;
|
|
minYear = ((_props$minDate = props.minDate) === null || _props$minDate === void 0 ? void 0 : _props$minDate.getFullYear()) || minRangeYear;
|
|
}
|
|
if (maxRangeYear !== null) {
|
|
maxYear = props.maxDate ? Math.min(props.maxDate.getFullYear(), maxRangeYear) : maxRangeYear;
|
|
} else {
|
|
var _props$maxDate;
|
|
maxYear = ((_props$maxDate = props.maxDate) === null || _props$maxDate === void 0 ? void 0 : _props$maxDate.getFullYear()) || maxRangeYear;
|
|
}
|
|
if (minYear && minYear > viewYear) viewYear = minYear;
|
|
if (maxYear && maxYear < viewYear) viewYear = maxYear;
|
|
value.setFullYear(viewYear);
|
|
}
|
|
if (renderMonthsNavigator(0)) {
|
|
var viewMonth = value.getMonth();
|
|
var viewMonthWithMinMax = parseInt(isInMinYear(value) && Math.max(props.minDate.getMonth(), viewMonth).toString() || isInMaxYear(value) && Math.min(props.maxDate.getMonth(), viewMonth).toString() || viewMonth);
|
|
value.setMonth(viewMonthWithMinMax);
|
|
}
|
|
};
|
|
var updateTime = function updateTime(event, hour, minute, second, millisecond) {
|
|
var newDateTime = getCurrentDateTime();
|
|
newDateTime.setHours(hour);
|
|
newDateTime.setMinutes(minute);
|
|
newDateTime.setSeconds(second);
|
|
newDateTime.setMilliseconds(millisecond);
|
|
if (isMultipleSelection()) {
|
|
if (props.value && props.value.length) {
|
|
var value = _toConsumableArray(props.value);
|
|
value[value.length - 1] = newDateTime;
|
|
newDateTime = value;
|
|
} else {
|
|
newDateTime = [newDateTime];
|
|
}
|
|
} else if (isRangeSelection()) {
|
|
if (props.value && props.value.length) {
|
|
var startDate = props.value[0];
|
|
var endDate = props.value[1];
|
|
newDateTime = endDate ? [startDate, newDateTime] : [newDateTime, null];
|
|
} else {
|
|
newDateTime = [newDateTime, null];
|
|
}
|
|
}
|
|
updateModel(event, newDateTime);
|
|
if (props.onSelect) {
|
|
props.onSelect({
|
|
originalEvent: event,
|
|
value: newDateTime
|
|
});
|
|
}
|
|
updateInputfield(newDateTime);
|
|
};
|
|
var updateViewDate = function updateViewDate(event, value) {
|
|
validateDate(value);
|
|
if (props.onViewDateChange && event) {
|
|
props.onViewDateChange({
|
|
originalEvent: event,
|
|
value: value
|
|
});
|
|
} else {
|
|
viewStateChanged.current = true;
|
|
setViewDateState(value);
|
|
}
|
|
if (!value) onClearButtonClick(event);
|
|
};
|
|
var setNavigationState = function setNavigationState(newViewDate) {
|
|
if (!newViewDate || !props.showMinMaxRange || props.view !== 'date' || !overlayRef.current) {
|
|
return;
|
|
}
|
|
var navPrev = utils.DomHandler.findSingle(overlayRef.current, '[data-pc-section="previousbutton"]');
|
|
var navNext = utils.DomHandler.findSingle(overlayRef.current, '[data-pc-section="nextbutton"]');
|
|
if (props.disabled) {
|
|
!isUnstyled() && utils.DomHandler.addClass(navPrev, 'p-disabled');
|
|
navPrev.setAttribute('data-p-disabled', true);
|
|
!isUnstyled() && utils.DomHandler.addClass(navNext, 'p-disabled');
|
|
navNext.setAttribute('data-p-disabled', true);
|
|
return;
|
|
}
|
|
|
|
// previous (check first day of month at 00:00:00)
|
|
if (props.minDate) {
|
|
var firstDayOfMonth = cloneDate(newViewDate);
|
|
if (firstDayOfMonth.getMonth() === 0) {
|
|
firstDayOfMonth.setMonth(11, 1);
|
|
firstDayOfMonth.setFullYear(firstDayOfMonth.getFullYear() - 1);
|
|
} else {
|
|
firstDayOfMonth.setMonth(firstDayOfMonth.getMonth(), 1);
|
|
}
|
|
firstDayOfMonth.setHours(0);
|
|
firstDayOfMonth.setMinutes(0);
|
|
firstDayOfMonth.setSeconds(0);
|
|
if (props.minDate > firstDayOfMonth) {
|
|
utils.DomHandler.addClass(navPrev, 'p-disabled');
|
|
} else {
|
|
utils.DomHandler.removeClass(navPrev, 'p-disabled');
|
|
}
|
|
}
|
|
|
|
// next (check last day of month at 11:59:59)
|
|
if (props.maxDate) {
|
|
var lastDayOfMonth = cloneDate(newViewDate);
|
|
if (lastDayOfMonth.getMonth() === 11) {
|
|
lastDayOfMonth.setMonth(0, 1);
|
|
lastDayOfMonth.setFullYear(lastDayOfMonth.getFullYear() + 1);
|
|
} else {
|
|
lastDayOfMonth.setMonth(lastDayOfMonth.getMonth() + 1, 1);
|
|
}
|
|
lastDayOfMonth.setHours(0);
|
|
lastDayOfMonth.setMinutes(0);
|
|
lastDayOfMonth.setSeconds(0);
|
|
lastDayOfMonth.setSeconds(-1);
|
|
if (props.maxDate < lastDayOfMonth) {
|
|
utils.DomHandler.addClass(navNext, 'p-disabled');
|
|
} else {
|
|
utils.DomHandler.removeClass(navNext, 'p-disabled');
|
|
}
|
|
}
|
|
};
|
|
var onDateCellKeydown = function onDateCellKeydown(event, date, groupIndex) {
|
|
var cellContent = event.currentTarget;
|
|
var cell = cellContent.parentElement;
|
|
var cellIndex = utils.DomHandler.index(cell);
|
|
switch (event.code) {
|
|
case 'ArrowDown':
|
|
{
|
|
cellContent.tabIndex = '-1';
|
|
var nextRow = cell.parentElement.nextElementSibling;
|
|
if (nextRow) {
|
|
var tableRowIndex = utils.DomHandler.index(cell.parentElement);
|
|
var tableRows = Array.from(cell.parentElement.parentElement.children);
|
|
var nextTableRows = tableRows.slice(tableRowIndex + 1);
|
|
var hasNextFocusableDate = nextTableRows.find(function (el) {
|
|
var focusCell = el.children[cellIndex].children[0];
|
|
return !utils.DomHandler.getAttribute(focusCell, 'data-p-disabled');
|
|
});
|
|
if (hasNextFocusableDate) {
|
|
var focusCell = hasNextFocusableDate.children[cellIndex].children[0];
|
|
focusCell.tabIndex = '0';
|
|
focusCell.focus();
|
|
} else {
|
|
navigation.current = {
|
|
backward: false
|
|
};
|
|
navForward(event);
|
|
}
|
|
} else {
|
|
navigation.current = {
|
|
backward: false
|
|
};
|
|
navForward(event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'ArrowUp':
|
|
{
|
|
cellContent.tabIndex = '-1';
|
|
if (event.altKey) {
|
|
hide(null, reFocusInputField);
|
|
} else {
|
|
var prevRow = cell.parentElement.previousElementSibling;
|
|
if (prevRow) {
|
|
var _tableRowIndex = utils.DomHandler.index(cell.parentElement);
|
|
var _tableRows = Array.from(cell.parentElement.parentElement.children);
|
|
var prevTableRows = _tableRows.slice(0, _tableRowIndex).reverse();
|
|
var _hasNextFocusableDate = prevTableRows.find(function (el) {
|
|
var focusCell = el.children[cellIndex].children[0];
|
|
return !utils.DomHandler.getAttribute(focusCell, 'data-p-disabled');
|
|
});
|
|
if (_hasNextFocusableDate) {
|
|
var _focusCell = _hasNextFocusableDate.children[cellIndex].children[0];
|
|
_focusCell.tabIndex = '0';
|
|
_focusCell.focus();
|
|
} else {
|
|
navigation.current = {
|
|
backward: true
|
|
};
|
|
navBackward(event);
|
|
}
|
|
} else {
|
|
navigation.current = {
|
|
backward: true
|
|
};
|
|
navBackward(event);
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'ArrowLeft':
|
|
{
|
|
cellContent.tabIndex = '-1';
|
|
var prevCell = cell.previousElementSibling;
|
|
if (prevCell) {
|
|
var cells = Array.from(cell.parentElement.children);
|
|
var prevCells = cells.slice(0, cellIndex).reverse();
|
|
var _hasNextFocusableDate2 = prevCells.find(function (el) {
|
|
var focusCell = el.children[0];
|
|
return !utils.DomHandler.getAttribute(focusCell, 'data-p-disabled');
|
|
});
|
|
if (_hasNextFocusableDate2) {
|
|
var _focusCell2 = _hasNextFocusableDate2.children[0];
|
|
_focusCell2.tabIndex = '0';
|
|
_focusCell2.focus();
|
|
} else {
|
|
navigateToMonth(true, groupIndex, event);
|
|
}
|
|
} else {
|
|
navigateToMonth(true, groupIndex, event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'ArrowRight':
|
|
{
|
|
cellContent.tabIndex = '-1';
|
|
var nextCell = cell.nextElementSibling;
|
|
if (nextCell) {
|
|
var _cells = Array.from(cell.parentElement.children);
|
|
var nextCells = _cells.slice(cellIndex + 1);
|
|
var _hasNextFocusableDate3 = nextCells.find(function (el) {
|
|
var focusCell = el.children[0];
|
|
return !utils.DomHandler.getAttribute(focusCell, 'data-p-disabled');
|
|
});
|
|
if (_hasNextFocusableDate3) {
|
|
var _focusCell3 = _hasNextFocusableDate3.children[0];
|
|
_focusCell3.tabIndex = '0';
|
|
_focusCell3.focus();
|
|
} else {
|
|
navigateToMonth(false, groupIndex, event);
|
|
}
|
|
} else {
|
|
navigateToMonth(false, groupIndex, event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'Enter':
|
|
case 'NumpadEnter':
|
|
case 'Space':
|
|
{
|
|
onDateSelect(event, date);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'Escape':
|
|
{
|
|
hide(null, reFocusInputField);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'Tab':
|
|
{
|
|
if (!props.inline) {
|
|
trapFocus(event);
|
|
}
|
|
break;
|
|
}
|
|
case 'Home':
|
|
{
|
|
cellContent.tabIndex = '-1';
|
|
var currentRow = cell.parentElement;
|
|
var _focusCell4 = currentRow.children[0].children[0];
|
|
if (utils.DomHandler.getAttribute(_focusCell4, 'data-p-disabled')) {
|
|
navigateToMonth(groupIndex, true, event);
|
|
} else {
|
|
_focusCell4.tabIndex = '0';
|
|
_focusCell4.focus();
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'End':
|
|
{
|
|
cellContent.tabIndex = '-1';
|
|
var _currentRow = cell.parentElement;
|
|
var _focusCell5 = _currentRow.children[_currentRow.children.length - 1].children[0];
|
|
if (utils.DomHandler.getAttribute(_focusCell5, 'data-p-disabled')) {
|
|
navigateToMonth(groupIndex, false, event);
|
|
} else {
|
|
_focusCell5.tabIndex = '0';
|
|
_focusCell5.focus();
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'PageUp':
|
|
{
|
|
cellContent.tabIndex = '-1';
|
|
if (event.shiftKey) {
|
|
navigation.current = {
|
|
backward: true
|
|
};
|
|
navBackward(event);
|
|
} else {
|
|
navigateToMonth(groupIndex, true, event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'PageDown':
|
|
{
|
|
cellContent.tabIndex = '-1';
|
|
if (event.shiftKey) {
|
|
navigation.current = {
|
|
backward: false
|
|
};
|
|
navForward(event);
|
|
} else {
|
|
navigateToMonth(groupIndex, false, event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
var navigateToMonth = function navigateToMonth(prev, groupIndex, event) {
|
|
if (prev) {
|
|
if (props.numberOfMonths === 1 || groupIndex === 0) {
|
|
navigation.current = {
|
|
backward: true
|
|
};
|
|
navBackward(event);
|
|
} else {
|
|
var prevMonthContainer = overlayRef.current.children[0].children[groupIndex - 1];
|
|
var cells = utils.DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"])');
|
|
var focusCell = cells[cells.length - 1];
|
|
focusCell.tabIndex = '0';
|
|
focusCell.focus();
|
|
}
|
|
} else if (props.numberOfMonths === 1 || groupIndex === props.numberOfMonths - 1) {
|
|
navigation.current = {
|
|
backward: false
|
|
};
|
|
navForward(event);
|
|
} else {
|
|
var nextMonthContainer = overlayRef.current.children[0].children[groupIndex + 1];
|
|
var _focusCell6 = utils.DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])');
|
|
_focusCell6.tabIndex = '0';
|
|
_focusCell6.focus();
|
|
}
|
|
};
|
|
var onMonthCellKeydown = function onMonthCellKeydown(event, index) {
|
|
var cell = event.currentTarget;
|
|
switch (event.code) {
|
|
//arrows
|
|
case 'ArrowUp':
|
|
case 'ArrowDown':
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var cells = cell.parentElement.children;
|
|
var cellIndex = utils.DomHandler.index(cell);
|
|
var nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
|
|
if (nextCell) {
|
|
nextCell.tabIndex = '0';
|
|
nextCell.focus();
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'ArrowLeft':
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var prevCell = cell.previousElementSibling;
|
|
if (prevCell) {
|
|
prevCell.tabIndex = '0';
|
|
prevCell.focus();
|
|
} else {
|
|
navigation.current = {
|
|
backward: true
|
|
};
|
|
navBackward(event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'ArrowRight':
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var _nextCell = cell.nextElementSibling;
|
|
if (_nextCell) {
|
|
_nextCell.tabIndex = '0';
|
|
_nextCell.focus();
|
|
} else {
|
|
navigation.current = {
|
|
backward: false
|
|
};
|
|
navForward(event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'PageUp':
|
|
{
|
|
if (event.shiftKey) {
|
|
return;
|
|
}
|
|
navigation.current = {
|
|
backward: true
|
|
};
|
|
navBackward(event);
|
|
break;
|
|
}
|
|
case 'PageDown':
|
|
{
|
|
if (event.shiftKey) {
|
|
return;
|
|
}
|
|
navigation.current = {
|
|
backward: false
|
|
};
|
|
navForward(event);
|
|
break;
|
|
}
|
|
case 'Enter':
|
|
case 'NumpadEnter':
|
|
case 'Space':
|
|
{
|
|
if (props.view !== 'month') {
|
|
viewChangedWithKeyDown.current = true;
|
|
}
|
|
onMonthSelect(event, index);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'Escape':
|
|
{
|
|
hide(null, reFocusInputField);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'Tab':
|
|
{
|
|
trapFocus(event);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
var onYearCellKeydown = function onYearCellKeydown(event, index) {
|
|
var cell = event.currentTarget;
|
|
switch (event.code) {
|
|
//arrows
|
|
case 'ArrowUp':
|
|
case 'ArrowDown':
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var cells = cell.parentElement.children;
|
|
var cellIndex = utils.DomHandler.index(cell);
|
|
var nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
|
|
if (nextCell) {
|
|
nextCell.tabIndex = '0';
|
|
nextCell.focus();
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'ArrowLeft':
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var prevCell = cell.previousElementSibling;
|
|
if (prevCell) {
|
|
prevCell.tabIndex = '0';
|
|
prevCell.focus();
|
|
} else {
|
|
navigation.current = {
|
|
backward: true
|
|
};
|
|
navBackward(event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'ArrowRight':
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var _nextCell2 = cell.nextElementSibling;
|
|
if (_nextCell2) {
|
|
_nextCell2.tabIndex = '0';
|
|
_nextCell2.focus();
|
|
} else {
|
|
navigation.current = {
|
|
backward: false
|
|
};
|
|
navForward(event);
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'PageUp':
|
|
{
|
|
if (event.shiftKey) {
|
|
return;
|
|
}
|
|
navigation.current = {
|
|
backward: true
|
|
};
|
|
navBackward(event);
|
|
break;
|
|
}
|
|
case 'PageDown':
|
|
{
|
|
if (event.shiftKey) {
|
|
return;
|
|
}
|
|
navigation.current = {
|
|
backward: false
|
|
};
|
|
navForward(event);
|
|
break;
|
|
}
|
|
case 'Enter':
|
|
case 'NumpadEnter':
|
|
case 'Space':
|
|
{
|
|
if (props.view !== 'year') {
|
|
viewChangedWithKeyDown.current = true;
|
|
}
|
|
onYearSelect(event, index);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'Escape':
|
|
{
|
|
hide(null, reFocusInputField);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
case 'Tab':
|
|
{
|
|
trapFocus(event);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
var onDateSelect = function onDateSelect(event, dateMeta, timeMeta, isUpdateViewDate) {
|
|
if (!event) {
|
|
return;
|
|
}
|
|
if (props.disabled || !dateMeta.selectable) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
utils.DomHandler.find(overlayRef.current, 'table td span:not([data-p-disabled="true"])').forEach(function (cell) {
|
|
return cell.tabIndex = -1;
|
|
});
|
|
event.currentTarget.focus();
|
|
if (isMultipleSelection()) {
|
|
if (isSelected(dateMeta)) {
|
|
var value = props.value.filter(function (date) {
|
|
return !isDateEquals(date, dateMeta);
|
|
});
|
|
updateModel(event, value);
|
|
updateInputfield(value);
|
|
} else if (!props.maxDateCount || !props.value || props.maxDateCount > props.value.length) {
|
|
selectDate(event, dateMeta, timeMeta);
|
|
}
|
|
} else {
|
|
selectDate(event, dateMeta, timeMeta);
|
|
}
|
|
if (!props.inline && isSingleSelection() && (!props.showTime || props.hideOnDateTimeSelect) && !isUpdateViewDate) {
|
|
setTimeout(function () {
|
|
hide('dateselect');
|
|
reFocusInputField();
|
|
}, 100);
|
|
if (touchUIMask.current) {
|
|
disableModality();
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var selectTime = function selectTime(date, timeMeta) {
|
|
if (props.showTime) {
|
|
var hours;
|
|
var minutes;
|
|
var seconds;
|
|
var milliseconds;
|
|
if (timeMeta) {
|
|
hours = timeMeta.hours;
|
|
minutes = timeMeta.minutes;
|
|
seconds = timeMeta.seconds;
|
|
milliseconds = timeMeta.milliseconds;
|
|
} else {
|
|
var time = getCurrentDateTime();
|
|
var _ref5 = [time.getHours(), time.getMinutes(), props.showSeconds ? time.getSeconds() : 0, props.showMillisec ? time.getMilliseconds() : 0];
|
|
hours = _ref5[0];
|
|
minutes = _ref5[1];
|
|
seconds = _ref5[2];
|
|
milliseconds = _ref5[3];
|
|
}
|
|
date.setHours(hours);
|
|
date.setMinutes(doStepMinute(minutes));
|
|
date.setSeconds(seconds);
|
|
date.setMilliseconds(milliseconds);
|
|
}
|
|
};
|
|
var selectDate = function selectDate(event, dateMeta, timeMeta) {
|
|
var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
|
|
selectTime(date, timeMeta);
|
|
if (props.minDate && props.minDate > date) {
|
|
date = props.minDate;
|
|
}
|
|
if (props.maxDate && props.maxDate < date) {
|
|
date = props.maxDate;
|
|
}
|
|
var selectedValues = date;
|
|
if (isSingleSelection()) {
|
|
updateModel(event, date);
|
|
} else if (isMultipleSelection()) {
|
|
selectedValues = props.value ? [].concat(_toConsumableArray(props.value), [date]) : [date];
|
|
updateModel(event, selectedValues);
|
|
} else if (isRangeSelection()) {
|
|
if (props.value && props.value.length) {
|
|
var startDate = props.value[0];
|
|
var endDate = props.value[1];
|
|
if (!endDate) {
|
|
if (date.getTime() >= startDate.getTime()) {
|
|
endDate = date;
|
|
} else {
|
|
endDate = startDate;
|
|
startDate = date;
|
|
}
|
|
} else {
|
|
startDate = date;
|
|
endDate = null;
|
|
}
|
|
selectedValues = [startDate, endDate];
|
|
updateModel(event, selectedValues);
|
|
if (props.hideOnRangeSelection && endDate !== null) {
|
|
setTimeout(function () {
|
|
setOverlayVisibleState(false);
|
|
}, 150);
|
|
}
|
|
} else {
|
|
selectedValues = [date, null];
|
|
updateModel(event, selectedValues);
|
|
}
|
|
}
|
|
if (props.onSelect) {
|
|
props.onSelect({
|
|
originalEvent: event,
|
|
value: date
|
|
});
|
|
}
|
|
updateInputfield(selectedValues);
|
|
};
|
|
var decrementDecade = function decrementDecade() {
|
|
var _currentYear = currentYear - 10;
|
|
setCurrentYear(_currentYear);
|
|
return _currentYear;
|
|
};
|
|
var incrementDecade = function incrementDecade() {
|
|
var _currentYear = currentYear + 10;
|
|
setCurrentYear(_currentYear);
|
|
return _currentYear;
|
|
};
|
|
var switchToMonthView = function switchToMonthView(event) {
|
|
if (event && event.code && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')) {
|
|
viewChangedWithKeyDown.current = true;
|
|
}
|
|
setCurrentView('month');
|
|
event.preventDefault();
|
|
};
|
|
var switchToYearView = function switchToYearView(event) {
|
|
if (event && event.code && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')) {
|
|
viewChangedWithKeyDown.current = true;
|
|
}
|
|
setCurrentView('year');
|
|
event.preventDefault();
|
|
};
|
|
var onMonthSelect = function onMonthSelect(event, month) {
|
|
if (props.view === 'month') {
|
|
var year = getViewYear();
|
|
onDateSelect(event, {
|
|
year: year,
|
|
month: month,
|
|
day: 1,
|
|
selectable: true
|
|
});
|
|
event.preventDefault();
|
|
} else {
|
|
setCurrentMonth(month);
|
|
createMonthsMeta(month, currentYear);
|
|
var currentDate = cloneDate(getCurrentDateTime());
|
|
currentDate.setDate(1); // #2948 always set to 1st of month
|
|
currentDate.setMonth(month);
|
|
currentDate.setYear(currentYear);
|
|
setViewDateState(currentDate);
|
|
setCurrentView('date');
|
|
props.onMonthChange && props.onMonthChange({
|
|
month: month + 1,
|
|
year: currentYear
|
|
});
|
|
updateViewDate(event, currentDate);
|
|
onViewDateSelect({
|
|
event: event,
|
|
date: currentDate
|
|
});
|
|
}
|
|
};
|
|
var getViewYear = function getViewYear() {
|
|
return props.yearNavigator ? getViewDate().getFullYear() : currentYear;
|
|
};
|
|
var onYearSelect = function onYearSelect(event, year) {
|
|
if (props.view === 'year') {
|
|
onDateSelect(event, {
|
|
year: year,
|
|
month: 0,
|
|
day: 1,
|
|
selectable: true
|
|
});
|
|
} else {
|
|
setCurrentYear(year);
|
|
setCurrentView('month');
|
|
props.onMonthChange && props.onMonthChange({
|
|
month: currentMonth + 1,
|
|
year: year
|
|
});
|
|
}
|
|
};
|
|
var updateModel = function updateModel(event, value) {
|
|
if (props.onChange) {
|
|
var newValue = cloneDate(value);
|
|
viewStateChanged.current = true;
|
|
onChangeRef.current({
|
|
originalEvent: event,
|
|
value: newValue,
|
|
stopPropagation: function stopPropagation() {
|
|
event === null || event === void 0 || event.stopPropagation();
|
|
},
|
|
preventDefault: function preventDefault() {
|
|
event === null || event === void 0 || event.preventDefault();
|
|
},
|
|
target: {
|
|
name: props.name,
|
|
id: props.id,
|
|
value: newValue
|
|
}
|
|
});
|
|
}
|
|
};
|
|
var show = function show(type) {
|
|
if (props.onVisibleChange) {
|
|
props.onVisibleChange({
|
|
visible: true,
|
|
type: type
|
|
});
|
|
} else {
|
|
setOverlayVisibleState(true);
|
|
overlayEventListener.current = function (e) {
|
|
if (!isOutsideClicked(e) && visible) {
|
|
isOverlayClicked.current = true;
|
|
}
|
|
};
|
|
overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
|
|
}
|
|
};
|
|
var hide = function hide(type, callback) {
|
|
var _hideCallback = function _hideCallback() {
|
|
viewStateChanged.current = false;
|
|
ignoreFocusFunctionality.current = false;
|
|
isOverlayClicked.current = false;
|
|
callback && callback();
|
|
overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
|
|
overlayEventListener.current = null;
|
|
};
|
|
props.touchUI && disableModality();
|
|
if (props.onVisibleChange) {
|
|
props.onVisibleChange({
|
|
visible: type !== 'dateselect',
|
|
// false only if selecting a value to close panel
|
|
type: type,
|
|
callback: _hideCallback
|
|
});
|
|
} else {
|
|
setOverlayVisibleState(false);
|
|
_hideCallback();
|
|
}
|
|
};
|
|
var onOverlayEnter = function onOverlayEnter() {
|
|
var styles = props.touchUI ? {
|
|
position: 'fixed',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)'
|
|
} : !props.inline ? {
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '0'
|
|
} : undefined;
|
|
utils.DomHandler.addStyles(overlayRef.current, styles);
|
|
if (props.autoZIndex) {
|
|
var key = props.touchUI ? 'modal' : 'overlay';
|
|
utils.ZIndexUtils.set(key, overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact__default["default"].zIndex[key]);
|
|
}
|
|
if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
|
|
var inputWidth = utils.DomHandler.getOuterWidth(inputRef.current);
|
|
|
|
// #5435 must have reasonable width if input is too small
|
|
if (inputWidth < 220) {
|
|
inputWidth = 220;
|
|
}
|
|
if (props.view === 'date') {
|
|
overlayRef.current.style.width = utils.DomHandler.getOuterWidth(overlayRef.current) + 'px';
|
|
} else {
|
|
overlayRef.current.style.width = inputWidth + 'px';
|
|
}
|
|
|
|
// #5830 Tailwind does not need a min width it breaks the styling
|
|
if (!isUnstyled()) {
|
|
overlayRef.current.style.minWidth = inputWidth + 'px';
|
|
}
|
|
}
|
|
alignOverlay();
|
|
};
|
|
var onOverlayEntered = function onOverlayEntered() {
|
|
bindOverlayListener();
|
|
props.onShow && props.onShow();
|
|
setFocusedState(false);
|
|
};
|
|
var onOverlayExit = function onOverlayExit() {
|
|
unbindOverlayListener();
|
|
};
|
|
var onOverlayExited = function onOverlayExited() {
|
|
utils.ZIndexUtils.clear(overlayRef.current);
|
|
props.onHide && props.onHide();
|
|
};
|
|
var appendDisabled = function appendDisabled() {
|
|
var appendTo = props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo;
|
|
return appendTo === 'self' || props.inline;
|
|
};
|
|
var alignOverlay = function alignOverlay() {
|
|
if (props.touchUI) {
|
|
enableModality();
|
|
} else if (overlayRef && overlayRef.current && inputRef && inputRef.current) {
|
|
utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo);
|
|
if (appendDisabled()) {
|
|
utils.DomHandler.relativePosition(overlayRef.current, inputRef.current);
|
|
} else {
|
|
utils.DomHandler.absolutePosition(overlayRef.current, inputRef.current);
|
|
}
|
|
}
|
|
|
|
// #6093 Forcibly remove minWidth when in unstyled mode
|
|
if (isUnstyled()) {
|
|
overlayRef.current.style.minWidth = '';
|
|
}
|
|
};
|
|
var enableModality = function enableModality() {
|
|
if (!touchUIMask.current) {
|
|
touchUIMask.current = document.createElement('div');
|
|
touchUIMask.current.style.zIndex = String(utils.ZIndexUtils.get(overlayRef.current) - 1);
|
|
!isUnstyled() && utils.DomHandler.addMultipleClasses(touchUIMask.current, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter');
|
|
touchUIMaskClickListener.current = function () {
|
|
disableModality();
|
|
hide();
|
|
};
|
|
touchUIMask.current.addEventListener('click', touchUIMaskClickListener.current);
|
|
document.body.appendChild(touchUIMask.current);
|
|
utils.DomHandler.blockBodyScroll();
|
|
}
|
|
};
|
|
var disableModality = function disableModality() {
|
|
if (touchUIMask.current) {
|
|
if (isUnstyled) {
|
|
destroyMask();
|
|
} else {
|
|
!isUnstyled() && utils.DomHandler.addClass(touchUIMask.current, 'p-component-overlay-leave');
|
|
if (utils.DomHandler.hasCSSAnimation(touchUIMask.current) > 0) {
|
|
touchUIMask.current.addEventListener('animationend', function () {
|
|
destroyMask();
|
|
});
|
|
} else {
|
|
destroyMask();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var destroyMask = function destroyMask() {
|
|
if (touchUIMask.current) {
|
|
touchUIMask.current.removeEventListener('click', touchUIMaskClickListener.current);
|
|
touchUIMaskClickListener.current = null;
|
|
document.body.removeChild(touchUIMask.current);
|
|
touchUIMask.current = null;
|
|
}
|
|
var bodyChildren = document.body.children;
|
|
var hasBlockerMasks;
|
|
for (var i = 0; i < bodyChildren.length; i++) {
|
|
var bodyChild = bodyChildren[i];
|
|
if (utils.DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
|
|
hasBlockerMasks = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!hasBlockerMasks) {
|
|
utils.DomHandler.unblockBodyScroll();
|
|
}
|
|
};
|
|
var isOutsideClicked = function isOutsideClicked(event) {
|
|
return elementRef.current && !(elementRef.current.isSameNode(event.target) || isNavIconClicked(event.target) || elementRef.current.contains(event.target) || overlayRef.current && overlayRef.current.contains(event.target));
|
|
};
|
|
var isNavIconClicked = function isNavIconClicked(target) {
|
|
return previousButton.current && (previousButton.current.isSameNode(target) || previousButton.current.contains(target)) || nextButton.current && (nextButton.current.isSameNode(target) || nextButton.current.contains(target));
|
|
};
|
|
var getFirstDayOfMonthIndex = function getFirstDayOfMonthIndex(month, year) {
|
|
var day = new Date();
|
|
day.setDate(1);
|
|
day.setMonth(month);
|
|
day.setFullYear(year);
|
|
var dayIndex = day.getDay() + getSundayIndex();
|
|
return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
|
|
};
|
|
var getDaysCountInMonth = function getDaysCountInMonth(month, year) {
|
|
return 32 - daylightSavingAdjust(new Date(year, month, 32)).getDate();
|
|
};
|
|
var getDaysCountInPrevMonth = function getDaysCountInPrevMonth(month, year) {
|
|
var prev = getPreviousMonthAndYear(month, year);
|
|
return getDaysCountInMonth(prev.month, prev.year);
|
|
};
|
|
var daylightSavingAdjust = function daylightSavingAdjust(date) {
|
|
if (!date) {
|
|
return null;
|
|
}
|
|
date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
|
|
return date;
|
|
};
|
|
var getPreviousMonthAndYear = function getPreviousMonthAndYear(month, year) {
|
|
var m;
|
|
var y;
|
|
if (month === 0) {
|
|
m = 11;
|
|
y = year - 1;
|
|
} else {
|
|
m = month - 1;
|
|
y = year;
|
|
}
|
|
return {
|
|
month: m,
|
|
year: y
|
|
};
|
|
};
|
|
var getNextMonthAndYear = function getNextMonthAndYear(month, year) {
|
|
var m;
|
|
var y;
|
|
if (month === 11) {
|
|
m = 0;
|
|
y = year + 1;
|
|
} else {
|
|
m = month + 1;
|
|
y = year;
|
|
}
|
|
return {
|
|
month: m,
|
|
year: y
|
|
};
|
|
};
|
|
var getSundayIndex = function getSundayIndex() {
|
|
var firstDayOfWeek = PrimeReact.localeOption('firstDayOfWeek', props.locale);
|
|
return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
|
|
};
|
|
var createWeekDaysMeta = function createWeekDaysMeta() {
|
|
var weekDays = [];
|
|
var _localeOptions = PrimeReact.localeOptions(props.locale),
|
|
dayIndex = _localeOptions.firstDayOfWeek,
|
|
dayNamesMin = _localeOptions.dayNamesMin;
|
|
for (var i = 0; i < 7; i++) {
|
|
weekDays.push(dayNamesMin[dayIndex]);
|
|
dayIndex = dayIndex === 6 ? 0 : ++dayIndex;
|
|
}
|
|
return weekDays;
|
|
};
|
|
var createMonthsMeta = function createMonthsMeta(month, year) {
|
|
var months = [];
|
|
for (var i = 0; i < props.numberOfMonths; i++) {
|
|
var m = month + i;
|
|
var y = year;
|
|
if (m > 11) {
|
|
m = m % 11 - 1;
|
|
y = year + 1;
|
|
}
|
|
months.push(createMonthMeta(m, y));
|
|
}
|
|
return months;
|
|
};
|
|
var createMonthMeta = function createMonthMeta(month, year) {
|
|
var dates = [];
|
|
var firstDay = getFirstDayOfMonthIndex(month, year);
|
|
var daysLength = getDaysCountInMonth(month, year);
|
|
var prevMonthDaysLength = getDaysCountInPrevMonth(month, year);
|
|
var dayNo = 1;
|
|
var today = new Date();
|
|
var weekNumbers = [];
|
|
var monthRows = Math.ceil((daysLength + firstDay) / 7);
|
|
for (var i = 0; i < monthRows; i++) {
|
|
var week = [];
|
|
if (i === 0) {
|
|
for (var j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
|
|
var prev = getPreviousMonthAndYear(month, year);
|
|
week.push({
|
|
day: j,
|
|
month: prev.month,
|
|
year: prev.year,
|
|
otherMonth: true,
|
|
today: isToday(today, j, prev.month, prev.year),
|
|
selectable: isSelectable(j, prev.month, prev.year, true)
|
|
});
|
|
}
|
|
var remainingDaysLength = 7 - week.length;
|
|
for (var _j = 0; _j < remainingDaysLength; _j++) {
|
|
week.push({
|
|
day: dayNo,
|
|
month: month,
|
|
year: year,
|
|
today: isToday(today, dayNo, month, year),
|
|
selectable: isSelectable(dayNo, month, year, false)
|
|
});
|
|
dayNo++;
|
|
}
|
|
} else {
|
|
for (var _j2 = 0; _j2 < 7; _j2++) {
|
|
if (dayNo > daysLength) {
|
|
var next = getNextMonthAndYear(month, year);
|
|
week.push({
|
|
day: dayNo - daysLength,
|
|
month: next.month,
|
|
year: next.year,
|
|
otherMonth: true,
|
|
today: isToday(today, dayNo - daysLength, next.month, next.year),
|
|
selectable: isSelectable(dayNo - daysLength, next.month, next.year, true)
|
|
});
|
|
} else {
|
|
week.push({
|
|
day: dayNo,
|
|
month: month,
|
|
year: year,
|
|
today: isToday(today, dayNo, month, year),
|
|
selectable: isSelectable(dayNo, month, year, false)
|
|
});
|
|
}
|
|
dayNo++;
|
|
}
|
|
}
|
|
if (props.showWeek) {
|
|
weekNumbers.push(getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
|
|
}
|
|
dates.push(week);
|
|
}
|
|
return {
|
|
month: month,
|
|
year: year,
|
|
dates: dates,
|
|
weekNumbers: weekNumbers
|
|
};
|
|
};
|
|
var getWeekNumber = function getWeekNumber(date) {
|
|
var checkDate = cloneDate(date);
|
|
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
|
|
var time = checkDate.getTime();
|
|
checkDate.setMonth(0);
|
|
checkDate.setDate(1);
|
|
return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
|
|
};
|
|
var isSelectable = function isSelectable(day, month, year, otherMonth) {
|
|
var validMin = true;
|
|
var validMax = true;
|
|
var validDate = true;
|
|
var validDay = true;
|
|
var validMonth = true;
|
|
if (props.minDate) {
|
|
if (props.minDate.getFullYear() > year) {
|
|
validMin = false;
|
|
} else if (props.minDate.getFullYear() === year) {
|
|
if (month > -1 && props.minDate.getMonth() > month) {
|
|
validMin = false;
|
|
} else if (month > -1 && props.minDate.getMonth() === month) {
|
|
if (day > 0 && props.minDate.getDate() > day) {
|
|
validMin = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (props.maxDate) {
|
|
if (props.maxDate.getFullYear() < year) {
|
|
validMax = false;
|
|
} else if (props.maxDate.getFullYear() === year) {
|
|
if (month > -1 && props.maxDate.getMonth() < month) {
|
|
validMax = false;
|
|
} else if (month > -1 && props.maxDate.getMonth() === month) {
|
|
if (day > 0 && props.maxDate.getDate() < day) {
|
|
validMax = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (props.disabledDates || props.enabledDates || props.disabledDays) {
|
|
validDay = !isDayDisabled(day, month, year);
|
|
}
|
|
if (props.selectOtherMonths === false && otherMonth) {
|
|
validMonth = false;
|
|
}
|
|
return validMin && validMax && validDate && validDay && validMonth;
|
|
};
|
|
var isSelectableTime = function isSelectableTime(value) {
|
|
var validMin = true;
|
|
var validMax = true;
|
|
if (props.minDate && props.minDate.toDateString() === value.toDateString()) {
|
|
if (props.minDate.getHours() > value.getHours()) {
|
|
validMin = false;
|
|
} else if (props.minDate.getHours() === value.getHours()) {
|
|
if (props.minDate.getMinutes() > value.getMinutes()) {
|
|
validMin = false;
|
|
} else if (props.minDate.getMinutes() === value.getMinutes()) {
|
|
if (props.minDate.getSeconds() > value.getSeconds()) {
|
|
validMin = false;
|
|
} else if (props.minDate.getSeconds() === value.getSeconds()) {
|
|
if (props.minDate.getMilliseconds() > value.getMilliseconds()) {
|
|
validMin = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (props.maxDate && props.maxDate.toDateString() === value.toDateString()) {
|
|
if (props.maxDate.getHours() < value.getHours()) {
|
|
validMax = false;
|
|
} else if (props.maxDate.getHours() === value.getHours()) {
|
|
if (props.maxDate.getMinutes() < value.getMinutes()) {
|
|
validMax = false;
|
|
} else if (props.maxDate.getMinutes() === value.getMinutes()) {
|
|
if (props.maxDate.getSeconds() < value.getSeconds()) {
|
|
validMax = false;
|
|
} else if (props.maxDate.getSeconds() === value.getSeconds()) {
|
|
if (props.maxDate.getMilliseconds() < value.getMilliseconds()) {
|
|
validMax = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return validMin && validMax;
|
|
};
|
|
var isSelected = function isSelected(dateMeta) {
|
|
if (props.value) {
|
|
if (isSingleSelection()) {
|
|
return isDateEquals(props.value, dateMeta);
|
|
} else if (isMultipleSelection()) {
|
|
var selected = false;
|
|
var _iterator = _createForOfIteratorHelper(props.value),
|
|
_step;
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var date = _step.value;
|
|
selected = isDateEquals(date, dateMeta);
|
|
if (selected) {
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
return selected;
|
|
} else if (isRangeSelection()) {
|
|
if (props.value[1]) {
|
|
return isDateEquals(props.value[0], dateMeta) || isDateEquals(props.value[1], dateMeta) || isDateBetween(props.value[0], props.value[1], dateMeta);
|
|
}
|
|
return isDateEquals(props.value[0], dateMeta);
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
var isComparable = function isComparable() {
|
|
return props.value != null && typeof props.value !== 'string';
|
|
};
|
|
var isMonthSelected = function isMonthSelected(month) {
|
|
if (!isComparable()) return false;
|
|
if (isMultipleSelection()) {
|
|
return props.value.some(function (v) {
|
|
return v.getMonth() === month && v.getFullYear() === currentYear;
|
|
});
|
|
} else if (isRangeSelection()) {
|
|
var _props$value = _slicedToArray(props.value, 2),
|
|
start = _props$value[0],
|
|
end = _props$value[1];
|
|
var startYear = start ? start.getFullYear() : null;
|
|
var endYear = end ? end.getFullYear() : null;
|
|
var startMonth = start ? start.getMonth() : null;
|
|
var endMonth = end ? end.getMonth() : null;
|
|
if (!end) {
|
|
return startYear === currentYear && startMonth === month;
|
|
} else {
|
|
var currentDate = new Date(currentYear, month, 1);
|
|
var startDate = new Date(startYear, startMonth, 1);
|
|
var endDate = new Date(endYear, endMonth, 1);
|
|
return currentDate >= startDate && currentDate <= endDate;
|
|
}
|
|
} else {
|
|
return props.value.getMonth() === month && props.value.getFullYear() === currentYear;
|
|
}
|
|
};
|
|
var isYearSelected = function isYearSelected(year) {
|
|
if (!isComparable()) return false;
|
|
if (isMultipleSelection()) {
|
|
return props.value.some(function (v) {
|
|
return v.getFullYear() === year;
|
|
});
|
|
} else if (isRangeSelection()) {
|
|
var start = props.value[0] ? props.value[0].getFullYear() : null;
|
|
var end = props.value[1] ? props.value[1].getFullYear() : null;
|
|
return start === year || end === year || start < year && end > year;
|
|
} else {
|
|
return props.value.getFullYear() === year;
|
|
}
|
|
};
|
|
var switchViewButtonDisabled = function switchViewButtonDisabled() {
|
|
return props.numberOfMonths > 1 || props.disabled;
|
|
};
|
|
var isDateEquals = function isDateEquals(value, dateMeta) {
|
|
if (value && value instanceof Date) {
|
|
return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
|
|
}
|
|
return false;
|
|
};
|
|
var isDateBetween = function isDateBetween(start, end, dateMeta) {
|
|
var between = false;
|
|
if (start && end) {
|
|
var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
|
|
return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
|
|
}
|
|
return between;
|
|
};
|
|
var isSingleSelection = function isSingleSelection() {
|
|
return props.selectionMode === 'single';
|
|
};
|
|
var isRangeSelection = function isRangeSelection() {
|
|
return props.selectionMode === 'range';
|
|
};
|
|
var isMultipleSelection = function isMultipleSelection() {
|
|
return props.selectionMode === 'multiple';
|
|
};
|
|
var isToday = function isToday(today, day, month, year) {
|
|
return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
|
|
};
|
|
var isDayDisabled = function isDayDisabled(day, month, year) {
|
|
var isDisabled = false;
|
|
|
|
// first check for disabled dates
|
|
if (props.disabledDates) {
|
|
if (props.disabledDates.some(function (d) {
|
|
return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
|
|
})) {
|
|
isDisabled = true;
|
|
}
|
|
}
|
|
|
|
// next if not disabled then check for disabled days
|
|
if (!isDisabled && props.disabledDays && currentView === 'date') {
|
|
var weekday = new Date(year, month, day);
|
|
var weekdayNumber = weekday.getDay();
|
|
if (props.disabledDays.indexOf(weekdayNumber) !== -1) {
|
|
isDisabled = true;
|
|
}
|
|
}
|
|
|
|
// last check for enabled dates to force dates enabled
|
|
if (props.enabledDates) {
|
|
var isEnabled = props.enabledDates.some(function (d) {
|
|
return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
|
|
});
|
|
if (isEnabled) {
|
|
isDisabled = false;
|
|
} else if (!props.disabledDays && !props.disabledDates) {
|
|
// disable other dates when only enabledDates are present
|
|
isDisabled = true;
|
|
}
|
|
}
|
|
return isDisabled;
|
|
};
|
|
var isMonthYearDisabled = function isMonthYearDisabled(month, year) {
|
|
var daysCountInAllMonth = month === -1 ? new Array(12).fill(0).map(function (_, i) {
|
|
return getDaysCountInMonth(i, year);
|
|
}) : [getDaysCountInMonth(month, year)];
|
|
for (var i = 0; i < daysCountInAllMonth.length; i++) {
|
|
var monthDays = daysCountInAllMonth[i];
|
|
var _month = month === -1 ? i : month;
|
|
for (var day = 1; day <= monthDays; day++) {
|
|
var isDateSelectable = isSelectable(day, _month, year);
|
|
if (isDateSelectable) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
var updateInputfield = function updateInputfield(value) {
|
|
if (!inputRef.current) {
|
|
return;
|
|
}
|
|
var formattedValue = '';
|
|
if (value) {
|
|
try {
|
|
if (isSingleSelection()) {
|
|
formattedValue = isValidDate(value) ? formatDateTime(value) : props.keepInvalid ? value : '';
|
|
} else if (isMultipleSelection()) {
|
|
for (var i = 0; i < value.length; i++) {
|
|
var selectedValue = value[i];
|
|
var dateAsString = isValidDate(selectedValue) ? formatDateTime(selectedValue) : '';
|
|
formattedValue = formattedValue + dateAsString;
|
|
if (i !== value.length - 1) {
|
|
formattedValue = formattedValue + ', ';
|
|
}
|
|
}
|
|
} else if (isRangeSelection()) {
|
|
if (value && value.length) {
|
|
var startDate = value[0];
|
|
var endDate = value[1];
|
|
formattedValue = isValidDate(startDate) ? formatDateTime(startDate) : '';
|
|
if (endDate) {
|
|
formattedValue = formattedValue + (isValidDate(endDate) ? ' - ' + formatDateTime(endDate) : '');
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
formattedValue = value;
|
|
}
|
|
}
|
|
inputRef.current.value = formattedValue;
|
|
};
|
|
var formatDateTime = function formatDateTime(date) {
|
|
if (props.formatDateTime) {
|
|
return props.formatDateTime(date);
|
|
}
|
|
var formattedValue = null;
|
|
if (date) {
|
|
if (props.timeOnly) {
|
|
formattedValue = formatTime(date);
|
|
} else {
|
|
formattedValue = formatDate(date, getDateFormat());
|
|
if (props.showTime) {
|
|
formattedValue = formattedValue + (' ' + formatTime(date));
|
|
}
|
|
}
|
|
}
|
|
return formattedValue;
|
|
};
|
|
var formatDate = function formatDate(date, format) {
|
|
if (!date) {
|
|
return '';
|
|
}
|
|
var iFormat;
|
|
var lookAhead = function lookAhead(match) {
|
|
var matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
|
|
if (matches) {
|
|
iFormat++;
|
|
}
|
|
return matches;
|
|
};
|
|
var formatNumber = function formatNumber(match, value, len) {
|
|
var num = '' + value;
|
|
if (lookAhead(match)) {
|
|
while (num.length < len) {
|
|
num = '0' + num;
|
|
}
|
|
}
|
|
return num;
|
|
};
|
|
var formatName = function formatName(match, value, shortNames, longNames) {
|
|
return lookAhead(match) ? longNames[value] : shortNames[value];
|
|
};
|
|
var output = '';
|
|
var literal = false;
|
|
var _localeOptions2 = PrimeReact.localeOptions(props.locale),
|
|
dayNamesShort = _localeOptions2.dayNamesShort,
|
|
dayNames = _localeOptions2.dayNames,
|
|
monthNamesShort = _localeOptions2.monthNamesShort,
|
|
monthNames = _localeOptions2.monthNames;
|
|
if (date) {
|
|
for (iFormat = 0; iFormat < format.length; iFormat++) {
|
|
if (literal) {
|
|
if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
|
|
literal = false;
|
|
} else {
|
|
output = output + format.charAt(iFormat);
|
|
}
|
|
} else {
|
|
switch (format.charAt(iFormat)) {
|
|
case 'd':
|
|
output = output + formatNumber('d', date.getDate(), 2);
|
|
break;
|
|
case 'D':
|
|
output = output + formatName('D', date.getDay(), dayNamesShort, dayNames);
|
|
break;
|
|
case 'o':
|
|
output = output + formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
|
|
break;
|
|
case 'm':
|
|
output = output + formatNumber('m', date.getMonth() + 1, 2);
|
|
break;
|
|
case 'M':
|
|
output = output + formatName('M', date.getMonth(), monthNamesShort, monthNames);
|
|
break;
|
|
case 'y':
|
|
output = output + (lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + date.getFullYear() % 100);
|
|
break;
|
|
case '@':
|
|
output = output + date.getTime();
|
|
break;
|
|
case '!':
|
|
output = output + (date.getTime() * 10000 + ticksTo1970);
|
|
break;
|
|
case "'":
|
|
if (lookAhead("'")) {
|
|
output = output + "'";
|
|
} else {
|
|
literal = true;
|
|
}
|
|
break;
|
|
default:
|
|
output = output + format.charAt(iFormat);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return output;
|
|
};
|
|
var formatTime = function formatTime(date) {
|
|
if (!date) {
|
|
return '';
|
|
}
|
|
var output = '';
|
|
var hours = date.getHours();
|
|
var minutes = date.getMinutes();
|
|
var seconds = date.getSeconds();
|
|
var milliseconds = date.getMilliseconds();
|
|
if (props.hourFormat === '12' && hours > 11 && hours !== 12) {
|
|
hours = hours - 12;
|
|
}
|
|
if (props.hourFormat === '12') {
|
|
output = output + (hours === 0 ? 12 : hours < 10 ? '0' + hours : hours);
|
|
} else {
|
|
output = output + (hours < 10 ? '0' + hours : hours);
|
|
}
|
|
output = output + ':';
|
|
output = output + (minutes < 10 ? '0' + minutes : minutes);
|
|
if (props.showSeconds) {
|
|
output = output + ':';
|
|
output = output + (seconds < 10 ? '0' + seconds : seconds);
|
|
}
|
|
if (props.showMillisec) {
|
|
output = output + '.';
|
|
output = output + (milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') + milliseconds : milliseconds);
|
|
}
|
|
if (props.hourFormat === '12') {
|
|
output = output + (date.getHours() > 11 ? ' PM' : ' AM');
|
|
}
|
|
return output;
|
|
};
|
|
var parseValueFromString = function parseValueFromString(text) {
|
|
if (!text || text.trim().length === 0) {
|
|
return null;
|
|
}
|
|
var value;
|
|
if (isSingleSelection()) {
|
|
value = parseDateTime(text);
|
|
} else if (isMultipleSelection()) {
|
|
var tokens = text.split(',');
|
|
value = [];
|
|
var _iterator2 = _createForOfIteratorHelper(tokens),
|
|
_step2;
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var token = _step2.value;
|
|
value.push(parseDateTime(token.trim()));
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
} else if (isRangeSelection()) {
|
|
var _tokens = text.split(' - ');
|
|
value = [];
|
|
for (var i = 0; i < _tokens.length; i++) {
|
|
value[i] = parseDateTime(_tokens[i].trim());
|
|
}
|
|
}
|
|
return value;
|
|
};
|
|
var parseDateTime = function parseDateTime(text) {
|
|
if (props.parseDateTime) {
|
|
return props.parseDateTime(text);
|
|
}
|
|
var date;
|
|
if (props.timeOnly) {
|
|
date = new Date();
|
|
var match = text.match(/(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)\s?(AM|PM)?/i);
|
|
if (match) {
|
|
populateTime(date, match[1], match[2]);
|
|
} else {
|
|
return null;
|
|
}
|
|
} else if (props.showTime) {
|
|
var time12 = /(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)\s?(AM|PM)/i;
|
|
var time24 = /(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)$/;
|
|
var _match, datePart, timePart, ampm;
|
|
if (props.hourFormat === '12' && (_match = text.match(time12))) {
|
|
timePart = _match[1];
|
|
ampm = _match[2];
|
|
datePart = text.replace(time12, '').trim();
|
|
} else if (props.hourFormat === '24' && (_match = text.match(time24))) {
|
|
timePart = _match[1];
|
|
datePart = text.replace(time24, '').trim();
|
|
}
|
|
if (datePart && timePart) {
|
|
date = parseDate(datePart, getDateFormat());
|
|
populateTime(date, timePart, ampm);
|
|
} else {
|
|
date = parseDate(text, getDateFormat());
|
|
}
|
|
} else {
|
|
date = parseDate(text, getDateFormat());
|
|
}
|
|
return date;
|
|
};
|
|
var populateTime = function populateTime(value, timeString, ampm) {
|
|
if (props.hourFormat === '12' && ampm !== 'PM' && ampm !== 'AM') {
|
|
throw new Error('Invalid Time');
|
|
}
|
|
var time = parseTime(timeString, ampm);
|
|
value.setHours(time.hour);
|
|
value.setMinutes(time.minute);
|
|
value.setSeconds(time.second);
|
|
value.setMilliseconds(time.millisecond);
|
|
};
|
|
var parseTime = function parseTime(value, ampm) {
|
|
value = props.showMillisec ? value.replace('.', ':') : value;
|
|
var tokens = value.split(':');
|
|
var validTokenLength = props.showSeconds ? 3 : 2;
|
|
validTokenLength = props.showMillisec ? validTokenLength + 1 : validTokenLength;
|
|
if (tokens.length !== validTokenLength || tokens[0].length !== 2 || tokens[1].length !== 2 || props.showSeconds && tokens[2].length !== 2 || props.showMillisec && tokens[3].length !== 3) {
|
|
throw new Error('Invalid time');
|
|
}
|
|
var h = parseInt(tokens[0], 10);
|
|
var m = parseInt(tokens[1], 10);
|
|
var s = props.showSeconds ? parseInt(tokens[2], 10) : null;
|
|
var ms = props.showMillisec ? parseInt(tokens[3], 10) : null;
|
|
if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || props.hourFormat === '12' && h > 12 || props.showSeconds && (isNaN(s) || s > 59) || props.showMillisec && (isNaN(s) || s > 1000)) {
|
|
throw new Error('Invalid time');
|
|
} else {
|
|
if (props.hourFormat === '12') {
|
|
if (h !== 12 && ampm === 'PM') {
|
|
h = h + 12;
|
|
}
|
|
if (h === 12 && ampm === 'AM') {
|
|
h = h - 12;
|
|
}
|
|
}
|
|
return {
|
|
hour: h,
|
|
minute: m,
|
|
second: s,
|
|
millisecond: ms
|
|
};
|
|
}
|
|
};
|
|
|
|
// Ported from jquery-ui datepicker parseDate
|
|
var parseDate = function parseDate(value, format) {
|
|
if (format == null || value == null) {
|
|
throw new Error('Invalid arguments');
|
|
}
|
|
value = _typeof(value) === 'object' ? value.toString() : value + '';
|
|
if (value === '') {
|
|
return null;
|
|
}
|
|
var iFormat;
|
|
var dim;
|
|
var extra;
|
|
var iValue = 0;
|
|
var shortYearCutoff = typeof props.shortYearCutoff !== 'string' ? props.shortYearCutoff : new Date().getFullYear() % 100 + parseInt(props.shortYearCutoff, 10);
|
|
var year = -1;
|
|
var month = -1;
|
|
var day = -1;
|
|
var doy = -1;
|
|
var literal = false;
|
|
var date;
|
|
var lookAhead = function lookAhead(match) {
|
|
var matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
|
|
if (matches) {
|
|
iFormat++;
|
|
}
|
|
return matches;
|
|
};
|
|
var getNumber = function getNumber(match) {
|
|
var isDoubled = lookAhead(match);
|
|
var size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2;
|
|
var minSize = match === 'y' ? size : 1;
|
|
var digits = new RegExp('^\\d{' + minSize + ',' + size + '}');
|
|
var num = value.substring(iValue).match(digits);
|
|
if (!num) {
|
|
throw new Error('Missing number at position ' + iValue);
|
|
}
|
|
iValue = iValue + num[0].length;
|
|
return parseInt(num[0], 10);
|
|
};
|
|
var getName = function getName(match, shortNames, longNames) {
|
|
var index = -1;
|
|
var arr = lookAhead(match) ? longNames : shortNames;
|
|
var names = [];
|
|
for (var i = 0; i < arr.length; i++) {
|
|
names.push([i, arr[i]]);
|
|
}
|
|
names.sort(function (a, b) {
|
|
return -(a[1].length - b[1].length);
|
|
});
|
|
for (var _i = 0; _i < names.length; _i++) {
|
|
var name = names[_i][1];
|
|
if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
|
|
index = names[_i][0];
|
|
iValue = iValue + name.length;
|
|
break;
|
|
}
|
|
}
|
|
if (index !== -1) {
|
|
return index + 1;
|
|
}
|
|
throw new Error('Unknown name at position ' + iValue);
|
|
};
|
|
var checkLiteral = function checkLiteral() {
|
|
if (value.charAt(iValue) !== format.charAt(iFormat)) {
|
|
throw new Error('Unexpected literal at position ' + iValue);
|
|
}
|
|
iValue++;
|
|
};
|
|
if (props.view === 'month') {
|
|
day = 1;
|
|
}
|
|
if (props.view === 'year') {
|
|
day = 1;
|
|
month = 1;
|
|
}
|
|
var _localeOptions3 = PrimeReact.localeOptions(props.locale),
|
|
dayNamesShort = _localeOptions3.dayNamesShort,
|
|
dayNames = _localeOptions3.dayNames,
|
|
monthNamesShort = _localeOptions3.monthNamesShort,
|
|
monthNames = _localeOptions3.monthNames;
|
|
for (iFormat = 0; iFormat < format.length; iFormat++) {
|
|
if (literal) {
|
|
if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
|
|
literal = false;
|
|
} else {
|
|
checkLiteral();
|
|
}
|
|
} else {
|
|
switch (format.charAt(iFormat)) {
|
|
case 'd':
|
|
day = getNumber('d');
|
|
break;
|
|
case 'D':
|
|
getName('D', dayNamesShort, dayNames);
|
|
break;
|
|
case 'o':
|
|
doy = getNumber('o');
|
|
break;
|
|
case 'm':
|
|
month = getNumber('m');
|
|
break;
|
|
case 'M':
|
|
month = getName('M', monthNamesShort, monthNames);
|
|
break;
|
|
case 'y':
|
|
year = getNumber('y');
|
|
break;
|
|
case '@':
|
|
date = new Date(getNumber('@'));
|
|
year = date.getFullYear();
|
|
month = date.getMonth() + 1;
|
|
day = date.getDate();
|
|
break;
|
|
case '!':
|
|
date = new Date((getNumber('!') - ticksTo1970) / 10000);
|
|
year = date.getFullYear();
|
|
month = date.getMonth() + 1;
|
|
day = date.getDate();
|
|
break;
|
|
case "'":
|
|
if (lookAhead("'")) {
|
|
checkLiteral();
|
|
} else {
|
|
literal = true;
|
|
}
|
|
break;
|
|
default:
|
|
checkLiteral();
|
|
}
|
|
}
|
|
}
|
|
if (iValue < value.length) {
|
|
extra = value.substr(iValue);
|
|
if (!/^\s+/.test(extra)) {
|
|
throw new Error('Extra/unparsed characters found in date: ' + extra);
|
|
}
|
|
}
|
|
if (year === -1) {
|
|
year = new Date().getFullYear();
|
|
} else if (year < 100) {
|
|
year = year + (new Date().getFullYear() - new Date().getFullYear() % 100 + (year <= shortYearCutoff ? 0 : -100));
|
|
}
|
|
if (doy > -1) {
|
|
month = 1;
|
|
day = doy;
|
|
do {
|
|
dim = getDaysCountInMonth(year, month - 1);
|
|
if (day <= dim) {
|
|
break;
|
|
}
|
|
month++;
|
|
day = day - dim;
|
|
} while (true);
|
|
}
|
|
date = daylightSavingAdjust(new Date(year, month - 1, day));
|
|
if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
|
|
throw new Error('Invalid date'); // E.g. 31/02/00
|
|
}
|
|
return date;
|
|
};
|
|
var isInMinYear = function isInMinYear(viewDate) {
|
|
return props.minDate && props.minDate.getFullYear() === viewDate.getFullYear();
|
|
};
|
|
var isInMaxYear = function isInMaxYear(viewDate) {
|
|
return props.maxDate && props.maxDate.getFullYear() === viewDate.getFullYear();
|
|
};
|
|
React__namespace.useEffect(function () {
|
|
utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
|
|
}, [inputRef, props.inputRef]);
|
|
hooks.useMountEffect(function () {
|
|
var viewDate = getViewDate(props.viewDate);
|
|
validateDate(viewDate);
|
|
setViewDateState(viewDate);
|
|
setCurrentMonth(viewDate.getMonth());
|
|
setCurrentYear(viewDate.getFullYear());
|
|
setCurrentView(props.view);
|
|
if (!idState) {
|
|
var uniqueId = utils.UniqueComponentId();
|
|
!idState && setIdState(uniqueId);
|
|
}
|
|
if (props.inline) {
|
|
overlayRef && overlayRef.current.setAttribute(attributeSelector, '');
|
|
if (!props.disabled) {
|
|
initFocusableCell();
|
|
if (props.numberOfMonths === 1) {
|
|
overlayRef.current.style.width = utils.DomHandler.getOuterWidth(overlayRef.current) + 'px';
|
|
}
|
|
}
|
|
}
|
|
if (props.value) {
|
|
updateInputfield(props.value);
|
|
setValue(props.value);
|
|
}
|
|
if (props.autoFocus) {
|
|
// delay showing until rendered so `alignPanel()` method aligns the popup in the right location
|
|
setTimeout(function () {
|
|
return utils.DomHandler.focus(inputRef.current, props.autoFocus);
|
|
}, 200);
|
|
}
|
|
});
|
|
React__namespace.useEffect(function () {
|
|
// see https://github.com/primefaces/primereact/issues/4030
|
|
onChangeRef.current = props.onChange;
|
|
}, [props.onChange]);
|
|
React__namespace.useEffect(function () {
|
|
var unbindMaskEvents = null;
|
|
if (props.mask) {
|
|
unbindMaskEvents = utils.mask(inputRef.current, {
|
|
mask: props.mask,
|
|
slotChar: props.maskSlotChar,
|
|
readOnly: props.readOnlyInput || props.disabled,
|
|
onChange: function onChange(e) {
|
|
updateValueOnInput(e.originalEvent, e.value, function () {
|
|
return false;
|
|
});
|
|
},
|
|
onBlur: function onBlur(e) {
|
|
updateValueOnInput(e, e.target.value);
|
|
}
|
|
}).unbindEvents;
|
|
}
|
|
return function () {
|
|
props.mask && unbindMaskEvents && unbindMaskEvents();
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [props.disabled, props.mask, props.readOnlyInput]);
|
|
hooks.useUpdateEffect(function () {
|
|
if (viewChangedWithKeyDown.current) {
|
|
setCurrentView(props.view);
|
|
}
|
|
viewChangedWithKeyDown.current = false;
|
|
}, [props.view]);
|
|
hooks.useUpdateEffect(function () {
|
|
if (visible && !props.inline) {
|
|
focusToFirstCell();
|
|
}
|
|
}, [visible, currentView, props.inline]);
|
|
hooks.useUpdateEffect(function () {
|
|
if (!props.onViewDateChange && !viewStateChanged.current) {
|
|
setValue(props.value);
|
|
}
|
|
if (props.viewDate) {
|
|
var date = getViewDate(props.viewDate);
|
|
updateViewDate(null, date);
|
|
onViewDateSelect({
|
|
event: null,
|
|
date: date
|
|
});
|
|
}
|
|
}, [props.onViewDateChange, props.value, props.viewDate]);
|
|
hooks.useUpdateEffect(function () {
|
|
if (overlayVisibleState || props.visible) {
|
|
// Github #5529
|
|
setTimeout(function () {
|
|
alignOverlay();
|
|
});
|
|
}
|
|
}, [currentView, overlayVisibleState, props.visible]);
|
|
hooks.useUpdateEffect(function () {
|
|
var newDate = props.value;
|
|
if (previousValue !== newDate) {
|
|
var isInputFocused = document.activeElement === inputRef.current;
|
|
|
|
// Do not update value in input if user types something in it:
|
|
if (!isInputFocused) {
|
|
updateInputfield(newDate);
|
|
}
|
|
|
|
// #3516 view date not updated when value set programatically
|
|
if (!newDate) return;
|
|
var viewDate = newDate;
|
|
if (isMultipleSelection()) {
|
|
if (newDate.length) {
|
|
viewDate = newDate[newDate.length - 1];
|
|
}
|
|
} else if (isRangeSelection()) {
|
|
if (newDate.length) {
|
|
var startDate = newDate[0];
|
|
var endDate = newDate[1];
|
|
viewDate = endDate || startDate;
|
|
}
|
|
}
|
|
if (viewDate instanceof Date) {
|
|
validateDate(viewDate);
|
|
setViewDateState(viewDate);
|
|
setCurrentMonth(viewDate.getMonth());
|
|
setCurrentYear(viewDate.getFullYear());
|
|
}
|
|
}
|
|
}, [props.value, visible]);
|
|
hooks.useUpdateEffect(function () {
|
|
updateInputfield(props.value);
|
|
}, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec, props.showTime, props.locale]);
|
|
hooks.useUpdateEffect(function () {
|
|
if (overlayRef.current) {
|
|
setNavigationState(viewDateState);
|
|
updateFocus();
|
|
}
|
|
});
|
|
hooks.useUnmountEffect(function () {
|
|
if (touchUIMask.current) {
|
|
disableModality();
|
|
touchUIMask.current = null;
|
|
}
|
|
utils.ZIndexUtils.clear(overlayRef.current);
|
|
});
|
|
React__namespace.useImperativeHandle(ref, function () {
|
|
return {
|
|
props: props,
|
|
show: show,
|
|
hide: hide,
|
|
getCurrentDateTime: getCurrentDateTime,
|
|
getViewDate: getViewDate,
|
|
updateViewDate: updateViewDate,
|
|
focus: function focus() {
|
|
return utils.DomHandler.focus(inputRef.current);
|
|
},
|
|
getElement: function getElement() {
|
|
return elementRef.current;
|
|
},
|
|
getOverlay: function getOverlay() {
|
|
return overlayRef.current;
|
|
},
|
|
getInput: function getInput() {
|
|
return inputRef.current;
|
|
}
|
|
};
|
|
});
|
|
var setValue = function setValue(propValue) {
|
|
if (Array.isArray(propValue)) {
|
|
propValue = propValue[0];
|
|
}
|
|
var prevPropValue = previousValue;
|
|
if (Array.isArray(prevPropValue)) {
|
|
prevPropValue = prevPropValue[0];
|
|
}
|
|
var viewDate = props.viewDate && isValidDate(props.viewDate) ? props.viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
|
|
if (isClearClicked.current && props.showTime) {
|
|
viewDate.setHours(0, 0, 0);
|
|
isClearClicked.current = false;
|
|
}
|
|
if (!prevPropValue && propValue || propValue && propValue instanceof Date && prevPropValue instanceof Date && propValue.getTime() !== prevPropValue.getTime()) {
|
|
validateDate(viewDate);
|
|
}
|
|
setViewDateState(viewDate);
|
|
viewStateChanged.current = true;
|
|
};
|
|
var createBackwardNavigator = function createBackwardNavigator(isVisible) {
|
|
var navigatorProps = isVisible ? {
|
|
onClick: onPrevButtonClick,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onContainerButtonKeydown(e);
|
|
}
|
|
} : {
|
|
style: {
|
|
visibility: 'hidden'
|
|
}
|
|
};
|
|
var previousIconProps = mergeProps({
|
|
className: cx('previousIcon')
|
|
}, ptm('previousIcon'));
|
|
var icon = props.prevIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, previousIconProps);
|
|
var backwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, previousIconProps), {
|
|
props: props
|
|
});
|
|
var _localeOptions4 = PrimeReact.localeOptions(props.locale),
|
|
prevDecade = _localeOptions4.prevDecade,
|
|
prevYear = _localeOptions4.prevYear,
|
|
prevMonth = _localeOptions4.prevMonth;
|
|
var previousButtonLabel = currentView === 'year' ? prevDecade : currentView === 'month' ? prevYear : prevMonth;
|
|
var previousButtonProps = mergeProps(_objectSpread({
|
|
type: 'button',
|
|
className: cx('previousButton'),
|
|
'aria-label': previousButtonLabel
|
|
}, navigatorProps), ptm('previousButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("button", _extends({
|
|
ref: previousButton
|
|
}, previousButtonProps), backwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
|
|
};
|
|
var createForwardNavigator = function createForwardNavigator(isVisible) {
|
|
var navigatorProps = isVisible ? {
|
|
onClick: onNextButtonClick,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onContainerButtonKeydown(e);
|
|
}
|
|
} : {
|
|
style: {
|
|
visibility: 'hidden'
|
|
}
|
|
};
|
|
var nextIconProps = mergeProps({
|
|
className: cx('nextIcon')
|
|
}, ptm('nextIcon'));
|
|
var icon = props.nextIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, nextIconProps);
|
|
var forwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, nextIconProps), {
|
|
props: props
|
|
});
|
|
var _localeOptions5 = PrimeReact.localeOptions(props.locale),
|
|
nextDecade = _localeOptions5.nextDecade,
|
|
nextYear = _localeOptions5.nextYear,
|
|
nextMonth = _localeOptions5.nextMonth;
|
|
var nextButtonLabel = currentView === 'year' ? nextDecade : currentView === 'month' ? nextYear : nextMonth;
|
|
var nextButtonProps = mergeProps(_objectSpread({
|
|
type: 'button',
|
|
className: cx('nextButton'),
|
|
'aria-label': nextButtonLabel
|
|
}, navigatorProps), ptm('nextButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("button", _extends({
|
|
ref: nextButton
|
|
}, nextButtonProps), forwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
|
|
};
|
|
var renderMonthsNavigator = function renderMonthsNavigator(index) {
|
|
return props.monthNavigator && props.view !== 'month' && (props.numberOfMonths === 1 || index === 0);
|
|
};
|
|
var createTitleMonthElement = function createTitleMonthElement(month, monthIndex) {
|
|
var monthNames = PrimeReact.localeOption('monthNames', props.locale);
|
|
if (renderMonthsNavigator(monthIndex)) {
|
|
var viewDate = getViewDate();
|
|
var viewMonth = viewDate.getMonth();
|
|
var displayedMonthOptions = monthNames.map(function (month, index) {
|
|
return (!isInMinYear(viewDate) || index >= props.minDate.getMonth()) && (!isInMaxYear(viewDate) || index <= props.maxDate.getMonth()) ? {
|
|
label: month,
|
|
value: index,
|
|
index: index
|
|
} : null;
|
|
}).filter(function (option) {
|
|
return !!option;
|
|
});
|
|
var displayedMonthNames = displayedMonthOptions.map(function (option) {
|
|
return option.label;
|
|
});
|
|
var selectProps = mergeProps({
|
|
className: cx('select'),
|
|
onChange: function onChange(e) {
|
|
return onMonthDropdownChange(e, e.target.value);
|
|
},
|
|
value: viewMonth
|
|
}, ptm('select'));
|
|
var _content = /*#__PURE__*/React__namespace.createElement("select", selectProps, displayedMonthOptions.map(function (option) {
|
|
var optionProps = mergeProps({
|
|
value: option.value
|
|
}, ptm('option'));
|
|
return /*#__PURE__*/React__namespace.createElement("option", _extends({}, optionProps, {
|
|
key: option.label
|
|
}), option.label);
|
|
}));
|
|
if (props.monthNavigatorTemplate) {
|
|
var defaultContentOptions = {
|
|
onChange: onMonthDropdownChange,
|
|
className: 'p-datepicker-month',
|
|
value: viewMonth,
|
|
names: displayedMonthNames,
|
|
options: displayedMonthOptions,
|
|
element: _content,
|
|
props: props
|
|
};
|
|
return utils.ObjectUtils.getJSXElement(props.monthNavigatorTemplate, defaultContentOptions);
|
|
}
|
|
return _content;
|
|
}
|
|
var monthTitleProps = mergeProps({
|
|
className: cx('monthTitle'),
|
|
onKeyDown: onContainerButtonKeydown,
|
|
'aria-label': PrimeReact.localeOption('chooseMonth', props.locale),
|
|
onClick: switchToMonthView,
|
|
disabled: switchViewButtonDisabled()
|
|
}, ptm('monthTitle'));
|
|
return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("button", monthTitleProps, monthNames[month]);
|
|
};
|
|
var createTitleYearElement = function createTitleYearElement(metaYear) {
|
|
var viewDate = getViewDate();
|
|
var viewYear = viewDate.getFullYear();
|
|
var displayYear = props.numberOfMonths > 1 || props.yearNavigator ? metaYear : currentYear;
|
|
if (props.yearNavigator) {
|
|
var _yearOptions2 = [];
|
|
if (props.yearRange) {
|
|
var years = props.yearRange.split(':');
|
|
var yearStart = parseInt(years[0], 10);
|
|
var yearEnd = parseInt(years[1], 10);
|
|
for (var i = yearStart; i <= yearEnd; i++) {
|
|
_yearOptions2.push(i);
|
|
}
|
|
} else {
|
|
var base = viewYear - viewYear % 10;
|
|
for (var _i2 = 0; _i2 < 10; _i2++) {
|
|
_yearOptions2.push(base + _i2);
|
|
}
|
|
}
|
|
var displayedYearNames = _yearOptions2.filter(function (year) {
|
|
return !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year);
|
|
});
|
|
var selectProps = mergeProps({
|
|
className: cx('select'),
|
|
onChange: function onChange(e) {
|
|
return onYearDropdownChange(e, e.target.value);
|
|
},
|
|
value: displayYear
|
|
}, ptm('select'));
|
|
var _content2 = /*#__PURE__*/React__namespace.createElement("select", selectProps, displayedYearNames.map(function (year) {
|
|
var optionProps = mergeProps({
|
|
value: year
|
|
}, ptm('option'));
|
|
return /*#__PURE__*/React__namespace.createElement("option", _extends({}, optionProps, {
|
|
key: year
|
|
}), year);
|
|
}));
|
|
if (props.yearNavigatorTemplate) {
|
|
var options = displayedYearNames.map(function (name, i) {
|
|
return {
|
|
label: name,
|
|
value: name,
|
|
index: i
|
|
};
|
|
});
|
|
var defaultContentOptions = {
|
|
onChange: onYearDropdownChange,
|
|
className: 'p-datepicker-year',
|
|
value: viewYear,
|
|
names: displayedYearNames,
|
|
options: options,
|
|
element: _content2,
|
|
props: props
|
|
};
|
|
return utils.ObjectUtils.getJSXElement(props.yearNavigatorTemplate, defaultContentOptions);
|
|
}
|
|
return _content2;
|
|
}
|
|
var yearTitleProps = mergeProps({
|
|
className: cx('yearTitle'),
|
|
'aria-label': PrimeReact.localeOption('chooseYear', props.locale),
|
|
onClick: function onClick(e) {
|
|
return switchToYearView(e);
|
|
},
|
|
disabled: switchViewButtonDisabled()
|
|
}, ptm('yearTitle'));
|
|
return currentView !== 'year' && /*#__PURE__*/React__namespace.createElement("button", yearTitleProps, displayYear);
|
|
};
|
|
var createTitleDecadeElement = function createTitleDecadeElement() {
|
|
var years = yearPickerValues();
|
|
var decadeTitleProps = mergeProps({
|
|
className: cx('decadeTitle')
|
|
}, ptm('decadeTitle'));
|
|
if (currentView === 'year') {
|
|
var decadeTitleTextProps = mergeProps(ptm('decadeTitleText'));
|
|
return /*#__PURE__*/React__namespace.createElement("span", decadeTitleProps, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React__namespace.createElement("span", decadeTitleTextProps, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
|
|
}
|
|
return null;
|
|
};
|
|
var createTitle = function createTitle(monthMetaData, index) {
|
|
var month = createTitleMonthElement(monthMetaData.month, index);
|
|
var year = createTitleYearElement(monthMetaData.year);
|
|
var decade = createTitleDecadeElement();
|
|
var titleProps = mergeProps({
|
|
className: cx('title')
|
|
}, ptm('title'));
|
|
var showMonthAfterYear = PrimeReact.localeOption('showMonthAfterYear', props.locale);
|
|
return /*#__PURE__*/React__namespace.createElement("div", titleProps, showMonthAfterYear ? year : month, showMonthAfterYear ? month : year, decade);
|
|
};
|
|
var createDayNames = function createDayNames(weekDays) {
|
|
var weekDayProps = mergeProps(ptm('weekDay'));
|
|
var tableHeaderCellProps = mergeProps({
|
|
scope: 'col'
|
|
}, ptm('tableHeaderCell'));
|
|
var dayNames = weekDays.map(function (weekDay, index) {
|
|
return /*#__PURE__*/React__namespace.createElement("th", _extends({}, tableHeaderCellProps, {
|
|
key: "".concat(weekDay, "-").concat(index)
|
|
}), /*#__PURE__*/React__namespace.createElement("span", weekDayProps, weekDay));
|
|
});
|
|
if (props.showWeek) {
|
|
var weekHeaderProps = mergeProps({
|
|
scope: 'col',
|
|
className: cx('weekHeader'),
|
|
'data-p-disabled': props.showWeek
|
|
}, ptm('weekHeader', {
|
|
context: {
|
|
disabled: props.showWeek
|
|
}
|
|
}));
|
|
var weekLabel = mergeProps(ptm('weekLabel'));
|
|
var weekHeader = /*#__PURE__*/React__namespace.createElement("th", _extends({}, weekHeaderProps, {
|
|
key: "wn"
|
|
}), /*#__PURE__*/React__namespace.createElement("span", weekLabel, PrimeReact.localeOption('weekHeader', props.locale)));
|
|
return [weekHeader].concat(_toConsumableArray(dayNames));
|
|
}
|
|
return dayNames;
|
|
};
|
|
var createDateCellContent = function createDateCellContent(date, className, groupIndex) {
|
|
var content = props.dateTemplate ? props.dateTemplate(date) : date.day;
|
|
var selected = isSelected(date);
|
|
var dayLabelProps = mergeProps({
|
|
className: cx('dayLabel', {
|
|
className: className
|
|
}),
|
|
'aria-selected': selected,
|
|
'aria-disabled': !date.selectable,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return e.preventDefault();
|
|
},
|
|
onClick: function onClick(e) {
|
|
return onDateSelect(e, date);
|
|
},
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onDateCellKeydown(e, date, groupIndex);
|
|
},
|
|
'data-p-highlight': selected,
|
|
'data-p-disabled': !date.selectable
|
|
}, ptm('dayLabel', {
|
|
context: {
|
|
selected: selected,
|
|
disabled: !date.selectable
|
|
}
|
|
}));
|
|
return /*#__PURE__*/React__namespace.createElement("span", dayLabelProps, content, selected && /*#__PURE__*/React__namespace.createElement("div", {
|
|
"aria-live": "polite",
|
|
className: "p-hidden-accessible",
|
|
"data-p-hidden-accessible": true,
|
|
pt: ptm('hiddenSelectedDay')
|
|
}));
|
|
};
|
|
var createWeek = function createWeek(weekDates, weekNumber, groupIndex) {
|
|
var week = weekDates.map(function (date) {
|
|
var selected = isSelected(date);
|
|
var dateClassName = utils.classNames({
|
|
'p-highlight': selected,
|
|
'p-disabled': !date.selectable
|
|
});
|
|
var content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex);
|
|
var formattedValue = formatDate(new Date(date.year, date.month, date.day), getDateFormat());
|
|
var dayProps = mergeProps({
|
|
className: cx('day', {
|
|
date: date
|
|
}),
|
|
'aria-label': formattedValue,
|
|
'data-p-today': date.today,
|
|
'data-p-other-month': date.otherMonth,
|
|
'data-p-day': date.day,
|
|
'data-p-month': date.month,
|
|
'data-p-year': date.year
|
|
}, ptm('day', {
|
|
context: {
|
|
date: date,
|
|
today: date.today,
|
|
otherMonth: date.otherMonth
|
|
}
|
|
}));
|
|
return /*#__PURE__*/React__namespace.createElement("td", _extends({}, dayProps, {
|
|
key: date.day
|
|
}), content);
|
|
});
|
|
if (props.showWeek) {
|
|
var weekNumberProps = mergeProps({
|
|
className: cx('weekNumber')
|
|
}, ptm('weekNumber'));
|
|
var weekLabelContainerProps = mergeProps({
|
|
className: cx('weekLabelContainer'),
|
|
'data-p-disabled': props.showWeek
|
|
}, ptm('weekLabelContainer', {
|
|
context: {
|
|
disabled: props.showWeek
|
|
}
|
|
}));
|
|
var weekNumberCell = /*#__PURE__*/React__namespace.createElement("td", _extends({}, weekNumberProps, {
|
|
key: 'wn' + weekNumber
|
|
}), /*#__PURE__*/React__namespace.createElement("span", weekLabelContainerProps, weekNumber));
|
|
return [weekNumberCell].concat(_toConsumableArray(week));
|
|
}
|
|
return week;
|
|
};
|
|
var createDates = function createDates(monthMetaData, groupIndex) {
|
|
var tableBodyRowProps = mergeProps(ptm('tableBodyRowProps'));
|
|
return monthMetaData.dates.map(function (weekDates, index) {
|
|
return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, tableBodyRowProps, {
|
|
key: index
|
|
}), createWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
|
|
});
|
|
};
|
|
var createDateViewGrid = function createDateViewGrid(monthMetaData, weekDays, groupIndex) {
|
|
var dayNames = createDayNames(weekDays);
|
|
var dates = createDates(monthMetaData, groupIndex);
|
|
var containerProps = mergeProps({
|
|
className: cx('container')
|
|
}, ptm('container'));
|
|
var tableProps = mergeProps({
|
|
role: 'grid',
|
|
className: cx('table')
|
|
}, ptm('table'));
|
|
var tableHeaderProps = mergeProps(ptm('tableHeader'));
|
|
var tableHeaderRowProps = mergeProps(ptm('tableHeaderRow'));
|
|
var tableBodyProps = mergeProps(ptm('tableBody'));
|
|
return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("div", _extends({}, containerProps, {
|
|
key: utils.UniqueComponentId('calendar_container_')
|
|
}), /*#__PURE__*/React__namespace.createElement("table", tableProps, /*#__PURE__*/React__namespace.createElement("thead", tableHeaderProps, /*#__PURE__*/React__namespace.createElement("tr", tableHeaderRowProps, dayNames)), /*#__PURE__*/React__namespace.createElement("tbody", tableBodyProps, dates)));
|
|
};
|
|
var createMonth = function createMonth(monthMetaData, index) {
|
|
var weekDays = createWeekDaysMeta();
|
|
var backwardNavigator = createBackwardNavigator(index === 0);
|
|
var forwardNavigator = createForwardNavigator(props.numberOfMonths === 1 || index === props.numberOfMonths - 1);
|
|
var title = createTitle(monthMetaData, index);
|
|
var dateViewGrid = createDateViewGrid(monthMetaData, weekDays, index);
|
|
var header = props.headerTemplate ? props.headerTemplate() : null;
|
|
var monthKey = monthMetaData.month + '-' + monthMetaData.year;
|
|
var groupProps = mergeProps({
|
|
className: cx('group')
|
|
}, ptm('group'));
|
|
var headerProps = mergeProps({
|
|
className: cx('header')
|
|
}, ptm('header'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", _extends({}, groupProps, {
|
|
key: monthKey
|
|
}), /*#__PURE__*/React__namespace.createElement("div", _extends({}, headerProps, {
|
|
key: index
|
|
}), header, backwardNavigator, title, forwardNavigator), dateViewGrid);
|
|
};
|
|
var createMonths = function createMonths(monthsMetaData) {
|
|
var groups = monthsMetaData.map(createMonth);
|
|
var groupContainerProps = mergeProps({
|
|
className: cx('groupContainer')
|
|
}, ptm('groupContainer'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", groupContainerProps, groups);
|
|
};
|
|
var createDateView = function createDateView() {
|
|
var viewDate = getViewDate();
|
|
var monthsMetaData = createMonthsMeta(viewDate.getMonth(), viewDate.getFullYear());
|
|
var months = createMonths(monthsMetaData);
|
|
return months;
|
|
};
|
|
var monthPickerValues = function monthPickerValues() {
|
|
var monthPickerValues = [];
|
|
var monthNamesShort = PrimeReact.localeOption('monthNamesShort', props.locale);
|
|
for (var i = 0; i <= 11; i++) {
|
|
monthPickerValues.push(monthNamesShort[i]);
|
|
}
|
|
return monthPickerValues;
|
|
};
|
|
var yearPickerValues = function yearPickerValues() {
|
|
var yearPickerValues = [];
|
|
var base = currentYear - currentYear % 10;
|
|
for (var i = 0; i < 10; i++) {
|
|
yearPickerValues.push(base + i);
|
|
}
|
|
return yearPickerValues;
|
|
};
|
|
var createMonthYearView = function createMonthYearView() {
|
|
var backwardNavigator = createBackwardNavigator(true);
|
|
var forwardNavigator = createForwardNavigator(true);
|
|
var yearElement = createTitleYearElement(getViewDate().getFullYear());
|
|
var decade = createTitleDecadeElement();
|
|
var groupContainerProps = mergeProps({
|
|
className: cx('groupContainer')
|
|
}, ptm('groupContainer'));
|
|
var groupProps = mergeProps({
|
|
className: cx('group')
|
|
}, ptm('group'));
|
|
var headerProps = mergeProps({
|
|
className: cx('header')
|
|
}, ptm('header'));
|
|
var titleProps = mergeProps({
|
|
className: cx('title')
|
|
}, ptm('title'));
|
|
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", groupContainerProps, /*#__PURE__*/React__namespace.createElement("div", groupProps, /*#__PURE__*/React__namespace.createElement("div", headerProps, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", titleProps, yearElement, decade), forwardNavigator))));
|
|
};
|
|
var createDatePicker = function createDatePicker() {
|
|
if (!props.timeOnly) {
|
|
if (props.view === 'date') {
|
|
return createDateView();
|
|
}
|
|
return createMonthYearView();
|
|
}
|
|
return null;
|
|
};
|
|
var incrementIconProps = mergeProps(ptm('incrementIcon'));
|
|
var decrementIconProps = mergeProps(ptm('decrementIcon'));
|
|
var incrementIcon = utils.IconUtils.getJSXIcon(props.incrementIcon || /*#__PURE__*/React__namespace.createElement(chevronup.ChevronUpIcon, incrementIconProps), _objectSpread({}, incrementIconProps), {
|
|
props: props
|
|
});
|
|
var decrementIcon = utils.IconUtils.getJSXIcon(props.decrementIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, decrementIconProps), _objectSpread({}, decrementIconProps), {
|
|
props: props
|
|
});
|
|
var createHourPicker = function createHourPicker() {
|
|
var currentTime = getCurrentDateTime();
|
|
var minute = doStepMinute(currentTime.getMinutes());
|
|
var hour = currentTime.getHours();
|
|
|
|
// #3770 account for step minutes rolling to next hour
|
|
hour = minute > 59 ? hour + 1 : hour;
|
|
if (props.hourFormat === '12') {
|
|
if (hour === 0) {
|
|
hour = 12;
|
|
} else if (hour > 11 && hour !== 12) {
|
|
hour = hour - 12;
|
|
}
|
|
}
|
|
var hourProps = mergeProps(ptm('hour'));
|
|
var _localeOptions6 = PrimeReact.localeOptions(props.locale),
|
|
nextHour = _localeOptions6.nextHour,
|
|
prevHour = _localeOptions6.prevHour;
|
|
var hourDisplay = hour < 10 ? '0' + hour : hour;
|
|
var hourPickerProps = mergeProps({
|
|
className: cx('hourPicker')
|
|
}, ptm('hourPicker'));
|
|
var incrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('incrementButton'),
|
|
'aria-label': nextHour,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return onTimePickerElementMouseDown(e, 0, 1);
|
|
},
|
|
onMouseUp: onTimePickerElementMouseUp,
|
|
onMouseLeave: onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onPickerKeyDown(e, 0, 1);
|
|
},
|
|
onKeyUp: onPickerKeyUp
|
|
}, ptm('incrementButton'));
|
|
var decrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('decrementButton'),
|
|
'aria-label': prevHour,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return onTimePickerElementMouseDown(e, 0, -1);
|
|
},
|
|
onMouseUp: onTimePickerElementMouseUp,
|
|
onMouseLeave: onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onPickerKeyDown(e, 0, -1);
|
|
},
|
|
onKeyUp: onPickerKeyUp
|
|
}, ptm('decrementButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", hourPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", hourProps, hourDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
|
|
};
|
|
var createMinutePicker = function createMinutePicker() {
|
|
var currentTime = getCurrentDateTime();
|
|
var minute = doStepMinute(currentTime.getMinutes());
|
|
minute = minute > 59 ? minute - 60 : minute;
|
|
var minuteProps = mergeProps(ptm('minute'));
|
|
var _localeOptions7 = PrimeReact.localeOptions(props.locale),
|
|
nextMinute = _localeOptions7.nextMinute,
|
|
prevMinute = _localeOptions7.prevMinute;
|
|
var minuteDisplay = minute < 10 ? '0' + minute : minute;
|
|
var minutePickerProps = mergeProps({
|
|
className: cx('minutePicker')
|
|
}, ptm('minutePicker'));
|
|
var incrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('incrementButton'),
|
|
'aria-label': nextMinute,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return onTimePickerElementMouseDown(e, 1, 1);
|
|
},
|
|
onMouseUp: onTimePickerElementMouseUp,
|
|
onMouseLeave: onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onPickerKeyDown(e, 1, 1);
|
|
},
|
|
onKeyUp: onPickerKeyUp
|
|
}, ptm('incrementButton'));
|
|
var decrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('decrementButton'),
|
|
'aria-label': prevMinute,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return onTimePickerElementMouseDown(e, 1, -1);
|
|
},
|
|
onMouseUp: onTimePickerElementMouseUp,
|
|
onMouseLeave: onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onPickerKeyDown(e, 1, -1);
|
|
},
|
|
onKeyUp: onPickerKeyUp
|
|
}, ptm('decrementButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", minutePickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", minuteProps, minuteDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
|
|
};
|
|
var createSecondPicker = function createSecondPicker() {
|
|
if (props.showSeconds) {
|
|
var currentTime = getCurrentDateTime();
|
|
var _localeOptions8 = PrimeReact.localeOptions(props.locale),
|
|
nextSecond = _localeOptions8.nextSecond,
|
|
prevSecond = _localeOptions8.prevSecond;
|
|
var secondProps = mergeProps(ptm('second'));
|
|
var second = currentTime.getSeconds();
|
|
var secondDisplay = second < 10 ? '0' + second : second;
|
|
var secondPickerProps = mergeProps({
|
|
className: cx('secondPicker')
|
|
}, ptm('secondPicker'));
|
|
var incrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('incrementButton'),
|
|
'aria-label': nextSecond,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return onTimePickerElementMouseDown(e, 2, 1);
|
|
},
|
|
onMouseUp: onTimePickerElementMouseUp,
|
|
onMouseLeave: onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onPickerKeyDown(e, 2, 1);
|
|
},
|
|
onKeyUp: onPickerKeyUp
|
|
}, ptm('incrementButton'));
|
|
var decrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('decrementButton'),
|
|
'aria-label': prevSecond,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return onTimePickerElementMouseDown(e, 2, -1);
|
|
},
|
|
onMouseUp: onTimePickerElementMouseUp,
|
|
onMouseLeave: onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onPickerKeyDown(e, 2, -1);
|
|
},
|
|
onKeyUp: onPickerKeyUp
|
|
}, ptm('decrementButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", secondPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", secondProps, secondDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
|
|
}
|
|
return null;
|
|
};
|
|
var createMiliSecondPicker = function createMiliSecondPicker() {
|
|
if (props.showMillisec) {
|
|
var currentTime = getCurrentDateTime();
|
|
var _localeOptions9 = PrimeReact.localeOptions(props.locale),
|
|
nextMilliSecond = _localeOptions9.nextMilliSecond,
|
|
prevMilliSecond = _localeOptions9.prevMilliSecond;
|
|
var millisecondProps = mergeProps(ptm('millisecond'));
|
|
var millisecond = currentTime.getMilliseconds();
|
|
var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
|
|
var millisecondPickerProps = mergeProps({
|
|
className: cx('millisecondPicker')
|
|
}, ptm('millisecondPicker'));
|
|
var incrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('incrementButton'),
|
|
'aria-label': nextMilliSecond,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return onTimePickerElementMouseDown(e, 3, 1);
|
|
},
|
|
onMouseUp: onTimePickerElementMouseUp,
|
|
onMouseLeave: onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onPickerKeyDown(e, 3, 1);
|
|
},
|
|
onKeyUp: onPickerKeyUp
|
|
}, ptm('incrementButton'));
|
|
var decrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('decrementButton'),
|
|
'aria-label': prevMilliSecond,
|
|
onMouseDown: function onMouseDown(e) {
|
|
return onTimePickerElementMouseDown(e, 3, -1);
|
|
},
|
|
onMouseUp: onTimePickerElementMouseUp,
|
|
onMouseLeave: onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onPickerKeyDown(e, 3, -1);
|
|
},
|
|
onKeyUp: onPickerKeyUp
|
|
}, ptm('decrementButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", millisecondPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", millisecondProps, millisecondDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
|
|
}
|
|
return null;
|
|
};
|
|
var createAmPmPicker = function createAmPmPicker() {
|
|
if (props.hourFormat === '12') {
|
|
var currentTime = getCurrentDateTime();
|
|
var _localeOptions10 = PrimeReact.localeOptions(props.locale),
|
|
am = _localeOptions10.am,
|
|
pm = _localeOptions10.pm;
|
|
var hour = currentTime.getHours();
|
|
var display = hour > 11 ? 'PM' : 'AM';
|
|
var ampmProps = mergeProps(ptm('ampm'));
|
|
var ampmPickerProps = mergeProps({
|
|
className: cx('ampmPicker')
|
|
}, ptm('ampmPicker'));
|
|
var incrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('incrementButton'),
|
|
'aria-label': am,
|
|
onClick: function onClick(e) {
|
|
return toggleAmPm(e);
|
|
}
|
|
}, ptm('incrementButton'));
|
|
var decrementButtonProps = mergeProps({
|
|
type: 'button',
|
|
className: cx('decrementButton'),
|
|
'aria-label': pm,
|
|
onClick: function onClick(e) {
|
|
return toggleAmPm(e);
|
|
}
|
|
}, ptm('decrementButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", ampmPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", ampmProps, display), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
|
|
}
|
|
return null;
|
|
};
|
|
var createSeparator = function createSeparator(separator) {
|
|
var separatorContainerProps = mergeProps({
|
|
className: cx('separatorContainer')
|
|
}, ptm('separatorContainer'));
|
|
var separatorProps = mergeProps(ptm('separator'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", separatorContainerProps, /*#__PURE__*/React__namespace.createElement("span", separatorProps, separator));
|
|
};
|
|
var createTimePicker = function createTimePicker() {
|
|
if ((props.showTime || props.timeOnly) && currentView === 'date') {
|
|
var timePickerProps = mergeProps({
|
|
className: cx('timePicker')
|
|
}, ptm('timePicker'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", timePickerProps, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
|
|
}
|
|
return null;
|
|
};
|
|
var createInputElement = function createInputElement() {
|
|
if (!props.inline) {
|
|
return /*#__PURE__*/React__namespace.createElement(inputtext.InputText, {
|
|
ref: inputRef,
|
|
id: props.inputId,
|
|
name: props.name,
|
|
type: "text",
|
|
role: "combobox",
|
|
className: utils.classNames(props.inputClassName, cx('input', {
|
|
context: context
|
|
})),
|
|
style: props.inputStyle,
|
|
readOnly: props.readOnlyInput,
|
|
disabled: props.disabled,
|
|
required: props.required,
|
|
autoComplete: "off",
|
|
placeholder: props.placeholder,
|
|
tabIndex: props.tabIndex,
|
|
onInput: onUserInput,
|
|
onFocus: onInputFocus,
|
|
onBlur: onInputBlur,
|
|
onKeyDown: onInputKeyDown,
|
|
"aria-expanded": overlayVisibleState,
|
|
"aria-autocomplete": "none",
|
|
"aria-haspopup": "dialog",
|
|
"aria-controls": panelId,
|
|
"aria-labelledby": props.ariaLabelledBy,
|
|
"aria-label": props.ariaLabel,
|
|
inputMode: props.inputMode,
|
|
tooltip: props.tooltip,
|
|
tooltipOptions: props.tooltipOptions,
|
|
pt: ptm('input'),
|
|
unstyled: props.unstyled,
|
|
__parentMetadata: {
|
|
parent: metaData
|
|
}
|
|
});
|
|
}
|
|
return null;
|
|
};
|
|
var createButton = function createButton() {
|
|
if (props.showIcon) {
|
|
return /*#__PURE__*/React__namespace.createElement(button.Button, {
|
|
type: "button",
|
|
icon: props.icon || /*#__PURE__*/React__namespace.createElement(calendar.CalendarIcon, null),
|
|
onClick: onButtonClick,
|
|
tabIndex: "-1",
|
|
disabled: props.disabled,
|
|
"aria-haspopup": "dialog",
|
|
"aria-label": PrimeReact.localeOption('chooseDate', props.locale),
|
|
"aria-expanded": overlayVisibleState,
|
|
"aria-controls": panelId,
|
|
className: cx('dropdownButton'),
|
|
pt: ptm('dropdownButton'),
|
|
__parentMetadata: {
|
|
parent: metaData
|
|
}
|
|
});
|
|
}
|
|
return null;
|
|
};
|
|
var createContent = function createContent() {
|
|
var input = createInputElement();
|
|
var button = createButton();
|
|
if (props.iconPos === 'left') {
|
|
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, button, input);
|
|
}
|
|
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, input, button);
|
|
};
|
|
var isPastMaxDateWithBuffer = function isPastMaxDateWithBuffer() {
|
|
var bufferInSeconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
|
|
var now = new Date();
|
|
var maxDate = props.maxDate;
|
|
return maxDate < now && Math.abs((now.getTime() - maxDate.getTime()) / 1000) > bufferInSeconds;
|
|
};
|
|
var createButtonBar = function createButtonBar() {
|
|
if (props.showButtonBar) {
|
|
var _localeOptions11 = PrimeReact.localeOptions(props.locale),
|
|
today = _localeOptions11.today,
|
|
clear = _localeOptions11.clear,
|
|
now = _localeOptions11.now;
|
|
var nowDate = new Date();
|
|
var isHidden = props.minDate && props.minDate > nowDate || props.maxDate && isPastMaxDateWithBuffer();
|
|
var buttonbarProps = mergeProps({
|
|
className: cx('buttonbar')
|
|
}, ptm('buttonbar'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", buttonbarProps, /*#__PURE__*/React__namespace.createElement(button.Button, {
|
|
type: "button",
|
|
label: props.showTime ? now : today,
|
|
onClick: onTodayButtonClick,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onContainerButtonKeydown(e);
|
|
},
|
|
className: utils.classNames(props.todayButtonClassName, cx('todayButton')),
|
|
pt: ptm('todayButton'),
|
|
style: isHidden ? {
|
|
visibility: 'hidden'
|
|
} : undefined
|
|
}), /*#__PURE__*/React__namespace.createElement(button.Button, {
|
|
type: "button",
|
|
label: clear,
|
|
onClick: onClearButtonClick,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onContainerButtonKeydown(e);
|
|
},
|
|
className: utils.classNames(props.clearButtonClassName, cx('clearButton')),
|
|
pt: ptm('clearButton')
|
|
}));
|
|
}
|
|
return null;
|
|
};
|
|
var createFooter = function createFooter() {
|
|
if (props.footerTemplate) {
|
|
var _content3 = props.footerTemplate();
|
|
var footerProps = mergeProps({
|
|
className: cx('footer')
|
|
}, ptm('footer'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", footerProps, _content3);
|
|
}
|
|
return null;
|
|
};
|
|
var createMonthPicker = function createMonthPicker() {
|
|
if (currentView === 'month') {
|
|
var monthPickerProps = mergeProps({
|
|
className: cx('monthPicker')
|
|
}, ptm('monthPicker'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", monthPickerProps, monthPickerValues().map(function (m, i) {
|
|
var selected = isMonthSelected(i);
|
|
var monthProps = mergeProps({
|
|
className: cx('month', {
|
|
isMonthSelected: isMonthSelected,
|
|
isMonthYearDisabled: isMonthYearDisabled,
|
|
i: i,
|
|
currentYear: currentYear
|
|
}),
|
|
onClick: function onClick(event) {
|
|
return onMonthSelect(event, i);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return onMonthCellKeydown(event, i);
|
|
},
|
|
'data-p-disabled': isMonthYearDisabled(i, currentYear),
|
|
'data-p-highlight': selected
|
|
}, ptm('month', {
|
|
context: {
|
|
month: m,
|
|
monthIndex: i,
|
|
selected: selected,
|
|
disabled: isMonthYearDisabled(i, currentYear)
|
|
}
|
|
}));
|
|
return /*#__PURE__*/React__namespace.createElement("span", _extends({}, monthProps, {
|
|
key: "month".concat(i + 1)
|
|
}), m, selected && /*#__PURE__*/React__namespace.createElement("div", {
|
|
"aria-live": "polite",
|
|
className: "p-hidden-accessible",
|
|
"data-p-hidden-accessible": true,
|
|
pt: ptm('hiddenMonth')
|
|
}, m));
|
|
}));
|
|
}
|
|
return null;
|
|
};
|
|
var createYearPicker = function createYearPicker() {
|
|
if (currentView === 'year') {
|
|
var yearPickerProps = mergeProps({
|
|
className: cx('yearPicker')
|
|
}, ptm('yearPicker'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", yearPickerProps, yearPickerValues().map(function (y, i) {
|
|
var selected = isYearSelected(y);
|
|
var yearProps = mergeProps({
|
|
className: cx('year', {
|
|
isYearSelected: isYearSelected,
|
|
isMonthYearDisabled: isMonthYearDisabled,
|
|
y: y
|
|
}),
|
|
onClick: function onClick(event) {
|
|
return onYearSelect(event, y);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return onYearCellKeydown(event, y);
|
|
},
|
|
'data-p-highlight': isYearSelected(y),
|
|
'data-p-disabled': isMonthYearDisabled(-1, y)
|
|
}, ptm('year', {
|
|
context: {
|
|
year: y,
|
|
yearIndex: i,
|
|
selected: selected,
|
|
disabled: isMonthYearDisabled(-1, y)
|
|
}
|
|
}));
|
|
return /*#__PURE__*/React__namespace.createElement("span", _extends({}, yearProps, {
|
|
key: "year".concat(i + 1)
|
|
}), y, selected && /*#__PURE__*/React__namespace.createElement("div", {
|
|
"aria-live": "polite",
|
|
className: "p-hidden-accessible",
|
|
"data-p-hidden-accessible": true,
|
|
pt: ptm('hiddenYear')
|
|
}, y));
|
|
}));
|
|
}
|
|
return null;
|
|
};
|
|
var panelClassName = utils.classNames('p-datepicker p-component', props.panelClassName, {
|
|
'p-datepicker-inline': props.inline,
|
|
'p-disabled': props.disabled,
|
|
'p-datepicker-timeonly': props.timeOnly,
|
|
'p-datepicker-multiple-month': props.numberOfMonths > 1,
|
|
'p-datepicker-monthpicker': currentView === 'month',
|
|
'p-datepicker-touch-ui': props.touchUI,
|
|
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
|
|
'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
|
|
});
|
|
var content = createContent();
|
|
var datePicker = createDatePicker();
|
|
var timePicker = createTimePicker();
|
|
var buttonBar = createButtonBar();
|
|
var footer = createFooter();
|
|
var monthPicker = createMonthPicker();
|
|
var yearPicker = createYearPicker();
|
|
var isFilled = utils.DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== '';
|
|
var rootProps = mergeProps({
|
|
id: props.id,
|
|
className: utils.classNames(props.className, cx('root', {
|
|
focusedState: focusedState,
|
|
isFilled: isFilled,
|
|
panelVisible: visible
|
|
})),
|
|
style: props.style
|
|
}, CalendarBase.getOtherProps(props), ptm('root'));
|
|
return /*#__PURE__*/React__namespace.createElement("span", _extends({
|
|
ref: elementRef
|
|
}, rootProps), content, /*#__PURE__*/React__namespace.createElement(CalendarPanel, {
|
|
hostName: "Calendar",
|
|
id: panelId,
|
|
locale: props.locale,
|
|
ref: overlayRef,
|
|
className: panelClassName,
|
|
style: props.panelStyle,
|
|
appendTo: props.appendTo,
|
|
inline: props.inline,
|
|
onClick: onPanelClick,
|
|
onMouseUp: onPanelMouseUp,
|
|
"in": visible,
|
|
onEnter: onOverlayEnter,
|
|
onEntered: onOverlayEntered,
|
|
onExit: onOverlayExit,
|
|
onExited: onOverlayExited,
|
|
transitionOptions: props.transitionOptions,
|
|
ptm: ptm,
|
|
cx: cx
|
|
}, datePicker, timePicker, monthPicker, yearPicker, buttonBar, footer));
|
|
}));
|
|
Calendar.displayName = 'Calendar';
|
|
|
|
exports.Calendar = Calendar;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
return exports;
|
|
|
|
})({}, React, primereact.api, primereact.button, primereact.componentbase, primereact.hooks, primereact.icons.calendar, primereact.icons.chevrondown, primereact.icons.chevronleft, primereact.icons.chevronright, primereact.icons.chevronup, primereact.inputtext, primereact.overlayservice, primereact.ripple, primereact.utils, primereact.csstransition, primereact.portal);
|