@atlaskit/datetime-picker
Version:
A date time picker allows the user to select an associated date and time.
85 lines (83 loc) • 3.86 kB
JavaScript
/* menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MenuTopLayer = void 0;
require("./menu-top-layer.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _dateFns = require("date-fns");
var _calendar = _interopRequireDefault(require("@atlaskit/calendar/calendar"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* @param isos A series of ISO dates.
* @returns The last valid date within the array of ISO strings.
*/
function getValidDate(isos) {
return isos.reduce(function (acc, iso) {
var date = (0, _dateFns.parseISO)(iso);
return (0, _dateFns.isValid)(date) ? {
day: date.getDate(),
month: date.getMonth() + 1,
year: date.getFullYear()
} : acc;
}, {});
}
var styles = {
root: "_2rko1mok _1bsb1ris _bfhk1bhr _16qs130s _1pfhu2gc _6rthu2gc"
};
/**
* Top-layer version of the date picker menu.
*
* The surrounding react-select menu portal owns the native popover and
* positioning. This component only supplies the calendar dialog content.
*
* Gated behind the `platform-dst-top-layer` feature flag.
*/
var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
var selectProps = _ref.selectProps,
innerProps = _ref.innerProps;
var calendarValue = selectProps.calendarValue,
calendarView = selectProps.calendarView,
MenuInnerWrapper = selectProps.menuInnerWrapper;
var _getValidDate = getValidDate([calendarValue, calendarView]),
day = _getValidDate.day,
month = _getValidDate.month,
year = _getValidDate.year;
var onMenuMouseDown = function onMenuMouseDown(event) {
if (event.button !== 0) {
return;
}
event.stopPropagation();
event.preventDefault();
};
var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : _react.Fragment;
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
onMouseDown: onMenuMouseDown,
role: "presentation",
className: (0, _runtime.ax)([styles.root])
}), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(_calendar.default, {
day: day,
month: month,
year: year,
disabled: selectProps.calendarDisabled,
disabledDateFilter: selectProps.calendarDisabledDateFilter,
minDate: selectProps.calendarMinDate,
maxDate: selectProps.calendarMaxDate,
nextMonthLabel: selectProps.nextMonthLabel,
onChange: selectProps.onCalendarChange,
onSelect: selectProps.onCalendarSelect,
previousMonthLabel: selectProps.previousMonthLabel,
ref: selectProps.calendarRef,
selected: [selectProps.calendarValue],
shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
locale: selectProps.calendarLocale,
testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
weekStartDay: selectProps.calendarWeekStartDay
})));
};