@atlaskit/calendar
Version:
An interactive calendar for date selection experiences.
145 lines (143 loc) • 6.16 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { memo, useState } from 'react';
import { IconButton } from '@atlaskit/button/new';
import { useId } from '@atlaskit/ds-lib/use-id';
import Heading from '@atlaskit/heading';
import ChevronDoubleLeftIcon from '@atlaskit/icon/core/chevron-double-left';
import ChevronDoubleRightIcon from '@atlaskit/icon/core/chevron-double-right';
import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
import { Box, Inline } from '@atlaskit/primitives/compiled';
var Header = /*#__PURE__*/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 = 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 = useState(false),
_useState2 = _slicedToArray(_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.createElement(Box, {
paddingInline: "space.100"
}, /*#__PURE__*/React.createElement(Inline, {
space: "space.0",
alignBlock: "center",
spread: "space-between"
}, /*#__PURE__*/React.createElement(Inline, {
space: "space.100",
alignBlock: "start"
}, /*#__PURE__*/React.createElement(IconButton, {
appearance: "subtle",
spacing: "compact",
tabIndex: tabIndex,
onClick: handlePrevYearInteraction,
testId: testId && "".concat(testId, "--previous-year"),
icon: function icon(iconProps) {
return /*#__PURE__*/React.createElement(ChevronDoubleLeftIcon, _extends({}, iconProps, {
size: "small"
}));
},
label: "".concat(previousYearLabel, ", ").concat(previousYearHeading)
}), /*#__PURE__*/React.createElement(IconButton, {
appearance: "subtle",
spacing: "compact",
tabIndex: tabIndex,
onClick: handlePrevMonthInteraction,
testId: testId && "".concat(testId, "--previous-month"),
icon: function icon(iconProps) {
return /*#__PURE__*/React.createElement(ChevronLeftIcon, _extends({}, iconProps, {
size: "small"
}));
},
label: "".concat(previousMonthLabel, ", ").concat(previousMonthHeading)
})), /*#__PURE__*/React.createElement(Box, {
"aria-live": hasInteractedWithMonthOrYear ? 'polite' : undefined,
id: announceId,
testId: testId && "".concat(testId, "--current-month-year--container")
}, /*#__PURE__*/React.createElement(Heading, {
size: "xsmall",
as: "h2",
id: headerId,
testId: testId && "".concat(testId, "--current-month-year")
}, "".concat(monthLongTitle, " ").concat(year))), /*#__PURE__*/React.createElement(Inline, {
space: "space.100",
alignBlock: "end"
}, /*#__PURE__*/React.createElement(IconButton, {
appearance: "subtle",
spacing: "compact",
tabIndex: tabIndex,
onClick: handleNextMonthInteraction,
testId: testId && "".concat(testId, "--next-month"),
icon: function icon(iconProps) {
return /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({}, iconProps, {
size: "small"
}));
},
label: "".concat(nextMonthLabel, ", ").concat(nextMonthHeading)
}), /*#__PURE__*/React.createElement(IconButton, {
appearance: "subtle",
spacing: "compact",
tabIndex: tabIndex,
onClick: handleNextYearInteraction,
testId: testId && "".concat(testId, "--next-year"),
icon: function icon(iconProps) {
return /*#__PURE__*/React.createElement(ChevronDoubleRightIcon, _extends({}, iconProps, {
size: "small"
}));
},
label: "".concat(nextYearLabel, ", ").concat(nextYearHeading)
}))));
});
Header.displayName = 'Header';
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default Header;