rsuite/esm/Calendar/TableRow.js

A suite of react components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import partial from 'lodash/partial';
import { DateUtils, useClassNames, DATERANGE_DISABLED_TARGET, useCustom } from '../utils';
import { useCalendarContext } from './CalendarContext';
var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _props$as = props.as,
      Component = _props$as === void 0 ? 'div' : _props$as,
      className = props.className,
      _props$classPrefix = props.classPrefix,
      classPrefix = _props$classPrefix === void 0 ? 'calendar-table' : _props$classPrefix,
      _props$weekendDate = props.weekendDate,
      weekendDate = _props$weekendDate === void 0 ? new Date() : _props$weekendDate,
      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "weekendDate"]);

  var _useCalendarContext = useCalendarContext(),
      _useCalendarContext$d = _useCalendarContext.date,
      selected = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
      dateRange = _useCalendarContext.dateRange,
      disabledDate = _useCalendarContext.disabledDate,
      hoverRangeValue = _useCalendarContext.hoverRangeValue,
      inSameMonth = _useCalendarContext.inSameMonth,
      isoWeek = _useCalendarContext.isoWeek,
      onMouseMove = _useCalendarContext.onMouseMove,
      onSelect = _useCalendarContext.onSelect,
      renderCell = _useCalendarContext.renderCell,
      overrideLocale = _useCalendarContext.locale,
      showWeekNumbers = _useCalendarContext.showWeekNumbers;

  var _useCustom = useCustom('Calendar', overrideLocale),
      locale = _useCustom.locale,
      formatDate = _useCustom.formatDate;

  var _useClassNames = useClassNames(classPrefix),
      prefix = _useClassNames.prefix,
      merge = _useClassNames.merge;

  var handleSelect = useCallback(function (date, disabled, event) {
    if (disabled) {
      return;
    }

    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
  }, [onSelect]);

  var renderDays = function renderDays() {
    var formatStr = locale.formattedDayPattern;
    var days = [];

    var _ref = dateRange || [],
        selectedStartDate = _ref[0],
        selectedEndDate = _ref[1];

    var _ref2 = hoverRangeValue !== null && hoverRangeValue !== void 0 ? hoverRangeValue : [],
        hoverStartDate = _ref2[0],
        hoverEndDate = _ref2[1];

    var isRangeSelectionMode = typeof dateRange !== 'undefined';
    var todayDate = new Date();

    for (var i = 0; i < 7; i += 1) {
      var thisDate = DateUtils.addDays(weekendDate, i);
      var disabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(thisDate, dateRange, DATERANGE_DISABLED_TARGET.CALENDAR);
      var isToday = DateUtils.isSameDay(thisDate, todayDate);
      var unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));
      var isStartSelected = !unSameMonth && selectedStartDate && DateUtils.isSameDay(thisDate, selectedStartDate);
      var isEndSelected = !unSameMonth && selectedEndDate && DateUtils.isSameDay(thisDate, selectedEndDate);
      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : DateUtils.isSameDay(thisDate, selected);
      var inRange = false; // for Selected

      if (selectedStartDate && selectedEndDate) {
        if (DateUtils.isBefore(thisDate, selectedEndDate) && DateUtils.isAfter(thisDate, selectedStartDate)) {
          inRange = true;
        }

        if (DateUtils.isBefore(thisDate, selectedStartDate) && DateUtils.isAfter(thisDate, selectedEndDate)) {
          inRange = true;
        }
      } // for Hovering


      if (!isSelected && hoverStartDate && hoverEndDate) {
        if (!DateUtils.isAfter(thisDate, hoverEndDate) && !DateUtils.isBefore(thisDate, hoverStartDate)) {
          inRange = true;
        }

        if (!DateUtils.isAfter(thisDate, hoverStartDate) && !DateUtils.isBefore(thisDate, hoverEndDate)) {
          inRange = true;
        }
      }

      var _classes = prefix('cell', {
        'cell-un-same-month': unSameMonth,
        'cell-is-today': isToday,
        'cell-selected': isSelected,
        'cell-selected-start': isStartSelected,
        'cell-selected-end': isEndSelected,
        'cell-in-range': !unSameMonth && inRange,
        'cell-disabled': disabled
      });

      var title = formatDate ? formatDate(thisDate, formatStr) : DateUtils.format(thisDate, formatStr);
      days.push( /*#__PURE__*/React.createElement("div", {
        role: "gridcell",
        key: title,
        "aria-label": title,
        "aria-selected": isSelected || undefined,
        className: _classes
      }, /*#__PURE__*/React.createElement("div", {
        role: "button",
        className: prefix('cell-content'),
        tabIndex: -1,
        title: isToday ? title + " (" + (locale === null || locale === void 0 ? void 0 : locale.today) + ")" : title,
        onMouseEnter: !disabled && onMouseMove ? onMouseMove.bind(null, thisDate) : undefined,
        onClick: partial(handleSelect, thisDate, disabled)
      }, /*#__PURE__*/React.createElement("span", {
        className: prefix('cell-day')
      }, DateUtils.getDate(thisDate)), renderCell && renderCell(thisDate))));
    }

    return days;
  };

  var classes = merge(className, prefix('row'));
  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
    ref: ref,
    role: "row",
    className: classes
  }), showWeekNumbers && /*#__PURE__*/React.createElement("div", {
    className: prefix('cell-week-number'),
    role: "rowheader"
  }, DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
});
TableRow.displayName = 'TableRow';
TableRow.propTypes = {
  weekendDate: PropTypes.instanceOf(Date),
  className: PropTypes.string,
  classPrefix: PropTypes.string
};
export default TableRow;