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

A collection of UI components from Panther labs

import React from 'react';
import Box from '../Box';
import AbstractButton from '../AbstractButton';
import Cell from './Cell';
import { noop, now } from '../../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 ? noop : _ref$onDaySelect;

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

  var date = React.useMemo(function () {
    return now(timezone).month(month).date(day).year(year);
  }, [year, day, month]);
  var onDaySelectClick = React.useCallback(function (e) {
    e.preventDefault();
    onDaySelect(date);
  }, [date, onDaySelect]);
  var isSelected = React.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.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.createElement(Cell, {
    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.createElement(Box, {
    "aria-placeholder": "true",
    tabIndex: -1,
    pointerEvents: "none"
  }), /*#__PURE__*/React.createElement(AbstractButton, {
    padding: 2,
    borderRadius: "circle",
    position: "relative",
    zIndex: 2,
    onClick: onDaySelectClick // @ts-ignore
    ,
    "aria-relevant": true,
    width: "37px",
    height: "37px"
  }, day));
};

export default /*#__PURE__*/React.memo(Day);