@atlaskit/calendar
Version:
An interactive calendar for date selection experiences.
154 lines (151 loc) • 7.58 kB
JavaScript
"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;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _new = require("@atlaskit/button/new");
var _useId = require("@atlaskit/ds-lib/use-id");
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
var _chevronDoubleLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-double-left"));
var _chevronDoubleRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-double-right"));
var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
var _compiled = require("@atlaskit/primitives/compiled");
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); }
var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
var monthLongTitle = _ref.monthLongTitle,
year = _ref.year,
_ref$previousMonthLab = _ref.previousMonthLabel,
previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Previous month' : _ref$previousMonthLab,
_ref$previousYearLabe = _ref.previousYearLabel,
previousYearLabel = _ref$previousYearLabe === void 0 ? 'Previous year' : _ref$previousYearLabe,
previousMonthHeading = _ref.previousMonthHeading,
previousYearHeading = _ref.previousYearHeading,
_ref$nextMonthLabel = _ref.nextMonthLabel,
nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
_ref$nextYearLabel = _ref.nextYearLabel,
nextYearLabel = _ref$nextYearLabel === void 0 ? 'Next year' : _ref$nextYearLabel,
nextMonthHeading = _ref.nextMonthHeading,
nextYearHeading = _ref.nextYearHeading,
handleClickPrevMonth = _ref.handleClickPrevMonth,
handleClickPrevYear = _ref.handleClickPrevYear,
handleClickNextMonth = _ref.handleClickNextMonth,
handleClickNextYear = _ref.handleClickNextYear,
headerId = _ref.headerId,
tabIndex = _ref.tabIndex,
testId = _ref.testId;
var announceId = (0, _useId.useId)();
// All of this is because `aria-atomic` is not fully supported for different
// assistive technologies. We want the value of the current month and year to
// be announced, but *only* if that value has been interacted with since
// being mounted. This allows us to conditionally apply the `aria-live`
// attribute. Without this, the `aria-live` property is set on mount and
// overrides the default input's readout in downstream consumers (e.g.
// datetime picker).
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
hasInteractedWithMonthOrYear = _useState2[0],
setHasInteractedWithMonthOrYear = _useState2[1];
var handlePrevMonthInteraction = function handlePrevMonthInteraction(e) {
if (!hasInteractedWithMonthOrYear) {
setHasInteractedWithMonthOrYear(true);
}
handleClickPrevMonth(e);
};
var handlePrevYearInteraction = function handlePrevYearInteraction(e) {
if (!hasInteractedWithMonthOrYear) {
setHasInteractedWithMonthOrYear(true);
}
handleClickPrevYear(e);
};
var handleNextMonthInteraction = function handleNextMonthInteraction(e) {
if (!hasInteractedWithMonthOrYear) {
setHasInteractedWithMonthOrYear(true);
}
handleClickNextMonth(e);
};
var handleNextYearInteraction = function handleNextYearInteraction(e) {
if (!hasInteractedWithMonthOrYear) {
setHasInteractedWithMonthOrYear(true);
}
handleClickNextYear(e);
};
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
paddingInline: "space.100"
}, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
space: "space.0",
alignBlock: "center",
spread: "space-between"
}, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
space: "space.100",
alignBlock: "start"
}, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
appearance: "subtle",
spacing: "compact",
tabIndex: tabIndex,
onClick: handlePrevYearInteraction,
testId: testId && "".concat(testId, "--previous-year"),
icon: function icon(iconProps) {
return /*#__PURE__*/_react.default.createElement(_chevronDoubleLeft.default, (0, _extends2.default)({}, iconProps, {
size: "small"
}));
},
label: "".concat(previousYearLabel, ", ").concat(previousYearHeading)
}), /*#__PURE__*/_react.default.createElement(_new.IconButton, {
appearance: "subtle",
spacing: "compact",
tabIndex: tabIndex,
onClick: handlePrevMonthInteraction,
testId: testId && "".concat(testId, "--previous-month"),
icon: function icon(iconProps) {
return /*#__PURE__*/_react.default.createElement(_chevronLeft.default, (0, _extends2.default)({}, iconProps, {
size: "small"
}));
},
label: "".concat(previousMonthLabel, ", ").concat(previousMonthHeading)
})), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
"aria-live": hasInteractedWithMonthOrYear ? 'polite' : undefined,
id: announceId,
testId: testId && "".concat(testId, "--current-month-year--container")
}, /*#__PURE__*/_react.default.createElement(_heading.default, {
size: "xsmall",
as: "h2",
id: headerId,
testId: testId && "".concat(testId, "--current-month-year")
}, "".concat(monthLongTitle, " ").concat(year))), /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
space: "space.100",
alignBlock: "end"
}, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
appearance: "subtle",
spacing: "compact",
tabIndex: tabIndex,
onClick: handleNextMonthInteraction,
testId: testId && "".concat(testId, "--next-month"),
icon: function icon(iconProps) {
return /*#__PURE__*/_react.default.createElement(_chevronRight.default, (0, _extends2.default)({}, iconProps, {
size: "small"
}));
},
label: "".concat(nextMonthLabel, ", ").concat(nextMonthHeading)
}), /*#__PURE__*/_react.default.createElement(_new.IconButton, {
appearance: "subtle",
spacing: "compact",
tabIndex: tabIndex,
onClick: handleNextYearInteraction,
testId: testId && "".concat(testId, "--next-year"),
icon: function icon(iconProps) {
return /*#__PURE__*/_react.default.createElement(_chevronDoubleRight.default, (0, _extends2.default)({}, iconProps, {
size: "small"
}));
},
label: "".concat(nextYearLabel, ", ").concat(nextYearHeading)
}))));
});
Header.displayName = 'Header';
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = Header;