import { FC } from "react"; // hooks import { useChart } from "../hooks"; // helpers import { ChartDraggable } from "../helpers/draggable"; import { renderDateFormat } from "helpers/date-time.helper"; // types import { IBlockUpdateData, IGanttBlock } from "../types"; export const GanttChartBlocks: FC<{ itemsContainerWidth: number; blocks: IGanttBlock[] | null; BlockRender: React.FC; blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; enableBlockLeftResize: boolean; enableBlockRightResize: boolean; enableBlockMove: boolean; }> = ({ itemsContainerWidth, blocks, BlockRender, blockUpdateHandler, enableBlockLeftResize, enableBlockRightResize, enableBlockMove, }) => { 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" ) => { 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: renderDateFormat(updatedStartDate), target_date: renderDateFormat(updatedTargetDate), }); }; return (
{blocks && blocks.length > 0 && blocks.map( (block) => block.start_date && block.target_date && (
updateActiveBlock(block)} onMouseLeave={() => updateActiveBlock(null)} > handleChartBlockPosition(block, ...args)} enableBlockLeftResize={enableBlockLeftResize} enableBlockRightResize={enableBlockRightResize} enableBlockMove={enableBlockMove} />
) )}
); };