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

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var SuomifiThemeProvider = require('../../../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../../../theme/SuomifiTheme/SuomifiTheme.js');
require('../../../../theme/SpacingProvider/SpacingProvider.js');
require('../../../../../reset/HtmlA/HtmlA.js');
var HtmlButton = require('../../../../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../../../../reset/HtmlDiv/HtmlDiv.js');
require('../../../../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../../../../reset/HtmlH/HtmlH.js');
require('../../../../../reset/HtmlInput/HtmlInput.js');
require('../../../../../reset/HtmlLabel/HtmlLabel.js');
require('../../../../../reset/HtmlLegend/HtmlLegend.js');
require('../../../../../reset/HtmlLi/HtmlLi.js');
require('../../../../../reset/HtmlNav/HtmlNav.js');
require('../../../../../reset/HtmlOl/HtmlOl.js');
require('../../../../../reset/HtmlSpan/HtmlSpan.js');
require('../../../../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../../../../reset/HtmlUl/HtmlUl.js');
require('../../../../../reset/HtmlTable/HtmlTable.js');
require('../../../../../reset/HtmlTable/HtmlTableCaption.js');
require('../../../../../reset/HtmlTable/HtmlTableHeader.js');
require('../../../../../reset/HtmlTable/HtmlTableRow.js');
require('../../../../../reset/HtmlTable/HtmlTableBody.js');
require('../../../../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../../../../reset/HtmlTable/HtmlTableCell.js');
var MonthDay_baseStyles = require('./MonthDay.baseStyles.js');
var dateUtils = require('../../dateUtils.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

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 && dateUtils.daysMatch(selectedDate, date.date);
  };
  var isFocusedDate = function isFocusedDate() {
    return !!focusedDate && dateUtils.daysMatch(focusedDate, date.date);
  };
  var isFocusableDate = function isFocusableDate() {
    return dateUtils.daysMatch(focusableDate, date.date);
  };
  var isDisabledByFn = function isDisabledByFn() {
    return shouldDisableDate ? shouldDisableDate(date.date) : false;
  };
  return /*#__PURE__*/React__default.default.createElement("td", {
    key: date.date.toString(),
    className: classnames__default.default(className, baseClassName, (_a = {}, _a[monthDayClassNames.cellDisabled] = date.disabled, _a))
  }, date.disabled ? date.current ? ( /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
    className: monthDayClassNames.cellCurrent
  }, date.number)) : date.number : ( /*#__PURE__*/React__default.default.createElement(HtmlButton.HtmlButton, tslib.__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(dateUtils.cellDateAriaLabel(date.date, texts), " ").concat(texts.selectedDateLabel) : "".concat(dateUtils.cellDateAriaLabel(date.date, texts))
  }, isDisabledByFn() ? {
    'aria-disabled': true
  } : {}, {
    className: classnames__default.default(monthDayClassNames.button, (_b = {}, _b[monthDayClassNames.buttonSelected] = isSelectedDate(), _b[monthDayClassNames.buttonDisabled] = isDisabledByFn(), _b))
  }), date.current ? ( /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
    className: classnames__default.default((_c = {}, _c[monthDayClassNames.buttonCurrent] = date.current, _c))
  }, /*#__PURE__*/React__default.default.createElement("span", {
    "aria-hidden": true
  }, date.number))) : ( /*#__PURE__*/React__default.default.createElement("span", {
    "aria-hidden": true
  }, date.number)))));
};
var StyledMonthDay = styled.styled(function (_a) {
  _a.theme;
    var passProps = tslib.__rest(_a, ["theme"]);
  return /*#__PURE__*/React__default.default.createElement(BaseMonthDay, tslib.__assign({}, passProps));
}).withConfig({
  componentId: "sc-19vqvdr-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var theme = _a.theme;
  return MonthDay_baseStyles.baseStyles(theme);
});
var MonthDay = function MonthDay(props) {
  return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
    var suomifiTheme = _a.suomifiTheme;
    return /*#__PURE__*/React__default.default.createElement(StyledMonthDay, tslib.__assign({
      theme: suomifiTheme
    }, props));
  });
};
MonthDay.displayName = 'MonthDay';
var templateObject_1;

exports.BaseMonthDay = BaseMonthDay;
exports.MonthDay = MonthDay;
exports.monthDayClassNames = monthDayClassNames;
//# sourceMappingURL=MonthDay.js.map