All files / src/calendar/tables YearTable.tsx

0% Statements 0/24
0% Branches 0/19
0% Functions 0/14
0% Lines 0/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106                                                                                                                                                                                                                   
import React from "react";
import moment, { Moment, isMoment } from "moment";
import Table, { CellStatus } from "./BaseTable";
import { useTranslation } from "../../i18n";
import {
  RangeDateType,
  CalendarTableType,
  DateChangeContext,
} from "../DateProps";
 
export interface YearTableProps {
  /**
   * 当前展示时间
   */
  current: Moment;
 
  /**
   * 允许选择的时间范围限制
   */
  range?: RangeDateType;
 
  cellStatus?: (date: Moment) => CellStatus;
 
  onSelect?: (value: Moment, context: DateChangeContext) => void;
 
  onTypeChange?: (type: CalendarTableType) => void;
 
  onCurrentChange?: (current: Moment) => void;
}
 
export function YearTable({
  current,
  onCurrentChange = () => null,
  range,
  onSelect = () => null,
  cellStatus = () => CellStatus.Common,
}: YearTableProps) {
  const t = useTranslation();
 
  const year = current.year();
  const start = year - (year % 20);
  const end = start + 20 - 1;
 
  // 5 * 4
  function genTable(): number[][] {
    return "abcde".split("").map((_, i) =>
      Array(4)
        .fill(0)
        .map((_, j) => i * 4 + j + start)
    );
  }
 
  function renderYear() {
    return `${start}-${end}`;
  }
 
  const [rangeMin, rangeMax] = range || [null, null];
 
  function isValid(date) {
    if (isMoment(rangeMin) && rangeMin.isAfter(date, "year")) {
      return false;
    }
    if (isMoment(rangeMax) && rangeMax.isBefore(date, "year")) {
      return false;
    }
    return true;
  }
 
  return (
    <Table
      type="year"
      caption={renderYear()}
      jumperOptions={{
        onNext: () => onCurrentChange(moment(current).add(20, "year")),
        onPrev: () => onCurrentChange(moment(current).subtract(20, "year")),
        onCurrent: () => onCurrentChange(moment()),
        isCurrent: moment().year() >= start && moment().year() <= end,
        nextDisabled: isMoment(rangeMax) && rangeMax.year() <= end,
        prevDisabled: isMoment(rangeMin) && rangeMin.year() >= start,
        nextTitle: t.nextTwentyYears,
        prevTitle: t.prevTwentyYears,
        curTitle: t.curTwentyYears,
      }}
    >
      {genTable().map((row, index) => (
        <Table.Row key={index}>
          {row.map(year => {
            const y = moment({ year });
            return (
              <Table.Cell
                key={year}
                name={y.format("YYYY")}
                value={y}
                onSelect={onSelect}
                isNow={y.isSame(moment(), "year")}
                status={cellStatus(y)}
                disabled={!isValid(y)}
              />
            );
          })}
        </Table.Row>
      ))}
    </Table>
  );
}