zarm-web/es/calendar/CalendarMonthTable.js

基于 React 的桌面端UI库

import React, { Component } from 'react';
import classnames from 'classnames';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
const CALENDAR_ROW_COUNT = 4;
const CALENDAR_COL_COUNT = 3;

const fn = () => {};

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

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


  renderMonthCell(day) {
    const {
      onMonthClick,
      prefixCls,
      disabledMonth,
      locale
    } = this.props;
    const {
      current
    } = this.state;
    const fullDay = `${day.year}/${day.month}/${day.date}`; // @ts-ignore

    const isDisabled = disabledMonth ? !disabledMonth(fullDay) : false;
    const cls = classnames({
      [`${prefixCls}-text`]: true,
      [`${prefixCls}-text-disabled`]: isDisabled,
      [`${prefixCls}-text-selected`]: current === fullDay
    });

    const onClick = () => onMonthClick(fullDay);

    return React.createElement("span", {
      className: cls,
      title: locale[`month${day.month}`],
      onClick: isDisabled && fn || onClick
    }, locale[`month${day.month}`]);
  } // 渲染月份


  renderMonth() {
    const {
      current: stateCurrent
    } = this.state;
    const dd = new Date(stateCurrent);
    const current = {
      year: dd.getFullYear(),
      month: dd.getMonth() + 1,
      date: dd.getDate()
    };
    const months = [];

    for (let i = 1; i <= 12; i++) {
      months.push(this.renderMonthCell({
        year: current.year,
        month: i,
        date: current.date
      }));
    }

    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"
        }, months[index]));
      }

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

    return React.createElement("tbody", null, tabelCell);
  }

  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}-month`
    }, this.renderMonth()));
  }

}

CalendarMonthTable.defaultProps = {
  prefixCls: 'ui-calendar',
  defaultValue: '',
  current: '',
  onMonthClick: fn
};
export default LocaleReceiver('Calendar')(CalendarMonthTable);