@talend/react-components
Version:
Set of react components.
151 lines (149 loc) • 6.12 kB
JavaScript
"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 _Actions = require("../../../Actions");
var _generator = require("../../generator");
var _reactA11y = require("@talend/react-a11y");
var _translate = _interopRequireDefault(require("../../../translate"));
var _YearPickerModule = _interopRequireDefault(require("./YearPicker.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const YEAR_WINDOW_SIZE = 7;
const YEAR_WINDOW_OVERFLOW_SIZE = 3;
class YearPicker extends _react.Component {
constructor(props) {
super(props);
this.onWheel = this.onWheel.bind(this);
this.scrollUp = this.scroll.bind(this, -1, null);
this.scrollDown = this.scroll.bind(this, 1, null);
this.goToPreviousPage = this.scroll.bind(this, -YEAR_WINDOW_SIZE);
this.goToNextPage = this.scroll.bind(this, YEAR_WINDOW_SIZE);
this.state = {
yearsWindow: (0, _generator.buildYears)(props.selectedYear, YEAR_WINDOW_OVERFLOW_SIZE)
};
}
componentDidUpdate(prevProps) {
const oldSelectedYear = prevProps.selectedYear;
const newSelectedYear = this.props.selectedYear;
if (newSelectedYear && newSelectedYear !== oldSelectedYear && !this.state.yearsWindow.includes(newSelectedYear)) {
this.setState({
yearsWindow: (0, _generator.buildYears)(newSelectedYear, YEAR_WINDOW_OVERFLOW_SIZE)
});
}
}
onWheel(event) {
event.preventDefault();
// Magical calculation to simulate a cool scroll, sorry for that
const {
deltaY
} = event;
const absolutePace = Math.round(Math.log(Math.abs(deltaY)));
let pace = deltaY > 0 ? 1 : -1; // init with the sign
if (absolutePace >= 5) {
pace *= Math.floor(absolutePace / 2);
}
this.scroll(pace);
}
getMiddleYear() {
const {
yearsWindow
} = this.state;
return yearsWindow[Math.floor(yearsWindow.length / 2)];
}
scroll(pace, callback) {
this.setState(() => ({
yearsWindow: (0, _generator.buildYears)(this.getMiddleYear() + pace, YEAR_WINDOW_OVERFLOW_SIZE)
}), callback);
}
render() {
const {
selectedYear,
t
} = this.props;
const {
yearsWindow
} = this.state;
const selectedIsInWindow = yearsWindow.includes(selectedYear);
const middleYear = this.getMiddleYear();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactA11y.Gesture.WithDynamicListGesture, {
className: _YearPickerModule.default['year-picker'],
goToPreviousPage: this.goToPreviousPage,
goToNextPage: this.goToNextPage,
children: onKeyDown => [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Action, {
className: (0, _classnames.default)(_YearPickerModule.default.scroll, _YearPickerModule.default['scroll-up'], 'tc-date-picker-scroll-up'),
icon: "talend-chevron-left",
iconTransform: "rotate-90",
label: t('DATEPICKER_YEAR_PREVIOUS', {
defaultValue: 'Go to previous year'
}),
onClick: this.scrollUp,
link: true,
hideLabel: true
}, "previousPage"), /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
onWheel: this.onWheel,
children: yearsWindow.map((year, index) => {
const isSelectedYear = year === selectedYear;
let tabIndex = -1;
if (isSelectedYear || !selectedIsInWindow && year === middleYear) {
tabIndex = 0;
}
let ariaLabel;
const liProps = {};
if (isSelectedYear) {
liProps['aria-current'] = true;
ariaLabel = t('DATEPICKER_YEAR_SELECTED', {
defaultValue: '{{year}}, selected',
year
});
}
const classNames = (0, _classnames.default)(_YearPickerModule.default.year, {
[_YearPickerModule.default.selected]: isSelectedYear
}, 'tc-date-picker-year');
return /*#__PURE__*/(0, _react.createElement)("li", {
...liProps,
key: year
}, /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
type: "button",
className: classNames,
onClick: event => this.props.onSelect(event, year),
tabIndex: tabIndex,
onKeyDown: event => onKeyDown(event, {
index,
size: YEAR_WINDOW_SIZE
}),
"aria-label": ariaLabel,
children: year
}));
})
}, "list"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Action, {
className: (0, _classnames.default)(_YearPickerModule.default.scroll, _YearPickerModule.default['scroll-down'], 'tc-date-picker-scroll-down'),
icon: "talend-chevron-left",
iconTransform: "rotate-270",
label: t('DATEPICKER_YEAR_NEXT', {
defaultValue: 'Go to next year'
}),
onClick: this.scrollDown,
link: true,
hideLabel: true
}, "nextPage")]
});
}
}
_defineProperty(YearPicker, "propTypes", {
selectedYear: _propTypes.default.number,
onSelect: _propTypes.default.func.isRequired,
t: _propTypes.default.func
});
_defineProperty(YearPicker, "defaultProps", {
t: (0, _translate.default)()
});
var _default = exports.default = YearPicker;
//# sourceMappingURL=YearPicker.component.js.map