@equinor/eds-core-react/dist/esm/components/Datepicker/calendars/CalendarHeader.js

The React implementation of the Equinor Design System

import styled from 'styled-components';
import { Button } from '../../Button/index.js';
import { Icon } from '../../Icon/index.js';
import { chevron_left, chevron_up, chevron_down, chevron_right } from '@equinor/eds-icons';
import { CalendarDate } from '@internationalized/date';
import { tokens } from '@equinor/eds-tokens';
import { jsx, jsxs } from 'react/jsx-runtime';

const HeaderWrapper = styled.div.withConfig({
  displayName: "CalendarHeader__HeaderWrapper",
  componentId: "sc-kuy15-0"
})(["display:flex;justify-content:space-between;align-items:center;text-transform:capitalize;width:100%;"]);
function TodayPicker({
  onClick,
  disabled
}) {
  const today = new Date();
  return /*#__PURE__*/jsx(Button, {
    disabled: disabled,
    onClick: () => onClick(new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())),
    variant: 'ghost',
    style: {
      marginLeft: 16
    },
    children: "Today"
  });
}
const HeaderActions = styled.div.withConfig({
  displayName: "CalendarHeader__HeaderActions",
  componentId: "sc-kuy15-1"
})(["display:flex;align-items:center;width:100%;"]);

/**
 * The default header for the calendar components if no custom header is provided
 */
function CalendarHeader({
  state,
  title,
  previousMonthDisabled,
  nextMonthDisabled,
  showYearPicker,
  setShowYearPicker,
  setYearPickerPage
}) {
  return /*#__PURE__*/jsx(HeaderWrapper, {
    children: /*#__PURE__*/jsxs(HeaderActions, {
      children: [/*#__PURE__*/jsx(Button, {
        variant: 'ghost_icon',
        "aria-label": 'Previous month',
        disabled: previousMonthDisabled,
        onClick: () => showYearPicker ? setYearPickerPage(page => page - 1) : state.focusPreviousPage(),
        children: /*#__PURE__*/jsx(Icon, {
          data: chevron_left
        })
      }), /*#__PURE__*/jsx("span", {
        style: {
          flex: '1 1 auto'
        }
      }), /*#__PURE__*/jsxs(Button, {
        onClick: () => setShowYearPicker(!showYearPicker),
        "data-testid": 'heading',
        "aria-live": 'polite',
        variant: 'ghost',
        style: {
          fontSize: tokens.typography.heading.h5.fontSize,
          textTransform: 'capitalize'
        },
        children: [title, /*#__PURE__*/jsx(Icon, {
          data: showYearPicker ? chevron_up : chevron_down
        })]
      }), /*#__PURE__*/jsx(TodayPicker, {
        disabled: showYearPicker,
        onClick: v => state.setFocusedDate(v)
      }), /*#__PURE__*/jsx("span", {
        style: {
          flex: '1 1 auto'
        }
      }), /*#__PURE__*/jsx(Button, {
        variant: 'ghost_icon',
        onClick: () => showYearPicker ? setYearPickerPage(page => page + 1) : state.focusNextPage(),
        disabled: nextMonthDisabled,
        "aria-label": 'Next month',
        children: /*#__PURE__*/jsx(Icon, {
          data: chevron_right
        })
      })]
    })
  });
}

export { CalendarHeader };