2021SC@SDUSC

文章目录

• • • 概述
    • 年份视图
    • • `YearsView.js`
      • `YearView.tsx`
    • 日期视图
    • • `TimeView.js`

概述

这周继续上周的分析

年份视图

YearsView.js

'use strict';

var React = require('react'),
	createClass = require('create-react-class')
;

var DateTimePickerYears = createClass({
	render: function() {
		// 去掉个位数
		var year = parseInt( this.props.viewDate.year() / 10, 10 ) * 10;

		return React.createElement('div', { className: 'rdtYears' }, [
			React.createElement('table', { key: 'a' }, React.createElement('thead', {}, React.createElement('tr', {}, [
				// 减少年份，触发父组件的 subtractTime 函数
				React.createElement('th', { key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 10, 'years' )}, React.createElement('span', {}, '‹' )),
				// 年份选择空间 0-9
				React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2 }, year + '-' + ( year + 9 ) ),
				// 增加年份，触发父组件的 addTime 函数
				React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 10, 'years' )}, React.createElement('span', {}, '›' ))
			]))),
			// 根据当前所选择的年份更新月份表
			React.createElement('table', { key: 'years' }, React.createElement('tbody',  {}, this.renderYears( year )))
		]);
	},

	renderYears: function( year ) {
		var years = [],
			i = -1,	// 当前处理的月份
			rows = [], // 月份表放置情况
			// 渲染月份表的函数
			renderer = this.props.renderYear || this.renderYear,
			// 选择的日期
			selectedDate = this.props.selectedDate,
			// 从父组件传递的判断是否有效年份的函数，若 undefinded ，一直有效
			isValid = this.props.isValidDate || this.alwaysValidDate, 
			classes, props, currentYear, isDisabled, noOfDaysInYear, daysInYear, validDay,
			// Month and date are irrelevant here because
			// we're only interested in the year
			irrelevantMonth = 0,
			irrelevantDate = 1
			;
		
		year--; // 年份减一
		while (i < 11) {
			classes = 'rdtYear';
			// 克隆 moment.Moment,并设置为当前 year 值
			currentYear = this.props.viewDate.clone().set(
				{ year: year, month: irrelevantMonth, date: irrelevantDate } );

			// Not sure what 'rdtOld' is for, commenting out for now as it's not working properly
			// if ( i === -1 | i === 10 )
				// classes += ' rdtOld';
			
			// 当年的天数
			noOfDaysInYear = currentYear.endOf( 'year' ).format( 'DDD' );
			
			// 天数数组 [1,2,...,356]
			daysInYear = Array.from({ length: noOfDaysInYear }, function( e, i ) {
				return i + 1;
			});

			//有效日期筛选
			validDay = daysInYear.find(function( d ) {
				var day = currentYear.clone().dayOfYear( d );
				return isValid( day );
			});

			// 没有有效日期的时候，既整体为 Disabled
			isDisabled = ( validDay === undefined );

			// 设置 classes 样式
			if ( isDisabled )
				classes += ' rdtDisabled';

			// 如果有选择的日期且为当前年份，设置 active 的样式
			if ( selectedDate && selectedDate.year() === year )
				classes += ' rdtActive';
			
			// 数据整理
			props = {
				key: year,
				'data-value': year,
				className: classes
			};

			if ( !isDisabled )
				// 添加点击属性所对应的函数
				props.onClick = ( this.props.updateOn === 'years' ?
					this.updateSelectedYear : this.props.setDate('year') );

			// 往年份集合中装入处理好的一年数据
			years.push( renderer( props, year, selectedDate && selectedDate.clone() ));

			// 4年为1排
			if ( years.length === 4 ) {
				rows.push( React.createElement('tr', { key: i }, years ) );
				years = [];
			}
			// 处理下一年
			year++;
			i++;
		}

		return rows;
	},

	// 跟新所选年份
	updateSelectedYear: function( event ) {
		this.props.updateSelectedDate( event );
	},

	// 默认的 renderYear 函数，多被重写(从父组件传递)
	renderYear: function( props, year ) {
		return React.createElement('td',  props, year );
	},

	// 一直有效
	alwaysValidDate: function() {
		return 1;
	},
});

module.exports = DateTimePickerYears;

YearView.tsx

// @ts-ignore
import YearsView from 'react-datetime/src/YearsView';
import moment from 'moment';
import React from 'react';
import {LocaleProps, localeable} from '../../locale';

export class CustomYearsView extends YearsView {
  props: {
    // 类型申明
    viewDate: moment.Moment;
    subtractTime: (
      amount: number,
      type: string,
      toSelected?: moment.Moment
    ) => () => void;
    addTime: (
      amount: number,
      type: string,
      toSelected?: moment.Moment
    ) => () => void;
    showView: (view: string) => () => void;
  } & LocaleProps;
  renderYears: (year: number) => JSX.Element;
  // 重写 renderYear 方法
  renderYear = (props: any, year: number) => {
    return (
      <td {...props}>
        <span>{year}</span>
      </td>
    );
  };
  render() {
    let year = this.props.viewDate.year();
    year = year - (year % 10);
    const __ = this.props.translate;

    return (
      <div className="rdtYears">
        <table>
          <thead>
            <tr>
              <th
                className="rdtPrev"
                onClick={this.props.subtractTime(10, 'years')}
              >
                &laquo;
              </th>
              <th className="rdtSwitch">
                {__('year-to-year', {from: year, to: year + 9})}
              </th>
              <th className="rdtNext" onClick={this.props.addTime(10, 'years')}>
                &raquo;
              </th>
            </tr>
          </thead>
        </table>
        <table>
          <tbody>{this.renderYears(year)}</tbody>
        </table>
      </div>
    );
  }
}

export default localeable(CustomYearsView as any);

日期视图

TimeView.js