@awsui/components-react/date-range-picker/calendar/header/index.js

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { add } from 'date-fns';
import { renderMonthAndYear, renderYear } from '../../../calendar/utils/intl';
import { useInternalI18n } from '../../../i18n/context.js';
import InternalLiveRegion from '../../../live-region/internal';
import { NextPageButton, PrevPageButton } from './header-button';
import styles from '../../styles.css.js';
import testutilStyles from '../../test-classes/styles.css.js';
export default function CalendarHeader({ baseDate, locale, onChangePage, previousPageLabel, nextPageLabel, isSingleGrid, headingIdPrefix, granularity = 'day', }) {
    const i18n = useInternalI18n('date-range-picker');
    const isMonthPicker = granularity === 'month';
    const renderLabel = isMonthPicker ? renderYear : renderMonthAndYear;
    const prevPageHeaderLabel = renderLabel(locale, add(baseDate, granularity === 'month' ? { years: -1 } : { months: -1 }));
    const currentPageHeaderLabel = renderLabel(locale, baseDate);
    const pageUnit = isMonthPicker ? 'year' : 'month';
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: clsx(testutilStyles['calendar-header'], styles['calendar-header']) },
            React.createElement(PrevPageButton, { ariaLabel: i18n(isMonthPicker ? 'i18nStrings.previousYearAriaLabel' : 'i18nStrings.previousMonthAriaLabel', previousPageLabel), onChangePage: onChangePage }),
            React.createElement("h2", { className: styles['calendar-header-pages-wrapper'] },
                !isSingleGrid && (React.createElement("span", { className: styles['calendar-header-page'], id: `${headingIdPrefix}-prev${pageUnit}` }, prevPageHeaderLabel)),
                React.createElement("span", { className: styles['calendar-header-page'], id: `${headingIdPrefix}-current${pageUnit}` }, currentPageHeaderLabel)),
            React.createElement(NextPageButton, { ariaLabel: i18n(isMonthPicker ? 'i18nStrings.nextYearAriaLabel' : 'i18nStrings.nextMonthAriaLabel', nextPageLabel), onChangePage: onChangePage })),
        React.createElement(InternalLiveRegion, { hidden: true }, isSingleGrid ? currentPageHeaderLabel : `${prevPageHeaderLabel}, ${currentPageHeaderLabel}`)));
}
//# sourceMappingURL=index.js.map