@renderlesskit/react/dist/cjs/calendar/CalendarCellButton.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useCalendarCellButton = exports.CalendarCellButton = void 0;

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

var _reakit = require("reakit");

var _reakitUtils = require("reakit-utils");

var _utils = require("@chakra-ui/utils");

var _i18n = require("@react-aria/i18n");

var _system = require("../system");

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

var _keys = require("./__keys");

var _excluded = ["onFocus", "onClick", "ref"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var useCalendarCellButton = (0, _system.createHook)({
  name: "CalendarCellButton",
  compose: _reakit.useButton,
  keys: _keys.CALENDAR_CELL_BUTTON_KEYS,
  useOptions: function useOptions(options, _ref) {
    var disabled = _ref.disabled;
    var isDisabledOption = options.isDisabled,
        date = options.date,
        month = options.month,
        isInvalidDateRange = options.isInvalidDateRange;
    var isCurrentMonth = date.getMonth() === month;
    var isDisabled = isDisabledOption || !isCurrentMonth || isInvalidDateRange(date);
    var truelyDisabled = disabled || isDisabled;
    return _objectSpread({
      disabled: truelyDisabled
    }, options);
  },
  useProps: function useProps(options, _ref2) {
    var htmlOnFocus = _ref2.onFocus,
        htmlOnClick = _ref2.onClick,
        htmlRef = _ref2.ref,
        htmlProps = _objectWithoutProperties(_ref2, _excluded);

    var date = options.date,
        disabled = options.disabled,
        dateValue = options.dateValue,
        selectDate = options.selectDate,
        anchorDate = options.anchorDate,
        focusedDate = options.focusedDate,
        isDisabled = options.isDisabled,
        setFocusedDate = options.setFocusedDate,
        isFocusedOption = options.isFocused;
    var ref = React.useRef(null);
    var isSelected = dateValue ? (0, _utils2.isSameDay)(date, dateValue) : false;
    var isFocused = isFocusedOption && focusedDate && (0, _utils2.isSameDay)(date, focusedDate);
    var isToday = (0, _utils2.isSameDay)(date, new Date()); // Focus the button in the DOM when the state updates.

    React.useEffect(function () {
      if (isFocused && ref.current) {
        (0, _reakitUtils.ensureFocus)(ref.current);
      }
    }, [date, focusedDate, isFocused, ref]);
    var onClick = React.useCallback(function () {
      if (disabled) return;
      selectDate(date);
      setFocusedDate(date);
    }, [date, disabled, selectDate, setFocusedDate]);
    var onFocus = React.useCallback(function () {
      if (disabled) return;
      setFocusedDate(date);
    }, [date, disabled, setFocusedDate]);
    var dateFormatter = (0, _i18n.useDateFormatter)({
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric"
    }); // aria-label should be localize Day of week, Month, Day and Year without Time.

    function getAriaLabel() {
      var ariaLabel = dateFormatter.format(date);
      var isTodayLabel = isToday ? "Today, " : "";
      var isSelctedLabel = isSelected ? " selected" : "";
      ariaLabel = "".concat(isTodayLabel).concat(ariaLabel).concat(isSelctedLabel); // When a cell is focused and this is a range calendar, add a prompt to help
      // screenreader users know that they are in a range selection mode.

      if (options.isRangeCalendar && isFocused && !isDisabled) {
        var rangeSelectionPrompt = ""; // If selection has started add "click to finish selecting range"

        if (anchorDate) {
          rangeSelectionPrompt = "click to finish selecting range"; // Otherwise, add "click to start selecting range" prompt
        } else {
          rangeSelectionPrompt = "click to start selecting range";
        } // Append to aria-label


        if (rangeSelectionPrompt) {
          ariaLabel = "".concat(ariaLabel, " (").concat(rangeSelectionPrompt, ")");
        }
      }

      return ariaLabel;
    }

    return _objectSpread({
      children: (0, _i18n.useDateFormatter)({
        day: "numeric"
      }).format(date),
      "aria-label": getAriaLabel(),
      tabIndex: !disabled ? (0, _utils2.isSameDay)(date, focusedDate) ? 0 : -1 : undefined,
      ref: (0, _reakitUtils.useForkRef)(ref, htmlRef),
      onClick: (0, _utils.callAllHandlers)(htmlOnClick, onClick),
      onFocus: (0, _utils.callAllHandlers)(htmlOnFocus, onFocus)
    }, htmlProps);
  }
});
exports.useCalendarCellButton = useCalendarCellButton;
var CalendarCellButton = (0, _system.createComponent)({
  as: "span",
  memo: true,
  useHook: useCalendarCellButton
});
exports.CalendarCellButton = CalendarCellButton;
//# sourceMappingURL=CalendarCellButton.js.map