@talend/react-components/lib/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _translate = _interopRequireDefault(require("../../../../translate"));
var _DatePicker = _interopRequireDefault(require("../../pickers/DatePicker"));
var _TimePicker = _interopRequireDefault(require("../../pickers/TimePicker"));
var _HeaderTitle = _interopRequireDefault(require("../HeaderTitle"));
var _ViewLayout = _interopRequireDefault(require("../ViewLayout"));
var _DateTimeViewModule = _interopRequireDefault(require("./DateTimeView.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); } /**
 * 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
 */
function euclideanModulo(dividend, divisor) {
  const modulo = (dividend % divisor + divisor) % divisor;
  return modulo < 0 ? modulo + Math.abs(divisor) : modulo;
}
class DateTimeView extends _react.PureComponent {
  constructor(props) {
    super(props);
    this.goToPreviousMonth = this.incrementMonthIndex.bind(this, -1);
    this.goToNextMonth = this.incrementMonthIndex.bind(this, 1);
  }
  getTimePicker() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _DateTimeViewModule.default.time,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker.default, {
        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__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
        size: "S",
        icon: "arrow-left",
        onClick: () => this.goToPreviousMonth(),
        tabIndex: "-1",
        children: t('DATEPICKER_MONTH_PREVIOUS', 'Go to previous month')
      }),
      middleElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTitle.default, {
        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__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
        size: "S",
        icon: "arrow-right",
        onClick: () => this.goToNextMonth(),
        tabIndex: "-1",
        children: t('DATEPICKER_MONTH_NEXT', 'Go to next month')
      })
    };
    const bodyElement = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _DateTimeViewModule.default.body,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _DateTimeViewModule.default.date,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, {
          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__*/(0, _jsxRuntime.jsx)(_ViewLayout.default, {
      header: header,
      bodyElement: bodyElement
    });
  }
}
_defineProperty(DateTimeView, "propTypes", {
  allowFocus: _propTypes.default.bool,
  calendar: _propTypes.default.shape({
    monthIndex: _propTypes.default.number.isRequired,
    year: _propTypes.default.number.isRequired
  }).isRequired,
  onTitleClick: _propTypes.default.func.isRequired,
  onSelectMonthYear: _propTypes.default.func.isRequired,
  onSelectDate: _propTypes.default.func.isRequired,
  onSelectTime: _propTypes.default.func.isRequired,
  selectedDate: _propTypes.default.instanceOf(Date),
  selectedTime: _propTypes.default.shape({
    hours: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
    minutes: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
  }),
  useSeconds: _propTypes.default.bool,
  useTime: _propTypes.default.bool,
  useUTC: _propTypes.default.bool,
  t: _propTypes.default.func
});
_defineProperty(DateTimeView, "defaultProps", {
  t: (0, _translate.default)()
});
var _default = exports.default = DateTimeView;
//# sourceMappingURL=DateTimeView.component.js.map