@talend/react-components
Version:
Set of react components.
146 lines (145 loc) • 5.49 kB
JavaScript
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); }
import { Component, createElement as _createElement } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Action } from '../../../../Actions';
import { buildYears } from '../../generator';
import { Gesture } from '@talend/react-a11y';
import getDefaultT from '../../../../translate';
import theme from './YearPicker.module.scss';
import { jsx as _jsx } from "react/jsx-runtime";
const YEAR_WINDOW_SIZE = 7;
const YEAR_WINDOW_OVERFLOW_SIZE = 3;
class YearPicker extends 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: 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: 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: 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__*/_jsx(Gesture.WithDynamicListGesture, {
className: theme['year-picker'],
goToPreviousPage: this.goToPreviousPage,
goToNextPage: this.goToNextPage,
children: onKeyDown => [/*#__PURE__*/_jsx(Action, {
className: classnames(theme.scroll, theme['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,
tabIndex: "-1",
link: true,
hideLabel: true
}, "previousPage"), /*#__PURE__*/_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 = classnames(theme.year, {
[theme.selected]: isSelectedYear
}, 'tc-date-picker-year');
return /*#__PURE__*/_createElement("li", {
...liProps,
key: year
}, /*#__PURE__*/_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__*/_jsx(Action, {
className: classnames(theme.scroll, theme['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,
tabIndex: "-1",
link: true,
hideLabel: true
}, "nextPage")]
});
}
}
_defineProperty(YearPicker, "propTypes", {
selectedYear: PropTypes.number,
onSelect: PropTypes.func.isRequired,
t: PropTypes.func
});
_defineProperty(YearPicker, "defaultProps", {
t: getDefaultT()
});
export default YearPicker;
//# sourceMappingURL=YearPicker.component.js.map