@talend/react-components
Version:
Set of react components.
88 lines • 2.97 kB
JavaScript
import { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { buildMonths } from '../../generator';
import theme from './MonthPicker.module.scss';
import { Gesture } from '@talend/react-a11y';
import getDefaultT from '../../../../translate';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ROW_SIZE = 3;
class MonthPicker extends PureComponent {
constructor(props) {
super(props);
this.months = buildMonths(ROW_SIZE, props.t);
}
render() {
const {
t,
selectedYear
} = this.props;
return /*#__PURE__*/_jsxs("table", {
className: theme.container,
ref: ref => {
this.monthPickerRef = ref;
},
children: [/*#__PURE__*/_jsx("caption", {
className: "sr-only",
children: t('DATEPICKER_MONTHS_TITLE', {
defaultValue: 'Year {{year}}',
year: selectedYear
})
}), /*#__PURE__*/_jsx("tbody", {
children: this.months.map((monthsRow, i) => /*#__PURE__*/_jsx("tr", {
className: theme['calendar-row'],
children: monthsRow.map(({
index,
name
}) => {
const isSelected = index === this.props.selectedMonthIndex;
const className = classNames(theme['calendar-month'], {
[theme.selected]: isSelected
}, 'tc-date-picker-month');
let ariaLabel = `${name} ${selectedYear}`;
const tdProps = {
key: index,
className: theme['calendar-col']
};
if (isSelected) {
tdProps['aria-current'] = 'date';
ariaLabel = t('DATEPICKER_SELECTED_MONTH', {
defaultValue: '{{monthYear}}, selected',
monthYear: ariaLabel
});
}
return /*#__PURE__*/_jsx("td", {
...tdProps,
children: /*#__PURE__*/_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.bool,
onKeyDown: PropTypes.func.isRequired,
onSelect: PropTypes.func.isRequired,
selectedMonthIndex: PropTypes.number,
selectedYear: PropTypes.number,
t: PropTypes.func
};
MonthPicker.defaultProps = {
t: getDefaultT()
};
export default Gesture.withMonthCalendarGesture(MonthPicker, ROW_SIZE);
//# sourceMappingURL=MonthPicker.component.js.map