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> ); } |