zarm-web/es/calendar/CalendarHeader.js

基于 React 的桌面端UI库

import React, { Component } from 'react';
import Icon from '../icon';
import LocaleReceiver from '../locale-provider/LocaleReceiver';

class CalendarHeader extends Component {
  constructor(props) {
    super(props);

    this.getNextMonth = current => {
      const result = current;

      if (result.month === 12) {
        result.year += 1;
        result.month = 1;
      } else {
        result.month += 1;
      }

      return result;
    };

    this.getPreMonth = current => {
      const result = current;

      if (result.month === 1) {
        result.year -= 1;
        result.month = 12;
      } else {
        result.month -= 1;
      }

      return result;
    };

    this.state = {
      panel: props.panel || 'date'
    };
  }

  componentWillReceiveProps(nextProps) {
    if ('panel' in nextProps) {
      this.setState({
        panel: nextProps.panel
      });
    }
  } // 切换界面


  onChangePanel(panel) {
    const {
      onChangePanel
    } = this.props;
    this.setState({
      panel
    }, () => onChangePanel(panel));
  } // 切换世纪


  onCenturyClick(current, type) {
    const {
      onChange
    } = this.props;
    const newYear = current;

    if (type === 'pre') {
      newYear.year = current.year - 10;
    } else {
      newYear.year = current.year + 10;
    }

    const currentString = `${newYear.year}/${newYear.month}/${newYear.date}`;
    onChange(currentString);
  } // 切换年份


  onYearClick(current, type) {
    const {
      onChange
    } = this.props;
    const newYear = current;

    if (type === 'pre') {
      newYear.year = current.year - 1;
    } else {
      newYear.year = current.year + 1;
    }

    const currentString = `${newYear.year}/${newYear.month}/${newYear.date}`;
    onChange(currentString);
  } // 切换月份


  onMonthClick(current, type) {
    const {
      onChange
    } = this.props;
    const newMonth = type === 'pre' ? this.getPreMonth(current) : this.getNextMonth(current);
    const currentString = `${newMonth.year}/${newMonth.month}/${newMonth.date}`;
    onChange(currentString);
  } // 获取下个月


  render() {
    const {
      prefixCls,
      isShowPrev,
      isShowNext,
      locale,
      localeCode,
      children,
      current: stateCurrent
    } = this.props;
    const {
      panel
    } = this.state;
    const dd = new Date(stateCurrent);
    const current = {
      year: dd.getFullYear(),
      month: dd.getMonth() + 1,
      date: dd.getDate()
    };
    const beforeYear = parseInt(String(current.year / 10), 10) * 10;
    return React.createElement("div", {
      className: `${prefixCls}-header`
    }, React.createElement("div", {
      style: {
        display: panel !== 'date' ? 'none' : 'block'
      }
    }, React.createElement("span", {
      style: {
        display: isShowPrev ? 'block' : 'none'
      },
      onClick: () => this.onMonthClick(current, 'pre'),
      className: `${prefixCls}-header-pre-btn`,
      title: locale.last_month
    }, React.createElement(Icon, {
      type: "arrow-left"
    })), localeCode === 'zh-cn' ? React.createElement("span", {
      className: `${prefixCls}-header-time`
    }, React.createElement("span", {
      className: `${prefixCls}-header-btn`,
      onClick: () => this.onChangePanel('year')
    }, current.year, "\u5E74"), React.createElement("span", {
      className: `${prefixCls}-header-btn`,
      onClick: () => this.onChangePanel('month')
    }, current.month, "\u6708")) : React.createElement("span", {
      className: `${prefixCls}-header-time`
    }, React.createElement("span", {
      className: `${prefixCls}-header-btn`,
      onClick: () => this.onChangePanel('month')
    }, locale[`month${current.month}`]), React.createElement("span", {
      className: `${prefixCls}-header-btn`,
      onClick: () => this.onChangePanel('year')
    }, current.year)), React.createElement("span", {
      style: {
        display: isShowNext ? 'block' : 'none'
      },
      onClick: () => this.onMonthClick(current, 'next'),
      className: `${prefixCls}-header-next-btn`,
      title: locale.next_month
    }, React.createElement(Icon, {
      type: "arrow-right"
    })), children), React.createElement("div", {
      style: {
        display: panel !== 'month' ? 'none' : 'block'
      }
    }, React.createElement("span", {
      onClick: () => this.onYearClick(current, 'pre'),
      className: `${prefixCls}-header-pre-btn`,
      title: locale.last_year
    }, React.createElement(Icon, {
      type: "arrow-left"
    })), React.createElement("span", null, React.createElement("span", {
      className: `${prefixCls}-header-year-btn`,
      onClick: () => this.onChangePanel('date')
    }, current.year, locale.year)), React.createElement("span", {
      onClick: () => this.onYearClick(current, 'next'),
      className: `${prefixCls}-header-next-btn`,
      title: locale.next_year
    }, React.createElement(Icon, {
      type: "arrow-right"
    }))), React.createElement("div", {
      style: {
        display: panel !== 'year' ? 'none' : 'block'
      }
    }, React.createElement("span", {
      onClick: () => this.onCenturyClick(current, 'pre'),
      className: `${prefixCls}-header-pre-btn`,
      title: locale.last_decade
    }, React.createElement(Icon, {
      type: "arrow-left"
    })), React.createElement("span", null, React.createElement("span", {
      className: `${prefixCls}-header-year-btn`,
      onClick: () => this.onChangePanel('date')
    }, beforeYear, ' ', "-", beforeYear + 9, ' ', locale.year)), React.createElement("span", {
      onClick: () => this.onCenturyClick(current, 'next'),
      className: `${prefixCls}-header-next-btn`,
      title: locale.next_decade
    }, React.createElement(Icon, {
      type: "arrow-right"
    }))));
  }

}

CalendarHeader.defaultProps = {
  prefixCls: 'ui-calendar',
  current: new Date(),
  isShowPrev: true,
  isShowNext: true,
  onChange: () => {},
  onChangePanel: () => {}
};
export default LocaleReceiver('Calendar')(CalendarHeader);