pouncejs/dist/cjs/components/DateInput/Day.js

A collection of UI components from Panther labs

"use strict";

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

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

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

var _Box = _interopRequireDefault(require("../Box"));

var _AbstractButton = _interopRequireDefault(require("../AbstractButton"));

var _Cell = _interopRequireDefault(require("./Cell"));

var _helpers = require("../../utils/helpers");

var Day = function Day(_ref) {
  var day = _ref.day,
      month = _ref.month,
      year = _ref.year,
      isLastRow = _ref.isLastRow,
      daysSelected = _ref.daysSelected,
      _ref$timezone = _ref.timezone,
      timezone = _ref$timezone === void 0 ? 'local' : _ref$timezone,
      _ref$onDaySelect = _ref.onDaySelect,
      onDaySelect = _ref$onDaySelect === void 0 ? _helpers.noop : _ref$onDaySelect;

  if (!day) {
    return isLastRow ? null : /*#__PURE__*/_react.default.createElement(_Cell.default, {
      display: "table-cell",
      verticalAlign: "middle",
      textAlign: "center",
      cursor: "pointer",
      position: "relative",
      "aria-disabled": "true"
    });
  }

  var date = _react.default.useMemo(function () {
    return (0, _helpers.now)(timezone).month(month).date(day).year(year);
  }, [year, day, month]);

  var onDaySelectClick = _react.default.useCallback(function (e) {
    e.preventDefault();
    onDaySelect(date);
  }, [date, onDaySelect]);

  var isSelected = _react.default.useMemo(function () {
    if (!daysSelected) {
      return false;
    }

    if (!date) {
      return false;
    }

    var start = daysSelected[0],
        end = daysSelected[1];
    return !!(start && date.isSame(start, 'date') || end && date.isSame(end, 'date'));
  }, [date, daysSelected]);

  var isWithinRange = _react.default.useMemo(function () {
    if (!daysSelected) {
      return false;
    }

    var start = daysSelected[0],
        end = daysSelected[1];
    return !!(start && end && date.isAfter(start, 'date') && date.isBefore(end, 'date'));
  }, [date, daysSelected]);

  return /*#__PURE__*/_react.default.createElement(_Cell.default, {
    display: "table-cell",
    verticalAlign: "middle",
    textAlign: "center",
    cursor: "pointer",
    position: "relative",
    "aria-label": date.format('dd MMM DD YYYY'),
    role: "gridcell",
    "aria-busy": isWithinRange,
    "aria-selected": isSelected
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    "aria-placeholder": "true",
    tabIndex: -1,
    pointerEvents: "none"
  }), /*#__PURE__*/_react.default.createElement(_AbstractButton.default, {
    padding: 2,
    borderRadius: "circle",
    position: "relative",
    zIndex: 2,
    onClick: onDaySelectClick // @ts-ignore
    ,
    "aria-relevant": true,
    width: "37px",
    height: "37px"
  }, day));
};

var _default = /*#__PURE__*/_react.default.memo(Day);

exports.default = _default;