react-timelane 0.0.0 → 0.0.2

package/src/components/core/CoreSwimlane/AvailableSpaceIndicator.tsx

@@ -1,156 +0,0 @@
-import { PropsWithChildren, useEffect, useState } from "react";
-import { dateToPixel, offsetToPixel } from "../utils";
-import { getAvailableSpace } from "./utils";
-import { addDays, setHours } from "date-fns";
-import {
-  AvailableSpace,
-  CoreItem,
-  Pixels,
-  Rectangle,
-  SwimlaneT,
-  TimeRange,
-} from "../../../types";
-
-interface AvailableSpaceIndicatorProps<T> {
-  pixels: Pixels;
-  range: TimeRange;
-  swimlane: SwimlaneT;
-  debug: boolean;
-  items: CoreItem<T>[];
-}
-
-/**
- * A component that displays the available space at the mouse cursor position.
- * The available space is a rectangle that does not overlap with it's surrounding items.
- * It is determined by some heuristics.
- *
- * Only used for debugging purposes.
- *
- * @param param0
- * @returns
- */
-export default function AvailableSpaceIndicator<T>({
-  pixels,
-  range,
-  swimlane,
-  items,
-  debug = false,
-  children,
-}: PropsWithChildren<AvailableSpaceIndicatorProps<T>>) {
-  const [availableSpace, setAvailableSpace] = useState<AvailableSpace | null>(
-    null
-  );
-
-  function getDate(e: React.MouseEvent) {
-    const clientRect = e.currentTarget.getBoundingClientRect();
-    return setHours(
-      addDays(range.start, (e.clientX - clientRect.left) / pixels.pixelsPerDay),
-      12
-    );
-  }
-
-  function getOffset(e: React.MouseEvent) {
-    const clientRect = e.currentTarget.getBoundingClientRect();
-    const relativePxOffsetY = (e.pageY - clientRect.top) / clientRect.height;
-
-    return relativePxOffsetY * swimlane.capacity;
-  }
-
-  return (
-    <div
-      style={{
-        width: "100%",
-        height: "100%",
-        position: "relative",
-      }}
-      onMouseMove={(e) => {
-        if (!debug) return;
-
-        const clickedDate = getDate(e);
-        const clickedOffset = getOffset(e);
-
-        const availableSpace: AvailableSpace | null = getAvailableSpace(
-          clickedDate,
-          clickedOffset,
-          swimlane,
-          items,
-          range
-        );
-
-        setAvailableSpace(availableSpace);
-      }}
-      onMouseLeave={() => {
-        if (!debug) return;
-        setAvailableSpace(null);
-      }}
-    >
-      {children}
-      <AvailableSpaceIndicatorItem
-        availableSpace={availableSpace}
-        pixels={pixels}
-        swimlane={swimlane}
-        range={range}
-      />
-    </div>
-  );
-}
-
-interface AvailableSpaceIndicatorItemProps {
-  availableSpace: AvailableSpace | null;
-  range: TimeRange;
-  pixels: Pixels;
-  swimlane: SwimlaneT;
-}
-
-function AvailableSpaceIndicatorItem({
-  availableSpace,
-  range,
-  pixels,
-  swimlane,
-}: AvailableSpaceIndicatorItemProps) {
-  const [hoverRect, setHoverRect] = useState<Rectangle | null>(null);
-
-  useEffect(() => {
-    if (!availableSpace) {
-      setHoverRect(null);
-      return;
-    }
-
-    const x = dateToPixel(availableSpace.start, range.start, pixels);
-
-    const width = dateToPixel(availableSpace.end, range.start, pixels) - x;
-
-    const y = offsetToPixel(
-      availableSpace.minOffset,
-      swimlane.capacity,
-      pixels
-    );
-    const height =
-      offsetToPixel(availableSpace.maxOffset, swimlane.capacity, pixels) - y;
-
-    setHoverRect({
-      x,
-      y,
-      width,
-      height,
-    });
-  }, [availableSpace, pixels, range.start, swimlane.capacity]);
-
-  return (
-    <div
-      style={
-        hoverRect
-          ? {
-              position: "absolute",
-              top: `${hoverRect.y}px`,
-              left: `${hoverRect.x + 1}px`,
-              width: `${hoverRect.width - 1}px`,
-              height: `${hoverRect.height - 1}px`,
-              background: "purple",
-              opacity: 0.3,
-            }
-          : {}
-      }
-    ></div>
-  );
-}

package/src/components/core/CoreSwimlane/CoreSwimlane.tsx

@@ -1,245 +0,0 @@
-import DropTarget from "./DropTarget";
-import DropPreview from "./DropPreview";
-import { format } from "date-fns";
-
-import { MouseEvent, ReactElement, useState } from "react";
-import { addDays, setHours } from "date-fns";
-import {
-  getItemRectangle,
-  getDropTargetDimensions as getSwimlaneDimensions,
-  getUpdatedItem as getUpdatedItem,
-} from "../utils";
-import {
-  getAvailableSpace,
-  getDropPreviewRectangle,
-  getOverlap,
-} from "./utils";
-import CoreItemComponent from "../CoreItem/CoreItemComponent";
-import OverlapIndicator from "./OverlapIndicator";
-
-import {
-  AvailableSpace,
-  CoreItem,
-  Dimensions,
-  GrabInfo,
-  Grid,
-  Position,
-  Rectangle,
-  SwimlaneT,
-  isCoreItem,
-} from "../../../types";
-import { useTimelineContext } from "../../../hooks/useTimelineContext";
-
-interface CoreSwimlaneProps<T> {
-  swimlane: SwimlaneT;
-  items: CoreItem<T>[];
-  focused?: boolean;
-  onItemUpdate?: (item: CoreItem<T>) => void;
-  onMouseUp?: (e: MouseEvent) => void;
-  onClick?: (
-    when: Date,
-    availableSpace: AvailableSpace | null,
-    e: MouseEvent
-  ) => void;
-  onDoubleClick?: (
-    when: Date,
-    availableSpace: AvailableSpace | null,
-    e: MouseEvent
-  ) => void;
-  onContextMenu?: (when: Date, e: MouseEvent) => void;
-  renderItem?: (item: CoreItem<T>, isDragged: boolean) => ReactElement;
-  onResizeStart?: (data: T) => void;
-}
-
-export default function CoreSwimlane<T>({
-  swimlane,
-  items,
-  focused = false,
-  onItemUpdate = () => {},
-  onMouseUp = () => {},
-  onClick = () => {},
-  onDoubleClick = () => {},
-  onContextMenu = () => {},
-  renderItem = defaultRenderItem,
-  onResizeStart = () => {},
-}: CoreSwimlaneProps<T>) {
-  const { settings } = useTimelineContext();
-
-  const grid: Grid = {
-    x: settings.pixelsPerDay,
-    offsetX: settings.pixelsPerDay / 2,
-  };
-
-  const dimensions: Dimensions = getSwimlaneDimensions(
-    swimlane,
-    settings,
-    settings
-  );
-
-  const [draggedItem, setDraggedItem] = useState<CoreItem<T> | null>(null);
-
-  const [dropPreviewRect, setDropPreviewRect] = useState<Rectangle | null>(
-    null
-  );
-
-  function getMouseEventDate(e: React.MouseEvent) {
-    const clientRect = e.currentTarget.getBoundingClientRect();
-    return setHours(
-      addDays(
-        settings.start,
-        (e.clientX - clientRect.left) / settings.pixelsPerDay
-      ),
-      12
-    );
-  }
-
-  function getMouseEventOffset(e: React.MouseEvent) {
-    const clientRect = e.currentTarget.getBoundingClientRect();
-    const relativePxOffsetY = (e.pageY - clientRect.top) / clientRect.height;
-
-    return relativePxOffsetY * swimlane.capacity;
-  }
-
-  function handleDrag(mousePos: Position, grabInfo: GrabInfo, data: object) {
-    if (!isCoreItem(data)) return;
-
-    const newDropPreviewRect: Rectangle | null = getDropPreviewRectangle(
-      swimlane,
-      items,
-      data,
-      mousePos,
-      grabInfo,
-      settings,
-      grid,
-      settings,
-      settings.allowOverlaps
-    );
-
-    setDropPreviewRect(newDropPreviewRect);
-  }
-
-  function handleDrop(
-    mousePos: Position,
-    grabInfo: GrabInfo,
-    data: CoreItem<T>
-  ) {
-    if (!isCoreItem(data) || dropPreviewRect === null) return;
-
-    const updatedItem: CoreItem<T> = getUpdatedItem<T>(
-      data,
-      swimlane,
-      dropPreviewRect,
-      settings,
-      settings
-    );
-
-    onItemUpdate(updatedItem);
-    setDropPreviewRect(null);
-  }
-
-  function handleDragLeave() {
-    setDropPreviewRect(null);
-  }
-
-  function handleClick(e: React.MouseEvent, type: "single" | "double") {
-    const clickedDate = getMouseEventDate(e);
-    const clickedOffset = getMouseEventOffset(e);
-
-    const availableSpace: AvailableSpace | null = getAvailableSpace(
-      clickedDate,
-      clickedOffset,
-      swimlane,
-      items,
-      settings
-    );
-
-    if (type == "single") {
-      onClick(clickedDate, availableSpace, e);
-    } else {
-      onDoubleClick(clickedDate, availableSpace, e);
-    }
-  }
-
-  const rects = items.map((x) => ({
-    id: x.id,
-    ...getItemRectangle(x, swimlane, settings, settings),
-  }));
-
-  const overlaps: Rectangle[] = rects
-    .flatMap((x) =>
-      rects.map((y) => {
-        if (x.id < y.id) {
-          const overlap = getOverlap(x, y);
-          return overlap;
-        } else {
-          return null;
-        }
-      })
-    )
-    .filter((x) => x !== null);
-
-  return (
-    <div
-      id={`timeline-swimlane-${swimlane.id}`}
-      className={`timeline-swimlane ${
-        focused ? "timeline-swimlane-focused" : ""
-      }`}
-      data-timeline-swimlane-id={swimlane.id}
-      style={dimensions}
-      onMouseUp={onMouseUp}
-      onClick={(e) => handleClick(e, "single")}
-      onDoubleClick={(e) => handleClick(e, "double")}
-      onContextMenu={(e) => {
-        onContextMenu(getMouseEventDate(e), e);
-      }}
-    >
-      <DropTarget
-        onDrag={handleDrag}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-      >
-        {items.map((item, index) => (
-          <CoreItemComponent<T>
-            key={index}
-            item={item}
-            settings={settings}
-            swimlane={swimlane}
-            onDragStart={() => {
-              setDraggedItem(item);
-            }}
-            onDrag={() => {}}
-            onDrop={() => {
-              setDraggedItem(null);
-            }}
-            onUpdate={onItemUpdate}
-            onResizeStart={() => {
-              onResizeStart(item.payload);
-            }}
-          >
-            {renderItem(
-              item,
-              draggedItem !== null && draggedItem.id === item.id
-            )}
-          </CoreItemComponent>
-        ))}
-        {dropPreviewRect && <DropPreview {...dropPreviewRect}></DropPreview>}
-
-        {overlaps.map((overlap, index) => (
-          <OverlapIndicator overlap={overlap} key={index} />
-        ))}
-      </DropTarget>
-    </div>
-  );
-}
-
-function defaultRenderItem<T>(
-  item: CoreItem<T>,
-  isDragged: boolean
-): ReactElement {
-  return (
-    <div>
-      {item.id} ({format(item.start, "yyyy-mm-dd")} -{" "}
-      {format(item.end, "yyyy-mm-dd")}){isDragged ? "dragging" : ""}
-    </div>
-  );
-}

package/src/components/core/CoreSwimlane/DropPreview.tsx

@@ -1,30 +0,0 @@
-import { PropsWithChildren } from "react";
-
-interface DropPreviewProps {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export default function DropPreview({
-  x,
-  y,
-  width,
-  height,
-  children,
-}: PropsWithChildren<DropPreviewProps>) {
-  return (
-    <div
-      className="timeline-drop-preview"
-      style={{
-        left: `${x}px`,
-        top: `${y}px`,
-        width: `${width}px`,
-        height: `${height}px`,
-      }}
-    >
-      {children}
-    </div>
-  );
-}

package/src/components/core/CoreSwimlane/DropTarget.tsx

@@ -1,83 +0,0 @@
-import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { DragLocationHistory } from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
-import { PropsWithChildren, useEffect, useRef } from "react";
-import invariant from "tiny-invariant";
-import { getGrabPosition } from "../utils";
-import { GrabInfo, Position } from "../../../types";
-
-interface DropTargetProps {
-  onDragStart?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
-  onDrag?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
-  onDrop?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
-  onDragEnter?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
-  onDragLeave?: (grabInfo: GrabInfo, data: any) => void;
-}
-
-export default function DropTarget({
-  children,
-  onDragStart = () => {},
-  onDrag = () => {},
-  onDrop = () => {},
-  onDragEnter = () => {},
-  onDragLeave = () => {},
-}: PropsWithChildren<DropTargetProps>) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const el = ref.current;
-    invariant(el);
-
-    return dropTargetForElements({
-      element: el,
-      getData: () => ({ drop: "drop" }),
-      onDragStart: ({ source, location }) => {
-        const relativeMousePos = getMousePositionRelativeToDropTarget(location);
-
-        const grabPosition = getGrabPosition(source, location);
-
-        onDragStart(relativeMousePos, grabPosition, source.data);
-      },
-      onDragEnter: ({ source, location }) => {
-        const relativeMousePos = getMousePositionRelativeToDropTarget(location);
-
-        const grabPosition = getGrabPosition(source, location);
-        onDragEnter(relativeMousePos, grabPosition, source.data);
-      },
-      onDrag: ({ source, location }) => {
-        const relativeMousePos = getMousePositionRelativeToDropTarget(location);
-
-        const grabPosition = getGrabPosition(source, location);
-
-        onDrag(relativeMousePos, grabPosition, source.data);
-      },
-      onDrop: ({ source, location }) => {
-        const relativeMousePos = getMousePositionRelativeToDropTarget(location);
-
-        const grabPosition = getGrabPosition(source, location);
-
-        onDrop(relativeMousePos, grabPosition, source.data);
-      },
-      onDragLeave: ({ source, location }) => {
-        const grabPosition = getGrabPosition(source, location);
-        onDragLeave(grabPosition, source.data);
-      },
-    });
-  }, [onDrag, onDragLeave, onDragStart, onDrop, onDragEnter]);
-  return (
-    <div className="timeline-drop-target" ref={ref}>
-      {children}
-    </div>
-  );
-}
-
-function getMousePositionRelativeToDropTarget(
-  location: DragLocationHistory
-): Position {
-  const targetRect =
-    location.current.dropTargets[0].element.getBoundingClientRect();
-
-  return {
-    x: location.current.input.pageX - targetRect.x,
-    y: location.current.input.pageY - targetRect.y,
-  };
-}

package/src/components/core/CoreSwimlane/OverlapIndicator.tsx

@@ -1,22 +0,0 @@
-import { Rectangle } from "../../../types";
-
-interface OverlapIndicatorProps {
-  overlap: Rectangle;
-}
-
-export default function OverlapIndicator({ overlap }: OverlapIndicatorProps) {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        left: `${overlap.x}px`,
-        top: `${overlap.y}px`,
-        width: `${overlap.width - 1}px`,
-        height: `${overlap.height - 1}px`,
-        background: `rgba(255,0,0, 0.3)`,
-        marginLeft: "1px",
-        pointerEvents: "none",
-      }}
-    ></div>
-  );
-}