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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
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 _designSystem = require("@talend/design-system");
var _reactA11y = require("@talend/react-a11y");
var _Action = _interopRequireDefault(require("../../../Actions/Action/Action.component"));
var _translate = _interopRequireDefault(require("../../../translate"));
var _DateView = _interopRequireDefault(require("../../views/DateView"));
var _MonthYearView = _interopRequireDefault(require("../../views/MonthYearView"));
var _CalendarPickerModule = _interopRequireDefault(require("./CalendarPicker.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class CalendarPicker extends _react.Component {
  constructor(props) {
    super(props);
    const {
      selectedDate
    } = props;
    const initialCalendarDate = selectedDate || new Date();
    this.state = {
      isDateView: true,
      calendar: {
        monthIndex: (0, _getMonth.getMonth)(initialCalendarDate),
        year: (0, _getYear.getYear)(initialCalendarDate)
      },
      selectedDate,
      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.allowFocus = this.setAllowFocus.bind(this, true);
    this.disallowFocus = this.setAllowFocus.bind(this, false);
    this.setDateView = 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.selectedDate;
    const oldSelectedDate = prevProps.selectedDate;
    const needToUpdateDate = newSelectedDate !== oldSelectedDate && newSelectedDate !== this.state.selectedDate;
    if (!needToUpdateDate) {
      return;
    }
    const newState = {
      selectedDate: newSelectedDate
    };
    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);
    });
  }
  onSelectCalendarMonthYear(newCalendar, callback) {
    this.setState(previousState => ({
      calendar: {
        ...previousState.calendar,
        ...newCalendar
      }
    }), callback);
  }
  onSelectCalendarMonth(event, monthIndex) {
    this.onSelectCalendarMonthYear({
      monthIndex
    });
    this.setView(true);
  }
  onSelectCalendarYear(event, year) {
    this.onSelectCalendarMonthYear({
      year
    });
  }
  onClickToday(event) {
    const now = new Date();
    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(isDateView) {
    this.setState({
      isDateView
    }, () => {
      _reactA11y.focus.focusOnCalendar(this.pickerRef);
    });
  }
  submit(event, field) {
    this.props.onSubmit(event, {
      date: this.state.selectedDate,
      field
    });
  }
  render() {
    let viewElement;
    if (this.state.isDateView) {
      viewElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateView.default, {
        allowFocus: this.state.allowFocus,
        calendar: this.state.calendar,
        onSelectDate: this.onSelectDate,
        onSelectMonthYear: this.onSelectCalendarMonthYear,
        onSelectYear: this.onSelectCalendarYear,
        onTitleClick: this.setMonthYearView,
        selectedDate: this.state.selectedDate,
        startDate: this.props.startDate,
        endDate: this.props.endDate,
        isDisabledChecker: this.props.isDisabledChecker
      });
    } else {
      viewElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MonthYearView.default, {
        allowFocus: this.state.allowFocus,
        onBackClick: this.setDateView,
        onSelectMonth: this.onSelectCalendarMonth,
        onSelectYear: this.onSelectCalendarYear,
        selectedMonthIndex: this.state.calendar.monthIndex,
        selectedYear: this.state.calendar.year
      });
    }
    const isTodayFocusable = this.pickerRef && this.pickerRef.contains(document.activeElement) ? 0 : -1;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _CalendarPickerModule.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)(_designSystem.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _CalendarPickerModule.default.footer,
        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",
          tabIndex: isTodayFocusable
        })
      })]
    });
  }
}
CalendarPicker.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
   */
  selectedDate: _propTypes.default.instanceOf(Date),
  /**
   * start day of date range
   */
  startDate: _propTypes.default.instanceOf(Date),
  /**
   * end day of date range
   */
  endDate: _propTypes.default.instanceOf(Date),
  /**
   * Callback triggered when date is selected
   */
  onSubmit: _propTypes.default.func.isRequired,
  /**
   * a function to check if a date is disabled
   */
  isDisabledChecker: _propTypes.default.func,
  t: _propTypes.default.func
};
CalendarPicker.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = CalendarPicker;
//# sourceMappingURL=CalendarPicker.component.js.map