rsuite/cjs/Calendar/TableRow.js

A suite of react components

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _partial = _interopRequireDefault(require("lodash/partial"));

var _utils = require("../utils");

var _CalendarContext = require("./CalendarContext");

var TableRow = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "weekendDate"]);

  var _useCalendarContext = (0, _CalendarContext.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 = (0, _utils.useCustom)('Calendar', overrideLocale),
      locale = _useCustom.locale,
      formatDate = _useCustom.formatDate;

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

  var handleSelect = (0, _react.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 = _utils.DateUtils.addDays(weekendDate, i);

      var disabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(thisDate, dateRange, _utils.DATERANGE_DISABLED_TARGET.CALENDAR);

      var isToday = _utils.DateUtils.isSameDay(thisDate, todayDate);

      var unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));

      var isStartSelected = !unSameMonth && selectedStartDate && _utils.DateUtils.isSameDay(thisDate, selectedStartDate);

      var isEndSelected = !unSameMonth && selectedEndDate && _utils.DateUtils.isSameDay(thisDate, selectedEndDate);

      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.DateUtils.isSameDay(thisDate, selected);
      var inRange = false; // for Selected

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

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


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

        if (!_utils.DateUtils.isAfter(thisDate, hoverStartDate) && !_utils.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) : _utils.DateUtils.format(thisDate, formatStr);
      days.push( /*#__PURE__*/_react.default.createElement("div", {
        role: "gridcell",
        key: title,
        "aria-label": title,
        "aria-selected": isSelected || undefined,
        className: _classes
      }, /*#__PURE__*/_react.default.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: (0, _partial.default)(handleSelect, thisDate, disabled)
      }, /*#__PURE__*/_react.default.createElement("span", {
        className: prefix('cell-day')
      }, _utils.DateUtils.getDate(thisDate)), renderCell && renderCell(thisDate))));
    }

    return days;
  };

  var classes = merge(className, prefix('row'));
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
    ref: ref,
    role: "row",
    className: classes
  }), showWeekNumbers && /*#__PURE__*/_react.default.createElement("div", {
    className: prefix('cell-week-number'),
    role: "rowheader"
  }, _utils.DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
});

TableRow.displayName = 'TableRow';
TableRow.propTypes = {
  weekendDate: _propTypes.default.instanceOf(Date),
  className: _propTypes.default.string,
  classPrefix: _propTypes.default.string
};
var _default = TableRow;
exports.default = _default;