105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import DateRange from "@/classes/DateRange";
|
|
import "@/styles/calendar.css";
|
|
import "react-calendar/dist/Calendar.css";
|
|
import Calendar from "react-calendar";
|
|
import { Value } from "@/types/CalendarDates.ts";
|
|
|
|
export default function CustomCalendar(props: {
|
|
enemyDates: DateRange[];
|
|
allyDates: DateRange[];
|
|
selfDates: DateRange[];
|
|
calendarValue: Value,
|
|
onChangeCalendarValue: (newValue:Value) => void,
|
|
}){
|
|
type CalDate = {
|
|
activeStartDate: Date;
|
|
date: Date;
|
|
view: string;
|
|
};
|
|
|
|
const calendarValue = props.calendarValue;
|
|
|
|
const zerofyDate = (month: number): string => {
|
|
return month < 10 ? "0" + month : month.toString();
|
|
};
|
|
|
|
const formatDate = (date: Date): string => {
|
|
return (
|
|
date.getFullYear() +
|
|
"-" +
|
|
zerofyDate(date.getMonth() + 1) +
|
|
"-" +
|
|
zerofyDate(date.getDate())
|
|
);
|
|
};
|
|
|
|
function listDatesFromRangeList(dateRangeArr: DateRange[]): Date[] {
|
|
const dates: Date[] = [];
|
|
for (const dateRange of dateRangeArr) {
|
|
const list: Date[] = dateRange.generateDatesBetween();
|
|
list.forEach(date => {
|
|
if (!dates.includes(date)) {
|
|
dates.push(date);
|
|
}
|
|
});
|
|
}
|
|
|
|
return dates;
|
|
}
|
|
|
|
const enemyDates = listDatesFromRangeList(props.enemyDates);
|
|
const allyDates = listDatesFromRangeList(props.allyDates);
|
|
const selfDates = listDatesFromRangeList(props.selfDates);
|
|
|
|
const calculateDateClass = (date: CalDate): string => {
|
|
if (date.view === "month") {
|
|
const defaultCellClass = "cell ";
|
|
|
|
const wrappingDate = formatDate(new Date(date.date));
|
|
const isEnemy = enemyDates.some(
|
|
(enemyDate: Date) => formatDate(enemyDate) == wrappingDate,
|
|
);
|
|
const isAlly = allyDates.some(
|
|
(allyDate: Date) => formatDate(allyDate) == wrappingDate,
|
|
);
|
|
const isSelf = selfDates.some(
|
|
(selfDate: Date) => formatDate(selfDate) == wrappingDate,
|
|
);
|
|
|
|
// enemy > self > ally | default
|
|
if (isSelf && isAlly && isEnemy) {
|
|
return defaultCellClass + "ally-self-enemy";
|
|
} else if (isSelf && isAlly && !isEnemy) {
|
|
return defaultCellClass + "ally-self";
|
|
} else if (isSelf && !isAlly && isEnemy) {
|
|
return defaultCellClass + "enemy-self";
|
|
} else if (!isSelf && isAlly && isEnemy) {
|
|
return defaultCellClass + "ally-enemy";
|
|
} else if (isEnemy) {
|
|
return defaultCellClass + "enemy";
|
|
} else if (isSelf) {
|
|
return defaultCellClass + "self";
|
|
} else if (isAlly) {
|
|
return defaultCellClass + "ally";
|
|
}
|
|
|
|
return defaultCellClass + "default";
|
|
}
|
|
|
|
return "";
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Calendar
|
|
className="calendar default"
|
|
locale="ru-RU"
|
|
selectRange={true}
|
|
tileClassName={calculateDateClass}
|
|
returnValue="range"
|
|
value={calendarValue}
|
|
onChange={props.onChangeCalendarValue}
|
|
/>
|
|
</>
|
|
);
|
|
} |