suomifi-ui-components/dist/esm/core/Form/DateInput/DatePicker/MonthDay/MonthDay.js

Suomi.fi UI component library

import { __rest, __assign, __makeTemplateObject } from 'tslib';
import React from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import { SuomifiThemeConsumer } from '../../../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../../../theme/SuomifiTheme/SuomifiTheme.js';
import '../../../../theme/SpacingProvider/SpacingProvider.js';
import '../../../../../reset/HtmlA/HtmlA.js';
import { HtmlButton } from '../../../../../reset/HtmlButton/HtmlButton.js';
import { HtmlDiv } from '../../../../../reset/HtmlDiv/HtmlDiv.js';
import '../../../../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../../../../reset/HtmlH/HtmlH.js';
import '../../../../../reset/HtmlInput/HtmlInput.js';
import '../../../../../reset/HtmlLabel/HtmlLabel.js';
import '../../../../../reset/HtmlLegend/HtmlLegend.js';
import '../../../../../reset/HtmlLi/HtmlLi.js';
import '../../../../../reset/HtmlNav/HtmlNav.js';
import '../../../../../reset/HtmlOl/HtmlOl.js';
import '../../../../../reset/HtmlSpan/HtmlSpan.js';
import '../../../../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../../../../reset/HtmlUl/HtmlUl.js';
import '../../../../../reset/HtmlTable/HtmlTable.js';
import '../../../../../reset/HtmlTable/HtmlTableCaption.js';
import '../../../../../reset/HtmlTable/HtmlTableHeader.js';
import '../../../../../reset/HtmlTable/HtmlTableRow.js';
import '../../../../../reset/HtmlTable/HtmlTableBody.js';
import '../../../../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../../../../reset/HtmlTable/HtmlTableCell.js';
import { baseStyles } from './MonthDay.baseStyles.js';
import { cellDateAriaLabel, daysMatch } from '../../dateUtils.js';

var baseClassName = 'fi-month-day';
var monthDayClassNames = {
  baseClassName: baseClassName,
  cellDisabled: "".concat(baseClassName, "--disabled"),
  cellCurrent: "".concat(baseClassName, "_current"),
  button: "".concat(baseClassName, "_button"),
  buttonDisabled: "".concat(baseClassName, "_button--disabled"),
  buttonSelected: "".concat(baseClassName, "_button--selected"),
  buttonCurrent: "".concat(baseClassName, "_button_current")
};
var BaseMonthDay = function BaseMonthDay(props) {
  var _a, _b, _c;
  var date = props.date,
    className = props.className,
    onSelect = props.onSelect,
    onKeyDown = props.onKeyDown,
    shouldDisableDate = props.shouldDisableDate,
    dayButtonRef = props.dayButtonRef,
    focusableDate = props.focusableDate,
    focusedDate = props.focusedDate,
    selectedDate = props.selectedDate,
    texts = props.texts;
  var isSelectedDate = function isSelectedDate() {
    return !!selectedDate && daysMatch(selectedDate, date.date);
  };
  var isFocusedDate = function isFocusedDate() {
    return !!focusedDate && daysMatch(focusedDate, date.date);
  };
  var isFocusableDate = function isFocusableDate() {
    return daysMatch(focusableDate, date.date);
  };
  var isDisabledByFn = function isDisabledByFn() {
    return shouldDisableDate ? shouldDisableDate(date.date) : false;
  };
  return /*#__PURE__*/React.createElement("td", {
    key: date.date.toString(),
    className: classnames(className, baseClassName, (_a = {}, _a[monthDayClassNames.cellDisabled] = date.disabled, _a))
  }, date.disabled ? date.current ? ( /*#__PURE__*/React.createElement(HtmlDiv, {
    className: monthDayClassNames.cellCurrent
  }, date.number)) : date.number : ( /*#__PURE__*/React.createElement(HtmlButton, __assign({
    onClick: function onClick() {
      return isDisabledByFn() ? undefined : onSelect(date.date);
    },
    onKeyDown: onKeyDown,
    tabIndex: isFocusableDate() ? undefined : -1,
    forwardedRef: isFocusedDate() ? dayButtonRef : undefined,
    "aria-current": date.current ? 'date' : undefined,
    "aria-label": isSelectedDate() ? "".concat(cellDateAriaLabel(date.date, texts), " ").concat(texts.selectedDateLabel) : "".concat(cellDateAriaLabel(date.date, texts))
  }, isDisabledByFn() ? {
    'aria-disabled': true
  } : {}, {
    className: classnames(monthDayClassNames.button, (_b = {}, _b[monthDayClassNames.buttonSelected] = isSelectedDate(), _b[monthDayClassNames.buttonDisabled] = isDisabledByFn(), _b))
  }), date.current ? ( /*#__PURE__*/React.createElement(HtmlDiv, {
    className: classnames((_c = {}, _c[monthDayClassNames.buttonCurrent] = date.current, _c))
  }, /*#__PURE__*/React.createElement("span", {
    "aria-hidden": true
  }, date.number))) : ( /*#__PURE__*/React.createElement("span", {
    "aria-hidden": true
  }, date.number)))));
};
var StyledMonthDay = styled(function (_a) {
  _a.theme;
    var passProps = __rest(_a, ["theme"]);
  return /*#__PURE__*/React.createElement(BaseMonthDay, __assign({}, passProps));
}).withConfig({
  componentId: "sc-19vqvdr-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var theme = _a.theme;
  return baseStyles(theme);
});
var MonthDay = function MonthDay(props) {
  return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
    var suomifiTheme = _a.suomifiTheme;
    return /*#__PURE__*/React.createElement(StyledMonthDay, __assign({
      theme: suomifiTheme
    }, props));
  });
};
MonthDay.displayName = 'MonthDay';
var templateObject_1;

export { BaseMonthDay, MonthDay, monthDayClassNames };
//# sourceMappingURL=MonthDay.js.map