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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | 4x 3x 3x 15x 15x 126x 126x | import React from "react"; import classNames from "classnames"; import { Moment } from "moment"; import { useConfig } from "../../_util/config-context"; import { withStatics } from "../../_util/with-statics"; import { ChangeContext } from "../../form/controlled"; import { JumperProps, Jumper } from "../../jumper"; import { CalendarTableType } from "../DateProps"; export enum CellStatus { Common, Selected, InRange, RangeStart, RangeEnd, } export interface TableProps extends React.Props<any> { /** * 标题渲染 */ caption?: React.ReactNode; /** * Jumper 配置 */ jumperOptions?: JumperProps; /** * table 类型 */ type?: CalendarTableType; } const Table = withStatics( function Table({ caption, children, jumperOptions = {}, type }: TableProps) { const { classPrefix } = useConfig(); return ( <div className={`${classPrefix}-calendar__table`}> <div className={`${classPrefix}-calendar__caption`}>{caption}</div> <Jumper {...jumperOptions} noBordered showCurrent /> {/* 日期 */} <div className={`${classPrefix}-calendar__row-group`}> <div className={classNames(`${classPrefix}-calendar__type-wrap`, { [`${classPrefix}-calendar__type--month`]: type === "month", [`${classPrefix}-calendar__type--year`]: type === "year", })} > {children} </div> </div> </div> ); }, { Row: TableRow, Cell, } ); export default Table; export function TableRow({ children }: { children: React.ReactNode }) { const { classPrefix } = useConfig(); return <div className={`${classPrefix}-calendar__row`}>{children}</div>; } export interface Cell { /** * 展示名称 */ name: string | number; /** * 对应日期值 */ value?: Moment; /** * 被选中回调 */ onSelect?: (value: Moment, context: ChangeContext) => void; /** * Outside 日期被选中回调 */ onOutsideSelect?: (current: Moment) => void; /** * 是否为当前时间 */ isNow?: boolean; /** * 是否在当前时间外 */ outside?: boolean; /** * 是否禁用 */ disabled?: boolean; /** * 状态 */ status?: CellStatus; } export function Cell({ name, value, onSelect = () => null, onOutsideSelect = () => null, isNow = false, outside = false, disabled = false, status = CellStatus.Common, }: Cell) { const { classPrefix } = useConfig(); return ( <div role="button" className={classNames({ [`${classPrefix}-calendar__cell`]: true, [`${classPrefix}-calendar__cell--now`]: isNow, [`${classPrefix}-calendar__day--outside`]: outside, [`${classPrefix}-calendar__day--in-range`]: !outside && status === CellStatus.InRange, [`${classPrefix}-calendar__day--start is-selected`]: !outside && status === CellStatus.RangeStart, [`${classPrefix}-calendar__day--end is-selected`]: !outside && status === CellStatus.RangeEnd, "is-disabled": disabled, "is-selected": !outside && status === CellStatus.Selected, })} onClick={event => { if (!disabled) { onSelect(value, { event }); if (outside) { onOutsideSelect(value); } } }} > <span>{name}</span> </div> ); } |