{"size": 1369, "ext": "js", "max_stars_repo_path": "src/components/CalendarContainer/CalendarSelector/CalendarSelector.js", "max_stars_repo_name": "aSosunoff/React-Datetime-Range", "max_stars_repo_stars_event_min_datetime": "2020-10-22T21:59:09.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-22T21:59:09.000Z", "max_issues_repo_path": "src/components/CalendarContainer/CalendarSelector/CalendarSelector.js", "max_issues_repo_name": "aSosunoff/React-Range-Picker", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/CalendarContainer/CalendarSelector/CalendarSelector.js", "max_forks_repo_name": "aSosunoff/React-Range-Picker", "max_forks_repo_forks_event_min_datetime": "2021-04-14T02:45:51.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-14T02:45:51.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 24.4464285714, "max_line_length": 77, "alphanum_fraction": 0.6340394449}
import React, { useMemo } from "react";
import PropTypes from "prop-types";
import { getMonthNames, getYearList } from "../../../utils/dateHalper";
import CalendarDefault from "../CalendarDefault";
import styles from "./CalendarSelector.module.scss";
import useDateSplit from "../../../hooks/useDateSplit";
import Select from "../../Select/";

const CalendarSelector = ({
  changeMonthHandler,
  changeYearHandler,
  date,
  ...props
}) => {
  const { year, month } = useDateSplit(date);

  const yearList = useMemo(
    () => getYearList().map((year) => ({ id: year, value: year })),
    []
  );

  const monthNames = useMemo(
    () =>
      getMonthNames(props.locales).map((name, index) => ({
        id: index,
        value: index,
        text: name,
      })),
    [props.locales]
  );

  return (
    <CalendarDefault {...props}>
      <div className={styles.title}>
        <Select
          value={month}
          onChange={changeMonthHandler}
          items={monthNames}
        />

        <Select value={year} onChange={changeYearHandler} items={yearList} />
      </div>
    </CalendarDefault>
  );
};

CalendarSelector.defaultProps = {};

CalendarSelector.propTypes = {
  changeMonthHandler: PropTypes.func.isRequired,
  changeYearHandler: PropTypes.func.isRequired,
  date: PropTypes.instanceOf(Date).isRequired,
};

export default CalendarSelector;
