@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
223 lines (184 loc) • 9.98 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _hooks = require("@datepicker-react/hooks");
var _Datepicker = require("./Datepicker.utils");
var _Datepicker2 = _interopRequireDefault(require("./Datepicker.Context"));
var _Datepicker3 = require("./Datepicker.css");
var _Datepicker4 = _interopRequireDefault(require("./Datepicker.PeriodCalendar"));
var _Datepicker5 = _interopRequireDefault(require("./Datepicker.DailyCalendar"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function noop() {}
function Datepicker(_ref) {
var _ref$allowFutureDateP = _ref.allowFutureDatePick,
allowFutureDatePick = _ref$allowFutureDateP === void 0 ? true : _ref$allowFutureDateP,
_ref$enableRangeSelec = _ref.enableRangeSelection,
enableRangeSelection = _ref$enableRangeSelec === void 0 ? false : _ref$enableRangeSelec,
_ref$endDate = _ref.endDate,
endDate = _ref$endDate === void 0 ? null : _ref$endDate,
_ref$firstDayOfWeek = _ref.firstDayOfWeek,
firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 1 : _ref$firstDayOfWeek,
_ref$minBookingDays = _ref.minBookingDays,
minBookingDays = _ref$minBookingDays === void 0 ? 1 : _ref$minBookingDays,
_ref$numberOfMonths = _ref.numberOfMonths,
numberOfMonths = _ref$numberOfMonths === void 0 ? 1 : _ref$numberOfMonths,
_ref$onDateChange = _ref.onDateChange,
onDateChange = _ref$onDateChange === void 0 ? noop : _ref$onDateChange,
_ref$innerRef = _ref.innerRef,
innerRef = _ref$innerRef === void 0 ? noop : _ref$innerRef,
_ref$startDate = _ref.startDate,
startDate = _ref$startDate === void 0 ? null : _ref$startDate;
var datePickerRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)({
startDate: (0, _Datepicker.getJSDateFromString)(startDate),
endDate: (0, _Datepicker.getJSDateFromString)(endDate) || (0, _Datepicker.getJSDateFromString)(startDate),
focusedInput: _hooks.START_DATE
}),
dates = _useState[0],
setDates = _useState[1];
var _useState2 = (0, _react.useState)({}),
prevDates = _useState2[0],
setPrevDates = _useState2[1];
var _useState3 = (0, _react.useState)(false),
deepNavVisible = _useState3[0],
setDeepNavVisibility = _useState3[1];
(0, _react.useEffect)(function () {
if (datePickerRef && datePickerRef.current) {
innerRef(datePickerRef.current);
} // No need to add innerRef prop to the deps list
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [datePickerRef]);
var _useDatepicker = (0, _hooks.useDatepicker)({
startDate: dates.startDate,
endDate: dates.endDate,
focusedInput: dates.focusedInput,
onDatesChange: handleDateChange,
numberOfMonths: numberOfMonths,
minBookingDays: minBookingDays,
exactMinBookingDays: !enableRangeSelection,
maxBookingDate: !allowFutureDatePick ? new Date() : undefined
}),
activeMonths = _useDatepicker.activeMonths,
isDateSelected = _useDatepicker.isDateSelected,
isDateHovered = _useDatepicker.isDateHovered,
isFirstOrLastSelectedDate = _useDatepicker.isFirstOrLastSelectedDate,
isDateBlocked = _useDatepicker.isDateBlocked,
isDateFocused = _useDatepicker.isDateFocused,
onDateSelect = _useDatepicker.onDateSelect,
onDateHover = _useDatepicker.onDateHover,
_goToDate = _useDatepicker.goToDate,
goToPreviousMonthsByOneMonth = _useDatepicker.goToPreviousMonthsByOneMonth,
goToNextMonthsByOneMonth = _useDatepicker.goToNextMonthsByOneMonth,
goToPreviousYear = _useDatepicker.goToPreviousYear,
goToNextYear = _useDatepicker.goToNextYear;
/**
* This section performs a `getDerivedStateFromProps` style logic where we
* store the prop in state (as prevDate) so we can compare in the next render
* and only if the prop changes this gets run again
*/
if ((0, _Datepicker.getValidDateTimeString)(startDate) !== (0, _Datepicker.getValidDateTimeString)(prevDates.startDate)) {
setDates({
startDate: (0, _Datepicker.getJSDateFromString)(startDate),
endDate: (0, _Datepicker.getJSDateFromString)(endDate) || (0, _Datepicker.getJSDateFromString)(startDate),
focusedInput: _hooks.START_DATE
});
setPrevDates({
startDate: (0, _Datepicker.getJSDateFromString)(startDate),
endDate: (0, _Datepicker.getJSDateFromString)(endDate) || (0, _Datepicker.getJSDateFromString)(startDate),
focusedInput: _hooks.START_DATE
});
_goToDate((0, _Datepicker.getJSDateFromString)(startDate));
}
function handleDateChange(data) {
if (!data.focusedInput) {
setDates((0, _extends2.default)({}, data, {
focusedInput: _hooks.START_DATE
}));
} else {
if (enableRangeSelection && data.endDate) {
setDates((0, _extends2.default)({}, data, {
endDate: null
}));
} else {
setDates(data);
}
}
onDateChange(data);
} // We don't recreate the context value object unless it's needed.
// That stop all the childrens from being re-rendering on each datepicker evokation
var contextValue = (0, _react.useMemo)(function () {
return {
isDateBlocked: isDateBlocked,
isDateFocused: isDateFocused,
isDateHovered: isDateHovered,
isDateSelected: isDateSelected,
isFirstOrLastSelectedDate: isFirstOrLastSelectedDate,
onDateSelect: onDateSelect,
onDateHover: onDateHover,
startDate: dates.startDate,
endDate: dates.endDate,
enableRangeSelection: enableRangeSelection
};
}, [isDateBlocked, isDateFocused, isDateHovered, isDateSelected, isFirstOrLastSelectedDate, onDateSelect, onDateHover, dates.startDate, dates.endDate, enableRangeSelection]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "DatepickerContainer",
ref: datePickerRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker2.default.Provider, {
value: contextValue,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker3.CalendarContainerUI, {
className: "c-Calendar",
numberOfMonths: numberOfMonths,
role: "dialog",
children: !deepNavVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker5.default, {
activeMonths: activeMonths,
allowFutureDatePick: allowFutureDatePick,
firstDayOfWeek: firstDayOfWeek,
goToPreviousMonth: goToPreviousMonthsByOneMonth,
goToNextMonth: goToNextMonthsByOneMonth,
numberOfMonths: numberOfMonths,
onDeepNavigationClick: function onDeepNavigationClick() {
setDeepNavVisibility(!deepNavVisible);
}
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker4.default, {
activeMonths: activeMonths,
allowFutureDatePick: allowFutureDatePick,
goToDate: function goToDate(newDate, switchCalendar) {
_goToDate(newDate);
switchCalendar && setDeepNavVisibility(false);
},
goToNextYear: goToNextYear,
goToPreviousYear: goToPreviousYear,
startDate: dates.startDate
})
})
})
});
}
Datepicker.propTypes = {
/** Whether is possible to pick a date in the future */
allowFutureDatePick: _propTypes.default.bool,
/** Allows the selection of start and end date dates, use `minBookingDays` to enforce a minimun number of dates in the range*/
enableRangeSelection: _propTypes.default.bool,
/** Pass an ending date to the calendar to select range. Note: Range not supported yet */
endDate: _propTypes.default.instanceOf(Date),
/** Which day of the week is first in the calendar (0 -> sunday, 1 -> monday, etc) */
firstDayOfWeek: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6]),
/** Retrieves the Datepicker most outer DOM node */
innerRef: _propTypes.default.func,
/** How many days can be selected in a range (minimum). */
minBookingDays: _propTypes.default.number,
/** How many months to display at the same time. Note: Currently supported 1 */
numberOfMonths: _propTypes.default.number,
/** Pass a starting date to the calendar to be selected. Accepts a valid Date object or a valid date iso string */
startDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
/** Callback when the date is changed, returns selected start date (and end date if a range selection) */
onDateChange: _propTypes.default.func
};
var _default = Datepicker;
exports.default = _default;