import { FC } from "react"; // hooks import { useChart } from "../hooks"; // helpers import { ChartAddBlock, ChartDraggable } from "components/gantt-chart"; import { renderFormattedPayloadDate } from "helpers/date-time.helper"; // types import { IBlockUpdateData, IGanttBlock } from "../types"; export type GanttChartBlocksProps = { itemsContainerWidth: number; blocks: IGanttBlock[] | null; blockToRender: (data: any) => React.ReactNode; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; enableBlockLeftResize: boolean; enableBlockRightResize: boolean; enableBlockMove: boolean; showAllBlocks: boolean; }; export const GanttChartBlocks: FC = (props) => { const { itemsContainerWidth, blocks, blockToRender, blockUpdateHandler, enableBlockLeftResize, enableBlockRightResize, enableBlockMove, showAllBlocks, } = props; const { activeBlock, dispatch } = useChart(); // update the active block on hover const updateActiveBlock = (block: IGanttBlock | null) => { dispatch({ type: "PARTIAL_UPDATE", payload: { activeBlock: block, }, }); }; const handleChartBlockPosition = ( block: IGanttBlock, totalBlockShifts: number, dragDirection: "left" | "right" | "move" ) => { if (!block.start_date || !block.target_date) return; const originalStartDate = new Date(block.start_date); const updatedStartDate = new Date(originalStartDate); const originalTargetDate = new Date(block.target_date); const updatedTargetDate = new Date(originalTargetDate); // update the start date on left resize if (dragDirection === "left") updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts); // update the target date on right resize else if (dragDirection === "right") updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts); // update both the dates on x-axis move else if (dragDirection === "move") { updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts); updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts); } // call the block update handler with the updated dates blockUpdateHandler(block.data, { start_date: renderFormattedPayloadDate(updatedStartDate) ?? undefined, target_date: renderFormattedPayloadDate(updatedTargetDate) ?? undefined, }); }; return (
{blocks && blocks.length > 0 && blocks.map((block) => { // hide the block if it doesn't have start and target dates and showAllBlocks is false if (!showAllBlocks && !(block.start_date && block.target_date)) return; const isBlockVisibleOnChart = block.start_date && block.target_date; return (
updateActiveBlock(block)} onMouseLeave={() => updateActiveBlock(null)} > {!isBlockVisibleOnChart && } handleChartBlockPosition(block, ...args)} enableBlockLeftResize={enableBlockLeftResize} enableBlockRightResize={enableBlockRightResize} enableBlockMove={enableBlockMove} />
); })}
); };