suomifi-ui-components/dist/cjs/core/Form/DateInput/DatePicker/MonthTable/MonthTable.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');
var dateUtils = require('../../dateUtils.js');
var MonthDay = require('../MonthDay/MonthDay.js');
var MonthTable_baseStyles = require('./MonthTable.baseStyles.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-table';
var monthTableClassNames = {
  baseClassName: baseClassName,
  cell: "".concat(baseClassName, "_thead-cell")
};
var BaseMonthTable = function BaseMonthTable(props) {
  var className = props.className,
    onSelect = props.onSelect,
    onKeyDown = props.onKeyDown,
    shouldDisableDate = props.shouldDisableDate,
    dayButtonRef = props.dayButtonRef,
    focusableDate = props.focusableDate,
    focusedDate = props.focusedDate,
    selectedDate = props.selectedDate,
    minDate = props.minDate,
    maxDate = props.maxDate,
    texts = props.texts;
  React.useEffect(function () {
    var _a;
    (_a = dayButtonRef === null || dayButtonRef === void 0 ? void 0 : dayButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
  }, [focusedDate]);
  return /*#__PURE__*/React__default.default.createElement("table", {
    className: classnames__default.default(className, baseClassName),
    role: "presentation"
  }, /*#__PURE__*/React__default.default.createElement("thead", null, /*#__PURE__*/React__default.default.createElement("tr", null, texts.weekDayAbbreviations.map(function (day, index) {
    return /*#__PURE__*/React__default.default.createElement("td", {
      key: "".concat(day).concat(index),
      className: monthTableClassNames.cell
    }, day);
  }))), /*#__PURE__*/React__default.default.createElement("tbody", null, dateUtils.weekRows(focusableDate, minDate, maxDate).map(function (weekRow) {
    return /*#__PURE__*/React__default.default.createElement("tr", {
      key: weekRow[0].date.toString()
    }, weekRow.map(function (date) {
      return /*#__PURE__*/React__default.default.createElement(MonthDay.MonthDay, {
        key: date.date.toString(),
        date: date,
        focusableDate: focusableDate,
        focusedDate: focusedDate,
        selectedDate: selectedDate,
        dayButtonRef: dayButtonRef,
        onSelect: onSelect,
        onKeyDown: onKeyDown,
        shouldDisableDate: shouldDisableDate,
        texts: texts
      });
    }));
  })));
};
var StyledMonthTable = styled.styled(function (_a) {
  _a.theme;
    var passProps = tslib.__rest(_a, ["theme"]);
  return /*#__PURE__*/React__default.default.createElement(BaseMonthTable, tslib.__assign({}, passProps));
}).withConfig({
  componentId: "sc-oln4ek-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var theme = _a.theme;
  return MonthTable_baseStyles.baseStyles(theme);
});
var MonthTable = function MonthTable(props) {
  return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
    var suomifiTheme = _a.suomifiTheme;
    return /*#__PURE__*/React__default.default.createElement(StyledMonthTable, tslib.__assign({
      theme: suomifiTheme
    }, props));
  });
};
MonthTable.displayName = 'MonthTable';
var templateObject_1;

exports.BaseMonthTable = BaseMonthTable;
exports.MonthTable = MonthTable;
exports.monthTableClassNames = monthTableClassNames;
//# sourceMappingURL=MonthTable.js.map