suomifi-ui-components
Version:
Suomi.fi UI component library
83 lines (80 loc) • 3.31 kB
JavaScript
import { __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { useEffect } 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 { weekRows } from '../../dateUtils.js';
import { MonthDay } from '../MonthDay/MonthDay.js';
import { baseStyles } from './MonthTable.baseStyles.js';
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;
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.createElement("table", {
className: classnames(className, baseClassName),
role: "presentation"
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, texts.weekDayAbbreviations.map(function (day, index) {
return /*#__PURE__*/React.createElement("td", {
key: "".concat(day).concat(index),
className: monthTableClassNames.cell
}, day);
}))), /*#__PURE__*/React.createElement("tbody", null, weekRows(focusableDate, minDate, maxDate).map(function (weekRow) {
return /*#__PURE__*/React.createElement("tr", {
key: weekRow[0].date.toString()
}, weekRow.map(function (date) {
return /*#__PURE__*/React.createElement(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(function (_a) {
_a.theme;
var passProps = __rest(_a, ["theme"]);
return /*#__PURE__*/React.createElement(BaseMonthTable, __assign({}, passProps));
}).withConfig({
componentId: "sc-oln4ek-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme;
return baseStyles(theme);
});
var MonthTable = function MonthTable(props) {
return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React.createElement(StyledMonthTable, __assign({
theme: suomifiTheme
}, props));
});
};
MonthTable.displayName = 'MonthTable';
var templateObject_1;
export { BaseMonthTable, MonthTable, monthTableClassNames };
//# sourceMappingURL=MonthTable.js.map