2023-04-22 19:02:25 -04:00
|
|
|
|
import React from 'react';
|
|
|
|
|
import './Calendar.scss';
|
|
|
|
|
import {formatJG, jdnGregorian, JulianDay, JulianMonth, monthName, weekdayNames} from '@common/gregorian';
|
|
|
|
|
import {jdnLongCount} from '@common/longCount';
|
|
|
|
|
import {jdnJulian, julianJDN, julianMonthDays} from '@common/julian';
|
|
|
|
|
import {frDateFormat, frEndJD, frStartJD, jdnFrench} from '@common/french';
|
|
|
|
|
|
|
|
|
|
type MonthProps = {
|
|
|
|
|
year: number;
|
|
|
|
|
month: JulianMonth;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type DateProps = MonthProps & {
|
|
|
|
|
day: JulianDay;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function WeekdayName({name}: { name: string }): JSX.Element {
|
|
|
|
|
return <div className="WeekdayName">{name}</div>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function DayDetail({jdn}: { jdn: number }): JSX.Element {
|
|
|
|
|
const lc = jdnLongCount(jdn);
|
|
|
|
|
return <div className="DayDetail">
|
2023-04-29 03:57:05 -04:00
|
|
|
|
<div className="DayDetail-jdn"><abbr title="Julian day number" tabIndex={0}>JD</abbr> {jdn}</div>
|
2023-04-22 19:02:25 -04:00
|
|
|
|
<div className="DayDetail-gregorian">
|
2023-04-29 03:57:05 -04:00
|
|
|
|
<abbr title="Gregorian date" tabIndex={0}>G.</abbr>{' '}
|
2023-04-22 19:02:25 -04:00
|
|
|
|
{formatJG(jdnGregorian(jdn))}
|
|
|
|
|
</div>
|
|
|
|
|
{lc && <div className="DayDetail-lc">
|
2023-04-29 03:57:05 -04:00
|
|
|
|
<abbr title="Mesoamerican long count date" tabIndex={0}>LC</abbr>{' '}
|
2023-04-22 19:02:25 -04:00
|
|
|
|
{lc.join('.\u200b')}
|
|
|
|
|
</div>}
|
|
|
|
|
{jdn >= frStartJD && jdn <= frEndJD && <div className="DayDetail-fr">
|
2023-04-29 03:57:05 -04:00
|
|
|
|
<abbr title="French Republican Calendar" tabIndex={0}>FR</abbr>{' '}
|
2023-04-22 19:02:25 -04:00
|
|
|
|
{frDateFormat(jdnFrench(jdn))}
|
|
|
|
|
</div>}
|
|
|
|
|
</div>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Day({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element {
|
|
|
|
|
const jdn = julianJDN(year, month, day);
|
|
|
|
|
return <div className={`Day NormalDay ${jdn === todayJDN ? 'Day-today' : ''}`}>
|
|
|
|
|
<div className="Day-name">{day}</div>
|
2023-04-23 20:27:52 -04:00
|
|
|
|
<div className="Day-weekday">{weekdayNames[(jdn + 1) % 7]}</div>
|
2023-04-22 19:02:25 -04:00
|
|
|
|
<DayDetail jdn={jdn}/>
|
|
|
|
|
</div>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Month({year, month, todayJDN}: MonthProps & { todayJDN: number }): JSX.Element {
|
|
|
|
|
const decadeHeads = weekdayNames.map((name, i) => <WeekdayName key={i} name={name}/>);
|
|
|
|
|
const firstJDN = julianJDN(year, month, 1);
|
|
|
|
|
const firstWeekday = (firstJDN + 1) % 7;
|
|
|
|
|
const daysTotal = julianMonthDays(year, month);
|
|
|
|
|
return <div className="Month">
|
|
|
|
|
<div className="Month-weekdayHead">{decadeHeads}</div>
|
|
|
|
|
<div className="Month-days">{
|
|
|
|
|
Array.from(Array(6).keys()).flatMap(i => {
|
|
|
|
|
if (i * 7 - firstWeekday + 1 > daysTotal)
|
|
|
|
|
return [];
|
|
|
|
|
return Array.from(Array(7).keys()).map(j => {
|
|
|
|
|
const day = i * 7 + j - firstWeekday + 1 as JulianDay;
|
|
|
|
|
if (day < 1 || day > daysTotal)
|
|
|
|
|
return <div key={j} className="DayFiller"/>;
|
|
|
|
|
return <div key={j} className="DayOuter">
|
|
|
|
|
<Day year={year} month={month} day={day} todayJDN={todayJDN}/>
|
|
|
|
|
</div>;
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}</div>
|
|
|
|
|
</div>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export type CalendarProps = MonthProps & {
|
|
|
|
|
todayJDN: number;
|
|
|
|
|
onSwitch?: (year: number, month: JulianMonth) => void,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type CalendarState = {
|
|
|
|
|
selecting: boolean,
|
|
|
|
|
yearStr: string,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export class Calendar extends React.Component<CalendarProps, CalendarState> {
|
|
|
|
|
selection: React.RefObject<HTMLDivElement>;
|
|
|
|
|
|
|
|
|
|
constructor(props: CalendarProps) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
selecting: false,
|
|
|
|
|
yearStr: this.props.year.toString(),
|
|
|
|
|
};
|
|
|
|
|
this.selection = React.createRef();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
document.addEventListener('click', this.handleClickOutside, true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
|
document.removeEventListener('click', this.handleClickOutside, true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private goToNormalized(year: number, month: number) {
|
|
|
|
|
if (month < 1) {
|
|
|
|
|
--year;
|
|
|
|
|
month += 12;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (month > 12) {
|
|
|
|
|
++year;
|
|
|
|
|
month -= 12;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.props.onSwitch && this.props.onSwitch(year, month as JulianMonth);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
prevYear = () => {
|
|
|
|
|
this.goToNormalized(this.props.year - 1, this.props.month);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
prevMonth = () => {
|
|
|
|
|
this.goToNormalized(this.props.year, this.props.month - 1);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
nextYear = () => {
|
|
|
|
|
this.goToNormalized(this.props.year + 1, this.props.month);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
nextMonth = () => {
|
|
|
|
|
this.goToNormalized(this.props.year, this.props.month + 1);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
startSelection = () => {
|
|
|
|
|
this.setState({selecting: true});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleClickOutside = (event: any) => {
|
|
|
|
|
if (this.state.selecting && this.selection.current && !this.selection.current.contains(event.target))
|
|
|
|
|
this.setState({selecting: false});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleKeyUp = (event: any) => {
|
|
|
|
|
if (event.key === 'Escape')
|
|
|
|
|
this.setState({selecting: false});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
monthChange = (event: any) => {
|
|
|
|
|
this.goToNormalized(this.props.year, +event.target.value as JulianMonth);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
yearChange = (event: any) => {
|
|
|
|
|
if (/^-?\d+/.test(event.target.value)) {
|
|
|
|
|
this.goToNormalized(+event.target.value, this.props.month);
|
|
|
|
|
}
|
|
|
|
|
this.setState({yearStr: event.target.value});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
goToToday = () => {
|
|
|
|
|
const [year, month] = jdnJulian(this.props.todayJDN);
|
|
|
|
|
this.goToNormalized(year, month);
|
|
|
|
|
this.setState({selecting: false});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps: CalendarProps) {
|
|
|
|
|
if (prevProps.year !== this.props.year) {
|
|
|
|
|
const yearStr = this.props.year.toString();
|
|
|
|
|
if (this.state.yearStr !== yearStr) {
|
|
|
|
|
this.setState({
|
|
|
|
|
yearStr: yearStr,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render(): JSX.Element {
|
|
|
|
|
return <div className="Calendar">
|
|
|
|
|
<div className="Calendar-head">
|
|
|
|
|
<div className="Calendar-prev">
|
|
|
|
|
<button type="button" className="btn btn-secondary" title="Previous year" onClick={this.prevYear}>«
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" className="btn btn-secondary" title="Previous month"
|
|
|
|
|
onClick={this.prevMonth}>‹
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
{!this.state.selecting && <div className="Calendar-month-name" onClick={this.startSelection}>
|
|
|
|
|
{monthName(this.props.month)} {this.props.year}
|
|
|
|
|
</div>}
|
|
|
|
|
{this.state.selecting && <div className="Calendar-month-name input-group" ref={this.selection}
|
|
|
|
|
onKeyUp={this.handleKeyUp}>
|
|
|
|
|
<select className="Calendar-month-input form-control" onChange={this.monthChange}
|
|
|
|
|
value={this.props.month}>{
|
|
|
|
|
Array.from(Array(12).keys()).map(i => {
|
|
|
|
|
const month = i + 1 as JulianMonth;
|
|
|
|
|
return <option key={i} value={month}>{monthName(month)}</option>;
|
|
|
|
|
})
|
|
|
|
|
}</select>
|
|
|
|
|
<input type="number" className="Calendar-year-input form-control" value={this.state.yearStr}
|
|
|
|
|
onChange={this.yearChange}/>
|
|
|
|
|
<button type="button" className="form-control btn btn-primary Calendar-today-button"
|
|
|
|
|
onClick={this.goToToday}>Today
|
|
|
|
|
</button>
|
|
|
|
|
</div>}
|
|
|
|
|
<div className="Calendar-next">
|
|
|
|
|
<button type="button" className="btn btn-secondary" title="Next month" onClick={this.nextMonth}>›
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" className="btn btn-secondary" title="Next year" onClick={this.nextYear}>»
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<Month year={this.props.year} month={this.props.month} todayJDN={this.props.todayJDN}/>
|
|
|
|
|
</div>;
|
|
|
|
|
}
|
|
|
|
|
}
|