@e-group/material-lab/esm/DateRangePicker/Header.js

EGroup Team Lab - Incubator for EGroup Team experimental React components.

import React from 'react';
import { setMonth, getMonth, setYear, getYear } from 'date-fns';
import { Grid, createStyles, withStyles, IconButton, Select, MenuItem } from '@material-ui/core';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
const styles = createStyles({
  iconContainer: {
    padding: 5
  },
  icon: {
    padding: 10,
    '&:hover': {
      background: 'none'
    }
  }
});
const MONTHS = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

const generateYears = (relativeTo, count) => {
  const half = Math.floor(count / 2);
  return Array(count).fill(0).map((y, i) => relativeTo.getFullYear() - half + i);
};

const Header = ({
  date,
  classes,
  setDate,
  nextDisabled,
  prevDisabled,
  onClickNext,
  onClickPrevious
}) => {
  const handleMonthChange = event => {
    setDate(setMonth(date, parseInt(event.target.value)));
  };

  const handleYearChange = event => {
    setDate(setYear(date, parseInt(event.target.value)));
  };

  return /*#__PURE__*/React.createElement(Grid, {
    container: true,
    justify: "space-between",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Grid, {
    item: true,
    className: classes.iconContainer
  }, /*#__PURE__*/React.createElement(IconButton, {
    className: classes.icon,
    disabled: prevDisabled,
    onClick: onClickPrevious
  }, /*#__PURE__*/React.createElement(ChevronLeft, {
    color: prevDisabled ? 'disabled' : 'action'
  }))), /*#__PURE__*/React.createElement(Grid, {
    item: true
  }, /*#__PURE__*/React.createElement(Select, {
    value: getMonth(date),
    onChange: handleMonthChange,
    MenuProps: {
      disablePortal: true
    }
  }, MONTHS.map((month, idx) => /*#__PURE__*/React.createElement(MenuItem, {
    key: month,
    value: idx
  }, month)))), /*#__PURE__*/React.createElement(Grid, {
    item: true
  }, /*#__PURE__*/React.createElement(Select, {
    value: getYear(date),
    onChange: handleYearChange,
    MenuProps: {
      disablePortal: true
    }
  }, generateYears(date, 30).map(year => /*#__PURE__*/React.createElement(MenuItem, {
    key: year,
    value: year
  }, year)))), /*#__PURE__*/React.createElement(Grid, {
    item: true,
    className: classes.iconContainer
  }, /*#__PURE__*/React.createElement(IconButton, {
    className: classes.icon,
    disabled: nextDisabled,
    onClick: onClickNext
  }, /*#__PURE__*/React.createElement(ChevronRight, {
    color: nextDisabled ? 'disabled' : 'action'
  }))));
};

export default withStyles(styles, {
  name: 'EgHeader'
})(Header);