react-timelane 0.0.0 → 0.0.1

package/src/components/TimelineHeader/WeeksHeader.tsx

@@ -1,63 +0,0 @@
-import { MouseEvent, ReactElement } from "react";
-import { Pixels, TimeRange } from "../../types";
-import {
-  differenceInCalendarDays,
-  eachWeekOfInterval,
-  isSunday,
-  nextSunday,
-} from "date-fns";
-import { renderWeekHeader } from "./renderingUtils";
-
-interface WeeksHeaderProps {
-  range: TimeRange;
-  pixels: Pixels;
-  setFocusedDay?: (day: Date | null) => void;
-  render?: (firstDay: Date, lastDay: Date) => ReactElement;
-  onWeekClick?: (params: {
-    firstDay: Date;
-    lastDay: Date;
-    e: MouseEvent;
-  }) => void;
-}
-
-export function WeeksHeader({
-  range,
-  pixels,
-  setFocusedDay = () => {},
-  render = renderWeekHeader,
-  onWeekClick = () => undefined,
-}: WeeksHeaderProps) {
-  return (
-    <div className="timeline-header-weeks">
-      {eachWeekOfInterval(range, { weekStartsOn: 1 }).map((firstDay, index) => {
-        if (firstDay < range.start) {
-          firstDay = range.start;
-        }
-
-        let lastDay = isSunday(firstDay) ? firstDay : nextSunday(firstDay);
-
-        if (lastDay > range.end) {
-          lastDay = range.end;
-        }
-
-        const numberOfDays = differenceInCalendarDays(lastDay, firstDay) + 1;
-
-        return (
-          <div
-            key={index}
-            className="timeline-header-week-label"
-            style={{
-              width: `${pixels.pixelsPerDay * numberOfDays}px`,
-            }}
-            onClick={(e) => {
-              onWeekClick({ firstDay, lastDay, e });
-              setFocusedDay(firstDay);
-            }}
-          >
-            {render(firstDay, lastDay)}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/TimelineHeader/index.ts

@@ -1,9 +0,0 @@
-export { DaysHeader } from "./DaysHeader";
-export { WeeksHeader } from "./WeeksHeader";
-export { MonthsHeader } from "./MonthsHeader";
-export { TimelineHeader } from "./TimelineHeader";
-export {
-  renderDayHeader,
-  renderMonthHeader,
-  renderWeekHeader,
-} from "./renderingUtils";

package/src/components/TimelineHeader/renderingUtils.tsx

@@ -1,57 +0,0 @@
-import { differenceInCalendarDays, format } from "date-fns";
-import { ReactElement } from "react";
-
-export function renderMonthHeader(firstDay: Date, lastDay: Date): ReactElement {
-  const numberOfDays = differenceInCalendarDays(lastDay, firstDay) + 1;
-
-  return <>{numberOfDays > 4 ? format(firstDay, "LLLL yyyy") : <></>}</>;
-}
-
-export function renderWeekHeader(firstDay: Date, lastDay: Date): ReactElement {
-  const numberOfDays = differenceInCalendarDays(lastDay, firstDay) + 1;
-
-  const title = `KW ${format(firstDay, "w")} (${format(
-    firstDay,
-    "MM-dd"
-  )} - ${format(lastDay, "MM-dd")}`;
-
-  return (
-    <div title={title}>
-      {numberOfDays > 2 ? <>KW {format(firstDay, "w")}</> : <></>}
-    </div>
-  );
-  // return (
-  //   <Tooltip
-  //     arrow
-  //     title={
-  //       <div className="timeline-header-tooltip timeline-header-week-tooltip">
-  //         KW {format(firstDay, "w")} ({format(firstDay, "MM-dd")} -{" "}
-  //         {format(lastDay, "MM-dd")}
-  //       </div>
-  //     }
-  //     disableInteractive
-  //   >
-  //     <div>{numberOfDays > 2 ? <>KW {format(firstDay, "w")}</> : <></>}</div>
-  //   </Tooltip>
-  // );
-}
-
-export function renderDayHeader(day: Date): ReactElement {
-  const title = `${format(day, "yyyy-MM-dd")}`;
-
-  return <div title={title}>{format(day, "d")}</div>;
-
-  // return (
-  //   <Tooltip
-  //     arrow
-  //     title={
-  //       <div className="timeline-header-tooltip timeline-header-day-tooltip">
-  //         {format(day, "yyyy-MM-dd")}
-  //       </div>
-  //     }
-  //     disableInteractive
-  //   >
-  //     <div>{format(day, "d")}</div>
-  //   </Tooltip>
-  // );
-}

package/src/components/TimelineSelectionLayer.tsx

@@ -1,179 +0,0 @@
-import { PropsWithChildren, useEffect, useRef, useState } from "react";
-import { ItemId, Rectangle } from "../types";
-import { doOverlap } from "./core/CoreSwimlane/utils";
-import { MouseEvent } from "react";
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-
-interface TimelineSelectionLayerProps {
-  onSelect: (selection: number[]) => void;
-}
-
-export function TimelineSelectionLayer({
-  children,
-  onSelect,
-}: PropsWithChildren<TimelineSelectionLayerProps>) {
-  const [selectedItemIds, setSelectedItemIds] = useState<ItemId[]>([]);
-
-  const callbackRef = useRef<EventListener | null>(null);
-
-  const [mouseDownPos, setMouseDownPos] = useState<{
-    x: number;
-    y: number;
-  } | null>(null);
-
-  const [selectionRect, setSelectionRect] = useState<{
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  } | null>(null);
-
-  useEffect(() => {
-    return monitorForElements({
-      onDragStart: (args) => {
-        setSelectedItemIds([args.source.data.id as number]);
-      },
-    });
-  }, []);
-
-  useEffect(() => {
-    onSelect(selectedItemIds);
-  }, [onSelect, selectedItemIds]);
-
-  function handleMouseDown(e: MouseEvent) {
-    if (!e.shiftKey && !e.ctrlKey) {
-      setSelectedItemIds([]);
-    }
-    setMouseDownPos({ x: e.clientX, y: e.clientY });
-  }
-
-  function handleMouseMove(e: MouseEvent) {
-    if (mouseDownPos) {
-      const selectedRect = {
-        x: Math.min(e.clientX, mouseDownPos.x),
-        y: Math.min(e.clientY, mouseDownPos.y),
-        width: Math.abs(e.clientX - mouseDownPos.x),
-        height: Math.abs(e.clientY - mouseDownPos.y),
-      };
-
-      const rect = e.currentTarget.getBoundingClientRect();
-      setSelectionRect({
-        ...selectedRect,
-        x: selectedRect.x - rect.left,
-        y: selectedRect.y - rect.top,
-      });
-
-      document.querySelectorAll(".timeline-drop-target").forEach((row) => {
-        if (doOverlap(row.getBoundingClientRect(), selectedRect)) {
-          row.querySelectorAll(".timeline-item").forEach((item) => {
-            if (doOverlap(item.getBoundingClientRect(), selectedRect)) {
-              item.classList.add("timeline-item-marked");
-            } else {
-              item.classList.remove("timeline-item-marked");
-            }
-          });
-        }
-      });
-
-      if (
-        (selectedRect.width > 5 || selectedRect.height > 5) &&
-        !callbackRef.current
-      ) {
-        callbackRef.current = captureClick;
-        window.addEventListener("click", captureClick, true);
-      }
-    }
-  }
-
-  function handleMouseUp(e: MouseEvent) {
-    if (mouseDownPos && selectionRect) {
-      e.stopPropagation();
-      const selectedRect = {
-        x: Math.min(e.clientX, mouseDownPos.x),
-        y: Math.min(e.clientY, mouseDownPos.y),
-        width: Math.abs(e.clientX - mouseDownPos.x),
-        height: Math.abs(e.clientY - mouseDownPos.y),
-      };
-
-      const ids: ItemId[] = Array.from(
-        document.querySelectorAll(".timeline-drop-target")
-      )
-        .filter((row) => doOverlap(row.getBoundingClientRect(), selectedRect))
-        .map((row) => Array.from(row.querySelectorAll(".timeline-item")))
-        .flatMap((elements) => elements)
-        .filter((el) => doOverlap(el.getBoundingClientRect(), selectedRect))
-        .map((el) => {
-          if (el instanceof HTMLElement) {
-            return Number.parseInt(el.dataset.timelineItemId || "-1");
-          } else {
-            return -1;
-          }
-        })
-        .filter((id) => id > 0);
-
-      if (ids.length > 0) {
-        if (e.shiftKey || e.ctrlKey) {
-          setSelectedItemIds((prev) => {
-            return Array.from(new Set([...prev, ...ids]));
-          });
-        } else {
-          setSelectedItemIds(ids);
-        }
-      }
-
-      document.querySelectorAll(".timeline-item-marked").forEach((el) => {
-        el.classList.remove("timeline-item-marked");
-      });
-    }
-
-    setMouseDownPos(null);
-    setSelectionRect(null);
-
-    requestAnimationFrame(() => {
-      if (callbackRef.current && callbackRef.current !== null) {
-        window.removeEventListener("click", callbackRef.current, true);
-        callbackRef.current = null;
-      }
-    });
-  }
-
-  return (
-    <div
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      style={{
-        position: "relative",
-      }}
-    >
-      {selectionRect && <MouseSelectionIndicator rect={selectionRect} />}
-      {children}
-    </div>
-  );
-}
-
-const captureClick = (e: any) => {
-  e.preventDefault();
-  e.stopPropagation();
-};
-
-interface MouseSelectionIndicatorProps {
-  rect: Rectangle;
-}
-
-function MouseSelectionIndicator({ rect }: MouseSelectionIndicatorProps) {
-  return (
-    <div
-      id="mouse-selection-indicator"
-      style={{
-        border: "1px dashed blue",
-        position: "absolute",
-        top: `${rect.y}px`,
-        left: `${rect.x}px`,
-        width: `${rect.width}px`,
-        height: `${rect.height}px`,
-        zIndex: 1000000,
-      }}
-    ></div>
-  );
-}

package/src/components/TimelineSettingsContext.tsx

@@ -1,27 +0,0 @@
-import { createContext, Dispatch, SetStateAction } from "react";
-import { TimelineSettings } from "../types/TimelineSettings";
-
-const defaultTimelineSettings: TimelineSettings = {
-  start: new Date(2025, 1, 1),
-  end: new Date(2025, 5, 1),
-  pixelsPerDay: 30,
-  pixelsPerResource: 100,
-  showMonths: true,
-  showWeeks: true,
-  showDays: true,
-  allowOverlaps: true,
-  focusedDate: null,
-};
-
-export interface TimelineContextOuter {
-  settings: TimelineSettings;
-  setSettings: Dispatch<SetStateAction<TimelineSettings>>;
-}
-
-const defaultContext: TimelineContextOuter = {
-  settings: defaultTimelineSettings,
-  setSettings: () => undefined,
-};
-
-export const TimelineSettingsContext =
-  createContext<TimelineContextOuter>(defaultContext);

package/src/components/TimelineSettingsProvider.tsx

@@ -1,24 +0,0 @@
-import { PropsWithChildren, useEffect, useState } from "react";
-import { TimelineSettings } from "../types/TimelineSettings";
-import { TimelineSettingsContext } from "./TimelineSettingsContext";
-
-interface TimelineSettingsProviderProps {
-  settings: TimelineSettings;
-}
-
-export const TimelineSettingsProvider = ({
-  settings: _settings,
-  children,
-}: PropsWithChildren<TimelineSettingsProviderProps>) => {
-  const [settings, setSettings] = useState<TimelineSettings>(_settings);
-
-  useEffect(() => {
-    setSettings((prev) => ({ ...prev, _settings }));
-  }, [_settings]);
-
-  return (
-    <TimelineSettingsContext.Provider value={{ settings, setSettings }}>
-      {children}
-    </TimelineSettingsContext.Provider>
-  );
-};

package/src/components/TimelineWrapper.tsx

@@ -1,51 +0,0 @@
-import { PropsWithChildren } from "react";
-import { TimelineSettingsProvider } from "./TimelineSettingsProvider";
-import { SwimlaneT } from "../types";
-import "./Timeline.scss";
-
-interface TimelineWrapperProps {
-  focusedDay?: Date | null;
-  focusedSwimlane?: SwimlaneT | null;
-  start?: Date;
-  end?: Date;
-  pixelsPerDay?: number;
-  pixelsPerResource?: number;
-  showMonths?: boolean;
-  showWeeks?: boolean;
-  showDays?: boolean;
-  allowOverlaps?: boolean;
-  focusedDate?: Date | null;
-}
-
-export default function TimelineWrapper({
-  children,
-  start = new Date(2025, 1, 1),
-  end = new Date(2025, 5, 1),
-  pixelsPerDay = 30,
-  pixelsPerResource = 100,
-  showMonths = true,
-  showWeeks = true,
-  showDays = true,
-  allowOverlaps = true,
-  focusedDate = null,
-}: PropsWithChildren<TimelineWrapperProps>) {
-  return (
-    <div className="timeline">
-      <TimelineSettingsProvider
-        settings={{
-          start,
-          end,
-          pixelsPerDay,
-          pixelsPerResource,
-          showDays,
-          showMonths,
-          showWeeks,
-          allowOverlaps,
-          focusedDate,
-        }}
-      >
-        {children}
-      </TimelineSettingsProvider>
-    </div>
-  );
-}

package/src/components/core/CoreItem/CoreItemComponent.tsx

@@ -1,69 +0,0 @@
-import DragResizeComponent from "./DragResizeComponent";
-import {
-  getDropTargetDimensions,
-  getItemRectangle as getItemRectangle,
-  getUpdatedItem as getUpdatedItem,
-} from "../utils";
-import { PropsWithChildren } from "react";
-import {
-  CoreItem,
-  Position,
-  Rectangle,
-  SwimlaneT,
-  TimelineSettings,
-} from "../../../types";
-
-interface CoreItemComponentProps<T> {
-  item: CoreItem<T>;
-  swimlane: SwimlaneT;
-  settings: TimelineSettings;
-  onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;
-  onDrop: () => void;
-  onDrag: () => void;
-  onUpdate: (updatedItem: CoreItem<T>) => void;
-  onResizeStart: () => void;
-}
-
-export default function CoreItemComponent<T>({
-  swimlane,
-  item,
-  settings,
-  children,
-  onDragStart,
-  onDrag,
-  onDrop,
-  onUpdate,
-  onResizeStart,
-}: PropsWithChildren<CoreItemComponentProps<T>>) {
-  const rectangle = getItemRectangle(item, swimlane, settings, settings);
-  const boundingRectangle = getDropTargetDimensions(
-    swimlane,
-    settings,
-    settings
-  );
-
-  return (
-    <DragResizeComponent<T>
-      item={item}
-      rectangle={rectangle}
-      boundingRectangle={boundingRectangle}
-      onDrag={onDrag}
-      onDragStart={onDragStart}
-      onDrop={onDrop}
-      onUpdate={(rectangle: Rectangle) => {
-        const updatedItem: CoreItem<T> = getUpdatedItem(
-          item,
-          swimlane,
-          rectangle,
-          settings,
-          settings
-        );
-
-        onUpdate(updatedItem);
-      }}
-      onResizeStart={onResizeStart}
-    >
-      {children}
-    </DragResizeComponent>
-  );
-}

package/src/components/core/CoreItem/DragResizeComponent.tsx

@@ -1,180 +0,0 @@
-import { PropsWithChildren, useEffect, useRef, useState } from "react";
-import invariant from "tiny-invariant";
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { getGrabPosition } from "../utils";
-import { Resizable } from "re-resizable";
-import { Position, Rectangle, Dimensions, CoreItem } from "../../../types";
-
-interface DragResizeComponentProps<T> {
-  item: CoreItem<T>;
-  rectangle: Rectangle;
-  boundingRectangle: Dimensions;
-  onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;
-  onDrag: () => void;
-  onDrop: () => void;
-  onUpdate: (rectangle: Rectangle) => void;
-  onResizeStart: () => void;
-}
-
-/**
- * takes care of pixel-level drag-and-drop and resizing.
- * will emit every event through event handlers.
- * @param param0 t
- * @returns
- */
-export default function DragResizeComponent<T>({
-  item,
-  rectangle,
-  boundingRectangle,
-  children,
-  onDrag,
-  onDragStart,
-  onDrop,
-  onUpdate,
-  onResizeStart,
-}: PropsWithChildren<DragResizeComponentProps<T>>) {
-  const ref = useRef<HTMLDivElement>(null);
-  const handleRef = useRef<HTMLDivElement>(null);
-
-  const [tmpRectangle, setTmpRectangle] = useState<Rectangle>(rectangle);
-
-  useEffect(() => {
-    setTmpRectangle(rectangle);
-  }, [rectangle]);
-
-  useEffect(() => {
-    invariant(ref.current);
-    invariant(handleRef.current);
-
-    return draggable({
-      element: ref.current,
-      dragHandle: handleRef.current,
-      onDragStart: ({ source, location }) => {
-        const grabPos = getGrabPosition(source, location);
-        onDragStart(grabPos.absolute, grabPos.relative);
-      },
-      onDrag: () => {
-        onDrag();
-      },
-
-      onDrop: () => {
-        onDrop();
-      },
-      getInitialData: () => ({ ...item }),
-    });
-  }, [item, onDrag, onDragStart, onDrop]);
-
-  return (
-    <div
-      id={`timeline-item-${item.id}`}
-      className="timeline-item"
-      data-timeline-item-id={item.id}
-      ref={ref}
-      style={{
-        width: `${tmpRectangle.width}px`,
-        height: `${tmpRectangle.height}px`,
-        minWidth: `${tmpRectangle.width}px`,
-        minHeight: `${tmpRectangle.height}px`,
-        maxWidth: `${tmpRectangle.width}px`,
-        maxHeight: `${tmpRectangle.height}px`,
-        top: `${tmpRectangle.y}px`,
-        left: `${tmpRectangle.x}px`,
-      }}
-      onMouseDown={(e) => {
-        e.stopPropagation();
-      }}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      <Resizable
-        enable={{
-          right: true,
-          left: true,
-          top: true,
-          bottom: true,
-        }}
-        handleClasses={{
-          left: "timeline-item-resize-handle timeline-item-resize-handle-left",
-          right:
-            "timeline-item-resize-handle timeline-item-resize-handle-right",
-        }}
-        size={{
-          width: tmpRectangle.width,
-          height: tmpRectangle.height,
-        }}
-        onResizeStart={() => {
-          onResizeStart();
-        }}
-        onResize={(e, direction, ref, d) => {
-          setTmpRectangle((el) => {
-            if (direction === "right") {
-              return {
-                ...el,
-                width: rectangle.width + d.width,
-              };
-            } else if (direction === "left") {
-              return {
-                ...el,
-                x: rectangle.x - d.width,
-                width: rectangle.width + d.width,
-              };
-            } else if (direction === "bottom") {
-              return {
-                ...el,
-                height: Math.min(
-                  rectangle.height + d.height,
-                  boundingRectangle.height - rectangle.y
-                ),
-              };
-            } else if (direction === "top") {
-              return {
-                ...el,
-                y: rectangle.y - d.height,
-                height: rectangle.height + d.height,
-              };
-            } else {
-              return el;
-            }
-          });
-        }}
-        onResizeStop={(_, direction, ref, d) => {
-          let newRectangle = rectangle;
-          if (direction === "right") {
-            newRectangle = {
-              ...rectangle,
-              width: rectangle.width + d.width,
-            };
-          } else if (direction === "left") {
-            newRectangle = {
-              ...rectangle,
-              x: rectangle.x - d.width,
-              width: rectangle.width + d.width,
-            };
-          } else if (direction === "bottom") {
-            newRectangle = {
-              ...rectangle,
-              height: Math.min(
-                rectangle.height + d.height,
-                boundingRectangle.height - rectangle.y
-              ),
-            };
-          } else if (direction === "top") {
-            newRectangle = {
-              ...rectangle,
-              y: rectangle.y - d.height,
-              height: rectangle.height + d.height,
-            };
-          }
-
-          onUpdate(newRectangle);
-        }}
-        style={{ overflow: "hidden" }}
-      >
-        <div className="timeline-item-drag-handle" ref={handleRef}>
-          {children}
-        </div>
-      </Resizable>
-    </div>
-  );
-}