primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
1,138 lines (1,116 loc) • 166 kB
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
}, 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: 11,
year: newYear
});
setCurrentMonth(11);
} else {
newViewDate.setMonth(newViewDate.getMonth() - 1);
props.onMonthChange && props.onMonthChange({
month: currentMonth - 1,
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: 0,
year: newYear
});
setCurrentMonth(0);
} else {
newViewDate.setMonth(newViewDate.getMonth() + 1);
props.onMonthChange && props.onMonthChange({
month: currentMonth + 1,
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: today.getSeconds(),
milliseconds: today.getMilliseconds()
};
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 : newMillisec