@razorpay/blade/build/lib/web/production/components/DatePicker/CalendarHeader.web.js

The Design System that powers Razorpay

import dayjs from 'dayjs';
import { useI18nContext } from '@razorpay/i18nify-react';
import { convertIntlToDayjsLocale } from './utils.js';
import '../Box/index.js';
import '../Button/index.js';
import '../Typography/index.js';
import '../Icons/index.js';
import '../Link/index.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import Link from '../Link/Link/Link.js';
import ChevronDownIcon from '../Icons/ChevronDownIcon/ChevronDownIcon.js';
import { Text } from '../Typography/Text/Text.js';
import { Box } from '../Box/Box.js';
import Button from '../Button/Button/Button.js';
import ChevronLeftIcon from '../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
import ChevronRightIcon from '../Icons/ChevronRightIcon/ChevronRightIcon.js';

/* eslint-disable @typescript-eslint/explicit-function-return-type */

var CalendarLevelIndicator = function CalendarLevelIndicator(_ref) {
  var onClick = _ref.onClick,
    showLevelChangeLink = _ref.showLevelChangeLink,
    accessibilityLabel = _ref.accessibilityLabel,
    text = _ref.text;
  return showLevelChangeLink ? /*#__PURE__*/jsx(Link, {
    onClick: onClick,
    size: "large",
    variant: "button",
    color: "neutral",
    iconPosition: "right",
    icon: ChevronDownIcon,
    accessibilityLabel: accessibilityLabel,
    children: text
  }) : /*#__PURE__*/jsx(Text, {
    size: "large",
    weight: "medium",
    color: "interactive.text.neutral.normal",
    children: text
  });
};
var CalendarHeader = function CalendarHeader(_ref2) {
  var _i18nState$locale;
  var isRange = _ref2.isRange,
    date = _ref2.date,
    pickerType = _ref2.pickerType,
    onNextMonth = _ref2.onNextMonth,
    onNextYear = _ref2.onNextYear,
    onNextDecade = _ref2.onNextDecade,
    onPreviousMonth = _ref2.onPreviousMonth,
    onPreviousYear = _ref2.onPreviousYear,
    onPreviousDecade = _ref2.onPreviousDecade,
    onLevelChange = _ref2.onLevelChange,
    showLevelChangeLink = _ref2.showLevelChangeLink;
  var _useI18nContext = useI18nContext(),
    i18nState = _useI18nContext.i18nState;
  var locale = convertIntlToDayjsLocale((_i18nState$locale = i18nState === null || i18nState === void 0 ? void 0 : i18nState.locale) !== null && _i18nState$locale !== void 0 ? _i18nState$locale : 'en-IN');
  var month = dayjs(date).locale(locale).format('MMMM');
  var year = dayjs(date).locale(locale).format('YYYY');
  var currentYear = dayjs(date).year();
  var startYearOfDecade = Math.floor(currentYear / 10) * 10;
  var endYearOfDecade = startYearOfDecade + 9;
  var nextMonth = dayjs(date).locale(locale).add(1, 'month').format('MMMM');
  var nextYear = dayjs(date).locale(locale).add(1, 'month').format('YYYY');
  var handleNext = function handleNext() {
    switch (pickerType) {
      case 'day':
        onNextMonth();
        break;
      case 'month':
        onNextYear();
        break;
      case 'year':
        onNextDecade();
        break;
      default:
        throw new Error('Invalid picker type');
    }
  };
  var handlePrevious = function handlePrevious() {
    switch (pickerType) {
      case 'day':
        onPreviousMonth();
        break;
      case 'month':
        onPreviousYear();
        break;
      case 'year':
        onPreviousDecade();
        break;
      default:
        throw new Error('Invalid picker type');
    }
  };
  return /*#__PURE__*/jsxs(Box, {
    display: isRange ? 'grid' : 'flex',
    gridTemplateColumns: {
      base: 'auto  1fr auto',
      m: 'auto 1fr 1fr auto'
    },
    justifyContent: "space-between",
    alignItems: "center",
    children: [/*#__PURE__*/jsx(Button, {
      justifySelf: "start",
      size: "small",
      variant: "tertiary",
      onClick: handlePrevious,
      accessibilityLabel: "Previous",
      icon: ChevronLeftIcon
    }), isRange ? /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsxs(Text, {
        display: {
          base: 'none',
          m: 'block'
        },
        size: "large",
        weight: "medium",
        marginRight: "spacing.7",
        justifySelf: "center",
        children: [month, " ", year]
      }), /*#__PURE__*/jsxs(Text, {
        display: {
          base: 'none',
          m: 'block'
        },
        size: "large",
        weight: "medium",
        marginLeft: "spacing.7",
        justifySelf: "center",
        children: [nextMonth, " ", nextYear]
      }), /*#__PURE__*/jsxs(Text, {
        display: {
          base: 'block',
          m: 'none'
        },
        size: "large",
        weight: "medium",
        justifySelf: "center",
        children: [month, " ", year]
      })]
    }) : /*#__PURE__*/jsxs(Box, {
      display: "flex",
      gap: "spacing.5",
      alignItems: "center",
      children: [pickerType === 'day' && /*#__PURE__*/jsx(CalendarLevelIndicator, {
        onClick: function onClick() {
          return onLevelChange('year');
        },
        showLevelChangeLink: showLevelChangeLink,
        accessibilityLabel: "Change month",
        text: "".concat(month, " ").concat(year)
      }), pickerType === 'month' && /*#__PURE__*/jsx(CalendarLevelIndicator, {
        onClick: function onClick() {
          return onLevelChange('decade');
        },
        showLevelChangeLink: showLevelChangeLink,
        accessibilityLabel: "Change decade",
        text: year
      }), pickerType === 'year' && /*#__PURE__*/jsxs(Text, {
        size: "large",
        weight: "medium",
        color: "interactive.text.neutral.normal",
        children: [startYearOfDecade, " - ", endYearOfDecade]
      })]
    }), /*#__PURE__*/jsx(Button, {
      justifySelf: "end",
      size: "small",
      variant: "tertiary",
      onClick: handleNext,
      accessibilityLabel: "Next",
      icon: ChevronRightIcon
    })]
  });
};

export { CalendarHeader };
//# sourceMappingURL=CalendarHeader.web.js.map