@shopify/polaris/dist/esm/components/DatePicker/DatePicker.js

Shopify’s product component library

import React$1, { useState, useEffect, useCallback, useMemo } from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames } from '../../utilities/css.js';
import { ArrowLeftMinor, ArrowRightMinor } from '@shopify/polaris-icons';
import { Button as Button$1 } from '../Button/Button.js';
import { isDateBefore, isDateAfter, getNextDisplayYear, getNextDisplayMonth, getPreviousDisplayYear, getPreviousDisplayMonth } from '../../utilities/dates.js';
import { monthName } from './utilities.js';
import styles from './DatePicker.scss.js';
import { Month as Month$1 } from './components/Month/Month.js';

function DatePicker({
  id,
  selected,
  month,
  year,
  allowRange,
  multiMonth,
  disableDatesBefore,
  disableDatesAfter,
  weekStartsOn = 0,
  onMonthChange,
  onChange = noop
}) {
  var i18n = useI18n();
  var {
    newDesignLanguage
  } = useFeatures();
  var [hoverDate, setHoverDate] = useState(undefined);
  var [focusDate, setFocusDate] = useState(undefined);
  useEffect(() => {
    setFocusDate(undefined);
  }, [selected]);
  var handleFocus = useCallback(date => {
    setFocusDate(date);
  }, []);
  var setFocusDateAndHandleMonthChange = useCallback(date => {
    if (onMonthChange) {
      onMonthChange(date.getMonth(), date.getFullYear());
    }

    setHoverDate(date);
    setFocusDate(date);
  }, [onMonthChange]);
  var handleDateSelection = useCallback(range => {
    var {
      end
    } = range;
    setHoverDate(end);
    setFocusDate(new Date(end));
    onChange(range);
  }, [onChange]);
  var handleMonthChangeClick = useCallback((month, year) => {
    if (!onMonthChange) {
      return;
    }

    setFocusDate(undefined);
    onMonthChange(month, year);
  }, [onMonthChange]);
  var handleHover = useCallback(date => {
    setHoverDate(date);
  }, []);
  var handleKeyUp = useCallback(event => {
    var {
      key
    } = event;
    var range = deriveRange(selected);
    var focusedDate = focusDate || range && range.start;

    if (focusedDate == null) {
      return;
    }

    if (key === 'ArrowUp') {
      var previousWeek = new Date(focusedDate);
      previousWeek.setDate(focusedDate.getDate() - 7);

      if (!(disableDatesBefore && isDateBefore(previousWeek, disableDatesBefore))) {
        setFocusDateAndHandleMonthChange(previousWeek);
      }
    }

    if (key === 'ArrowDown') {
      var nextWeek = new Date(focusedDate);
      nextWeek.setDate(focusedDate.getDate() + 7);

      if (!(disableDatesAfter && isDateAfter(nextWeek, disableDatesAfter))) {
        setFocusDateAndHandleMonthChange(nextWeek);
      }
    }

    if (key === 'ArrowRight') {
      var tomorrow = new Date(focusedDate);
      tomorrow.setDate(focusedDate.getDate() + 1);

      if (!(disableDatesAfter && isDateAfter(tomorrow, disableDatesAfter))) {
        setFocusDateAndHandleMonthChange(tomorrow);
      }
    }

    if (key === 'ArrowLeft') {
      var yesterday = new Date(focusedDate);
      yesterday.setDate(focusedDate.getDate() - 1);

      if (!(disableDatesBefore && isDateBefore(yesterday, disableDatesBefore))) {
        setFocusDateAndHandleMonthChange(yesterday);
      }
    }
  }, [disableDatesAfter, disableDatesBefore, focusDate, selected, setFocusDateAndHandleMonthChange]);
  var showNextYear = getNextDisplayYear(month, year);
  var showNextMonth = getNextDisplayMonth(month);
  var showNextToNextYear = getNextDisplayYear(showNextMonth, showNextYear);
  var showNextToNextMonth = getNextDisplayMonth(showNextMonth);
  var showPreviousYear = getPreviousDisplayYear(month, year);
  var showPreviousMonth = getPreviousDisplayMonth(month);
  var previousMonthName = i18n.translate("Polaris.DatePicker.months.".concat(monthName(showPreviousMonth)));
  var nextMonth = multiMonth ? i18n.translate("Polaris.DatePicker.months.".concat(monthName(showNextToNextMonth))) : i18n.translate("Polaris.DatePicker.months.".concat(monthName(showNextMonth)));
  var nextYear = multiMonth ? showNextToNextYear : showNextYear;
  var monthIsSelected = useMemo(() => deriveRange(selected), [selected]);
  var secondDatePicker = multiMonth ? /*#__PURE__*/React$1.createElement(Month$1, {
    onFocus: handleFocus,
    focusedDate: focusDate,
    month: showNextMonth,
    year: showNextYear,
    selected: monthIsSelected,
    hoverDate: hoverDate,
    onChange: handleDateSelection,
    onHover: handleHover,
    disableDatesBefore: disableDatesBefore,
    disableDatesAfter: disableDatesAfter,
    allowRange: allowRange,
    weekStartsOn: weekStartsOn
  }) : null;
  var datePickerClassName = classNames(styles.DatePicker, newDesignLanguage && styles.newDesignLanguage);
  return /*#__PURE__*/React$1.createElement("div", {
    id: id,
    className: datePickerClassName,
    onKeyDown: handleKeyDown,
    onKeyUp: handleKeyUp
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Header
  }, /*#__PURE__*/React$1.createElement(Button$1, {
    plain: true,
    icon: ArrowLeftMinor,
    accessibilityLabel: i18n.translate('Polaris.DatePicker.previousMonth', {
      previousMonthName,
      showPreviousYear
    }),
    onClick: () => handleMonthChangeClick(showPreviousMonth, showPreviousYear)
  }), /*#__PURE__*/React$1.createElement(Button$1, {
    plain: true,
    icon: ArrowRightMinor,
    accessibilityLabel: i18n.translate('Polaris.DatePicker.nextMonth', {
      nextMonth,
      nextYear
    }),
    onClick: () => handleMonthChangeClick(showNextMonth, showNextYear)
  })), /*#__PURE__*/React$1.createElement("div", {
    className: styles.MonthLayout
  }, /*#__PURE__*/React$1.createElement(Month$1, {
    onFocus: handleFocus,
    focusedDate: focusDate,
    month: month,
    year: year,
    selected: deriveRange(selected),
    hoverDate: hoverDate,
    onChange: handleDateSelection,
    onHover: handleHover,
    disableDatesBefore: disableDatesBefore,
    disableDatesAfter: disableDatesAfter,
    allowRange: allowRange,
    weekStartsOn: weekStartsOn
  }), secondDatePicker));
}

function noop() {}

function handleKeyDown(event) {
  var {
    key
  } = event;

  if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
    event.preventDefault();
    event.stopPropagation();
  }
}

function deriveRange(selected) {
  return selected instanceof Date ? {
    start: selected,
    end: selected
  } : selected;
}

export { DatePicker };