import { useState } from "react"; import { observer } from "mobx-react-lite"; import { Droppable } from "@hello-pangea/dnd"; // components import { CalendarIssueBlocks, ICalendarDate, CalendarQuickAddIssueForm } from "components/issues"; // helpers import { renderDateFormat } from "helpers/date-time.helper"; // constants import { MONTHS_LIST } from "constants/calendar"; import { IIssue } from "types"; import { IGroupedIssues, IIssueResponse } from "store/issues/types"; import { ICycleIssuesFilterStore, IModuleIssuesFilterStore, IProjectIssuesFilterStore, IViewIssuesFilterStore, } from "store/issues"; type Props = { issuesFilterStore: | IProjectIssuesFilterStore | IModuleIssuesFilterStore | ICycleIssuesFilterStore | IViewIssuesFilterStore; date: ICalendarDate; issues: IIssueResponse | undefined; groupedIssueIds: IGroupedIssues; quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode; enableQuickIssueCreate?: boolean; disableIssueCreation?: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: IIssue, viewId?: string ) => Promise; viewId?: string; }; export const CalendarDayTile: React.FC = observer((props) => { const { issuesFilterStore, date, issues, groupedIssueIds, quickActions, enableQuickIssueCreate, disableIssueCreation, quickAddCallback, viewId, } = props; const [showAllIssues, setShowAllIssues] = useState(false); const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month"; const issueIdList = groupedIssueIds ? groupedIssueIds[renderDateFormat(date.date)] : null; const totalIssues = issueIdList?.length ?? 0; return ( <>
{/* header */}
{date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "} {date.date.getDate()}
{/* content */}
{(provided, snapshot) => (
{enableQuickIssueCreate && !disableIssueCreation && (
setShowAllIssues(true)} />
)} {totalIssues > 4 && (
)} {provided.placeholder}
)}
); });