zarm-web/es/calendar/CalendarYearTable.js

基于 React 的桌面端UI库

import React, { Component } from 'react';
import classnames from 'classnames';
const CALENDAR_ROW_COUNT = 4;
const CALENDAR_COL_COUNT = 3;

class CalendarYearTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: props.current || new Date()
    };
  }

  componentWillReceiveProps(nextProps) {
    if ('current' in nextProps) {
      this.setState({
        current: nextProps.current
      });
    }
  } // 渲染年份


  renderYear() {
    const {
      current: stateCurrent
    } = this.state;
    const dd = new Date(stateCurrent);
    const current = {
      year: dd.getFullYear(),
      month: dd.getMonth() + 1,
      date: dd.getDate()
    };
    const years = []; // 当月日期

    const firstYear = parseInt(String(current.year / 10), 10) * 10 - 1;
    const lastYear = firstYear + 11;

    for (let i = firstYear; i <= lastYear; i++) {
      const type = i === firstYear || i === lastYear ? 'others' : null;
      years.push(this.renderYearCell({
        year: i,
        month: current.month,
        date: current.date
      }, type));
    }

    const tabelCell = [];
    const {
      prefixCls
    } = this.props;

    for (let m = 0; m < CALENDAR_ROW_COUNT; m++) {
      const tabelRow = [];

      for (let n = 0; n < CALENDAR_COL_COUNT; n++) {
        const index = m * CALENDAR_COL_COUNT + n;
        tabelRow.push(React.createElement("td", {
          key: `column-${n}`,
          className: `${prefixCls}-cell`,
          role: "gridcell"
        }, years[index]));
      }

      tabelCell.push(React.createElement("tr", {
        key: `row-${m}`,
        role: "row"
      }, tabelRow));
    }

    return React.createElement("tbody", null, tabelCell);
  } // 渲染年份单元


  renderYearCell(day, type) {
    const {
      current: stateCurrent
    } = this.state;
    const {
      onYearClick,
      prefixCls
    } = this.props;
    const fullDay = `${day.year}/${day.month}/${day.date}`;
    const cls = classnames({
      [`${prefixCls}-text`]: true,
      [`${prefixCls}-text-others`]: type === 'others',
      [`${prefixCls}-text-selected`]: stateCurrent === fullDay
    });
    return React.createElement("span", {
      className: cls,
      title: day.year,
      onClick: () => onYearClick(fullDay)
    }, day.year);
  }

  render() {
    const {
      visible,
      prefixCls
    } = this.props;
    const style = {
      display: visible ? 'none' : 'block'
    };
    return React.createElement("div", {
      style: style
    }, React.createElement("table", {
      className: `${prefixCls}-table ${prefixCls}-year`
    }, this.renderYear()));
  }

}

CalendarYearTable.defaultProps = {
  prefixCls: 'ui-calendar',
  defaultValue: '',
  current: '',
  onYearClick: () => {}
};
export default CalendarYearTable;