@atlaskit/calendar
Version:
An interactive calendar for date selection experiences.
279 lines (277 loc) • 13.8 kB
JavaScript
/* calendar.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./calendar.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _useId = require("@atlaskit/ds-lib/use-id");
var _compiled = require("@atlaskit/primitives/compiled");
var _header = _interopRequireDefault(require("./internal/components/header"));
var _weekDays = _interopRequireDefault(require("./internal/components/week-days"));
var _weekHeader = _interopRequireDefault(require("./internal/components/week-header"));
var _constants = require("./internal/constants");
var _useControlledDateState = _interopRequireDefault(require("./internal/hooks/use-controlled-date-state"));
var _useFocusing2 = _interopRequireDefault(require("./internal/hooks/use-focusing"));
var _useGetWeeks = _interopRequireDefault(require("./internal/hooks/use-get-weeks"));
var _useHandleDateChange2 = _interopRequireDefault(require("./internal/hooks/use-handle-date-change"));
var _useHandleDateSelect2 = _interopRequireDefault(require("./internal/hooks/use-handle-date-select"));
var _useLocale2 = _interopRequireDefault(require("./internal/hooks/use-locale"));
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); }
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) { (0, _defineProperty2.default)(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; }
var styles = {
box: "_1e0c1o8l _uiztglyw"
};
var analyticsAttributes = {
componentName: 'calendar',
packageName: "@atlaskit/calendar",
packageVersion: "17.1.8"
};
var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
var day = _ref.day,
_ref$defaultDay = _ref.defaultDay,
defaultDay = _ref$defaultDay === void 0 ? 0 : _ref$defaultDay,
_ref$defaultMonth = _ref.defaultMonth,
defaultMonth = _ref$defaultMonth === void 0 ? 0 : _ref$defaultMonth,
_ref$defaultPreviousl = _ref.defaultPreviouslySelected,
defaultPreviouslySelected = _ref$defaultPreviousl === void 0 ? _constants.blankStringArray : _ref$defaultPreviousl,
_ref$defaultSelected = _ref.defaultSelected,
defaultSelected = _ref$defaultSelected === void 0 ? _constants.blankStringArray : _ref$defaultSelected,
_ref$defaultYear = _ref.defaultYear,
defaultYear = _ref$defaultYear === void 0 ? 0 : _ref$defaultYear,
disabled = _ref.disabled,
disabledDateFilter = _ref.disabledDateFilter,
minDate = _ref.minDate,
maxDate = _ref.maxDate,
month = _ref.month,
nextMonthLabel = _ref.nextMonthLabel,
_ref$onBlur = _ref.onBlur,
onBlur = _ref$onBlur === void 0 ? _noop.default : _ref$onBlur,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === void 0 ? _noop.default : _ref$onChange,
_ref$onFocus = _ref.onFocus,
onFocus = _ref$onFocus === void 0 ? _noop.default : _ref$onFocus,
_ref$onSelect = _ref.onSelect,
onSelect = _ref$onSelect === void 0 ? _noop.default : _ref$onSelect,
previouslySelected = _ref.previouslySelected,
previousMonthLabel = _ref.previousMonthLabel,
selected = _ref.selected,
_ref$shouldSetFocusOn = _ref.shouldSetFocusOnCurrentDay,
shouldSetFocusOnCurrentDay = _ref$shouldSetFocusOn === void 0 ? false : _ref$shouldSetFocusOn,
today = _ref.today,
_ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
year = _ref.year,
analyticsContext = _ref.analyticsContext,
_ref$weekStartDay = _ref.weekStartDay,
weekStartDay = _ref$weekStartDay === void 0 ? 0 : _ref$weekStartDay,
testId = _ref.testId,
className = _ref.className,
style = _ref.style,
_ref$tabIndex = _ref.tabIndex,
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
var _useControlledDateSta = (0, _useControlledDateState.default)({
day: day,
defaultDay: defaultDay,
month: month,
defaultMonth: defaultMonth,
year: year,
defaultYear: defaultYear,
today: today,
selected: selected,
defaultSelected: defaultSelected,
previouslySelected: previouslySelected,
defaultPreviouslySelected: defaultPreviouslySelected
}),
_useControlledDateSta2 = (0, _slicedToArray2.default)(_useControlledDateSta.day, 2),
dayValue = _useControlledDateSta2[0],
setDayValue = _useControlledDateSta2[1],
_useControlledDateSta3 = (0, _slicedToArray2.default)(_useControlledDateSta.month, 2),
monthValue = _useControlledDateSta3[0],
setMonthValue = _useControlledDateSta3[1],
_useControlledDateSta4 = (0, _slicedToArray2.default)(_useControlledDateSta.year, 2),
yearValue = _useControlledDateSta4[0],
setYearValue = _useControlledDateSta4[1],
_useControlledDateSta5 = (0, _slicedToArray2.default)(_useControlledDateSta.today, 1),
todayValue = _useControlledDateSta5[0],
_useControlledDateSta6 = (0, _slicedToArray2.default)(_useControlledDateSta.selected, 2),
selectedValue = _useControlledDateSta6[0],
setSelectedValue = _useControlledDateSta6[1],
_useControlledDateSta7 = (0, _slicedToArray2.default)(_useControlledDateSta.previous, 2),
previouslySelectedValue = _useControlledDateSta7[0],
setPreviouslySelectedValue = _useControlledDateSta7[1];
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
shouldSetFocus = _useState2[0],
setShouldSetFocus = _useState2[1];
var onChangeWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: onChange,
action: 'changed',
analyticsData: analyticsContext
}, analyticsAttributes));
var _useHandleDateChange = (0, _useHandleDateChange2.default)({
day: [dayValue, setDayValue],
month: [monthValue, setMonthValue],
year: [yearValue, setYearValue],
shouldSetFocus: [shouldSetFocus, setShouldSetFocus],
onChange: onChangeWithAnalytics
}),
navigate = _useHandleDateChange.navigate,
handleClickNextMonth = _useHandleDateChange.handleClickNextMonth,
handleClickNextYear = _useHandleDateChange.handleClickNextYear,
handleClickPrevMonth = _useHandleDateChange.handleClickPrevMonth,
handleClickPrevYear = _useHandleDateChange.handleClickPrevYear;
var onSelectWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: onSelect,
action: 'selected',
analyticsData: analyticsContext
}, analyticsAttributes));
var _useHandleDateSelect = (0, _useHandleDateSelect2.default)({
day: [dayValue, setDayValue],
month: [monthValue, setMonthValue],
year: [yearValue, setYearValue],
selected: [selectedValue, setSelectedValue],
previous: [, setPreviouslySelectedValue],
onSelect: onSelectWithAnalytics,
navigate: navigate
}),
handleClickDay = _useHandleDateSelect.handleClickDay,
handleContainerKeyDown = _useHandleDateSelect.handleContainerKeyDown;
var _useFocusing = (0, _useFocusing2.default)({
onFocus: onFocus,
onBlur: onBlur
}),
handleContainerBlur = _useFocusing.handleContainerBlur,
handleContainerFocus = _useFocusing.handleContainerFocus;
var _useLocale = (0, _useLocale2.default)({
locale: locale,
weekStartDay: weekStartDay
}),
monthsLong = _useLocale.monthsLong,
daysShort = _useLocale.daysShort,
daysLong = _useLocale.daysLong;
var weeks = (0, _useGetWeeks.default)({
day: dayValue,
month: monthValue,
year: yearValue,
today: todayValue,
selected: selectedValue,
previouslySelected: previouslySelectedValue,
disabled: disabled,
disabledDateFilter: disabledDateFilter,
minDate: minDate,
maxDate: maxDate,
daysLong: daysLong,
weekStartDay: weekStartDay
});
var getNextMonthHeading = function getNextMonthHeading() {
// Next month is (currentMonth - 1) + 1, or just currentMonth in this
// instance.
var nextMonth = monthValue % 12;
var showNextYear = monthValue === 12;
return "".concat(monthsLong[nextMonth], " ").concat(showNextYear ? yearValue + 1 : yearValue);
};
var getNextYearHeading = function getNextYearHeading() {
// Months are held in Date object as zero-indexed
var thisMonth = (monthValue - 1) % 12;
var nextYear = yearValue + 1;
return "".concat(monthsLong[thisMonth], " ").concat(nextYear);
};
var getPreviousMonthHeading = function getPreviousMonthHeading() {
// Previous month is (monthValue - 1) - 1. Need to add 12 so the modulo
// works as expected and stays positive.
var previousMonth = (monthValue + 12 - 2) % 12;
var showPreviousYear = monthValue === 1;
return "".concat(monthsLong[previousMonth], " ").concat(showPreviousYear ? yearValue - 1 : yearValue);
};
var getPreviousYearHeading = function getPreviousYearHeading() {
// Months are held in Date object as zero-indexed
var thisMonth = (monthValue - 1) % 12;
var previousYear = yearValue - 1;
return "".concat(monthsLong[thisMonth], " ").concat(previousYear);
};
var headerId = (0, _useId.useId)();
return (
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: className
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: style,
onBlur: handleContainerBlur,
onFocus: handleContainerFocus,
"data-testid": testId && "".concat(testId, "--container"),
ref: ref
}, /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.box,
padding: "space.200",
"aria-label": "calendar",
testId: testId && "".concat(testId, "--calendar")
}, /*#__PURE__*/React.createElement(_compiled.Stack, {
space: "space.150"
}, /*#__PURE__*/React.createElement(_header.default
// The month number needs to be translated to index in the month
// name array e.g. 1 (January) -> 0
, {
monthLongTitle: monthsLong[monthValue - 1],
year: yearValue,
nextMonthLabel: nextMonthLabel,
previousMonthLabel: previousMonthLabel,
nextMonthHeading: getNextMonthHeading(),
nextYearHeading: getNextYearHeading(),
previousMonthHeading: getPreviousMonthHeading(),
previousYearHeading: getPreviousYearHeading(),
handleClickNextMonth: handleClickNextMonth,
handleClickNextYear: handleClickNextYear,
handleClickPrevMonth: handleClickPrevMonth,
handleClickPrevYear: handleClickPrevYear,
headerId: headerId,
tabIndex: tabIndex,
testId: testId
}), /*#__PURE__*/React.createElement(_compiled.Box, {
role: "grid",
onKeyDown: handleContainerKeyDown,
"aria-labelledby": headerId,
testId: testId && "".concat(testId, "--calendar-dates")
}, /*#__PURE__*/React.createElement(_weekHeader.default, {
daysShort: daysShort,
testId: testId
}), /*#__PURE__*/React.createElement(_weekDays.default, {
weeks: weeks,
handleClickDay: handleClickDay,
monthsLong: monthsLong,
shouldSetFocus: shouldSetFocus || shouldSetFocusOnCurrentDay,
tabIndex: tabIndex,
testId: testId
})))))
);
});
/**
* __Calendar__
*
* A calendar is used for date selection.
*
* - [Examples](https://atlassian.design/components/calendar/examples)
* - [Code](https://atlassian.design/components/calendar/code)
* - [Usage](https://atlassian.design/components/calendar/usage)
*/
var Calendar = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Calendar(props, ref) {
return /*#__PURE__*/React.createElement(InnerCalendar, (0, _extends2.default)({}, props, {
ref: ref
}));
}));
Calendar.displayName = 'Calendar';
var _default = exports.default = Calendar;