@talend/react-components/lib/DateTimePickers/pickers/DatePicker/DatePicker.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _format = require("date-fns/format");
var _getDate = require("date-fns/getDate");
var _getMonth = require("date-fns/getMonth");
var _getYear = require("date-fns/getYear");
var _isAfter = require("date-fns/isAfter");
var _isBefore = require("date-fns/isBefore");
var _isSameDay = require("date-fns/isSameDay");
var _isToday = require("date-fns/isToday");
var _isWithinInterval = require("date-fns/isWithinInterval");
var _setMonth = require("date-fns/setMonth");
var _startOfDay = require("date-fns/startOfDay");
var _startOfMonth = require("date-fns/startOfMonth");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _reactA11y = require("@talend/react-a11y");
var _translate = _interopRequireDefault(require("../../../translate"));
var _generator = require("../../generator");
var _DatePickerModule = _interopRequireDefault(require("./DatePicker.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const getDayNames = (0, _lodash.memoize)(_generator.buildDayNames);
class DatePicker extends _react.PureComponent {
  constructor(props) {
    super(props);
    this.getWeeks = (0, _lodash.memoize)(_generator.buildWeeks, (year, monthIndex, firstDayOfWeek) => `${year}-${monthIndex}|${firstDayOfWeek}`);
  }
  isSelectedDate(date) {
    return this.props.selectedDate !== undefined && (0, _isSameDay.isSameDay)(this.props.selectedDate, date);
  }
  isDisabledDate(date) {
    if (!this.props.isDisabledChecker) {
      return false;
    }
    return this.props.isDisabledChecker(date);
  }
  isCurrentMonth(date) {
    return (0, _getMonth.getMonth)(date) === this.props.calendar.monthIndex;
  }
  isCurrentYear(date) {
    return (0, _getYear.getYear)(date) === this.props.calendar.year;
  }
  isSelectedInCurrentCalendar() {
    const {
      selectedDate
    } = this.props;
    if (!selectedDate) {
      return false;
    }
    return this.isCurrentYear(selectedDate) && this.isCurrentMonth(selectedDate);
  }
  isDateInCurrentCalendar(date) {
    const {
      calendar
    } = this.props;
    const {
      year,
      monthIndex
    } = calendar;
    const weeks = this.getWeeks(year, monthIndex, 1);
    return (0, _isWithinInterval.isWithinInterval)(date, {
      start: weeks[0][0],
      end: weeks[5][6]
    });
  }
  isDateWithinRange(date) {
    const {
      selectedDate,
      startDate,
      endDate
    } = this.props;
    if (startDate && (0, _isAfter.isAfter)(selectedDate, startDate)) {
      return (0, _isWithinInterval.isWithinInterval)(date, {
        start: (0, _startOfDay.startOfDay)(startDate),
        end: selectedDate
      });
    } else if (endDate && (0, _isBefore.isBefore)(selectedDate, endDate)) {
      return (0, _isWithinInterval.isWithinInterval)(date, {
        start: selectedDate,
        end: endDate
      });
    }
    return false;
  }
  isStartDate(date) {
    const {
      selectedDate,
      startDate,
      endDate
    } = this.props;
    if (startDate) {
      return (0, _isSameDay.isSameDay)(date, startDate);
    } else if (endDate) {
      return (0, _isSameDay.isSameDay)(date, selectedDate);
    }
    return false;
  }
  isEndDate(date) {
    const {
      selectedDate,
      endDate,
      startDate
    } = this.props;
    if (startDate) {
      return (0, _isSameDay.isSameDay)(date, selectedDate);
    } else if (endDate) {
      return (0, _isSameDay.isSameDay)(date, endDate);
    }
    return false;
  }
  selectDate(event, date, year, monthIndex) {
    if (!this.isCurrentMonth(date)) {
      if (date < (0, _startOfMonth.startOfMonth)(new Date(year, monthIndex))) {
        this.props.goToPreviousMonth();
      } else {
        this.props.goToNextMonth();
      }
    }
    this.props.onSelect(event, date);
  }
  render() {
    const {
      calendar,
      t
    } = this.props;
    const {
      year,
      monthIndex
    } = calendar;
    const pickerLocale = (0, _generator.getPickerLocale)(t);
    const weeks = this.getWeeks(year, monthIndex, 1);
    const dayNames = getDayNames(undefined, this.props.t);
    const selectedInCurrentCalendar = this.isSelectedInCurrentCalendar();
    const monthStr = (0, _format.format)((0, _setMonth.setMonth)(new Date(0), monthIndex), 'MMMM', pickerLocale);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
      className: _DatePickerModule.default.container,
      ref: ref => {
        this.calendarRef = ref;
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("caption", {
        className: "sr-only",
        children: `${monthStr} ${year}`
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
          className: _DatePickerModule.default['calendar-header'],
          children: dayNames.map((dayName, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("th", {
            scope: "col",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("abbr", {
              title: dayName.full,
              children: dayName.abbr
            }, i), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Divider, {})]
          }, i))
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
        children: weeks.map((week, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
          className: (0, _classnames.default)(_DatePickerModule.default['calendar-row'], 'tc-date-picker-calendar-row'),
          children: week.map((date, j) => {
            const day = (0, _getDate.getDate)(date);
            const disabled = this.isDisabledDate(date);
            const selected = this.isSelectedDate(date);
            const today = (0, _isToday.isToday)(date);
            const shouldBeFocussable = selectedInCurrentCalendar && selected || !selectedInCurrentCalendar && day === 1;
            const cellTheme = {};
            const dayTheme = {};
            const isStart = this.isStartDate(date);
            const isEnd = this.isEndDate(date);
            const isInRange = this.isDateWithinRange(date);
            if (isInRange) {
              const isMiddle = !isStart && !isEnd && isInRange;
              cellTheme[_DatePickerModule.default['date-range']] = isInRange;
              cellTheme[_DatePickerModule.default['range-middle']] = isMiddle;
              cellTheme[_DatePickerModule.default['range-start']] = isStart;
              cellTheme[_DatePickerModule.default['range-end']] = isEnd;
              dayTheme[_DatePickerModule.default.range] = isMiddle;
            }
            const className = (0, _classnames.default)(_DatePickerModule.default['calendar-day'], {
              ...dayTheme,
              [_DatePickerModule.default.selected]: selected || isStart || isEnd,
              [_DatePickerModule.default.today]: today,
              [_DatePickerModule.default['not-current-month']]: !this.isCurrentMonth(date)
            }, 'tc-date-picker-day');
            const tdProps = {
              className: (0, _classnames.default)(_DatePickerModule.default['calendar-col'], cellTheme)
            };
            let ariaLabel = (0, _format.format)(date, 'EEEE dd MMMM yyyy', pickerLocale);
            if (isInRange) {
              if (isStart) {
                ariaLabel = t('DATEPICKER_DAY_RANGE_START', {
                  defaultValue: 'Range: start date, {{date}}',
                  date: ariaLabel
                });
              } else if (isEnd) {
                ariaLabel = t('DATEPICKER_DAY_RANGE_END', {
                  defaultValue: 'Range: end date, {{date}}',
                  date: ariaLabel
                });
              } else {
                ariaLabel = t('DATEPICKER_DAY_WITHIN_RANGE', {
                  defaultValue: 'Included in range, {{date}}',
                  date: ariaLabel
                });
              }
            }
            if (selected) {
              tdProps['aria-current'] = 'date';
              ariaLabel = t('DATEPICKER_DAY_SELECTED', {
                defaultValue: '{{date}}, selected',
                date: ariaLabel
              });
            }
            if (today) {
              ariaLabel = t('DATEPICKER_DAY_TODAY', {
                defaultValue: 'Today, {{date}}',
                date: ariaLabel
              });
            }
            if (disabled) {
              ariaLabel = t('DATEPICKER_DAY_INVALID', {
                defaultValue: 'Date is not allowed, {{date}}',
                date: ariaLabel
              });
            }
            const buttonProps = this.isCurrentMonth(date) ? {
              'data-value': day
            } : undefined;
            return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
              ...tdProps,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
                type: "button",
                className: className,
                onClick: event => this.selectDate(event, date, year, monthIndex),
                disabled: disabled,
                tabIndex: this.props.allowFocus && shouldBeFocussable ? 0 : -1,
                onKeyDown: event => this.props.onKeyDown(event, this.calendarRef, day - 1),
                "aria-label": ariaLabel,
                ...buttonProps,
                children: day
              })
            }, j);
          })
        }, i))
      })]
    });
  }
}
DatePicker.displayName = 'DatePicker';
DatePicker.propTypes = {
  allowFocus: _propTypes.default.bool,
  calendar: _propTypes.default.shape({
    monthIndex: _propTypes.default.number.isRequired,
    year: _propTypes.default.number.isRequired
  }).isRequired,
  onSelect: _propTypes.default.func.isRequired,
  selectedDate: _propTypes.default.instanceOf(Date),
  startDate: _propTypes.default.instanceOf(Date),
  endDate: _propTypes.default.instanceOf(Date),
  isDisabledChecker: _propTypes.default.func,
  onKeyDown: _propTypes.default.func.isRequired,
  t: _propTypes.default.func,
  goToPreviousMonth: _propTypes.default.func.isRequired,
  goToNextMonth: _propTypes.default.func.isRequired
};
DatePicker.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = _reactA11y.Gesture.withCalendarGesture(DatePicker);
//# sourceMappingURL=DatePicker.component.js.map