@cbinsights/fds/lib/components/DateInput/YearAndMonthSelector.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

/**
 * Private component for DateInput that renders Month/Year select inputs.
 * @param {Object} props react props
 * @returns {ReactElement}
 */
var YearAndMonthSelector = function YearAndMonthSelector(_ref) {
  var date = _ref.date,
      localeUtils = _ref.localeUtils,
      onChange = _ref.onChange,
      startYear = _ref.startYear,
      endYear = _ref.endYear;
  var months = localeUtils.getMonths();
  var years = Array.from({
    length: endYear - startYear
  }, function (_, i) {
    return i + startYear;
  });

  var handleMonthChange = function handleMonthChange(event) {
    onChange === null || onChange === void 0 ? void 0 : onChange(new Date(date.getFullYear(), Number(event.target.value)));
  };

  var handleYearChange = function handleYearChange(event) {
    onChange === null || onChange === void 0 ? void 0 : onChange(new Date(Number(event.target.value), date.getMonth()));
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: "DayPicker-Caption border--bottom"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "padding--bottom--s align--left"
  }, /*#__PURE__*/_react.default.createElement("select", {
    name: "month",
    onChange: handleMonthChange,
    value: date.getMonth(),
    className: "margin--right--s"
  }, months.map(function (month, i) {
    return /*#__PURE__*/_react.default.createElement("option", {
      key: month,
      value: i
    }, month);
  })), /*#__PURE__*/_react.default.createElement("select", {
    name: "year",
    onChange: handleYearChange,
    value: date.getFullYear()
  }, years.map(function (year) {
    return /*#__PURE__*/_react.default.createElement("option", {
      key: year,
      value: year
    }, year);
  }))));
};

var _default = YearAndMonthSelector;
exports.default = _default;