@talend/react-components/lib/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _getMonth = require("date-fns/getMonth");
var _getYear = require("date-fns/getYear");
var _startOfDay = require("date-fns/startOfDay");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactA11y = require("@talend/react-a11y");
var _Action = _interopRequireDefault(require("../../../../Actions/Action/Action.component"));
var _translate = _interopRequireDefault(require("../../../../translate"));
var _DateTimeView = _interopRequireDefault(require("../../views/DateTimeView"));
var _MonthYearView = _interopRequireDefault(require("../../views/MonthYearView"));
var _DateTimePickerModule = _interopRequireDefault(require("./DateTimePicker.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class DateTimePicker extends _react.Component {
  constructor(props) {
    super(props);
    const selectedDate = props.selection.date;
    const selectedTime = props.selection.time;
    const initialCalendarDate = selectedDate === undefined ? new Date() : selectedDate;
    this.state = {
      isDateTimeView: true,
      calendar: {
        monthIndex: (0, _getMonth.getMonth)(initialCalendarDate),
        year: (0, _getYear.getYear)(initialCalendarDate)
      },
      selectedDate,
      selectedTime,
      allowFocus: !props.manageFocus
    };
    this.onSelectCalendarMonth = this.onSelectCalendarMonth.bind(this);
    this.onSelectCalendarYear = this.onSelectCalendarYear.bind(this);
    this.onSelectCalendarMonthYear = this.onSelectCalendarMonthYear.bind(this);
    this.onSelectDate = this.onSelectDate.bind(this);
    this.onSelectTime = this.onSelectTime.bind(this);
    this.allowFocus = this.setAllowFocus.bind(this, true);
    this.disallowFocus = this.setAllowFocus.bind(this, false);
    this.setDateTimeView = this.setView.bind(this, true);
    this.setMonthYearView = this.setView.bind(this, false);
    this.onClickToday = this.onClickToday.bind(this);
  }
  componentDidMount() {
    if (this.props.manageFocus) {
      this.pickerRef.addEventListener('focusin', this.allowFocus);
      this.pickerRef.addEventListener('focusout', this.disallowFocus);
    }
  }
  componentDidUpdate(prevProps) {
    const newSelectedDate = this.props.selection.date;
    const newSelectedTime = this.props.selection.time;
    const datePropsHasChanged = prevProps.selection.date !== newSelectedDate;
    const timePropsHasChanged = prevProps.selection.time !== newSelectedTime;
    const needToUpdateDate = datePropsHasChanged && newSelectedDate !== this.state.selectedDate;
    const needToUpdateTime = timePropsHasChanged && newSelectedTime !== this.state.selectedTime;
    if (!needToUpdateDate && !needToUpdateTime) {
      return;
    }
    const newState = {
      selectedDate: newSelectedDate,
      selectedTime: newSelectedTime
    };
    if (needToUpdateDate && newSelectedDate) {
      newState.calendar = {
        monthIndex: (0, _getMonth.getMonth)(newSelectedDate),
        year: (0, _getYear.getYear)(newSelectedDate)
      };
    }
    this.setState(newState);
  }
  componentWillUnmount() {
    if (this.props.manageFocus) {
      this.pickerRef.removeEventListener('focusin', this.allowFocus);
      this.pickerRef.removeEventListener('focusout', this.disallowFocus);
    }
  }
  onSelectDate(event, selectedDate) {
    event.persist();
    this.setState({
      selectedDate
    }, () => {
      this.submit(event);
    });
  }
  onSelectTime(event, selectedTime, field) {
    event.persist();
    this.setState({
      selectedTime
    }, () => {
      this.submit(event, field);
    });
  }
  onSelectCalendarMonthYear(newCalendar, callback) {
    this.setState(previousState => ({
      calendar: {
        ...previousState.calendar,
        ...newCalendar
      }
    }), callback);
  }
  onSelectCalendarMonth(event, monthIndex) {
    this.onSelectCalendarMonthYear({
      monthIndex
    });
  }
  onSelectCalendarYear(event, year) {
    this.onSelectCalendarMonthYear({
      year
    });
  }
  onClickToday(event) {
    const now = new Date();
    if (!this.state.isDateTimeView) {
      this.onSelectCalendarYear(event, (0, _getYear.getYear)(now));
      this.onSelectCalendarMonth(event, (0, _getMonth.getMonth)(now));
      this.setView(true);
    }
    this.onSelectDate(event, (0, _startOfDay.startOfDay)(now));
  }
  setAllowFocus(value) {
    this.setState({
      allowFocus: value
    });
  }
  setView(isDateTimeView) {
    this.setState({
      isDateTimeView
    }, () => {
      _reactA11y.focus.focusOnCalendar(this.pickerRef);
    });
  }
  submit(event, field) {
    this.props.onSubmit(event, {
      date: this.state.selectedDate,
      time: this.state.selectedTime,
      field
    });
  }
  render() {
    let viewElement;
    if (this.state.isDateTimeView) {
      viewElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimeView.default, {
        allowFocus: this.state.allowFocus,
        calendar: this.state.calendar,
        onSelectDate: this.onSelectDate,
        onSelectMonthYear: this.onSelectCalendarMonthYear,
        onSelectTime: this.onSelectTime,
        onTitleClick: this.setMonthYearView,
        selectedDate: this.state.selectedDate,
        selectedTime: this.state.selectedTime,
        useSeconds: this.props.useSeconds,
        useTime: this.props.useTime,
        useUTC: this.props.useUTC
      });
    } else {
      viewElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MonthYearView.default, {
        allowFocus: this.state.allowFocus,
        onBackClick: this.setDateTimeView,
        onSelectMonth: this.onSelectCalendarMonth,
        onSelectYear: this.onSelectCalendarYear,
        selectedMonthIndex: this.state.calendar.monthIndex,
        selectedYear: this.state.calendar.year
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _DateTimePickerModule.default.container,
      ref: ref => {
        this.pickerRef = ref;
      }
      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
      ,
      tabIndex: this.state.allowFocus ? 0 : -1,
      "aria-label": "Date picker",
      children: [viewElement, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)(_DateTimePickerModule.default.footer, {
          [_DateTimePickerModule.default['date-padding']]: this.state.isDateTimeView
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
          label: this.props.t('DATEPICKER_TODAY', {
            defaultValue: 'Today'
          }),
          "aria-label": this.props.t('DATEPICKER_PICK_TODAY', {
            defaultValue: 'Pick Today'
          }),
          onClick: this.onClickToday,
          className: "btn-tertiary btn-info"
        })
      })]
    });
  }
}
DateTimePicker.propTypes = {
  /**
   * By default, element in picker are focusable. So it is usable as is.
   * But when we want to disable focus to not interact with a form flow,
   * this option must be turned on.
   * It allows to disable focus, and activate it when the focus is set in the picker.
   */
  manageFocus: _propTypes.default.bool,
  /**
   * Current selected date/time
   */
  selection: _propTypes.default.shape({
    date: _propTypes.default.instanceOf(Date),
    time: _propTypes.default.shape({
      hours: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
      minutes: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
    })
  }),
  /**
   * Callback triggered when date and time are selected
   */
  onSubmit: _propTypes.default.func.isRequired,
  /**
   * Display the seconds
   */
  useSeconds: _propTypes.default.bool,
  /**
   * Display time picker
   */
  useTime: _propTypes.default.bool,
  /**
   * Timezone is UTC
   */
  useUTC: _propTypes.default.bool,
  t: _propTypes.default.func
};
DateTimePicker.defaultProps = {
  t: (0, _translate.default)(),
  selection: {}
};
var _default = exports.default = DateTimePicker;
//# sourceMappingURL=DateTimePicker.component.js.map