@talend/react-components
Version:
Set of react components.
128 lines (127 loc) • 5 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 { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { ButtonIcon } from '@talend/design-system';
import getDefaultT from '../../../../translate';
import DatePicker from '../../pickers/DatePicker';
import TimePicker from '../../pickers/TimePicker';
import HeaderTitle from '../HeaderTitle';
import ViewLayout from '../ViewLayout';
import theme from './DateTimeView.module.scss';
/**
* Get the positive euclidean modulo number from a dividend and a divisor
* @param {number} dividend Dividend
* @param {number} divisor Divisor
* @return {number} The positive euclidean modulo
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function euclideanModulo(dividend, divisor) {
const modulo = (dividend % divisor + divisor) % divisor;
return modulo < 0 ? modulo + Math.abs(divisor) : modulo;
}
class DateTimeView extends PureComponent {
constructor(props) {
super(props);
this.goToPreviousMonth = this.incrementMonthIndex.bind(this, -1);
this.goToNextMonth = this.incrementMonthIndex.bind(this, 1);
}
getTimePicker() {
return /*#__PURE__*/_jsx("div", {
className: theme.time,
children: /*#__PURE__*/_jsx(TimePicker, {
allowFocus: this.props.allowFocus,
value: this.props.selectedTime,
onChange: this.props.onSelectTime,
useSeconds: this.props.useSeconds,
useUTC: this.props.useUTC
})
}, "time");
}
incrementMonthIndex(monthIncrement, callback) {
const monthIndexIncremented = this.props.calendar.monthIndex + monthIncrement;
const newMonthIndex = euclideanModulo(monthIndexIncremented, 12);
const yearIncrement = Math.floor(monthIndexIncremented / 12);
const newYear = this.props.calendar.year + yearIncrement;
this.props.onSelectMonthYear({
monthIndex: newMonthIndex,
year: newYear
}, callback);
}
render() {
const {
t
} = this.props;
const header = {
leftElement: /*#__PURE__*/_jsx(ButtonIcon, {
size: "S",
icon: "arrow-left",
onClick: () => this.goToPreviousMonth(),
tabIndex: "-1",
children: t('DATEPICKER_MONTH_PREVIOUS', 'Go to previous month')
}),
middleElement: /*#__PURE__*/_jsx(HeaderTitle, {
monthIndex: this.props.calendar.monthIndex,
year: this.props.calendar.year,
button: {
'aria-label': t('DATEPICKER_TO_MONTH_YEAR', {
defaultValue: 'Switch to month-and-year view'
}),
onClick: this.props.onTitleClick,
tabIndex: this.props.allowFocus ? 0 : -1
}
}),
rightElement: /*#__PURE__*/_jsx(ButtonIcon, {
size: "S",
icon: "arrow-right",
onClick: () => this.goToNextMonth(),
tabIndex: "-1",
children: t('DATEPICKER_MONTH_NEXT', 'Go to next month')
})
};
const bodyElement = /*#__PURE__*/_jsxs("div", {
className: theme.body,
children: [/*#__PURE__*/_jsx("div", {
className: theme.date,
children: /*#__PURE__*/_jsx(DatePicker, {
allowFocus: this.props.allowFocus,
calendar: this.props.calendar,
selectedDate: this.props.selectedDate,
onSelect: this.props.onSelectDate,
goToPreviousMonth: this.goToPreviousMonth,
goToNextMonth: this.goToNextMonth
})
}, "date"), this.props.useTime && this.getTimePicker()]
});
return /*#__PURE__*/_jsx(ViewLayout, {
header: header,
bodyElement: bodyElement
});
}
}
_defineProperty(DateTimeView, "propTypes", {
allowFocus: PropTypes.bool,
calendar: PropTypes.shape({
monthIndex: PropTypes.number.isRequired,
year: PropTypes.number.isRequired
}).isRequired,
onTitleClick: PropTypes.func.isRequired,
onSelectMonthYear: PropTypes.func.isRequired,
onSelectDate: PropTypes.func.isRequired,
onSelectTime: PropTypes.func.isRequired,
selectedDate: PropTypes.instanceOf(Date),
selectedTime: PropTypes.shape({
hours: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
minutes: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
}),
useSeconds: PropTypes.bool,
useTime: PropTypes.bool,
useUTC: PropTypes.bool,
t: PropTypes.func
});
_defineProperty(DateTimeView, "defaultProps", {
t: getDefaultT()
});
export default DateTimeView;
//# sourceMappingURL=DateTimeView.component.js.map