pick-datetime-react
Version:
Datetime picker for React
464 lines (432 loc) • 28.3 kB
JavaScript
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$2 = ".datepicker {\n position: relative;\n}\n.datepicker .calendar {\n position: absolute;\n top: calc(100% + 10px);\n display: flex;\n flex-direction: column;\n max-width: 370px;\n min-width: 280px;\n width: 100%;\n padding: 16px;\n border-radius: 10px;\n background-color: #ffffff;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n z-index: 1;\n}\n.datepicker .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n.datepicker .calendar-header__title {\n font-weight: 600;\n margin: 0;\n}\n.datepicker .calendar-header__navigate {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.datepicker .calendar-header__navigate-btn {\n width: 32px;\n height: 32px;\n padding: 0;\n line-height: 32px;\n border: none;\n border-radius: 10px;\n background-color: rgba(24, 144, 255, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n outline: none;\n user-select: none;\n border: none;\n transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.datepicker .calendar-header__navigate-btn svg {\n fill: #1890ff;\n}\n.datepicker .calendar-header__navigate-btn + .calendar-header__navigate-btn {\n margin-left: 8px;\n}\n.datepicker .calendar-header__navigate-btn:hover,\n.datepicker .calendar-header__navigate-btn:focus {\n background-color: rgba(24, 144, 255, 0.2);\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n}\n.datepicker .calendar-header__navigate-btn:disabled {\n cursor: default;\n opacity: 0.5;\n}\n.datepicker .calendar-header__navigate-btn:disabled:hover {\n background-color: rgba(24, 144, 255, 0.1);\n box-shadow: none;\n}\n.datepicker .calendar-body {\n width: 100%;\n display: block;\n}\n.datepicker .calendar-body__table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n font-size: 14px;\n color: #182c2b;\n}\n.datepicker .calendar-body__table thead th {\n color: #1890ff;\n}\n.datepicker .calendar-body__table thead th.weekend {\n color: #dc3545;\n}\n.datepicker .calendar-body__table th,\n.datepicker .calendar-body__table td {\n width: 14.28%;\n text-align: center;\n font-weight: 400;\n padding: 0;\n}\n.datepicker .calendar-body__table td {\n height: 36px;\n}\n.datepicker .calendar-body__table td > button {\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n margin: 2px;\n padding: 0;\n color: #182c2b;\n font-weight: 400;\n background-color: #ffffff;\n border: 1px solid #ffffff;\n border-radius: 10px;\n display: inline-block;\n cursor: pointer;\n text-align: center;\n outline: none;\n user-select: none;\n transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.datepicker .calendar-body__table td > button.today {\n border-color: #1890ff;\n}\n.datepicker .calendar-body__table td > button.today.weekend {\n border-color: #dc3545;\n}\n.datepicker .calendar-body__table td > button.weekend {\n color: #dc3545;\n}\n.datepicker .calendar-body__table td > button.selected,\n.datepicker .calendar-body__table td > button:hover {\n color: #ffffff;\n border-color: rgba(24, 144, 255, 0.85);\n background-color: rgba(24, 144, 255, 0.85);\n}\n.datepicker .calendar-body__table td > button.selected.weekend,\n.datepicker .calendar-body__table td > button:hover.weekend {\n border-color: rgba(220, 53, 69, 0.85);\n background-color: rgba(220, 53, 69, 0.85);\n}\n.datepicker .calendar-body__table td > button:disabled,\n.datepicker .calendar-body__table td > button:disabled:hover {\n cursor: default;\n color: rgba(24, 44, 43, 0.5);\n background-color: #ffffff;\n border-color: transparent;\n}\n";
styleInject(css_248z$2);
var css_248z$1 = ".form-group {\n display: block;\n width: 100%;\n margin-bottom: 16px;\n}\n.form-group__label {\n margin-bottom: 4px;\n display: inline-block;\n}\n.form-group__label.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.form-group__input {\n display: block;\n width: 100%;\n padding: 11px 16px;\n background-color: #f4f7fa;\n border: 1px solid #f4f7fa;\n appearance: none;\n border-radius: 10px;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.form-group__input.danger,\n.form-group__input.danger:focus {\n border-color: #dc3545;\n box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);\n}\n.form-group__input.success,\n.form-group__input.success:focus {\n border-color: #28a745;\n box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);\n}\n.form-group__input:placeholder-shown {\n text-overflow: ellipsis;\n color: #707070;\n}\n.form-group__input:focus {\n outline: 0;\n background-color: rgba(24, 144, 255, 0.08);\n border-color: rgba(24, 144, 255, 0.5);\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.25);\n}\n.form-group__message {\n margin: 0;\n}\n.form-group__message.danger {\n color: #dc3545;\n}\n.form-group__message.success {\n color: #28a745;\n}\n";
styleInject(css_248z$1);
var useEventListener = function (eventName, // string to allow custom event
handler, element) {
// Create a ref that stores handler
var savedHandler = React.useRef();
React.useEffect(function () {
// Define the listening target
var targetElement = (element === null || element === void 0 ? void 0 : element.current) || window;
if (!(targetElement && targetElement.addEventListener)) {
return;
}
// Update saved handler if necessary
if (savedHandler.current !== handler) {
savedHandler.current = handler;
}
// Create event listener that calls handler function stored in ref
var eventListener = function (event) {
// eslint-disable-next-line no-extra-boolean-cast
if (!!(savedHandler === null || savedHandler === void 0 ? void 0 : savedHandler.current)) {
savedHandler.current(event);
}
};
targetElement.addEventListener(eventName, eventListener);
// Remove event listener on cleanup
return function () {
targetElement.removeEventListener(eventName, eventListener);
};
}, [eventName, element, handler]);
};
var useOnClickOutside = function (ref, handler) {
useEventListener('mousedown', function (event) {
var el = ref === null || ref === void 0 ? void 0 : ref.current;
// Do nothing if clicking ref's element or descendent elements
if (!el || el.contains(event.target)) {
return;
}
// Explicit type for "mousedown" event.
handler(event);
});
};
var daysOfMonth = function (month, year) {
var firstDay = new Date(year, month, 1);
var lastDay = new Date(year, month + 1, 0);
var days = [];
var day = firstDay.getDay();
var i = 0;
while (i < day) {
days.push(null);
i++;
}
while (firstDay <= lastDay) {
days.push(new Date(firstDay));
firstDay.setDate(firstDay.getDate() + 1);
}
return days;
};
var weeksOfMonth = function (month, year) {
var days = daysOfMonth(month, year);
var weeks = [];
var week = [];
days.forEach(function (day, index) {
if (index % 7 === 0 && index !== 0) {
weeks.push(week);
week = [];
}
week.push(day);
});
weeks.push(week);
return weeks;
};
var getMonth = function (date) {
return date.getMonth();
};
var getDay = function (date) {
return date.getDate();
};
var getYear = function (date) {
return date.getFullYear();
};
var getWeekDayName = function (date) {
return new Date(date).toLocaleDateString('en-US', { weekday: 'short' });
};
var getMonthName = function (date) {
return new Date(date).toLocaleDateString('en-US', { month: 'long' });
};
var dateIsEqual = function (date1, date2) {
return (date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear());
};
var dateIsLessThan = function (date1, date2) {
return (date1.getDate() < date2.getDate() ||
date1.getMonth() < date2.getMonth() ||
date1.getFullYear() < date2.getFullYear());
};
var checkMonthHasDay = function (month, year, day) {
var monthDays = daysOfMonth(month, year);
var date = monthDays[monthDays.length - 1];
monthDays.forEach(function (monthDay) {
if (monthDay && getDay(monthDay) === day) {
date = monthDay;
}
});
return date;
};
/* eslint-disable @typescript-eslint/no-empty-function */
var defaultValue = {
today: new Date(),
minDate: undefined,
maxDate: undefined,
weekEnds: undefined,
selectedDate: new Date(),
isCalendarOpen: false,
setIsCalendarOpen: function () { },
handleDateChange: function () { },
handleNextMonth: function () { },
handlePrevMonth: function () { },
};
var DateContext = React.createContext(defaultValue);
var DateProvider = function (props) {
var value = props.value, minDate = props.minDate, maxDate = props.maxDate, weekEnds = props.weekEnds, children = props.children;
var getInitialDate = function () {
var date = value || new Date();
if (minDate && dateIsLessThan(date, minDate)) {
return new Date(minDate);
}
return date;
};
var _a = React.useState(getInitialDate()), selectedDate = _a[0], setSelectedDate = _a[1];
var _b = React.useState(false), isCalendarOpen = _b[0], setIsCalendarOpen = _b[1];
var handleDateChange = function (date) {
setSelectedDate(date);
setIsCalendarOpen(false);
};
var getNewDate = function (date) {
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var newDate = checkMonthHasDay(month + 1, year, day);
if (maxDate && newDate.getMonth() === maxDate.getMonth() && newDate.getFullYear() === maxDate.getFullYear()) {
if (newDate.getDate() > maxDate.getDate()) {
return maxDate.getDate();
}
}
return newDate.getDate();
};
var handleNextMonth = function () {
setSelectedDate(new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, getNewDate(selectedDate)));
};
var handlePrevMonth = function () {
setSelectedDate(new Date(selectedDate.getFullYear(), selectedDate.getMonth() - 1, getNewDate(selectedDate)));
};
return (React__default["default"].createElement(DateContext.Provider, { value: {
today: new Date(),
minDate: minDate,
maxDate: maxDate,
weekEnds: weekEnds,
selectedDate: selectedDate,
isCalendarOpen: isCalendarOpen,
setIsCalendarOpen: setIsCalendarOpen,
handleDateChange: handleDateChange,
handleNextMonth: handleNextMonth,
handlePrevMonth: handlePrevMonth,
} }, children));
};
var useDateContext = function () { return React.useContext(DateContext); };
var Body = function () {
var _a;
var _b = useDateContext(), today = _b.today, selectedDate = _b.selectedDate, minDate = _b.minDate, maxDate = _b.maxDate, weekEnds = _b.weekEnds, handleDateChange = _b.handleDateChange;
var month = getMonth(selectedDate);
var year = getYear(selectedDate);
var isDisabledFrom = function (date) {
if (minDate && getYear(minDate) === getYear(date) && getMonth(minDate) === getMonth(date)) {
return getDay(minDate) > getDay(date);
}
return false;
};
var isDisabledTo = function (date) {
if (maxDate && getYear(maxDate) === getYear(date) && getMonth(maxDate) === getMonth(date)) {
return getDay(maxDate) < getDay(date);
}
return false;
};
return (React__default["default"].createElement("div", { className: "calendar-body" },
React__default["default"].createElement("table", { className: "calendar-body__table" },
React__default["default"].createElement("thead", null,
React__default["default"].createElement("tr", null, (_a = weeksOfMonth(month, year)) === null || _a === void 0 ? void 0 : _a[2].map(function (day, i) {
return day && (React__default["default"].createElement("th", { key: i, className: (weekEnds === null || weekEnds === void 0 ? void 0 : weekEnds.includes(getWeekDayName(day))) ? 'weekend' : '' }, getWeekDayName(day)));
}))),
React__default["default"].createElement("tbody", null, weeksOfMonth(month, year).map(function (week, i) { return (React__default["default"].createElement("tr", { key: i }, week.map(function (day, j) { return (React__default["default"].createElement("td", { key: j }, day && (React__default["default"].createElement("button", { className: "".concat(dateIsEqual(day, today) ? 'today' : '', " ").concat(dateIsEqual(day, selectedDate) ? 'selected' : '', " ").concat((weekEnds === null || weekEnds === void 0 ? void 0 : weekEnds.includes(getWeekDayName(day))) ? 'weekend' : ''),
// size="sm"
onClick: function () { return handleDateChange(day); }, disabled: isDisabledFrom(day) || isDisabledTo(day) }, getDay(day))))); }))); })))));
};
var IconArrowLeft = 'M10.665 24L29.3325 42.6675L24 48L0 24L24 0L29.3325 5.3325L10.665 24Z';
var IconArrowRight = 'M18.6675 24L0 5.3325L5.33249 0L29.3325 24L5.33249 48L0 42.6675L18.6675 24Z';
var SolidSVG = function (props) {
var path = props.path, _a = props.width, width = _a === void 0 ? 24 : _a, _b = props.height, height = _b === void 0 ? 24 : _b, _c = props.viewBox, viewBox = _c === void 0 ? '0 0 48 48' : _c, rest = __rest(props, ["path", "width", "height", "viewBox"]);
var svgProps = __assign({ width: width, height: height, viewBox: viewBox }, rest);
return (React__default["default"].createElement("svg", __assign({}, svgProps, { xmlns: "http://www.w3.org/2000/svg" }),
React__default["default"].createElement("path", { d: path })));
};
var Header = function () {
var _a = useDateContext(), selectedDate = _a.selectedDate, minDate = _a.minDate, maxDate = _a.maxDate, handlePrevMonth = _a.handlePrevMonth, handleNextMonth = _a.handleNextMonth;
var isPrevNavigate = function () {
if (minDate && getYear(minDate) === getYear(selectedDate)) {
return getMonth(minDate) < getMonth(selectedDate);
}
return true;
};
var isNextNavigate = function () {
if (maxDate && getYear(maxDate) === getYear(selectedDate)) {
return getMonth(maxDate) > getMonth(selectedDate);
}
return true;
};
return (React__default["default"].createElement("div", { className: "calendar-header" },
React__default["default"].createElement("p", { className: "calendar-header__title" },
getMonthName(selectedDate),
" ",
getYear(selectedDate)),
React__default["default"].createElement("div", { className: "calendar-header__navigate" },
React__default["default"].createElement("button", { className: "calendar-header__navigate-btn", onClick: handlePrevMonth, disabled: !isPrevNavigate() },
React__default["default"].createElement(SolidSVG, { width: 12, height: 12, path: IconArrowLeft })),
React__default["default"].createElement("button", { className: "calendar-header__navigate-btn", onClick: handleNextMonth, disabled: !isNextNavigate() },
React__default["default"].createElement(SolidSVG, { width: 12, height: 12, path: IconArrowRight })))));
};
var Calendar = function () { return (React__default["default"].createElement("div", { className: "calendar" },
React__default["default"].createElement(Header, null),
React__default["default"].createElement(Body, null))); };
var PickerWithInput = function (props) {
var label = props.label, srOnly = props.srOnly, message = props.message, onChange = props.onChange, rest = __rest(props, ["label", "srOnly", "message", "onChange"]);
var _a = useDateContext(), selectedDate = _a.selectedDate, isCalendarOpen = _a.isCalendarOpen, setIsCalendarOpen = _a.setIsCalendarOpen;
var ref = React.useRef(null);
useOnClickOutside(ref, function () { return setIsCalendarOpen(false); });
React.useEffect(function () {
if (selectedDate && onChange) {
onChange(selectedDate);
}
}, [onChange, selectedDate]);
return (React__default["default"].createElement("div", { ref: ref, className: "datepicker form-group" },
React__default["default"].createElement("label", { className: "form-group__label".concat(srOnly ? ' sr-only' : ''), htmlFor: rest.name || '' }, label),
React__default["default"].createElement("input", __assign({ readOnly: true, type: "text", className: "form-group__input ".concat((message === null || message === void 0 ? void 0 : message.value) ? (message === null || message === void 0 ? void 0 : message.variant) || 'danger' : ''), value: selectedDate.toDateString(), onFocus: function () { return setIsCalendarOpen(true); } }, rest)),
(message === null || message === void 0 ? void 0 : message.value) && React__default["default"].createElement("p", { className: "form-group__message ".concat((message === null || message === void 0 ? void 0 : message.variant) || 'danger') }, message === null || message === void 0 ? void 0 : message.value),
isCalendarOpen && React__default["default"].createElement(Calendar, null)));
};
var Datepicker = function (props) {
var value = props.value, minDate = props.minDate, maxDate = props.maxDate, weekEnds = props.weekEnds, rest = __rest(props, ["value", "minDate", "maxDate", "weekEnds"]);
var dateProvider = { value: value, minDate: minDate, maxDate: maxDate, weekEnds: weekEnds };
return (React__default["default"].createElement(DateProvider, __assign({}, dateProvider),
React__default["default"].createElement(PickerWithInput, __assign({}, rest))));
};
var formatMinutes = function (minutes) {
return minutes < 10 ? "0".concat(minutes) : minutes;
};
var convertTo24Hours = function (time) {
var amPm = time.split(' ')[1].toUpperCase();
var timeWithoutAmPm = time.replace(/[AP]M/gi, '');
var hours = Number(timeWithoutAmPm.split(':')[0]);
var minutes = Number(timeWithoutAmPm.split(':')[1]);
if (amPm === 'PM' && hours < 12) {
return "".concat(hours + 12, ":").concat(formatMinutes(minutes));
}
return "".concat(hours === 12 ? 0 : hours, ":").concat(formatMinutes(minutes));
};
var convertTo12Hours = function (time) {
var hours = Number(time.split(':')[0]);
var minutes = Number(time.split(':')[1]);
var suffix = hours >= 12 ? 'PM' : 'AM';
var newHours = hours > 12 ? hours - 12 : hours;
return "".concat(newHours === 0 ? 12 : newHours, ":").concat(formatMinutes(minutes), " ").concat(suffix);
};
var getSlots = function (gap) {
if (gap === void 0) { gap = 15; }
var slots = [];
for (var i = 0; i < 24; i++) {
for (var j = 0; j < 60; j += gap) {
var time = convertTo12Hours("".concat(i, ":").concat(j));
slots.push(time);
}
}
return slots;
};
var findNearestSlot = function (hours, minutes, gap) {
if (gap === void 0) { gap = 15; }
for (var i = 0; i < 60; i += gap) {
if (i > minutes) {
return convertTo12Hours("".concat(hours, ":").concat(i));
}
}
return convertTo12Hours("".concat(hours + 1, ":00"));
};
var timeIsEqual = function (time1, time2) {
return time1.replace(/ /, '').toLowerCase() === time2.replace(/ /, '').toLowerCase();
};
var sortSlots = function (slotStartFrom, slotGap) {
if (slotGap === void 0) { slotGap = 15; }
var timeSlots = getSlots(slotGap);
var startIndex = timeSlots.indexOf(slotStartFrom);
return timeSlots.slice(startIndex).concat(timeSlots.slice(0, startIndex));
};
var css_248z = ".timepicker {\n position: relative;\n}\n.timepicker-slots {\n position: absolute;\n top: calc(100% + 10px);\n left: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 188px;\n max-height: 200px;\n overflow-y: scroll;\n border-radius: 10px;\n background-color: #ffffff;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n z-index: 1;\n}\n.timepicker-slots.right-align {\n left: auto;\n right: 0;\n}\n.timepicker-slots__btn {\n width: 100%;\n padding: 0 15px;\n line-height: 40px;\n text-align: left;\n color: #182c2b;\n border-radius: 0;\n border-color: transparent;\n background-color: transparent;\n display: inline-block;\n cursor: pointer;\n outline: none;\n user-select: none;\n border: none;\n transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.timepicker-slots__btn.slected {\n color: #ffffff;\n background-color: #1890ff;\n}\n.timepicker-slots__btn:hover {\n border-color: transparent;\n background-color: rgba(24, 144, 255, 0.1);\n}\n.timepicker-slots__btn:hover.slected {\n background-color: #1890ff;\n}\n";
styleInject(css_248z);
var TimeSlots = function (props) {
var selectedTime = props.selectedTime, slotGap = props.slotGap, startFrom = props.startFrom, rightAlign = props.rightAlign, onChange = props.onChange;
var timeSlots = startFrom ? sortSlots(startFrom, slotGap) : getSlots(slotGap);
var containerRef = React.useRef(null);
React.useEffect(function () {
if (containerRef.current) {
var container_1 = containerRef.current;
container_1.childNodes.forEach(function (node) {
var element = node;
if (timeIsEqual(element.innerText, selectedTime)) {
var scrollTo_1 = element.offsetTop - container_1.offsetTop;
container_1.scrollTop = scrollTo_1;
}
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [containerRef]);
return (React__default["default"].createElement("div", { ref: containerRef, className: "timepicker-slots".concat(rightAlign ? ' right-align' : '') }, timeSlots.map(function (time, i) { return (React__default["default"].createElement("button", { key: i, className: "timepicker-slots__btn".concat(timeIsEqual(time, selectedTime) ? ' slected' : ''), onClick: function () { return onChange(time); } }, time)); })));
};
var Timepicker = function (props) {
var srOnly = props.srOnly, label = props.label, message = props.message, value = props.value, format = props.format, slotGap = props.slotGap, rightAlign = props.rightAlign, startFrom = props.startFrom, onChange = props.onChange, rest = __rest(props, ["srOnly", "label", "message", "value", "format", "slotGap", "rightAlign", "startFrom", "onChange"]);
var getDefaultValue = function () {
if (value) {
if (format === '12') {
return convertTo12Hours(value);
}
return value;
}
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
return findNearestSlot(hours, minutes, slotGap);
};
var _a = React.useState(getDefaultValue()), selectedTime = _a[0], setSelectedTime = _a[1];
var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
var ref = React.useRef(null);
useOnClickOutside(ref, function () { return setIsOpen(false); });
var getStartFrom = function () {
if (startFrom) {
var converted = format === '24' ? startFrom : convertTo24Hours(startFrom);
var convertedArr = converted.split(':');
var hours = parseInt(convertedArr[0], 10);
var minutes = parseInt(convertedArr[1], 10);
return findNearestSlot(hours, minutes, slotGap);
}
return undefined;
};
var handleTimeChange = function (time) {
setSelectedTime(time);
setIsOpen(false);
onChange && onChange(format === '24' ? convertTo24Hours(time) : time);
};
var slotProps = {
selectedTime: selectedTime,
slotGap: slotGap,
rightAlign: rightAlign,
startFrom: getStartFrom(),
onChange: handleTimeChange,
};
return (React__default["default"].createElement("div", { ref: ref, className: "timepicker form-group" },
React__default["default"].createElement("label", { className: "form-group__label".concat(srOnly ? ' sr-only' : ''), htmlFor: rest.name || '' }, label),
React__default["default"].createElement("input", __assign({ readOnly: true, type: "text", className: "form-group__input ".concat((message === null || message === void 0 ? void 0 : message.value) ? (message === null || message === void 0 ? void 0 : message.variant) || 'danger' : ''), value: selectedTime, onFocus: function () { return setIsOpen(true); } }, rest)),
(message === null || message === void 0 ? void 0 : message.value) && React__default["default"].createElement("p", { className: "form-group__message ".concat((message === null || message === void 0 ? void 0 : message.variant) || 'danger') }, message === null || message === void 0 ? void 0 : message.value),
isOpen && React__default["default"].createElement(TimeSlots, __assign({}, slotProps))));
};
exports.Datepicker = Datepicker;
exports.Timepicker = Timepicker;
//# sourceMappingURL=index.js.map