@talend/react-components
Version:
Set of react components.
172 lines (171 loc) • 6.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _format = require("date-fns/format");
var _getDate = require("date-fns/getDate");
var _getMonth = require("date-fns/getMonth");
var _getYear = require("date-fns/getYear");
var _isSameDay = require("date-fns/isSameDay");
var _isToday = require("date-fns/isToday");
var _setMonth = require("date-fns/setMonth");
var _startOfMonth = require("date-fns/startOfMonth");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactA11y = require("@talend/react-a11y");
var _translate = _interopRequireDefault(require("../../../../translate"));
var _generator = require("../../generator");
var _DatePickerModule = _interopRequireDefault(require("./DatePicker.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const getDayNames = (0, _lodash.memoize)(_generator.buildDayNames);
class DatePicker extends _react.PureComponent {
constructor(props) {
super(props);
this.getWeeks = (0, _lodash.memoize)(_generator.buildWeeks, (year, monthIndex, firstDayOfWeek) => `${year}-${monthIndex}|${firstDayOfWeek}`);
}
isSelectedDate(date) {
return this.props.selectedDate !== undefined && (0, _isSameDay.isSameDay)(this.props.selectedDate, date);
}
isDisabledDate(date) {
if (!this.props.isDisabledChecker) {
return false;
}
return this.props.isDisabledChecker(date);
}
isCurrentMonth(date) {
return (0, _getMonth.getMonth)(date) === this.props.calendar.monthIndex;
}
isCurrentYear(date) {
return (0, _getYear.getYear)(date) === this.props.calendar.year;
}
isSelectedInCurrentCalendar() {
const {
selectedDate
} = this.props;
if (!selectedDate) {
return false;
}
return this.isCurrentYear(selectedDate) && this.isCurrentMonth(selectedDate);
}
selectDate(event, date, year, monthIndex) {
if (!this.isCurrentMonth(date)) {
if (date < (0, _startOfMonth.startOfMonth)(new Date(year, monthIndex))) {
this.props.goToPreviousMonth();
} else {
this.props.goToNextMonth();
}
}
this.props.onSelect(event, date);
}
render() {
const {
calendar,
t
} = this.props;
const {
year,
monthIndex
} = calendar;
const pickerLocale = (0, _generator.getPickerLocale)(t);
const weeks = this.getWeeks(year, monthIndex, 1);
const dayNames = getDayNames(undefined, this.props.t);
const selectedInCurrentCalendar = this.isSelectedInCurrentCalendar();
const monthStr = (0, _format.format)((0, _setMonth.setMonth)(new Date(0), monthIndex), 'MMMM', pickerLocale);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
className: _DatePickerModule.default.container,
ref: ref => {
this.calendarRef = ref;
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("caption", {
className: "sr-only",
children: `${monthStr} ${year}`
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
className: _DatePickerModule.default['calendar-header'],
children: dayNames.map((dayName, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
scope: "col",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("abbr", {
title: dayName.full,
children: dayName.abbr
}, i)
}, i))
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
children: weeks.map((week, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
className: (0, _classnames.default)(_DatePickerModule.default['calendar-row'], 'tc-date-picker-calendar-row'),
children: week.map((date, j) => {
const day = (0, _getDate.getDate)(date);
const disabled = this.isDisabledDate(date);
const selected = this.isSelectedDate(date);
const today = (0, _isToday.isToday)(date);
const shouldBeFocussable = selectedInCurrentCalendar && selected || !selectedInCurrentCalendar && day === 1;
const className = (0, _classnames.default)(_DatePickerModule.default['calendar-day'], {
[_DatePickerModule.default.selected]: selected,
[_DatePickerModule.default.today]: today,
[_DatePickerModule.default['not-current-month']]: !this.isCurrentMonth(date)
}, 'tc-date-picker-day', 'btn-tertiary', 'btn-default');
let ariaLabel = (0, _format.format)(date, 'EEEE dd MMMM yyyy', pickerLocale);
const tdProps = {
key: j,
className: _DatePickerModule.default['calendar-col']
};
if (selected) {
tdProps['aria-current'] = 'date';
ariaLabel = t('DATEPICKER_DAY_SELECTED', {
defaultValue: '{{date}}, selected',
date: ariaLabel
});
}
if (today) {
ariaLabel = t('DATEPICKER_DAY_TODAY', {
defaultValue: 'Today, {{date}}',
date: ariaLabel
});
}
const buttonProps = this.isCurrentMonth(date) ? {
'data-value': day
} : undefined;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
...tdProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
type: "button",
className: className,
onClick: event => this.selectDate(event, date, year, monthIndex),
disabled: disabled,
tabIndex: this.props.allowFocus && shouldBeFocussable ? 0 : -1,
onKeyDown: event => this.props.onKeyDown(event, this.calendarRef, day - 1),
"aria-label": ariaLabel,
...buttonProps,
children: day
})
});
})
}, i))
})]
});
}
}
DatePicker.displayName = 'DatePicker';
DatePicker.propTypes = {
allowFocus: _propTypes.default.bool,
calendar: _propTypes.default.shape({
monthIndex: _propTypes.default.number.isRequired,
year: _propTypes.default.number.isRequired
}).isRequired,
onSelect: _propTypes.default.func.isRequired,
selectedDate: _propTypes.default.instanceOf(Date),
isDisabledChecker: _propTypes.default.func,
onKeyDown: _propTypes.default.func.isRequired,
t: _propTypes.default.func,
goToPreviousMonth: _propTypes.default.func.isRequired,
goToNextMonth: _propTypes.default.func.isRequired
};
DatePicker.defaultProps = {
t: (0, _translate.default)()
};
var _default = exports.default = _reactA11y.Gesture.withCalendarGesture(DatePicker);
//# sourceMappingURL=DatePicker.component.js.map