@talend/react-components/lib/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _generator = require("../../generator");
var _MonthPickerModule = _interopRequireDefault(require("./MonthPicker.module.scss"));
var _reactA11y = require("@talend/react-a11y");
var _translate = _interopRequireDefault(require("../../../../translate"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ROW_SIZE = 3;
class MonthPicker extends _react.PureComponent {
  constructor(props) {
    super(props);
    this.months = (0, _generator.buildMonths)(ROW_SIZE, props.t);
  }
  render() {
    const {
      t,
      selectedYear
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
      className: _MonthPickerModule.default.container,
      ref: ref => {
        this.monthPickerRef = ref;
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("caption", {
        className: "sr-only",
        children: t('DATEPICKER_MONTHS_TITLE', {
          defaultValue: 'Year {{year}}',
          year: selectedYear
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
        children: this.months.map((monthsRow, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
          className: _MonthPickerModule.default['calendar-row'],
          children: monthsRow.map(({
            index,
            name
          }) => {
            const isSelected = index === this.props.selectedMonthIndex;
            const className = (0, _classnames.default)(_MonthPickerModule.default['calendar-month'], {
              [_MonthPickerModule.default.selected]: isSelected
            }, 'tc-date-picker-month');
            let ariaLabel = `${name} ${selectedYear}`;
            const tdProps = {
              key: index,
              className: _MonthPickerModule.default['calendar-col']
            };
            if (isSelected) {
              tdProps['aria-current'] = 'date';
              ariaLabel = t('DATEPICKER_SELECTED_MONTH', {
                defaultValue: '{{monthYear}}, selected',
                monthYear: ariaLabel
              });
            }
            return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
              ...tdProps,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
                "data-value": index,
                type: "button",
                className: className,
                onClick: event => {
                  this.props.onSelect(event, index);
                },
                tabIndex: this.props.allowFocus && isSelected ? 0 : -1,
                onKeyDown: event => this.props.onKeyDown(event, this.monthPickerRef, index),
                "aria-label": ariaLabel,
                children: name
              })
            }, index);
          })
        }, i))
      })]
    });
  }
}
MonthPicker.displayName = 'MonthPicker';
MonthPicker.propTypes = {
  allowFocus: _propTypes.default.bool,
  onKeyDown: _propTypes.default.func.isRequired,
  onSelect: _propTypes.default.func.isRequired,
  selectedMonthIndex: _propTypes.default.number,
  selectedYear: _propTypes.default.number,
  t: _propTypes.default.func
};
MonthPicker.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = _reactA11y.Gesture.withMonthCalendarGesture(MonthPicker, ROW_SIZE);
//# sourceMappingURL=MonthPicker.component.js.map