UNPKG

@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
/* 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 }))); };