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

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

"use strict";

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

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

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

var _dateFns = require("date-fns");

var _core = require("@material-ui/core");

var _ChevronLeft = _interopRequireDefault(require("@material-ui/icons/ChevronLeft"));

var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));

const styles = (0, _core.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((0, _dateFns.setMonth)(date, parseInt(event.target.value)));
  };

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

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

var _default = (0, _core.withStyles)(styles, {
  name: 'EgHeader'
})(Header);

exports.default = _default;