|
|
|
|
@ -5,10 +5,10 @@ import { useWorkspaceSettingStore } from "@/store/v1";
|
|
|
|
|
import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
|
|
|
|
|
import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
|
|
|
|
|
import { useTranslate } from "@/utils/i18n";
|
|
|
|
|
import { cn } from "@/utils/utils";
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
// Format: 2021-1
|
|
|
|
|
month: string;
|
|
|
|
|
month: string; // Format: 2021-1
|
|
|
|
|
selectedDate: string;
|
|
|
|
|
data: Record<string, number>;
|
|
|
|
|
onClick?: (date: string) => void;
|
|
|
|
|
@ -16,9 +16,8 @@ interface Props {
|
|
|
|
|
|
|
|
|
|
const getCellAdditionalStyles = (count: number, maxCount: number) => {
|
|
|
|
|
if (count === 0) {
|
|
|
|
|
return "bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500";
|
|
|
|
|
return "";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ratio = count / maxCount;
|
|
|
|
|
if (ratio > 0.7) {
|
|
|
|
|
return "bg-primary-darker text-gray-100 dark:opacity-80";
|
|
|
|
|
@ -36,72 +35,64 @@ const ActivityCalendar = (props: Props) => {
|
|
|
|
|
const weekStartDayOffset = (
|
|
|
|
|
workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({})
|
|
|
|
|
).weekStartDayOffset;
|
|
|
|
|
|
|
|
|
|
const year = dayjs(monthStr).toDate().getFullYear();
|
|
|
|
|
const month = dayjs(monthStr).toDate().getMonth() + 1;
|
|
|
|
|
const dayInMonth = new Date(year, month, 0).getDate();
|
|
|
|
|
const firstDay = (((new Date(year, month - 1, 1).getDay() - weekStartDayOffset) % 7) + 7) % 7;
|
|
|
|
|
const lastDay = new Date(year, month - 1, dayInMonth).getDay() - weekStartDayOffset;
|
|
|
|
|
const month = dayjs(monthStr).toDate().getMonth();
|
|
|
|
|
const dayInMonth = new Date(year, month + 1, 0).getDate();
|
|
|
|
|
const firstDay = (((new Date(year, month, 1).getDay() - weekStartDayOffset) % 7) + 7) % 7;
|
|
|
|
|
const lastDay = new Date(year, month, dayInMonth).getDay() - weekStartDayOffset;
|
|
|
|
|
const prevMonthDays = new Date(year, month, 0).getDate();
|
|
|
|
|
|
|
|
|
|
const WEEK_DAYS = [t("days.sun"), t("days.mon"), t("days.tue"), t("days.wed"), t("days.thu"), t("days.fri"), t("days.sat")];
|
|
|
|
|
const weekDays = WEEK_DAYS.slice(weekStartDayOffset).concat(WEEK_DAYS.slice(0, weekStartDayOffset));
|
|
|
|
|
const maxCount = Math.max(...Object.values(data));
|
|
|
|
|
const days = [];
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < firstDay; i++) {
|
|
|
|
|
days.push(0);
|
|
|
|
|
// Fill in previous month's days.
|
|
|
|
|
for (let i = firstDay - 1; i >= 0; i--) {
|
|
|
|
|
days.push({ day: prevMonthDays - i, isCurrentMonth: false });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fill in current month's days.
|
|
|
|
|
for (let i = 1; i <= dayInMonth; i++) {
|
|
|
|
|
days.push(i);
|
|
|
|
|
days.push({ day: i, isCurrentMonth: true });
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < 6 - lastDay; i++) {
|
|
|
|
|
days.push(0);
|
|
|
|
|
|
|
|
|
|
// Fill in next month's days.
|
|
|
|
|
for (let i = 1; i < 7 - lastDay; i++) {
|
|
|
|
|
days.push({ day: i, isCurrentMonth: false });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={clsx("w-full h-auto shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
|
|
|
|
|
{weekDays.map((day, index) => {
|
|
|
|
|
return (
|
|
|
|
|
<div key={index} className={clsx("w-6 h-5 text-xs flex justify-center items-center cursor-default opacity-60")}>
|
|
|
|
|
{day}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
{days.map((day, index) => {
|
|
|
|
|
const date = dayjs(`${year}-${month}-${day}`).format("YYYY-MM-DD");
|
|
|
|
|
const count = data[date] || 0;
|
|
|
|
|
{weekDays.map((day, index) => (
|
|
|
|
|
<div key={index} className={clsx("w-6 h-5 text-xs flex justify-center items-center cursor-default opacity-60")}>
|
|
|
|
|
{day}
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
{days.map((item, index) => {
|
|
|
|
|
const date = dayjs(`${year}-${month + 1}-${item.day}`).format("YYYY-MM-DD");
|
|
|
|
|
const count = item.isCurrentMonth ? data[date] || 0 : 0;
|
|
|
|
|
const isToday = dayjs().format("YYYY-MM-DD") === date;
|
|
|
|
|
const tooltipText = count ? t("memo.count-memos-in-date", { count: count, date: date }) : date;
|
|
|
|
|
const isSelected = dayjs(props.selectedDate).format("YYYY-MM-DD") === date;
|
|
|
|
|
return day ? (
|
|
|
|
|
count > 0 ? (
|
|
|
|
|
<Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
|
|
|
|
|
<div
|
|
|
|
|
className={clsx(
|
|
|
|
|
"w-6 h-6 text-xs rounded-xl flex justify-center items-center border cursor-default",
|
|
|
|
|
getCellAdditionalStyles(count, maxCount),
|
|
|
|
|
isToday && "border-zinc-400 dark:border-zinc-300",
|
|
|
|
|
isSelected && "font-bold border-zinc-400 dark:border-zinc-300",
|
|
|
|
|
!isToday && !isSelected && "border-transparent",
|
|
|
|
|
)}
|
|
|
|
|
onClick={() => count && onClick && onClick(date)}
|
|
|
|
|
>
|
|
|
|
|
{day}
|
|
|
|
|
</div>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
|
|
|
|
|
<div
|
|
|
|
|
key={`${date}-${index}`}
|
|
|
|
|
className={clsx(
|
|
|
|
|
className={cn(
|
|
|
|
|
"w-6 h-6 text-xs rounded-xl flex justify-center items-center border cursor-default",
|
|
|
|
|
"bg-gray-100 text-gray-400 dark:bg-zinc-800 dark:text-gray-500",
|
|
|
|
|
isToday && "border-zinc-400 dark:border-zinc-500",
|
|
|
|
|
"text-gray-400",
|
|
|
|
|
item.isCurrentMonth ? getCellAdditionalStyles(count, maxCount) : "opacity-60",
|
|
|
|
|
isToday && "border-zinc-400",
|
|
|
|
|
isSelected && "font-bold border-zinc-400",
|
|
|
|
|
!isToday && !isSelected && "border-transparent",
|
|
|
|
|
)}
|
|
|
|
|
onClick={() => count && onClick && onClick(date)}
|
|
|
|
|
>
|
|
|
|
|
{day}
|
|
|
|
|
{item.day}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
) : (
|
|
|
|
|
<div key={`${date}-${index}`} className="shrink-0 w-6 h-6 opacity-0"></div>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
|
johnnyjoy
6 months ago